/* -----------------Desktop styles from mediaQueries.css */
.w480, .w320, .w768, .w560, .tap, .BankingOnline-resp{ display:none; }
.hw-to-win h1, .tnc h1{ border-bottom:2px solid #cc0000; width:80%; }
.hw-to-win div{ width:100%; }
.hw-to-win div img{ display:block; margin:0 auto; }
.hw-to-win div img.w768,
.hw-to-win div img.w480,
.hw-to-win div img.w320{ display:none !important; max-width:100%; }
.hw-to-win ol{ padding:0; }
.startBankingOnline img.BankingOnline-m{ display:none; }
.hw-to-win{ padding:0; margin:0 auto; background:url(../img/bg_lightbox-w768.png) repeat scroll center 0px transparent; padding:0 0 20px 0; width:100%; }
.hw-to-win .note{ border-bottom:2px solid #cc0000; padding:15px 0 20px 0; }


#transaction .note a,
body>footer ul li a:first-child{ display:inline-block;}
#transaction .note a.tnc,
body>footer ul li a{ display:none; }
body>footer ul li a{ float:left; }
#footerWrapper{ top:6px; }

#mobile{ display:none; }

#mobile {
	background:url(../img/bg_red_small.png) 0 0 repeat-x;
	padding:22px 2% 28px 0.5%; width:73%;
}
#meter a.meter-close{ display:none; }
.swiperight{ display:none !important; }

.ui-loader{ display:none; }
.cboxIframe{ height:99%; }
/* -----------------Desktop styles from mediaQueries.css */



/* ------------------------------------------------ */
@media only screen and (max-device-width:768px), only screen and (max-width: 768px){
.headerWrapper,
#contentWrapper,
#footerWrapper{	width:98%; }
#logo{  }
.headerWrapper .startBankingOnline a img,
#transaction .startBankingOnline a img{ display:none; }
.headerWrapper .startBankingOnline a img.BankingOnline-resp,
#transaction .startBankingOnline a img.BankingOnline-m{ display:block; }
#intro .leftContent{ width:62%; padding:32px 4% 30px; min-height: 161px; }
#intro .rightContent{ width:25%; padding:27px 2% 76px 0.5%; }
#intro .middleContent{ height:196px; }
#transaction{ margin-bottom:20px; }
/*#transaction ul li{ width:27%; }*/
#transaction ul li a{ display: inline-block; width: 100%; }
#transaction ul li a > div{ width:68%; display:block; padding:6px 8px; float:left; font-size:10px; }
#transaction .chance2 {	/*background:url(../img/chance_2x-768.png) no-repeat left top; height:86px;*/ display:block; float:left; }
#transaction .chance1 {	/*background:url(../img/chance_1x-768.png) no-repeat left top; height:86px;*/ display:block; float:left; }
#transaction .more{ margin:10px 0; padding-top:7px; padding-bottom:7px; width: 15%; }
#transaction .startBankingOnline{width:35%;}
#flipper{ top:30px; }
#meter{ top: 95px; right: 1.2%; left:inherit; }
#checkpoint5{ left:22px; }
#footerWrapper{ display:inline-block; margin:10px 0; }
#flipper{ background:url(../img/flipper_bg-resp.png) left top no-repeat; }
#transaction ul li a > img{ vertical-align:top; padding:6px 0 0 0; }
}


@media only screen and (max-device-width:480px), only screen and (max-width: 480px){
.headerWrapper,
#contentWrapper,
#footerWrapper{	width:97%; }
#bgContainer #bg_1 img{ display:none; }
#bgContainer #bg_1 img.w480{ display:block; margin:0 !important; }
#intro{ width:100%; position:relative; }
#intro .leftContent{ width: 88%; padding: 40px 6% 30px; }
#intro .rightContent{ width:98%; padding:15px 5% 15px; width:90%; position:absolute; left:0%; top:775px; background-position:0 -1px; }
#intro .rightContent a img{ display:none; }
#intro .rightContent a img.w480{ display:block; }
#intro .middleContent{ display:none; }
#contentWrapper .tap{ display:inline-block; border:1px solid #ba1212; position:absolute; top:320px; left:0; width:100%; z-index: 110; padding:16px 0; }
#contentWrapper .tap a{ display:block; font-size:13px; font-weight:bold; color:#000000; padding:0 10px 0 0;  width:56%; text-align:right; float:left; }
#contentWrapper .tap img{ float:left; display:block; }
#transaction{ width:100%; }
#transaction ul{ background:none; width:100% }
#transaction ul li,
#transaction .more{ width:100%; background:url(../img/transaction_bg-768.png) left top no-repeat; margin:1px 0; }
#transaction .more{ float:none; margin:1px 0 0 0; padding:0 0; width:100%; display:block; }
#transaction .more a{ padding: 4%; display: block; margin:0; }
#transaction .chance2 {	background:url(../img/chance_2x.png) no-repeat left top; height:51px; }
#transaction .chance1 {	background:url(../img/chance_1x.png) no-repeat left top; height:51px; }
#transaction .bottom{ margin-top:125px; }
#transaction .bottom .note{ width:100%; float:none; }
#transaction .startBankingOnline { width: 100%; padding:10px 0 0 0; position:inherit; display: inline-block; }
#transaction .startBankingOnline a{ margin:0; float:right; }
#flipper{ right:25%; top:250px; }
#meter{ display:none; top:0px; height:100%; background:url(../img/meter_bg-480.png) right top no-repeat;  width: 100%; z-index:120; right:-10px; }
.meter{width: 150px; display: block; position: absolute; right: 20px; top:10px; height:100%; background:url(../img/meter_bg.png) 22px 0 no-repeat; }
#intro .rightContent{ display:none; }
#mobile{ display:block;}
#transaction ul li a > div{ }
}

@media only screen and (max-device-width:320px), only screen and (max-width: 320px){
.headerWrapper{ position:relative; }
.headerWrapper .right{ width: 65%; }
body>header nav{ float: right; padding-right: 10px; text-align:right; }
.headerWrapper .startBankingOnline,
.headerWrapper .startBankingOnline a img.BankingOnline-resp{ /*position:absolute; left:19%; top:75px; z-index:100;*/ display:none !important; }
#intro .rightContent{ top:840px; padding: 25px 10% 25px; width: 80%; }
#intro .rightContent a img.w480{ display:none; }
#intro .rightContent a img.w320{ display:block; }
#transaction .bottom { margin-top: 150px; }
#transaction .bottom .note { width: 98%; }
#transaction .startBankingOnline a{ width:68%; margin:0 auto; display:block; float:none; }
#transaction .startBankingOnline a img.BankingOnline-m{ margin:0 auto; float:none; }
#flipper { right: 14%; }
body>footer .leftContent{ line-height:16px; }
#meter{ right:-20px; }
#contentWrapper .startBankingOnline.w320{ display:block; position: absolute; top: 25px; left: 19%; }
#contentWrapper .startBankingOnline.w320 a img.BankingOnline-resp{ display:block; }
.meter{ right:28px; }
#contentWrapper .tap a{ width:60%; }
body footer .leftContent{ width:65%; padding:0 0 0 10px; }
}




/* START of t&c , How to win ( from Overlay to Regular page..)/ how-to-win-responsive and tnc-responsive pages */
.tnc-win, .tnc-win .hw-to-win{ display:block; }
.tnc-win .headerWrapper{ display:inline-block; }
.tnc-win .headerWrapper #logo{ padding:16px 10px 10px 10px; width:15%; }
.tnc-win .headerWrapper .right{ width:75%; }
.tnc-win .headerWrapper nav{ padding:10px 0 4px 0;  }
.tnc-win .headerWrapper .startBankingOnline{ position:inherit; left:inherit; right:inherit; }
.tnc-win .hw-to-win{ padding:30px 3% 70px 3%; width:94%; position:relative; }
.tnc-win .hw-to-win .head a.back,
.tnc-win .hw-to-win .tail a.back{ position:absolute; right:3%; top:0; }
.tnc-win .hw-to-win .tail a.back{  top:20px;}
.tnc-win .hw-to-win .head a.back,
.tnc-win .hw-to-win .tail a.back{ background:url(../img/btn-back.png) left top no-repeat; display:block; width:80px; height:35px; text-indent:-9999px; }
.tnc-win .hw-to-win a{ display:inline-block; }
.tnc-win .hw-to-win img{ display:none; }
.tnc-win .hw-to-win img.w768{ display:inline-block !important; max-width: 100%; }
.tnc-win .hw-to-win .head .startBankingOnline{ display:none; }
.tnc-win .hw-to-win .head .startBankingOnline.w320{ display:none; }
.tnc-win .hw-to-win .head .startBankingOnline.w320 img{ display:block;}
.tnc-win .hw-to-win .tail .startBankingOnline{ display:none; }
.tnc-win .hw-to-win .tail .startBankingOnline.w320{ display:none; }
.tnc-win .hw-to-win .tail .startBankingOnline.w320 img{ display:block;}
.tnc-win .hw-to-win div{ position:relative; }
.tnc-win .hw-to-win div .startBankingOnline{ position:absolute; right:0; bottom:85px; }
.tnc-win .hw-to-win .note p{ text-align:center; width:70%; margin:0 auto; }

/* ----TnC------ */
.tnc-win .headerWrapper{ display:block;  }
.tnc-win{ background:url(../img/bg_lightbox-w768.png) repeat scroll center 0px transparent; width:100%; margin:0 auto; }
.tnc-win header{ display:inline-block; width:100%; background:#000; }
.tnc-win .tnc{ width:96%; margin:0 auto; }
.tnc-win .tnc div{ position:relative; height:auto !important; }
.tnc-win .tnc .tail{ display:inline-block; width:100%; border-top:2px solid #cc0000; }
.tnc-win .tnc{ padding:30px 3% 70px 3%; width:94%; position:relative; }
.tnc-win .tnc .head a.back,
.tnc-win .tnc .tail a.back{ position:absolute; right:3%; top:0; }
.tnc-win .tnc .tail a.back{  top:20px;}
.tnc-win .tnc .head a.back,
.tnc-win .tnc .tail a.back{ background:url(../img/btn-back.png) left top no-repeat; display:block; width:80px; height:35px; text-indent:-9999px; }
.tnc-win .tnc a{ display:inline-block; }

/* END of t&c , How to win ( from Overlay to Regular page..) */


@media only screen and (max-device-width:480px), only screen and (max-width: 480px){
/* START of t&c , How to win ( from Overlay to Regular page..) */
.tnc-win .hw-to-win{ padding: 30px 5% 70px 5%; width: 90%; }
.tnc-win .hw-to-win div img,
.tnc-win .hw-to-win div img.w768{ display:none !important; }
.tnc-win .hw-to-win div img.w480{ display:block !important; margin:0 auto; }

.tnc-win .headerWrapper #logo{ width:16%; }
.headerWrapper, #contentWrapper, #footerWrapper{ width:98%; }
.tnc-win .headerWrapper .startBankingOnline{ padding:0 0 0 8px; }
.tnc-win .headerWrapper #logo{ width:16%; }
.tnc-win .headerWrapper .right{ width:76%; }
.tnc-win .hw-to-win div .startBankingOnline{ bottom:80px; }
/* END of t&c , How to win ( from Overlay to Regular page..) */

}

@media only screen and (max-device-width:320px), only screen and (max-width: 320px){
/* START of t&c , How to win ( from Overlay to Regular page..) */
.tnc-win .hw-to-win div.head{ display:inline-block; width:100%; }
.tnc-win .headerWrapper .right{ width:55%; }
.tnc-win .headerWrapper .startBankingOnline{ display:none; }
.tnc-win .hw-to-win .head a.back, .tnc-win .hw-to-win .tail a.back{ position:inherit; right:inherit; left:inherit; top:inherit; bottom:inherit; float:left; width:30%  }
.tnc-win .hw-to-win .head .startBankingOnline.w320,
.tnc-win .hw-to-win .tail .startBankingOnline.w320{ display:block; position:inherit; right:inherit; left:inherit; top:inherit; bottom:inherit; float:right; width:70%; text-align: right; }
.tnc-win .hw-to-win .tail { padding:15px 0 0 0; display: inline-block }
.tnc-win .hw-to-win{ padding:20px 5% 20px 5%; }
.tnc-win .hw-to-win div.startBankingOnline{ display:none; }	

.tnc-win .hw-to-win div img,
.tnc-win .hw-to-win div img.w768,
.tnc-win .hw-to-win div img.w480{ display:none !important; }
.tnc-win .hw-to-win div img.w320{ display:block !important; margin:0 0 auto;}
.tnc-win footer .leftContent ul li{  }

.tnc-win .tnc{ padding:30px 3% 25px 3%; }
.tnc-win .tnc .head,
.tnc-win .tnc .tail{ display:inline-block; width:100%; margin:0 0 10px 0; }
.tnc-win .tnc .tail{ margin:0 0 0; padding:20px 0 0 0; }
.tnc-win .tnc h1{ clear:both; width:100%; }
.tnc-win .tnc .head a.back, .tnc-win .tnc .tail a.back{ position:inherit; right:inherit; top:inherit; left: inherit; right:inherit; float:left; }
.tnc-win .tnc .head .startBankingOnline.w320,
.tnc-win .tnc .tail .startBankingOnline.w320{ display:block; float:right; }
.tnc-win .tnc .head .startBankingOnline.w320 a .BankingOnline-resp{ display:block; }
/* END of t&c , How to win ( from Overlay to Regular page..) */

}

/* iPhone 4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { 
    /* CSS here */

}

/* Close button on meter */
@media only screen and (min-device-width : 100px) and (max-device-width : 600px) { 
    /* CSS here */
#meter a.meter-close{ background:url(../img/btn-close.png) 0 0 no-repeat; display:block; text-indent:-9999px; width:32px; height:32px; position: absolute; right: 150px; top: 12px; }
}

@media only screen and (max-device-width : 1024px), only screen and (max-width : 1024px) and (orientation:landscape){
#intro .rightContent{ }
 }