@font-face
{
font-family: 'Open Sans';
src: url(http://cdn.garenanow.com/webmain/static/garenaweb/fonts/OpenSans-Regular.ttf);
}
@font-face
{
font-family: 'Open Sans';
src: url(http://cdn.garenanow.com/webmain/static/garenaweb/fonts/OpenSans-Bold.ttf);
font-weight: bold;
}
@font-face
{
font-family: 'Open Sans';
src: url(http://cdn.garenanow.com/webmain/static/garenaweb/fonts/OpenSans-Light.ttf);
font-weight: 300;
}
@font-face
{
font-family: 'Open Sans';
src: url(http://cdn.garenanow.com/webmain/static/garenaweb/fonts/OpenSans-Semibold.ttf);
font-weight: 500;
}
/* Global Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
ul li{list-style: none;}
a, a:hover, a:visited, a:active{text-decoration: none;}
h1, h2, h3, h4, h5, h6, p, a{font-family: open-sans, "Helvetica Neue",Helvetica,Arial,sans-serif;color: #4a4a4a;}
a:hover{color: #09AEEF;}

/* Account for fixed navbar */
body {
	min-width: 970px;
	padding-top: 70px;
	padding-bottom: 30px;
	font-family: open-sans, "Helvetica Neue",Helvetica,Arial,sans-serif;
}
/* Non-responsive overrides
*
* Utilitze the following CSS to disable the responsive-ness of the container,
* grid system, and navbar.
*/

/* Reset the container */
.container {
	width: 980px;
	max-width: none !important;
}

/* Demonstrate the grids */
.col-xs-4 {
	padding-left: 5px;
	padding-right: 5px;
}

.container .navbar-header,
.container .navbar-collapse {
	margin-right: 0;
	margin-left: 0;
}

/* Always float the navbar header */
.navbar-header {
	float: left;
}

/* Undo the collapsing navbar */
.navbar-collapse {
	display: block !important;
	height: auto !important;
	padding-bottom: 0;
	overflow: visible !important;
}

.navbar-toggle {
	display: none;
}
.navbar-collapse {
	border-top: 0;
}

.navbar-brand {
	margin-left: -15px;
}

/* Always apply the floated nav */
.navbar-nav {
	float: left;
	margin: 0;
}
.navbar-nav > li {
	float: left;
}
.navbar-nav > li > a {
	padding: 15px;
}

/* Redeclare since we override the float above */
.navbar-nav.navbar-right {
	float: right;
}

/* Undo custom dropdowns */
.navbar .navbar-nav .open .dropdown-menu {
	position: absolute;
	float: left;
	background-color: #fff;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, .15);
	border-width: 0 1px 1px;
	border-radius: 0 0 4px 4px;
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
	color: #333;
}
.navbar-default .navbar-nav .open .dropdown-menu > li.focus > a {
	color: #09AEEF;
}
.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar .navbar-nav .open .dropdown-menu > .active > a,
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
	color: #fff !important;
	background-color: #09AEEF !important;
}
.navbar .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
	color: #999 !important;
	background-color: transparent !important;
}

/* custom navigation */
#navbar {background-color: #fff;border: none;}
#navbar .container {border-bottom: 1px solid #d8d8d8;}
.navbar-brand {height: 66px;line-height: 45px;padding: 10px 15px;}
.navbar-nav>li>a {line-height: 36px;}
.navbar-nav>li>a.active {color: #09AEEF;}
#nav-menu {margin-left: 40px;}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
	background-color: #f6f6f6;
	color: #09AEEF ;
}
.dropdown-menu>li>a{line-height: 34px;position: relative;padding-left: 44px;}
.dropdown-menu>li>a img{width: 28px;height: 28px;position: absolute;left: 8px;top: 6px;}
#nav-login-btn span, #nav-logout-btn span{color: #E41E26;}
#nav-login-btn img, #nav-logout-btn img{width: 14px;height: 14px;}
#nav-logout-btn a span{color: #E41E26;}
#nav-login-btn a:hover {color: #E41E26;}
#nav-logout-btn a:hover {color: #09AEEF;}

/* Custom carousel */
.carousel-inner .item {height: 580px;}
.carousel-inner .item a img{width: 980px;}
.carousel-indicators li{background: #d8d8d8;border: none;}
.carousel-indicators .active{background: #E41E26;border: none;}
.carousel-control.left, .carousel-control.right {background: transparent;color: #ccc;text-shadow: none;transition: all 0.2s linear;}
.carousel-control:hover, .carousel-control:focus {color: #aaa;text-shadow: none;}

/* Banner Group */
#product-banners {padding-bottom: 32px; border-bottom: 1px solid #ccc;}
#product-banners .banner {-webkit-transition: opacity 0.2s linear;-moz-transition: opacity 0.2s linear;transition: opacity 0.2s linear;}
#product-banners .banner img{width: 320px;}
#product-banners .banner:hover{opacity: 0.6;}

/* Footer Nav */
#footer-nav {margin: 16px 0;}
#footer-nav .col-xs-4 {padding: 1.14em;border-right: 1px solid #d8d8d8;}
#footer-nav .col-xs-4:last-child{border: none;}
#footer-nav .col-xs-4 h4{font-size: 1.14em;font-weight: 500;margin-bottom: 1.14em;}
#footer-nav .col-xs-4 ul li{font-size: 1em ;margin-bottom: 0.7em;}

/* Footer */
.ft-sosumi{border-top: 1px solid #d8d8d8;padding-top: 6px;}
.ft-sosumi p{font-size: 0.8em;}

/* Sub Page */
#main header {position: relative;border-bottom: 1px solid #ccc;padding-bottom: 54px;}
#main .feature{padding-top: 56px;padding-bottom: 48px; border-bottom: 1px solid #ccc;text-align: center;} 
#main .feature:last-child{border: none;}
#main .feature h1{margin-bottom: 16px;}
#main .feature p{margin-bottom: 32px;}
#scrolldown-btn{text-align: center;}
#scrolldown-btn a,#scrolltop-btn a{-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;transition:opacity 0.2s linear;}
#scrolldown-btn a:hover,#scrolltop-btn a:hover{opacity: 0.6;}
#scrolltop-btn{position: fixed;bottom: 64px;right: 48px;opacity: 0;-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;transition:opacity 0.2s linear;}
.feature-btn-group a{-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;transition:all 0.2s linear;}
.feature-btn-group a:hover{opacity: 0.6;}
.feature-btn-group .feature-btn {text-align: center;}
#garena-download-btn {background: transparent url(../images/garena-btn-download.png) no-repeat top left;width: 224px;height: 60px;border: none;-webkit-transition: all 0.2s linear;-moz-transition: all 0.1s ease-in-out;transition: all 0.2s linear;position: absolute;top: 300px;left: 300px;}
#garena-download-btn-ru {background: transparent url(../images/garena-btn-download-ru.png) no-repeat top left;width: 224px;height: 60px;border: none;-webkit-transition: all 0.2s linear;-moz-transition: all 0.1s ease-in-out;transition: all 0.2s linear;position: absolute;top: 300px;left: 300px;}

#garena-download-btn-th {background: transparent url(../images/garena-btn-download-th.png) no-repeat top left;width: 224px;height: 60px;border: none;-webkit-transition: all 0.2s linear;-moz-transition: all 0.1s ease-in-out;transition: all 0.2s linear;position: absolute;top: 300px;left: 300px;}
#garena-download-btn-th:hover {background: transparent url(../images/garena-btn-download-active-th.png) no-repeat top left;}

#garena-download-btn-id {background: transparent url(../images/garena-btn-download-id.png) no-repeat top left;width: 224px;height: 60px;border: none;-webkit-transition: all 0.2s linear;-moz-transition: all 0.1s ease-in-out;transition: all 0.2s linear;position: absolute;top: 300px;left: 300px;}
#garena-download-btn-id:hover{background: transparent url(../images/garena-btn-download-active-id.png) no-repeat top left;}

#talktalk-website-btn {display: block; background: transparent url(../images/talktalk-btn-website.png) no-repeat top left;width: 228px;height: 60px;border: none;-webkit-transition: all 0.2s linear;-moz-transition: all 0.1s ease-in-out;transition: all 0.2s linear;margin: 0 auto;}

#talktalk-website-btn-th {display: block; background: transparent url(../images/talktalk-btn-website-th.png) no-repeat top left;width: 228px;height: 60px;border: none;-webkit-transition: all 0.2s linear;-moz-transition: all 0.1s ease-in-out;transition: all 0.2s linear;margin: 0 auto;}
#talktalk-website-btn-th:hover{background: transparent url(../images/talktalk-btn-website-active-th.png) no-repeat top left;}

#beetalk-website-btn {display: block; background: transparent url(../images/beetalk-btn-website.png) no-repeat top left;width: 237px;height: 60px;border: none;-webkit-transition: all 0.2s linear;-moz-transition: all 0.1s ease-in-out;transition: all 0.2s linear;margin: -16px auto 16px;}
#beetalk-website-btn-ru {display: block; background: transparent url(../images/beetalk-btn-website-ru.png) no-repeat top left;width: 237px;height: 60px;border: none;-webkit-transition: all 0.2s linear;-moz-transition: all 0.1s ease-in-out;transition: all 0.2s linear;margin: -16px auto 16px;}

#beetalk-website-btn-th {display: block; background: transparent url(../images/beetalk-btn-website-th.png) no-repeat top left;width: 237px;height: 60px;border: none;-webkit-transition: all 0.2s linear;-moz-transition: all 0.1s ease-in-out;transition: all 0.2s linear;margin: -16px auto 16px;}
#beetalk-website-btn-th:hover{background: transparent url(../images/beetalk-btn-website-active-th.png) no-repeat top left;}

#beetalk-website-btn-id {display: block; background: transparent url(../images/beetalk-btn-website-id.png) no-repeat top left;width: 237px;height: 60px;border: none;-webkit-transition: all 0.2s linear;-moz-transition: all 0.1s ease-in-out;transition: all 0.2s linear;margin: -16px auto 16px;}
#beetalk-website-btn-id:hover{background: transparent url(../images/beetalk-btn-website-active-id.png) no-repeat top left;}

#garena-download-btn:hover{background: transparent url(../images/garena-btn-download-active.png) no-repeat top left;}
#talktalk-website-btn:hover{background: transparent url(../images/talktalk-btn-website-active.png) no-repeat top left;}
#beetalk-website-btn:hover{background: transparent url(../images/beetalk-btn-website-active.png) no-repeat top left;}

.download-list{text-align: center;margin-top: -280px;margin-left: 300px;}

.download-list-item{display: inline-block;vertical-align: top;}

.download-list-item span{display: block;width: 100px;height: 100px;}

#beetalk-btn-qr span{background: transparent url(../images/beetalk-btn-qr.png) no-repeat left top;}
#beetalk-btn-qr-ru span{background: transparent url(../images/beetalk-btn-qr-ru.png) no-repeat left top;}

#beetalk-btn-ios span{background: transparent url(../images/beetalk-btn-ios.png) no-repeat left top;}
#beetalk-btn-ios-id span{background: transparent url(../images/beetalk-btn-ios-id.png) no-repeat left top;}
#beetalk-btn-ios-ru span{background: transparent url(../images/beetalk-btn-ios-ru.png) no-repeat left top;}

#beetalk-btn-ios a:hover span{opacity: 0.8;}
#beetalk-btn-ios-id a:hover span{opacity: 0.8;}

#beetalk-btn-android span{background: transparent url(../images/beetalk-btn-android.png) no-repeat left top;}
#beetalk-btn-android-id span{background: transparent url(../images/beetalk-btn-android-id.png) no-repeat left top;}
#beetalk-btn-android-ru span{background: transparent url(../images/beetalk-btn-android-ru.png) no-repeat left top;}

.beetalk-download-list{position: absolute;top:270px;right: 150px;}
#beetalk-btn-android a:hover span{opacitfy:0.8;}
#beetalk-btn-android-id a:hover span{opacitfy:0.8;}

/* Retina Display */
@media only screen and (min--moz-device-pixel-ratio: 2),
	only screen and (-o-min-device-pixel-ratio: 2/1),
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) {
		#garena-download-btn {background: transparent url(../images/garena-btn-download%402x.png) no-repeat top left;background-size: contain;}
		#garena-download-btn-th {background: transparent url(../images/garena-btn-download-th%402x.png) no-repeat top left;background-size: contain;}
		#garena-download-btn-id {background: transparent url(../images/garena-btn-download-id2x.html) no-repeat top left;background-size: contain;}
		#garena-download-btn:hover {background: transparent url(../images/garena-btn-download-active%402x.png) no-repeat top left;background-size: contain;}
		#garena-download-btn-th:hover {background: transparent url(../images/garena-btn-download-active-th%402x.png) no-repeat top left;background-size: contain;}
		#garena-download-btn-id:hover {background: transparent url(../images/garena-btn-download-active-id%402x.png) no-repeat top left;background-size: contain;}
		#talktalk-website-btn {background: transparent url(../images/talktalk-btn-website%402x.png) no-repeat top left;background-size: contain;}
		#talktalk-website-btn-th {background: transparent url(../images/talktalk-btn-website-th%402x.png) no-repeat top left;background-size: contain;}
		#talktalk-website-btn:hover {background: transparent url(../images/talktalk-btn-website-active%402x.png) no-repeat top left;background-size: contain;}
		#talktalk-website-btn-th:hover {background: transparent url(../images/talktalk-btn-website-active-th%402x.png) no-repeat top left;background-size: contain;}
		#beetalk-website-btn {background: transparent url(../images/beetalk-btn-website%402x.png) no-repeat top left;background-size: contain;}
		#beetalk-website-btn-th {background: transparent url(../images/beetalk-btn-website-th%402x.png) no-repeat top left;background-size: contain;}
		#beetalk-website-btn-id {background: transparent url(../images/beetalk-btn-website-id%402x.png) no-repeat top left;background-size: contain;}
		#beetalk-website-btn:hover {background: transparent url(../images/beetalk-btn-website-active%402x.png) no-repeat top left;background-size: contain;}
		#beetalk-website-btn-th:hover {background: transparent url(../images/beetalk-btn-website-active-th%402x.png) no-repeat top left;background-size: contain;}
		#beetalk-website-btn-id:hover {background: transparent url(../images/beetalk-btn-website-active-id%402x.png) no-repeat top left;background-size: contain;}
	}

	
	
/* GAS */
@font-face
{
font-family: 'ThaiSans Neue';
src: url(http://cdn.garenanow.com/webmain/static/garenaweb/fonts/ThaiSansNeue-Bold.ttf);
}
.font-gas{
color: #C41620;
font-family: ThaiSans Neue, "Helvetica Neue",Helvetica,Arial,sans-serif !important;
  font-size: 24px;
}
.gas-header{  position: relative;z-index: -1;}
#gas-website-btn-th {display: block; background: transparent url(../images/gas-btn-website-th.png) no-repeat top left;width: 237px;height: 60px;border: none;-webkit-transition: all 0.2s linear;-moz-transition: all 0.1s ease-in-out;transition: all 0.2s linear;margin: -100px auto 16px;  background-position: center;z-index:999;}
#gas-website-btn-th:hover{opacity: 0.9;}
.icon-menu {
  display: inline-block;
  background: url(../images/gas-icon-th.png) no-repeat 0 0;
  background-size: 158px 35px;
  margin: -3px auto;
}
.icon-lucky{width: 43px;height: 34px;background-position: 0 0;}
.icon-discover{width: 38px;height: 34px;background-position: -44px 0;}
.icon-mobile{width: 32px;height: 34px;background-position: -79px 0;}
.icon-chat{width: 49px;height: 37px;background-position: -112px 0;}

.gas-download-list{text-align: center;margin-top: -280px;margin-left: 300px;}
.gas-download-list{position: absolute;top: 517px;right: 62px;}

.gas-download-list-item{display: inline-block;vertical-align: top;  margin: 0 6px;}

.gas-download-list-item span{display: block;width: 110px;height: 110px;}

#gas-btn-qr span{background: transparent url(../images/gas-btn-qr-th.png) no-repeat left top;background-position: center;z-index:99;}

#gas-btn-ios span{background: transparent url(../images/gas-btn-ios-th.png) no-repeat left top;background-position: center;z-index:99;}

#gas-btn-ios a:hover span{opacity: 0.8;}

#gas-btn-android span{background: transparent url(../images/gas-btn-android-th.png) no-repeat left top;background-position: center;z-index:99;}

#gas-btn-android a:hover span{opacity: 0.8;}