/*
	============
	Common
	============
*/
.view{
	position:fixed;
	top:0px; left:0px;
	width:100%; height:100vh;

	overflow:hidden;
	/*overflow-y:scroll;*/
	-webkit-overflow-scrolling:touch;

	-webkit-transition: -webkit-transform 350ms ease;
	-moz-transition: -moz-transform 350ms ease;
	transition: transform 350ms ease;	
}
.activeView{
	-webkit-transform: translate3d(0,0,0)!important;
	-moz-transform: translate3d(0,0,0)!important;
	transform: translate3d(0,0,0)!important;
}

.transitionView{
	-webkit-transform: translate3d(100%,0,0);
	-moz-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);	
}

/*
	============
	Common
	============
*/
.zoomInOutAnim{animation: zoomInZoomOut 4s infinite;}
@keyframes zoomInZoomOut{
	0%   {transform:scale(0.8,0.8)}
	50%  {transform:scale(1,1)}
	100% {transform:scale(0.8,0.8)}
}

/*
	============
	Common
	============
*/
.animView{
	position:fixed;
	top:0px; left:0px;
	width:100%; height:100vh;

	/*overflow:hidden;
	overflow-y:scroll;
	-webkit-overflow-scrolling:touch;*/

	-webkit-transition: -webkit-transform 350ms ease;
	-moz-transition: -moz-transform 350ms ease;
	transition: transform 350ms ease;	
	
	background:url('../../images/anim_view_bg.webp');
	background-repeat:no-repeat;
	background-size:cover;
}
.animView:after{
	content:" "; display:block;
	position:fixed;
	bottom:0px; left:0px;
	width:100%;height: calc(100vh - 60px);
	overflow:hidden;
	
	background:url('../../images/bottom.webp');
	background-repeat:repeat-x;
	background-size:100%;
	background-position:bottom center;	 
}
.animView:before{
	content:" "; display:block;
	position:fixed;
	top:0px; left:0px;
	width:100%;height: calc(100vh - 60px);
	overflow:hidden;
	
	background:url('../../images/anim_view_cloud.webp');
	background-repeat:no-repeat;
	background-size:300%;
	opacity:0.4;
	animation: cloudAnim 35s linear infinite;
}

@keyframes cloudAnim{ 
	from { background-position: 0 0;}
	to { background-position: 100% 0;} 
}

/* ========= */
.animView .waterWave{
	position:absolute;
	bottom:0px; left:0px; z-index:1;
	width:100%; height:14vh;
	overflow:hidden;
	/*background:yellow;*/
}
/* ================ */
.animView .waterWave:before{
	content:" "; display:block;
	position:absolute;
	top:0px; left:0px; z-index:2;
	width:100%; height:100%;
	overflow:hidden;
	background:url('../../images/water_top_wave.webp');
	background-repeat:no-repeat;
	background-size:200%;
	animation: topWaveAnim 5s linear infinite;
}
@keyframes topWaveAnim{ 
	from { background-position: 0 0;}
	to { background-position: 100% 0;} 
}
/* ============= */
.animView .waterWave:after{
	content:" "; display:block;
	position:absolute;
	top:0px; left:0px;  z-index:1;
	width:100%; height:100%;
	overflow:hidden;
	background:url('../../images/water_bottom_wave.webp');
	background-repeat:no-repeat;
	background-size:150%;
	animation: bottomWaveAnim 10s linear infinite;
}
@keyframes bottomWaveAnim{ 
	from { background-position: 0 0;}
	to { background-position: 100% 0;} 
}

