body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	background: #0d1630;
}
html{
	width:100%;
	height:100%;
	background:#0d1630;
}
#animation_container {
	position:absolute;
	margin:auto;
	left:0;right:0;
	top:0;bottom:0;
	-webkit-user-select:none;
	-webkit-touch-callout:none;
}
#preloader_hazel{
	-webkit-user-select:none;
	-webkit-touch-callout:none;
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	display:block;
	background: radial-gradient(circle at top, #1d2954 0%, #0d1630 52%, #0a1022 100%);
}
#preloader_hazel img{
	position: absolute;
	margin:auto;
	width:40%;
	left:0;right:0;
	top:50%;bottom:50%;
	-webkit-user-select:none;
	-webkit-touch-callout:none;
}
#progress_div{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:min(86vw,520px);
	z-index:5;
}
.loader-card{
	background:rgba(255,255,255,0.08);
	border:1px solid rgba(255,255,255,0.14);
	border-radius:22px;
	padding:26px 28px 24px;
	box-shadow:0 20px 45px rgba(0,0,0,0.32);
	backdrop-filter: blur(3px);
}
.loader-title{
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(20px, 2.4vw, 30px);
	font-weight:700;
	color:#ffffff;
	margin-bottom:6px;
}
.loader-subtitle{
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(13px, 1.5vw, 18px);
	color:rgba(255,255,255,0.82);
	margin-bottom:18px;
}
.loader-bar-track{
	width:100%;
	height:18px;
	border-radius:999px;
	background:rgba(255,255,255,0.12);
	box-shadow: inset 0 1px 4px rgba(0,0,0,0.35);
	overflow:hidden;
}
.loader-bar-fill{
	width:0%;
	height:100%;
	border-radius:999px;
	background: linear-gradient(90deg, #ff6fb5 0%, #ffb347 52%, #8ad8ff 100%);
	box-shadow: 0 0 14px rgba(255,154,184,0.45);
	transition: width .18s ease-out;
}
.loader-progress-text{
	display:block;
	width:100%;
	position:relative;
	font-size: clamp(18px, 2vw, 26px);
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:700;
	color:#ffffff;
	margin-top:14px;
	letter-spacing:0.03em;
}
#bg{
	background-image: url("");
	background-repeat:no-repeat;
	background-size:cover;
}
.bg-1 {
	background-color: #1e2c2ab3; Green
	color: #ffffff;
}
.margin {margin-bottom: 15px;}
.container-fluid {
	margin-top: 10%;
	padding-bottom: 10px;
}
.tap_class{
	animation:blinkingText 1.5s infinite;
}
@keyframes blinkingText{
   0%{		color: transparent;	}
	50%{	color: #fff;	}
	100%{	color: transparent;	}
}
#splash-screen {
	background-color: #1e2c2ab3;
	display: none;
	-webkit-user-select:none;
	-webkit-touch-callout:none;
}
#splash {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 70%;
	background-color: rgba(0, 0, 0, 0.3);
}
#splashImage img {
	position: absolute;
	height: 60%;
	top: 10%;
	left: 50%;
	transform: translate(-50%, 0%);
	-webkit-user-select:none;
	-webkit-touch-callout:none;
}
#playbtn {
	height: 90%;
	width: 90%;
	-webkit-user-select:none;
	-webkit-touch-callout:none;
}
#playbtn img {
	position: absolute;
	top: 85%;
	left: 50%;
	height: 30%;
	transform: translate(-50%, -50%);
	-webkit-user-select:none;
	-webkit-touch-callout:none;
}
#fbBtnImg {
	position: absolute;
	top: 0%;
	left: 0%;
	height: 10%;
	transform: translate(20%, 20%);
	-webkit-user-select:none;
	-webkit-touch-callout:none;
}
#utubeBtnImg {
	position: absolute;
	top: 0%;
	left: 0%;
	height: 10%;
	transform: translate(140%, 20%);
	-webkit-user-select:none;
	-webkit-touch-callout:none;
}
.playbtn_class img {
	animation: play_btn_anim 1s infinite;
}
@keyframes play_btn_anim {
	0% { height: 20%; }
	50% { height: 25%; }
	100% { height: 20%; }
}
#container{ position: absolute; height: 100%; width: 100%; }
#portraitHint{ height:100% !important; width:100% !important; background-color:#fff; position: absolute; display : none; }
#portraitHint img{ position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#blackpatch{ position: absolute; height: 100%; width: 100%; background: url("Bg_Pause.jpg") no-repeat -9999px -9999px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; z-index: -9999; transform: translateZ(-10px); -webkit-user-select:none; -webkit-touch-callout:none; }
#tap{ display:none; }
@media only screen and (orientation:portrait){
	#canvas{ visibility: hidden; }
	#bgImage1, #bgImage2, #bgImage3{ visibility: hidden; }
	#container { background: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
	html { background: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
	.loader-card{padding:22px 18px 20px;}
	#progress_div{width:min(90vw,420px);} 
}
@media only screen and (orientation:landscape){
	#container { background: no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
	#animation_container { margin-bottom: 0px; }
}
#bgImage2,#bgImage3,#bgImage1{ position: absolute; height: 100%; width: 100%; background: none no-repeat -9999px -9999px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; display:block; }
#preloader_bg{ -webkit-user-select:none; -webkit-touch-callout:none; }
#preloader_bg img{ position: absolute; margin:auto; width:100%; height:100%; }