/*--------------------------------------------------------------
	# Normalize
--------------------------------------------------------------*/
img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:0 0 25px 0}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

/*--------------------------------------------------------------
	# General
--------------------------------------------------------------*/

html,
body {
	
}

img {
	max-width: 100%;
}

a {
    text-decoration: none;
}

body {
	font-family: niveau-grotesk, Arial, Helvetica, sans-serif;
	color: #111;
}

.page {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #111;
	transition: .5s background-color;
}

.page.trigger-animation {
	background: #ff8a00;
    background: -moz-linear-gradient(45deg,  #ff8a00 0%, #ff00ae 64%, #ad0ece 100%);
    background: -webkit-linear-gradient(45deg,  #ff8a00 0%,#ff00ae 64%,#ad0ece 100%);
    background: linear-gradient(45deg,  #ff8a00 0%,#ff00ae 64%,#ad0ece 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8a00', endColorstr='#ad0ece',GradientType=1 );
    position: relative;

}

	.slide {

	}

	.slide-1 {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}

		.slide-1 .logo {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateY(-50%) translateX(-50%);
			transition: opacity .5s;
		}

		.slide-1 .logo.trigger-animation {
			opacity: 0;
		}

	.slide-2 {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		opacity: 0;
	}

	.slide-2.trigger-animation {
		opacity: 1;
	}

		.main {
			position: absolute;
			left: 28%;
			top: 50%;
			transform: translateY(-50%);
			transition: opacity 1s;
			margin-top: -80px;
        }
        
        .main.elements-aside {
            left: 10%;
        }

			.slide-2 .logo {
				opacity: 0;
				transition: all 1s;
				font-size: 195px;
				font-weight: bold;
				line-height: 1;
				margin-bottom: 50px;
                transform: translateY(-30px);
            }
            
            .slide-2 .main.elements-aside .logo {
                float: left;
                margin-bottom: 0;
                margin-right: 50px;
            }

				.slide-2 .logo span:nth-child(1) {
					background-image: url('https://media0.giphy.com/media/aFReiQR4sdBdK/giphy.gif?cid=790b76115d3ef861614335564521d9a5&rid=giphy.gif');
                    background-size: 600px;
                    background-position: center;
                    color: transparent;
                    -moz-background-clip: text;
                    -webkit-background-clip: text;
				}

				.slide-2 .logo span:nth-child(2) {
					color: #fff;
					letter-spacing: 8px;
				}

			.slide-2 .logo.trigger-animation {
				opacity: 1;
				transform: translateY(0);
			}

			.description {
				opacity: 0;
				transition: all 1s;
				font-size: 20px;
				color: #000;
				line-height: 1.3;
				max-width: 540px;
				transform: translateY(-30px);
            }
            
            .slide-2 .main.elements-aside .description {
                overflow: hidden;
            }

			.slide-2 .description.trigger-animation {
				opacity: 1;
				transform: translateY(0);
			}

		.tagline {
			position: absolute;
			bottom: 0;
			left: 0; 
			right: 0;
			text-align: center;
			
			color: #111;
			font-size: 32px;
			font-weight: bold;
			padding: 37px 0;
			opacity: 0;
			transition: opacity 1s;
		}

		.tagline.trigger-animation {
			opacity: 1;
		}

		.current-time {
			position: absolute;
			bottom: 40%;
			left: 13%;
			transform: rotate(-90deg);
			transform-origin: top left;
			font-size: 15px;
			text-transform: lowercase;
			opacity: 0;
			transition: opacity 1s;
		}

		.current-time.trigger-animation {
			opacity: 1;
		}

		.formerly-known-as {
			position: absolute;
			top: 40px;
			right: 50px;
			font-size: 20px;
			transform: translateX(150%);
			opacity: 0;
			transition: transform 1s;
		}

		.formerly-known-as.trigger-animation {
			transform: translateX(0%);
			opacity: 1;
		}

			.formerly-known-as span {
				color: #de8302;
				font-size: 75px;
				font-weight: bold;
				vertical-align: middle;
				margin-right: 10px;
				line-height: 1;
				display: inline-block;
				padding-bottom: 8px;
			}

			.formerly-known-as em {
				font-style: normal;
			}

			.formerly-known-as img {
				vertical-align: middle;
				margin-left: 10px;
				display: inline-block;
			}
	
		.footer {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			font-size: 17px;
			
			background: #111;
			font-weight: 400;
			text-align: center;
			line-height: 1.5;
			padding: 30px 0;
			transition: color .5s;
		}

		.footer.trigger-animation {
			color: #fff;
		}

			.footer-item {
				display: inline-block;
				margin: 0 8px;
			}

				.footer-item a {
					color: inherit;
					text-decoration: none;
				}

				.footer-item a:hover {
					color: #fff;
				}

/*--------------------------------------------------------------
	# Responsive
--------------------------------------------------------------*/
@media only screen and ( max-width: 1200px ) {

	.slide-2 .logo {
		font-size: 140px;
	}

	.formerly-known-as {
		top: 20px;
	}

	.footer {
		padding: 50px 0;
		font-size: 16px;
	}

}

/*--------------------------------------------------------------
	# Responsive - Phones
--------------------------------------------------------------*/
@media only screen and ( max-width: 850px ) {

	.main {
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
    }
    
    .main.elements-aside {
        margin-top: -50px;
        transform: translateY(-50%);
    }

	.slide-2 {
		bottom: 152px;
	}

	.slide-2 .logo {
		font-size: 100px;
		margin-bottom: 30px;
	}

	.current-time {
		display: none;
	}

	.formerly-known-as {
		top: auto;
        bottom: 60px;	
    }
    
        .formerly-known-as span {
            font-size: 50px;
        }

	.tagline {
        padding: 15px 0;
        font-size: 32px;
	}

	.footer {
		padding: 30px 10px;
		font-size: 16px;
	}

}

@media only screen and ( max-width: 425px ) {

    .formerly-known-as {
        bottom: 80px;
    }

}