body {
	margin: 0; 
	height: 100%; 
	overflow: hidden
}
#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;
}
#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;
}
#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;
	}
}

@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{
	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;
}
#bgImage3{
	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;
}
#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%;

	left:0;right:0;

	top:0;bottom:0;

	-webkit-user-select:none;
	-webkit-touch-callout:none;
}

/* Full-screen neutral loading view, independent of the game's canvas layout. */
html,body { background:#101726 !important; }
#preloader_bg { background:#101726 !important; }
#preloader_bg img,
#preloader_hazel > center > img,
#game_logo,#fbbtn,#utubebtn,#splashImage { display:none !important; }
#preloader_hazel {
    position:fixed !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    z-index:50;
    background:radial-gradient(ellipse at 50% 45%, #1a2942 0%, #121d31 53%, #0e1524 100%) !important;
}
#preloader_hazel #progress_div {
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    transform:translate(-50%,-50%) !important;
    width:min(72vw,360px) !important;
    min-width:0 !important;
    max-width:360px !important;
    padding:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
}
#progress_div .ig-load-title {
    font:500 clamp(14px,2vw,17px)/1.4 Arial,Helvetica,sans-serif !important;
    color:#dce7f7 !important;
    text-align:center !important;
    margin:0 0 17px !important;
    letter-spacing:0.02em;
}
#progress_div .ig-track {
    display:block !important;
    width:100% !important;
    height:9px !important;
    padding:0 !important;
    border-radius:99px !important;
    background:#33425b !important;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.3) !important;
    overflow:hidden !important;
}
#progress_div .ig-fill {
    display:block !important;
    height:100% !important;
    width:0;
    background:linear-gradient(90deg,#4a8bea,#8abcf9) !important;
    border-radius:99px !important;
    transition:width .16s ease-out;
}
#progress_div #progress_count {
    font:600 clamp(14px,2vw,18px)/1.4 Arial,Helvetica,sans-serif !important;
    color:#eaf2fc !important;
    text-align:center !important;
    margin:14px 0 0 !important;
    padding:0 !important;
}
#animation_container,canvas { outline:0 !important; }