/*
	================
	Less then 1024px
	================
*/
/*@media only screen and (max-width:1024px)*/
@media only screen and (max-width:1080px)
{
	
	/* =======> Common */
	body{overflow:hidden!important;}
	.wrapper{max-width:auto;}
	.bodyObjects{display:none;}
	.appWrapper{height:auto;}	
	
	/* =======> Header */
	.pageHeader{
		background:#332a7c;
		position:fixed;
		top:0px; left:0px; z-index:5;
		width:70px; height:100%; padding:0px;
		border-radius:0px 20px 20px 0px;
		overflow:hidden;
	}
	.pageBody, .pageBody .wrapper{
		z-index:10; background:#fff; 
		padding:15px 25px;
		position:fixed;
		top:0px; left:70px; z-index:5;
		width:calc(100% - 70px); height:100%;
		overflow:hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch
	}
	
	
	/* =======> Page Header */
	.pageHeader nav{
		float:none; padding:0px; 
		display:flex;
		flex-direction: column;
		position:fixed;
		top:0px; left:0px; z-index:5;
		width:70px; height:100%;
		border-radius:0px 20px 20px 0px;
		overflow:hidden;
	}
	.pageHeader nav a{height:100%; padding:0px; background:none!important;}	
	.pageHeader nav a:before{
		content:" ";
		display:block;
		width:70px; height:90px;
		
		background-repeat:no-repeat;
		background-size:70px;
		vertical-align:middle;
		position:absolute;
		top:50%; left:0px;
		transform: translateY(-50%);
	}
	.pageHeader nav a:hover{
		background:none; color:#000;
		border:2px solid rgba(255,255,255,0);
	}	
	.pageHeader nav .elementLoader{
		top:calc(50% - 15px);
		height:auto;
	}
	.backIco:before{background-image:url('../../images/menu/menu_back.png');}
	.backIco.active:before{background-image:url('../../images/menu/menu_back_active.png');}
	
	.homeIco:before{background-image:url('../../images/menu/menu_home.png');}
	.homeIco.active:before{background-image:url('../../images/menu/menu_home_active.png');}
	
	.settingIco:before{background-image:url('../../images/menu/menu_setting.png');}
	.settingIco.active:before{background-image:url('../../images/menu/menu_setting_active.png');}
	
	.notloginIco:before{background-image:url('../../images/menu/menu_not_login_user.png');}
	.notloginIco.active:before{background-image:url('../../images/menu/menu_not_login_user_active.png');}
	
	.loginIco:before{background-image:url('../../images/menu/menu_login_user.png');}
	.loginIco.active:before{background-image:url('../../images/menu/menu_login_user_active.png');}
	
	/* =======> Page Body */
	.pageBody .wrapper:after{
		content:"";
		position: absolute;
		top:0px; right:0px; z-index:0;
		width:100%; height:50%;
		background-image:url('../../images/bg_graphic1.png');
		background-repeat:no-repeat;
		background-position:105% -1%;
		background-size:30%;
	}
	.pageBody .wrapper{
		background:none;
		border-radius:0px;
		box-shadow:none;
		min-height:auto;
		padding-top:15px!important;
	}
	
	.gameLoader{position:fixed;}
	
	/* =======> Common */
	.pageTitle{
		display:block;
		font-size:25px; font-weight:700;
		margin-bottom:30px;
	}
	.listingView{padding:0px 0px;}
	.grid5{grid-template-columns: 23% 23% 23% 23%; grid-gap: 2.6%; grid-row-gap: 30px;}
	
	/* =======> Player Frame */
	.playerWrapper{display:block;}
	.upnextPlayingList{display:none;}
	
	/* =======> Welcome */	
	.appVersion{
		position:fixed;
		bottom:5px; left:15px; z-index:1000;
		color:#000;
	}
	.welcomeApp{		
		position:fixed;
		top:0; left:0; z-index:1000;
		width:100%; height:100%; overflow:hidden; padding:0px;
		background:url('../../images/mobile_bg.png') repeat-x;
		background-size:contain;
		background-position:top center;
	}
	.welcomeApp .welcomeLogo{
		position:fixed;
		top:40px; left:8%; z-index:10;
	}
	.welcomeApp .welcomeLogo img{width:175px;}
	.welcomeApp .welcomehangingMoneky{
		position:fixed;
		top:-50px; right:0px; z-index:10;
		transform-origin: top center;
		-webkit-animation:monkeySwing 7s ease-out infinite;
		animation:monkeySwing 7s ease-out infinite;
	}
	.welcomeApp .welcomehangingMoneky img{width:80%;}
	.welcomeApp .fox{
		position:fixed;
		bottom:10px; left:10px; z-index:10;
	}
	.welcomeApp .fox img{width:120px;}
	.welcomeApp .welcomeText{
		position:fixed;
		top:23px; right:0px; z-index:10;
		width:calc(100% - 200px);
		text-align:center;
		letter-spacing:0.5px;
	}
	.welcomeApp .welcomeText h1{font-size:34px; font-weight:700; color:#fed040; text-transform:uppercase; line-height:34px;}
	.welcomeApp .welcomeText h2{font-size:24px; font-weight:500; color:#fff; margin-bottom:15px;}
	.welcomeApp .welcomeText h3{font-size:16px; font-weight:500; color:#fff;}
	.welcomeApp .welcomeskipForNow{
		position:fixed;
		bottom:35px; left:150px; z-index:10; font-size:16px; letter-spacing:0.5px;
	}
	.welcomeApp .welcomeskipForNow a{color:#332a7c; text-decoration:underline;}
	.welcomeApp .buttons{
		position:fixed;
		bottom:10px; right:10px; z-index:10;		
	}
	.welcomeApp .buttons img{width:150px;}
	
	/* =======> Page app_upgrade.php */
	.appUpgrade .welcomeText h1{font-size:29px; text-transform:none;}
	.appUpgrade .welcomeText h2{font-size:22px;}
	.appUpgrade .welcomeText h3{font-size:16px;}
	.appUpgrade .buttons{width:45%; bottom:15px;}

	
	/* =======> Page Index */
	.userInsights{background-size:cover;}
	.userInsights .pageBody{background:none;}
	.userInsights .hangingMoneky{left:40px; top:-50px;}
	.userInsights .flyingBird{right:30px;}
	
	
	/* =======> Setting Page */
	.setting, .setting .pageBody{background-color:#f8f7fe;}
	.setting .box{width:calc(100% - 100px); height:calc(100vh - 110px); z-index:1000}
}


/*
	================
	Less The 900px
	================
*/
@media only screen and (max-width:900px){
	
	body{background-image:none!important;}
	
	 /* ==== Fixed Left Menu Width */
	.pageHeader{width:55px;}	
	.pageBody, .pageBody .wrapper{width:calc(100% - 55px); left:55px;}
	.pageBody .wrapper {padding:15px 25px;}
	.pageHeader nav{width:55px;}
	.pageHeader nav a:before{		
		width:55px; height:70px;
		background-size:55px;
	}	
	.noHeaderInDevice .pageHeader{display:none;}
	.noHeaderInDevice .pageBody, .noHeaderInDevice .pageBody .wrapper{width:100%; left:0px; padding:0px!important; overflow:hidden!important;}
	
	/* =======> Common */
	.grid3{grid-template-columns: 48% 48%; grid-gap: 4%; grid-row-gap: 30px;}
	.grid5, .grid4{grid-template-columns: 31% 31% 31%; grid-gap: 3.5%; grid-row-gap: 40px;}	
	
	/* =======> Listings */
	.moralStories{grid-template-columns: 47% 47%; grid-gap:6%; grid-row-gap:30px;}
	.moralStories.listing li a .thumb{height:200px;}
	
	/* =======> Page Index */
	.userInsights .pageHeader,
	.userInsights .pageBody .flyingBird{display:none;}
	.userInsights .pageBody, .userInsights .pageBody .wrapper{
		width:100%; left:0px; 
		overflow:hidden;
		overflow-y: auto;
		padding:0px;
		background:url('../../images/mobile_bg.png') repeat-x;
		background-size:contain;
		background-position:top center;
	}
	.userInsights .pageBody .wrapper:after{display:none;}	
	.userInsights main{width:55%; float:right; margin-right:6%;}
	.userInsights h1{padding:30px 0px 0px; font-weight:600; font-size:28px;}
	.userInsights p{}
	.userInsights .box{margin:30px 0px 0px; max-width:none;}
	.userInsights .boxFrom{padding:10px 25px;}
	.userInsights .boxFrom .input{font-size:15px; padding:10px 0px;}
	.userInsights .bottomText{
		font-size:13px!important;
		position:fixed;
		bottom:15px; right:40px; z-index:10;
		padding:0px!important;
	}	
	.userInsights .loginLogo{
		display:block;
		position:absolute;
		top:25px; left:6%; z-index:10;
	}
	.userInsights .loginLogo img{width:150px;}
	.userInsights .hangingMoneky{left:12%; top:-25px;}
	.userInsights .hangingMoneky img{width:80%;}
	.userInsights .skipForNow{
		position:fixed;
		bottom:15px; left:20px; z-index:10;
	}
	.skipForNow a{color:#332a7c; text-decoration:underline;}
	
	.userInsights .registerView li[name="fullName"]{float:left; width:30%;}
	.userInsights .registerView li[name="email"]{float:right; width:65%;}
	
	.userInsights .registerView li[name="password"]{float:left; width:calc(100% - 140px);}
	.userInsights .registerView li[name="button"]{float:right; width:120px;}
	
	
	/* =======> collection new */
	.collectionView{padding:0px;}
	.showcaseBox{border-radius:10px; border-width:3px;}
	.showcaseLayout{grid-template-columns:64% calc(36% - 15px); grid-gap:15px;}
	.rightShowcase{grid-row-gap: 15px;}
	.collectionRow{margin-bottom:40px;}
	.showcaseBox a span{font-size:16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:100%;
	padding-left:8px; padding-right:8px; padding-bottom:8px;}
	.showcaseBox a span{background: linear-gradient(0deg, rgba(0,0,0,0.64) 2%, rgba(0,0,0,0) 75%);}
	
}


	
	

/*
	================
	Only for iPhone5s
	================
*/
@media only screen and (max-width:569px){
	
	/* =======> Page Home Welcome */
	.welcomeApp .welcomeLogo{left:6%; top:29px;}
	.welcomeApp .welcomeLogo img{width:145px;}
	.welcomeApp .welcomeText{width: calc(100% - 164px);}
	.welcomeApp .buttons img{width:130px;}	
	.welcomeApp .welcomehangingMoneky img{width:70%;}
	.welcomeApp .fox img{width:100px;}
	
	/* =======> Page Index */
	.userInsights h1{padding:15px 0px 0px; font-size:22px;}
	.userInsights .box{margin:15px 0px 0px;}
	.userInsights .boxFrom .input{font-size:14px; padding:8px 0px;}	
	.userInsights .loginLogo img{width:130px;}
	.userInsights .hangingMoneky{left:12%; top:-25px;}	
	.userInsights .hangingMoneky img{width:70%;}
	
}