@charset "UTF-8";
 
.introlayer .txt-we, .introlayer .txt-know, .introlayer .txt-how, .introlayer .txt-to, .introlayer .txt-test, .introlayer .txt-sign {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 6vw;
	text-transform: uppercase;
	color: #fff;
}
.introlayer .txt-how, .introlayer .txt-to, .introlayer .txt-test, .introlayer .txt-sign {
	font-weight: 800;
}
.introlayer .txt-we, .introlayer .txt-know, .introlayer .txt-how, .introlayer .txt-to, .introlayer .txt-test, .introlayer .txt-sign {
	animation-name: fly;
	animation-timing-function: ease-out;
	animation-direction: normal;
	animation-iteration-count: 1;
	animation-fill-mode: initial;
	animation-play-state: running;
	margin: 1vw;
	opacity: 0;
	
	-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;
}
.introlayer .slogan {
	position: absolute;
	top: 40%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	
	-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;
}
.introlayer .intrologo {
	position: absolute;
	top: 40%;
	width: 100%;
	z-index: 200;
	text-align: center;
	opacity: 0;
	animation-name: logoanimation;
	animation-timing-function: ease-out;
	animation-direction: normal;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	
	
	-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;
	
	animation-delay: 7s;
	animation-duration: 2.5s;
}
.introlayer .intrologo img {
	max-width: 80%;
}
.introlayer .txt-we {
	animation-delay: 3s;
	animation-duration: 2.5s;
}
.introlayer .txt-know {
	animation-delay: 3.2s;
	animation-duration: 2.4s;
}
.introlayer .txt-how {
	animation-delay: 3.4s;
	animation-duration: 2.3s;
}
.introlayer .txt-to {
	animation-delay: 3.6s;
	animation-duration: 2s;
}
.introlayer .txt-test {
	animation-delay: 3.8s;
	animation-duration: 1.8s;
}
.introlayer .txt-sign {
	animation-delay: 3.9s;
	animation-duration: 1.7s;
}
 @keyframes layer {
 0% {
 height: 100%;
}
 100% {
 height: 0;
}
}
 @keyframes videofade {
 0% {
 opacity: 0;
}
 10% {
 opacity: 1;
}

90% {
 opacity: 1;
}

100% {
 opacity: 0;
}
}
 @keyframes iconfade {
 0% {
 opacity: 0.2;
}
 100% {
 opacity: 1;
}
}
 @keyframes logoanimation {
 0% {
 opacity: 0;
}
 10% {
 opacity: 1;
}
 90% {
 opacity: 1;
}
 100% {
 opacity: 0;
}
}
 @keyframes iconmove {
 0% {
 top: 40%;
}
 10% {
 top: 20%;
}

 80% {
 top: 20%;
 opacity: 1;
}

100% {
	top: 0;
 opacity: 0;
}

}
 @keyframes fly {
 0% {
 opacity: 0;
 transform: scale(10);
 -webkit-filter: blur(10px);
}
 10% {
 opacity: 1;
 transform: scale(1);
 -webkit-filter: blur(0px);
}
 80% {
 opacity: 1;
 transform: scale(1);
 width: auto;
}
 100% {
 opacity: 0;
 transform: scale(1);
 width: auto;
}
}

.introlayer {
	position: fixed;
	top: 0;
	height: 100vh;
	width: 100vw;
	background-color: #000;
	z-index: 99999;
	animation-name: layer;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;
	
	animation-delay: 9.5s;
	-webkit-animation-delay: 9.5s;
	
	animation-duration: 1.5s;
	overflow: hidden;
}


.introlayer #skipIntro {
	z-index: 99999;
	
	position: absolute;
	bottom: 10vh; 
	width: 100%;
	text-align: center;
	color: #fff;
	cursor: pointer;
	}
	
.introlayer #loader {
	z-index: 99999;
	font-size: 1em;
	color: rgbar(255,255,255,0.2);
	position: fixed;
	bottom: 35vh; 
	width: 100%;
	text-align: center;
	}
	

.introlayer.close { display: none; }


.icons {
	position: absolute;
	top: 40%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	animation-name: iconmove;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;
	
	animation-delay: 1s;
	animation-duration: 8.5s;
}
.icons img {
	margin: 1vw;
	width: 3vw;
	opacity: 0.2;
	min-width: 30px;
}
.icons .fadeIn {
	animation-name: iconfade;
	animation-timing-function: ease-out;
	animation-direction: normal;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;
	
	animation-delay: 0.5s;
	animation-duration: .5s;
}
.introlayer .introcontainer {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(17, 38, 82, 0.7);
	
	z-index: 200;
}

.introlayer video#bgvid {
	display: none;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	-ms-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	
	background-size: cover;
	animation-name: videofade;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;
	
	animation-delay: 1s;
	animation-duration: 7.5s;
}

.videoautoplay .introlayer video#bgvid { 
	display: block;
}

.videoautoplay .introlayer {
	background-image: none !important;
	}