/* ----------------------------------------------------------------------------------------------
	CSS Layout Classes 
 ----------------------------------------------------------------------------------------------*/
 
 	body {
		overflow:hidden;
	}
 
	.enciana-logo {
		position: fixed;
		width: 100%; 
		height: 100vw; 
		max-height: 1080px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		transform: translate(-50%, 0%);
		padding: 0px;
		border: 0px solid #ccc;
	}

	.silhouette-full-animated{
		width: 100vw; 
		height: 100%; 
		position: fixed; 
		top: 0%; 
		left: 0%; 
		margin: 0px; 
		padding: 0px; 
		overflow: hidden;
		content: '';
		background-image:url(../images/Silhouette_Clear.png);
		background-position:bottom;
		background-repeat:no-repeat;
		background-size:contain;
		animation: silhouette-fade 10s forwards;
		opacity: 0.4;
	}

	.logo-icon-full-animated{
		width: 40vh; 
		height: 40vh; 
		position: relative; 
		top: 10%; 
		left: 0%; 
		margin: auto;
		padding: 0px; 
		overflow: hidden;
		content: '';
		background-image:url(../images/Logo_Icon.png);
		background-position:center;
		background-repeat:no-repeat;
		background-size:contain;
		animation: logo-icon-fade 10s forwards;
		border: 0px solid #cFc;
		aspect-ratio: 1 / 1;
	}

	.logo-text-full-animated{
		width: 100vw; 
		height: 20%; 
		position: relative; 
		top: 15vh; 
		left: 0%; 
		margin: auto; 
		padding: 0px; 
		overflow: hidden;
		content: '';
		background-image:url(../images/Logo_Text.png);
		background-position:center;
		background-repeat:no-repeat;
		background-size:contain;
		animation: logo-text-fade 10s forwards;
		aspect-ratio: 3.5 / 1;
	}
	
	.skip-button {
		position: fixed;
		top: 2vh;
		right: 2vh; 
		text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 0.3rem;
        padding: 10px;
        padding-top: 0px;
        padding-bottom: 5px;
		opacity: 0.4;
		z-index: 20;
		cursor: pointer;
	}

/* ----------------------------------------------------------------------------------------------
	CSS Effects 
 ----------------------------------------------------------------------------------------------*/
 
	.light-circle {
/* 		circle of light 																*/
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background: radial-gradient(circle, 
			rgba(255, 255, 255, 0.8) 0%, 
			rgba(255, 255, 255, 0.4) 30%, 
			rgba(255, 255, 255, 0.1) 60%, 
			rgba(255, 255, 255, 0) 80%);
		opacity: 1.00;
		background-size:contain;
	}
	
	.lens-flare{
		box-sizing: border-box;
		opacity: 0.0;
		height: 200vw;
		width: 200vw;
		margin: 0px;
		margin-top: -90vw;
		margin-left: -50vw;
		position: absolute;
		background-image:url(../images/Lens_Flare.png);
		background-repeat:no-repeat;
		background-position:center;
		background-size: 50vw;
		animation-name: lensflare;	
		animation-duration: 1.5s;
		animation-delay: 1.3s;
		filter: brightness(100%);
		
	}
	
	.impulse {
/* 		brain impulse  																*/
		width: 8vh;
		height: 8vh;
		position: relative;
		background-image:url(../images/Impulse.png);
		background-repeat:no-repeat;
		background-position:center;
		background-size:contain;
		opacity: 0.5;
		aspect-ratio: 1 / 1;
	}
	
	
	.impulse-blink {
		animation-name: impulse-blink;	
		animation-duration: 2s;
		animation-iteration-count:infinite;
	}
	
	
	.impulse-up {
		animation-name: impulse-up;	
		animation-duration: 1.5s;
		animation-iteration-count:infinite;
	}

