*{
	padding:0px;
	margin:0px;
	touch-action: none;
}
div{
	display:block;
}
html, body{
	position	: relative;
	display		: block;
	width		: 100%;
	height		: 100%;
	overflow	: hidden;
	margin		: 0;
	background: url("../images/preloader_bg.jpg") no-repeat center;
	background-size: cover;
}

canvas{
	background:transparent;
}

#main{
	visibility:hidden;
	background: #ffffff;
	background-size:cover;
	left:0px;
	top:0px;
	bottom:0px;
	right:0px;
}
#main, #main>div{
	background: url("../images/preloader_bg.jpg") no-repeat center;
	background-size: cover;
	position:absolute;
	left:0px;
	top:0px;
	bottom:0px;
	right:0px;
}

#progress{
	position:absolute;
	left:0px;
	top:0px;
	bottom:0px;
	right:0px;
	background:#ffffff url(../images/preloader_bg.jpg) no-repeat center center;
	background-size:cover;
	z-index:5999;
}
#progress_content{
	position:absolute;
	left:50%;
	top:50%;
	width:250px;
	max-width:85%;
	height:25px;
	-ms-transform:translate(-50%, -55%);
	-webkit-transform:translate(-50%, -55%);
	-moz-transform:translate(-50%, -55%);
	transform:translate(-50%, -55%);	
	color:#ffffff;
	text-align:center;
	font-size:12px;
	letter-spacing:2px;
	font-family:sans-serif;
}
#progress_info, #progress_bar{
	display:block;
	position:absolute;
	left:0px;
	bottom:0px;
	width:100%;
	height:3px;
	background:#0f406c;
}
#progress_bar{
	background:#ffffff;
	width:0%;
}

/*-----------------------------------------------------*/

#logo, #logo_intro{
	display:block;
	position:absolute;
	left:20px;
	top:20px;
	width:25%;
	height:auto;
	max-width:240px;
}
#logo{
	opacity:0;
}

#popup{
	display:block;
	visibility:hidden;
	position:absolute;
	left:0px;
	top:0px;
	bottom:0px;
	right:0px;
	opacity:0;
	
	transition:         opacity 0.2s linear;
	-webkit-transition: opacity 0.2s linear;
	-moz-transition:    opacity 0.2s linear;
	-o-transition:      opacity 0.2s linear;		
}
#popup_bg{
	display:block;
	position:absolute;
	left:0px;
	top:0px;
	bottom:0px;
	right:0px;
	background:rgba(30,80,140,0.9);		
}

#popup.open{
	visibility:visible;
	opacity:1;
}
#popupContent{
	display:block;
	position:absolute;
	left:50%;
	top:50%;
	
	opacity:0;
	
	width:95%;
	max-width:990px;
	height:600px;
	
	overflow:hidden;
	border:0px solid;
	
	-ms-transform		: translate(-50%, -50%);
	-webkit-transform	: translate(-50%, -50%);
	-moz-transform		: translate(-50%, -50%);
	transform			: translate(-50%, -50%);	
	
	background:#1d4a8d;
	
	-webkit-box-shadow: 0px 10px 24px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 10px 24px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 10px 24px 0px rgba(0,0,0,0.3);
	
	transition:         opacity 0.2s linear 0.2s;
	-webkit-transition: opacity 0.2s linear 0.2s;
	-moz-transition:    opacity 0.2s linear 0.2s;
	-o-transition:      opacity 0.2s linear 0.2s;	
}
#popup.open #popupContent{
	opacity:1;
}

/*-----------------------------------------------------*/

@media (max-width:1000px), (max-height:670px){
	#logo{
		max-width:140px;
	}

	#popupContent{
		display:block;
		position:absolute;
		left:0px;
		top:0px;
		right:0px;
		bottom:0px;
		width:100%;
		height:100%;
		max-width:100%;
		-ms-transform		: translate(0%, 0%);
		-webkit-transform	: translate(0%, 0%);
		-moz-transform		: translate(0%, 0%);
		transform			: translate(0%, 0%);	
	}	
}