/*
	=======================
	%Widget: Model
	=======================
*/
.modelWrapper{
	position:fixed;
	top:0px; left:0px; z-index:-8;
	width:100%; height:100%;
	background:rgba(9,34,90,0.8);
	opacity:0;
	overflow:hidden;
	-webkit-transition: -webkit-transform 350ms ease;
	-moz-transition: -moz-transform 350ms ease;
	transition: transform 350ms ease;
}
.modelWrapper .clickOverlay{	
	position:fixed;
	top:0px; left:0px; z-index:3;
	width:100%; height:100%;	
	background:red;
	opacity:0;
}
.modelWrapper .model .modelTitle .close{
	position:absolute;
	top:0; right:0;
	width:50px;
	text-align:center;
	background:rgba(0,0,0,0.1);
	color:#fff;
}
.model .modelContent .modalTitle {
    position: absolute;
    top:-130px;
    left:0px;
    padding:50px;
	margin:0px 5%;
}
.modelWrapper .model .modelContent{padding:25px;}
.modelWrapper[data-modelShow="false"]{opacity:0;}
.modelWrapper[data-modelShow="true"]{z-index:500; opacity:1;}
.modelWrapper[data-modelShow="true"] .model{
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.overlayClose{
	position:fixed;
	top:0px; left:0px; z-index:1;
	background:yellow;
	width:100%; height:100%;
	opacity:0;
}

/* ============= */
.bottomPosition .model{
	width:100%;  height:auto; left:0px; box-shadow:none; /*height:100vh;*/
	top:auto; bottom:0px;
	background:none;	
}
.bottomPosition[data-modelShow="true"] .model{transform: translateY(0%);}

.bottomPosition .model .modelContent{
	background:url('../../images/modal_bg.webp') no-repeat;
	background-position: center bottom;
	background-size: 415px;
	text-align:left; 
	width:100%; height:auto!important; letter-spacing:0.5px;
	padding-bottom:100px;
	border-radius: 35px 35px 5px 0px;
	background-size:cover;
}


/*
	============
	#Page :: Index.php
	============
*/
.splash{
	background:url('../../images/splash.webp');
	background-repeat:no-repeat;
	background-size:cover;
	display:grid;
	grid-template-columns:100%;
	align-items:center;
	text-align:center;
}
.splash img{max-width:80%; margin-bottom:100px; padding:30px 50px;}

/*
	============
	#Page :: app_landing.php
	============
*/
.landingPage{text-align:center;}

.landingPage .landingContent{
	position:fixed;
	top:0px; left:0px; z-index:100;
	width:100%; height:95vh;	
	display:flex; 
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content:center;
}
.landingPage .logo img{max-width:80%; padding:30px 50px;}
.landingPage .startBtn{margin-top:45px; padding: 40px;}
.landingPage .startBtn img{width:60%;}
.landingPage .landingAction{display:flex; justify-content:center; margin-top:65px;}
.landingPage .landingAction a{width:22%; margin:0px 10px; padding:25px;}
.landingPage .landingAction a img{width:100%;}
.landingPage .landingAction a:nth-child(2){top:-60px;}

/*
	============
	#Page :: games_dashboard.php
	============
*/

/*
	============
	View Title
	============
*/
.viewTitle{height:60px; text-align:center; margin-bottom:20px;}
.viewTitle .left{
	width:85px;
	position:absolute;
	top:10px; left:10px;
}
.viewTitle .center{padding:15px 120px;}
.center img{width:300px;}
.viewTitle .right{  
	width:85px;
	position:absolute;
	top:10px; right:10px;
}
.viewTitle .notification {
	Width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: #e84747;
	border: 3px solid #fff;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	display: inline-block;
	position: absolute;
	right: -14px;
	z-index: 1;
	top: -4px;
}

/* =========== */
.featuredGameSlider{z-index:5000; margin:20px 20px 0px;}
.featuredGameSlider img{max-width:100%; margin:auto; border-radius:40px; box-shadow: 0px 2px 8px 0px rgb( 0, 0, 0 ,0.16);}
.lSPager.lSpg > li a {background-color:#222222; opacity: 0.4;}
.lSSlideOuter .lSPager.lSpg > li.active a {background-color:#428bca; opacity:1;}

/* =========== */
.appsSlider .appGrid {
	display:grid;
	grid-template-columns:29.33% 29.33% 29.34%;
	grid-gap:6%;
	padding: 25px 20px ;
	text-align: center;
	z-index:1;
	margin-top:10px;
}
.appsSlider .appGrid .col a span {
    font-size: 18px;
	font-family: "Poppins";
    font-weight: 600;
    color: #10494f;
    text-align: center;
	vertical-align: top;
	margin-top: 8px;
	/*padding-top: 5px;*/
}
.appsSlider img {
    max-width:90%;
    vertical-align: top;
	border-radius:48px;
	box-shadow:0px 8px 10px rgba(0, 0, 0, 0.35);
}
.appsSlider .appGrid .upcomingGame img{filter: grayscale(100%);}

/*
	============
	#Page :: setting_modal.php
	============
*/
.model .modelContent .lbl{margin-top:10%;}
.model .modelContent label {
	border-radius:15px;
	background-color: rgb( 255, 255, 255 );
	box-shadow: 0.9px 13.9px 8px 0px rgb( 16, 77, 119 , 0.16);
	width:100%;
}	
.model .modelContent label{
	font-size: 28px;
	font-weight:600;
	color: #f06000;
	line-height: 1.92;
	text-align: left;
	padding:6px 25px;
    margin-bottom:18px;
}
.model .modelContent input.switch:after{width: 21px; height: 21px;}
.model .modelContent input.switch:checked{box-shadow: inset 30px 0 0 0 #4ed164;}

.model .modelContent input.switch {
    position: absolute;
    left: auto;
    right: 20px;
    top: 12px;
    height: 38px;
    width: 70px;
}
.model .modelContent label input.switch::after {
    width: 30px;
    height: 30px;
}

.model .modelContent input.switch:checked {
    box-shadow: inset 20px 0 0 0 #red;
    border-color: #b4b4b4;
}

.model .modelContent input.switch::after {
    content: "";
    position: absolute;
    top: 3px;
	left: 1px;
}
/*
	==============================
	#Page :: more_apps_modal.php
	==============================
*/
.model .modelContent .applicationCard li{
	display: grid;
	grid-template-columns: 120px calc(100% - 120px);
	background: #ffffff;
	box-shadow: 0px 1px 6px 0px rgba(1, 1, 1, 0.08);
	width:70%; height:120px;
	border-radius: 10px;
	padding:0px 17px 11px 19px;
	margin:auto;
	margin-bottom:-30px;
	margin-top:80px;
}


.model .modelContent .applicationCard .cardImg {
	width:100px; height:100px;
	background: #ffffff;
	border:4px solid #fff;
	box-shadow: 0px 1px 6px 0px rgba(1, 1, 1, 0.09);
	border-radius:10px;
	position:absolute;
	top:-25px; left:0px;
}
.model .modelContent .applicationCard .cardImg img{border-radius:10px;}
.model .modelContent .applicationCard .game strong {
	display:block; 
	font-size: 24px;
	color: #f06000;
	line-height:0.9;
	text-align:left;
	padding-top:12px;
}

.model .modelContent .applicationCard .game p {
	font-size: 26px;
	color:#1c1c1c;
	font-weight: bold;
	text-align: left;
}
.model .modelContent .applicationCard a {
	font-size: 20px;
	font-family:"Poppins";
	color: #0a9ebb;
	font-weight: bold;
	text-align: right;
	position: absolute; 
	bottom:10px; right:12px;
}

/*
	===============
	#Page :: share_app_modal.php
	===============
*/
.model .modelContent .appIcon img {width: 60px; margin-right: 16px;}
.model .modelContent .shareIcon .appIcon a{color:#000;}
.model .modelContent .shareIcon {margin-top: 10%;}
.model .modelContent label {
	border-radius:15px;
	background-color: rgb( 255, 255, 255 );
	box-shadow: 0.9px 13.9px 8px 0px rgb( 16, 77, 119 , 0.16);
	width:70%;
	margin:auto 15%;
	margin-bottom: 20px;
}

/* 
	======================
	Responsive For Mobile
	======================
*/

@media only screen and (max-width:767px)
{
	/*===============*/
	.splash img{max-width:87%;}
	
	/*===============*/
	.viewTitle .left {
		width:55px;
		position:absolute;
		top:6px; left:8px;
	}
	.viewTitle .right {
		width:55px;
		position: absolute;
		top: 6px;
		right: 8px;
	}
	.viewTitle .center img {width:140px;}
	
	/*===============*/
	.landingPage .logo img{max-width:80%; padding:0px;}
	.landingPage .startBtn{margin-top:45px; padding:0px;}
	.landingPage .startBtn img{width:70%;}
	.landingPage .landingAction{display:flex; justify-content:center; margin-top:65px;}
	.landingPage .landingAction a{width:25%; margin:0px 10px; padding:0px;}
	
	/*===========*/
	.featuredGameSlider {margin: -22px 20px;}
	/*===========*/
	.appsSlider .appGrid{margin-top:60px;}
	.appsSlider .appGrid .col a span {font-size: 15px; font-weight:500;}
	.appsSlider img{
		max-width:95%;
		vertical-align:top;
		border-radius:26px; box-shadow:0px 8px 10px rgba(0, 0, 0, 0.35);
	}
		
	/*===========*/
	.bottomPosition .model .modelContent{height:auto;}
	
	/*============*/ 
	.model .modelContent {
		padding-bottom:130px;
		border-radius: 35px 35px 5px 0px;
		z-index:2
	}
	.model .modelContent .modalTitle {top: -65px; padding:20px;}
	.model .modelContent label {width:100%; margin: 5% 0%;}
	
	.model .modelContent .applicationCard li{
		width:100%;
		grid-template-columns: 120px calc(100% - 120px);
		margin-bottom: 25px;
		margin-top:50px;
	}
	.modelContent .applicationCard .game strong {
		display:block;
		font-size: 25px;
		line-height:0.9;
		padding-top:14px;
	}
	.modelContent .applicationCard .game label {
		font-size: 24px;
		font-weight: bold;
	}
	.model .modelContent .applicationCard a {font-size:16px; font-weight:500;}

	/*=============*/
	.model .modelContent .shareIcon label{width:100%; margin:0px; margin-bottom: 20px;}
	.model .modelContent .appIcon img{width:50px; margin-right: 14px;}
	
}

/*
	============
	For Iphone 5
	============
*/

@media only screen and (max-width:360px){
	
	/*===========*/
	.animView::after{bottom:-5px;}
	.viewTitle .center {padding:10px 55px;}
	.viewTitle .notification {Width:26px; height: 26px; font-size:13px;}
	
	
	/*===========*/
	.featuredGameSlider img {max-width: 100%; margin: auto; border-radius:15px;}
	.featuredGameSlider{margin:-16px 14px;}
	
	/*===========*/
	.appsSlider .appGrid {margin-top:-3px;}
	.appsSlider .appGrid .col a span {font-size:12px; padding-top:5px;}
	.appsSlider img{
		vertical-align:top;
		border-radius:18px;
		box-shadow:0px 8px 10px rgba(0, 0, 0, 0.35);
	}
	 
	/*===============*/
	.model .modelContent .modalTitle {top: -50px; padding: 12px;}
	.model .modelContent label{margin-top:30px;}
	.model .modelContent label{padding: 4px 20px;}
	.model .modelContent label input.switch {
		right:20px; top:11px;
		height:30px; width:60px;
	}
	.model .modelContent label input.switch::after {width: 25px; height: 25px;}
	
	/*================*/
	.model .modelContent .applicationCard li{
		height:80px;
		grid-template-columns: 110px calc(97% - 110px);
		padding: 0px 15px 10px 15px;
		margin-bottom: 10px;
		margin-top: 50px;
	} 
	.model .modelContent .applicationCard .cardImg {width: 90px; height: 90px;}
	.model .modelContent .applicationCard .game strong{font-size:18px;}
	.model .modelContent .applicationCard a {font-size:13px; font-weight:500;}
	.model .modelContent .applicationCard .game p {font-size:18px;}
	
}