/* ----------------------------------------------------------------------------------------------
	Animations 
 ----------------------------------------------------------------------------------------------*/
   
	@keyframes silhouette-fade {
		0% {opacity: 0.0;}
		30% {opacity: 1;}
		50% {opacity: 1;}
		80% {opacity: 1.0;}
		100% {opacity: 1.0;}
	}
	
	@keyframes logo-icon-fade {
		0% {opacity: 0.0;}
		25% {opacity: 0.0;}
		50% {opacity: 1;}
	}
	
	@keyframes logo-text-fade {
		0% {opacity: 0.0;}
		60% {opacity: 0.0;}
		90% {opacity: 1;}
	}
	
	@keyframes impulse-up {
		0% {opacity: 1.0;}
		20% {opacity: 1.0; transform: translateY(-320%);}
		40% {opacity: 0.0; transform: translateY(-320%);}
		100% {opacity: 0.0; transform: translateY(-320%);}
	}
	
	@keyframes impulse-blink {
		0% {opacity: 1.0;}
		40% {opacity: 1.0;}
		60% {opacity: 0.0;}
		100% {opacity: 0.0;}
	}
	
	@keyframes lensflare {
		20% {background-size: 100%; opacity: 0.0; transform: rotate(200deg);}
		60% {background-size: 50%; opacity: 1.0;}
		70% {background-size: 50%; opacity: 1.0; filter: brightness(100%);}
		80% {background-size: 50%; opacity: 1.0; filter: brightness(150%);}
		90% {background-size: 300%; opacity: 1.0;}
		100% {background-size: 500%; opacity: 0.0; transform: rotate(0deg); filter: brightness(50%);}
	}



