/*------------------------------------animations-------------------------------------*/

@keyframes lightFlash{
	0%{opacity:0; transform:rotate(-60deg)}
	25%{opacity:0; transform:rotate(-60deg)}
	50%{opacity:1; transform:rotate(70deg)}
	75%{opacity:1; transform:rotate(50deg)}
	100%{opacity:1; transform:rotate(60deg)}
	
	
}


@keyframes lightSwing{
	
	0%{transform:rotate(60deg)}
	25%{transform:rotate(60deg)}
	50%{transform:rotate(60deg)}
	75%{transform:rotate(40deg)}
	100%{transform:rotate(135deg)}
}


/*----------------------------------------body----------------------------------------*/


#preloaderContainer{
	position:fixed;
	width:100vw;
	height:100vh;
	background-color:rgba(128,224,224,1.0);
	z-index:1000000;
}

#curtain{
	position:fixed;
	width:100vw;
	height:100vh;
	background-color:rgba(255,255,255,1.0);
	z-index:999;
}

#plSpotlight01{
	position:absolute;
	width:auto;
	height:66vw;
	top:0;
	right:-80px;
	margin:auto;
	z-index:1000001;
	transform-origin: top center;
	animation: lightFlash 1s ease-out forwards, lightSwing 1s 1.5s ease-out forwards;
	display:none;
}

#hiddenAPGtext{
	font-family:arial;
	font-size:62px;
	font-weight:bold;
	letter-spacing:-2px;
	color:rgba(255,255,255,1.0);
	position:absolute;
	width:100px;
	height:70px;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	background-color:rgba(0,0,0,0.0);
	z-index:1000002;
}

#percentCounterText{
	font-family:"athelas";
	font-size:32px;
	font-style:italic;
	color:rgba(255,255,255,1.0);
	position:absolute;
	width:60px;
	height:50px;
	bottom:25px;
	left:0;
	right:0;
	margin:auto;
	background-color:rgba(0,0,0,0.0);
}

#plProgressBar{
	position:absolute;
	width:90vw;
	height:3px;
	bottom:100px;
	left:0;
	right:0;
	margin:auto;
	background-color:rgba(0,0,0,0.0);
}

#plProgressBarInner{
	position:absolute;
	width:0%;
	height:100%;
	background-color:rgba(255,255,255,1.0);
	
}