/* ----------------------------------------------------------------------------------------------
	@Media queries for responsive content 
 ----------------------------------------------------------------------------------------------*/
	@media only screen and (orientation: portrait) {
		.silhouette-full-animated{
			background-image:url(../images/Silhouette_Full_Clear.png);
		}
 
		.enciana-logo {
			top: calc(100vh - (100vw/(1205 / 2064)));
		}

		.logo-icon-full-animated{
			width: 40vw; 
			height: 40vw; 
			top: calc(100vh - (100vw/(1205 / 2064) - 7vw));
		}
	
		.impulse {															
			width: 8vw;
			height: 8vw;
		}
		
		.logo-text-full-animated{
			width: 70vw; 
			top: calc(100vh - (100vw/(1205 / 2064) + 1vw));
		}
	
		.skip-button {
			top: 5vw;
			right: 5vw; 
		}
	}
	
	
	@media only screen and (min-aspect-ratio: 18 / 37) {
		.silhouette-full-animated{
			background-image:url(../images/Silhouette_Full_Clear.png);
		}
 
		.enciana-logo {
			top: calc(100vh - (100vw/(1205 / 2064)));
		}

		.logo-icon-full-animated{
			width: 40vw; 
			height: 40vw; 
			top: calc(100vh - (100vw/(1205 / 2064) - 7vw));
		}
		
		.logo-text-full-animated{
			width: 70vw; 
			top: calc(100vh - (100vw/(1205 / 2064) + 1vw));
		}
	}
	
	@media only screen and (min-aspect-ratio: 16 / 27 ) {
		.silhouette-full-animated{
			background-image:url(../images/Silhouette_Full_Clear.png);
		}
 
		.enciana-logo {
			top: calc(100vh - (100vw/(1205 / 2064)));
		}

		.logo-icon-full-animated{
			width: 40vw; 
			height: 40vw; 
			top: calc(100vh - (100vw/(1205 / 2064) - 7vw));
		}
		
		.logo-text-full-animated{
			width: 70vw; 
			top: calc(100vh - (100vw/(1205 / 2064) + 1vw));
		}
	}
	
	@media only screen and (min-aspect-ratio: 6 / 16 ) {
		.silhouette-full-animated{
			background-image:url(../images/Silhouette_Full_Clear.png);
		}
 
		.enciana-logo {
			top: calc(100vh - (100vw/(1205 / 2064)));
		}

		.logo-icon-full-animated{
			width: 40vw; 
			height: 40vw; 
			top: calc(100vh - (100vw/(1205 / 2064) - 7vw));
		}
		
		.logo-text-full-animated{
			width: 70vw; 
			top: calc(100vh - (100vw/(1205 / 2064) + 1vw));
		}
	}
	
	@media only screen and (min-aspect-ratio: 7 / 16 ) {
		.silhouette-full-animated{
			background-image:url(../images/Silhouette_Full_Clear.png);
		}
 
		.enciana-logo {
			top: calc(100vh - (100vw/(1205 / 2064)));
		}

		.logo-icon-full-animated{
			width: 40vw; 
			height: 40vw; 
			top: calc(100vh - (100vw/(1205 / 2064) - 7vw));
		}
		
		.logo-text-full-animated{
			width: 70vw; 
			top: calc(100vh - (100vw/(1205 / 2064) - 3vw));
		}
	}
	
	@media only screen and (min-aspect-ratio: 8 / 16 ) {
		.silhouette-full-animated{
			background-image:url(../images/Silhouette_Half_Clear.png);
		}
 
		.enciana-logo {
			top: calc(100vh - (100vw/(1205 / 1578)));
		}

		.logo-icon-full-animated{
			width: 40vw; 
			height: 40vw; 
			top: calc(100vh - (100vw/(1205 / 1578) - 7vw));
		}
		
		.logo-text-full-animated{
			width: 70vw; 
			top: calc(100vh - (100vw/(1205 / 1578) - 5vw));
		}
	}
	
	
	@media only screen and (min-aspect-ratio: 9 / 16 ) {
		.silhouette-full-animated{
			background-image:url(../images/Silhouette_Half_Clear.png);
		}
 
		.enciana-logo {
			top: calc(100vh - (100vw/(1205 / 1578)));
		}

		.logo-icon-full-animated{
			width: 40vw; 
			height: 40vw; 
			top: calc(100vh - (100vw/(1205 / 1578) - 7vw));
		}
		
		.logo-text-full-animated{
			width: 70vw; 
			top: calc(100vh - (100vw/(1205 / 1578) - 7vw));
		}
	}
	
	
	@media only screen and (min-aspect-ratio: 11 / 16 ) {
		.silhouette-full-animated{
			background-image:url(../images/Silhouette_Clear.png);
		}
 
		.enciana-logo {
			top: calc(100vh - (100vw/(241 / 216)));
		}

		.logo-icon-full-animated{
			width: 40vw; 
			height: 40vw; 
			top: calc(100vh - (100vw/(241 / 216) - 4vw));
		}
		
		.logo-text-full-animated{
			width: 70vw; 
			top: calc(100vh - (100vw/(241 / 216) - 7vw));
		}
	}
	
	
	@media only screen and (min-aspect-ratio: 1 / 1 ) {
 
		.enciana-logo {
			top: calc(100vh - (100vw/(241 / 216)));
		}

		.logo-icon-full-animated{
			width: 40vw; 
			height: 40vw; 
			top: calc(100vh - (100vw/(241 / 216) - 4vw));
		}
		
		.logo-text-full-animated{
			width: 70vw; 
			top: calc(100vh - (100vw/(241 / 216) - 7vw));
		}
	}
	
	
	@media only screen and (min-aspect-ratio: 9.7 / 9 ) {
 
		.enciana-logo {
			top: calc(100vh - (100vh * (241 / 216) - 10vh));
			/*transform: translate(-50%, -50%);*/
		}

		.logo-icon-full-animated{
			width: 40vh; 
			height: 40vh; 
			top: 7vh; 
		}
	
		.impulse {															
			width: 8vh;
			height: 8vh;
		}
		
		.logo-text-full-animated{
			width: 100vw; 
			top: 15vh; 
		}
	
		.skip-button {
			top: 2vh;
			right: 2vh; 
		}
	}