/*
* 	960 version - 1.0
* 
*/
	
/* ---------------------------------------------------------------------- */
/*  Custom  960 Grid System
/* ---------------------------------------------------------------------- */
#statistic {
/*     margin-right: 5px;
    margin-top: 0; */
}
#open-right{display:none;}

/*
 *  STYLE 1


#style-1::-webkit-scrollbar-track
{
	border-radius: 18px;
	background-color: #ddd;
}

#style-1::-webkit-scrollbar 
{
	width:10px;
	background-color: #F5F5F5;
}
 
#style-1::-webkit-scrollbar-thumb 
{
	border-radius: 18px;
	background-color: rgba(0,0,0,0.15);
}
	 */
.menuBar li a span.en {display:none;}
.CloseRight{display:none;}
.CloseRight h2{margin:0;}
.CloseRight h2:after{border-bottom: 0px solid #000}
.searchMenu{display:none;}
header .clearfix {
	display: block;
	-webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  
  top: 0;
  right:-80%;
}
.move{right:0 !important;display:block !important;}
#lang {
	right: 0;
	top: 5px;
}
.subMenubar{}

@media only screen and (min-width: 1024px) and (max-width:1200px) {
	header{display:block; width: 100%;}
	header #header_cover{padding: 3px 0.5% 0 0.5%;width: 99%;}
	header .clearfix{display:block !important;width:100%;}
	.menuBar{width:100%;}
	.menuBar ul{width:95%;}
	.menuBar li{width:16%;}
	.menuBar li:nth-child(6){width:20%;}
	.menuBar li a{width:100%;padding:11.5px 0;}
	.menuBar li:nth-child(2) a, .menuBar li:nth-child(4) a{background-position: 90% 50%;}
	
	.menuBar ul li:nth-child(2) ul.sub_bar li ul li a {width: auto;}
	.menuBar ul li:nth-child(4) ul.sub_bar li a {width: auto;}
	.menuBar li:nth-child(3) ul.sub_bar li a{width:auto;}
	
	.menuBar li:nth-child(5) a {
		background-position: 95% 50%;
	}
	.shp {padding: 11.5px 0 !important;}
	.shoppingIcon {left:79%;}
	.socialBaged{width:28%;}
	ul.all_lang li{width:50% !important;}
	#top_share{float:right;}
}


@media only screen and (min-width: 768px)  and (max-width: 1023px){
	#wrapper {/* background:red; */}
	header{display:block; width: 100%;}
	header #header_cover{padding: 3px 0.5% 0 0.5%;width: 99%;height:110px;}
	header .clearfix{display:block !important;width:100%;}
	header .logo {width: 30%; padding:0 0 0 0;}
	header .logo img {width:100%;max-width:260px;height:auto;}
	header #banner{width:70%; margin-right: 0;margin:0;height: 70px;padding: 1% 0 0 0;}
	header #banner img{width:100%;height:auto;}

	.CloseRight{display:none;}
	
	.menuBar{width:100%;}
	.menuBar ul{width:95%;}
	.menuBar li{width:16%;}
	.menuBar li:nth-child(6){width:20%;}
	.menuBar li a{width:100%;padding:11.5px 0;min-width:auto;}
	.menuBar li:nth-child(2) a, .menuBar li:nth-child(4) a{background-position: 90% 50%;}

	.menuBar ul li:nth-child(2) ul.sub_bar li ul li a {width: auto;}
	.menuBar ul li:nth-child(4) ul.sub_bar li a {width: auto;}
	.menuBar li:nth-child(3) ul.sub_bar li a{width:auto;}
	.menuBar li:hover:nth-child(4) ul.sub_bar{right:0;}
	
	.menuBar li:nth-child(5) a {
		background-position: 95% 50%;
	}
	.menuNews {width: 483px !important;}
	.menuNews li {width: 49.9% !important;}
	.menuWebboard{display:none !important;}
	.menuBar ul li:nth-child(2) ul.sub_bar li a{width:95.5%;}
	.menuBar ul li:nth-child(2) ul.sub_bar li a.rightArr ,.menuBar ul li:nth-child(2) ul.sub_bar li:hover a.rightArr{
		    background-position: 160px 50%;
	}
	
	.shp {padding: 11.5px 0 !important;}
	.shoppingIcon {left: 79%;}
	.socialBaged{display:none;}
	ul.all_lang li{width:50% !important;}
	#top_share{float:right;}
	#statistic {margin: 6px 0px 0 5px;}
}

/* @media only screen and (max-width: 1260px) {

	.viewMode.list-mode .viewAll ul li{width: 97%;padding: 0.5% 0.5%;margin: 1% 1%;}
	.viewMode.list-mode .viewAll ul li a.shop{width:180px;}
	.viewMode.list-mode .viewAll ul li:first-child { margin-top:1%;}
	
}
@media only screen and (max-width: 960px) and (min-width: 791px){
	.column-one-fourth {
		width: 25%;
	}
	.column-three-fourth {
		width: 74%;
	}
	.viewAll ul li {
		margin: 0.5% 0.5%;
		width: 31.9%;
	}
}
 */

/* ------------------------------------------- */
/*  Responsive Grid :
/*
/*  1. Tablet
/*  2. Mobile Portrait
/*  3. Mobile Landscape
/* ------------------------------------------- */

@media only screen and (max-width: 767px){
	header .clearfix{
		height: 100%;
		width: 80%;
		position: fixed;
		z-index: 999;
		top: 0;
		right: -82%;
		background: rgba(251,251,251,0.95);
		box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
		display:block;
	}
	header .logo a{
	    width: 185px;
		margin-top: 10px;
	    margin-bottom: 10px;
		display: block;
		height: 63px;
		margin: 0 auto;
	}
	#open-right {
		background:none; 
		display: block;
		width: 42px;
		height: 42px;
		background-size: 100%;
		right: 2%;
		left: auto;
		top: 24px;
		border: 0 solid rgba(0, 0, 0, 0.12);
		position: absolute;
		/* padding: 0 10px; */
		
		font-size: 18px;
		font-family: DBHelvethaicaXRegular;
		font-weight: 300;
		text-transform: uppercase;
		line-height: 19px;
		display: block;
		z-index: 9;
	    color: #000;
	}
	#open-right font{
		display: inline-block;
		vertical-align: text-top;
		font-size: 35px;
		font-weight: 100;
		
		display:none;
	}
	#open-right i {
		font-size: 35px;
		margin: 0;
		margin-left: 8px;
		line-height: 35px;
		margin-top: 2px;
	}
	.CloseRight{width:100%; background: #c00;display: block; height: 150px;}
	.CloseRight h2{
		display: block;
		vertical-align: inherit;
		font-size: 35px;
		font-weight: 100;
		color: #fff;
		position: absolute;
		left: 9%;
		top: 8%;
		width: 100%;
		padding: 13px 0 0 0;
		font-family: DBHelvethaicaXRegular;
		background:transparent;
	}
	#close-right{
		background: none;
		display: block;
		width: 42px;
		height: 42px;
		background-size: 100%;
		right: 5%;
		left: auto;
		top: 9%;
		border: 2px solid rgba(255, 255, 255, 0.39);
		position: absolute;
		font-size: 18px;
		font-family: DBHelvethaicaXRegular;
		font-weight: 300;
		text-transform: uppercase;
		line-height: 19px;
		display: block;
		z-index: 9;
		color:#fff;
	}
	#close-right i {
		font-size: 40px;
		margin: 0;
		margin-left: 5px;
		line-height: 35px;
		margin-top: 3px;
	}
	.searchMenu{
	    background: url(//www.siamphone.com/images/search_icon.png);
		width: 50px;
		height: 50px;
		display: block;
		position: absolute;
		top: 24px;
		left: 20px;
		z-index: 9;
		background-size: 26px;
		background-repeat: no-repeat;
		background-position: center;
	}
	.menuBar{
		width: 100%;
		position: absolute;
		top: 150px;
		min-height: 201px;
		z-index: 999;
		height: 100%;
		padding: 0 0;
		background-color: rgb(255, 255, 255);
		/* overflow-x: hidden; */
		/* overflow-y: scroll; */
		/* height: 100%; */
	}
	.menuBar ul {
		width: 100%;
		padding: 0;
	}
	.menuBar li {
		width: 100%;
		margin-bottom: 0;
		border-bottom: 1px solid rgba(191, 191, 191, 0.43);
	}
	.menuBar li:first-child {
		border-top: 1px solid rgba(191, 191, 191, 0.43);
	}
	.menuBar li a {
		color:#222;
		width: 100%;
		padding: 20px 0;
		font-size: 24px;
		box-shadow: none;
		margin: 0;
		text-align: left;
		text-indent: 8%;
		background-color: transparent;
		background-image:none;
	}
	.menuBar li:hover a {background-image:none;}
	.menuBar li a span.en {
		font-size: 10px;
		padding-left: 10px;
		text-transform: uppercase;
		color: rgba(60, 60, 60, 0.47);
		display: inline;
		font-family: 'Roboto';
		font-weight: 400;
	}
	.menuBar li:hover a span.en {color:#fff;}
	.menuBar ul li:hover ul.sub_bar {
		display: none;
	}
	.menuBar ul li:nth-child(2) ul.sub_bar li a.rightArr ,.menuBar ul li:nth-child(2) ul.sub_bar li:hover a.rightArr{
		background-image:none;
	}
	.shp { padding: 20px 0 !important;background-color:#fff !important;color:#000 !important;}
	.menuBar li:hover a.shp{
		background-color: #b70000 !important;
		text-decoration: none;
		color: #fff !important;
	}
	.shoppingIcon{display:none;}
	#blackBG{
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		display: block;
		position: fixed;
		z-index: 9;
		top:0;
	}
	.subMenubar{
	    width: 100%;
		position: absolute;
		min-height: 201px;
		z-index: 9;
		padding: 0 0;
		background-color: rgb(255, 255, 255);
		overflow-x: hidden;
		overflow-y: scroll;
		height: 100%;
	}
	ul.all_lang li {
		width: 100%;
		border-bottom: 0;
	}
	ul.all_lang li:first-child {border-top:0;}
	#lang {
		position: absolute;
		right: 70px;
		top: -67px;
	}
	#lang:hover ul.all_lang {
		display: block;
		padding: 15px 4px 20px 30px;
		right: 0;
		min-width: 160px;
	}
	#lang div.triang{border-color: #ffffff transparent transparent transparent;}
	#lang:hover div.triang{border-color: #b1b1b1 transparent transparent transparent;}
	.cover_lang{background:transparent;}
	.socialBaged {
		width: 92%;
		height: 32px;
		display: block;
		margin: 10px 0px 0 0;
		padding: 5px 0 5px 6px;
	   background: transparent;
	   display:none;
	   visibility:hidden;
	}
	#top_share{
		height: 30px;
		margin-top: 2px;
		width:100%;
	}
	#top_share .s_icon {
/* 		margin-right: 5px;
		margin-bottom: 5px; */
	}
	#statistic {
		background: none;
		border: 0;
		width: 15%;
		text-align: center;
	}
}


/*------------------------------------------------------------------*/ 
/*	1) Note: Design for a width of 768 px
/*------------------------------------------------------------------*/
@media only screen and (min-width: 480px)  and (max-width: 767px) {
	#wrapper {
		/* background:green; */
	}
	header{display:block; width: 100%;}
	header #header_cover{padding: 3px 0.5%;width:99%;height: 85px;}
	header .logo {width: 100%; padding:0 0 0 0;text-align:left;margin:0;}
	header .logo img {width:100%;max-width:200px;height:auto;}
	header #banner{width:100%; margin-right: 0;margin:0;height: 70px;padding:0;background:#ffffff;}
	header #banner img{width:100%;height:auto;}
	#lang { right: 80px;}

}


@media only screen and (max-width: 568px) {
	#wrapper {
		/* background:yellow; */
	}
    header{display:block; width: 100%;}
	header #header_cover{padding:1% 0;width:100%;height: 85px;background-color:#fff;}
	
	header .logo a{background:none;margin:10px auto;}
	header .logo {width: 100%; padding:0 0 0 0;text-align:left;}
	header .logo img {width:100%;max-width:170px;height:auto;margin: 0 0 0 10px;display:block !important;}
	header #banner{width:100%; margin-right: 0;margin:0;height:100px;padding:0;background:#ffffff;}
	header #banner img{width:100%;height:auto;}
	.searchMenu{
	    background: url(//www.siamphone.com/images/search_icon.png);
		width: 50px;
		height: 50px;
		display: block;
		position: absolute;
		top: 24px;
		left: 20px;
		z-index: 9;
		background-size: 26px;
		background-repeat: no-repeat;
		background-position: center;
	}
	#lang {}
	#lang:hover ul.all_lang{padding: 5px 4px 5px 30px;}
		#open-right{right:4%;}
	#open-right i {
		font-size: 35px;
		margin: 0;
		margin-left: 6px;
		line-height: 35px;
		margin-top: 11px;
		color: transparent;
	    width: 30px;
		height: 30px;
	    background: url(//www.siamphone.com/images/menu-mobile.png);
		background-size: 28px;
		opacity: 0.6;
		background-repeat: no-repeat;
	}
}

/*------------------------------------------------------------------*/ 
/*	2) Note: Design for a width of 480 px
/*------------------------------------------------------------------*/
@media only screen and (max-width: 480px) and (min-width: 100px){

	#wrapper {	/* background:#b1fdff; */}
	header .clearfix{
	    height: 100%;
		width: 80%;
		position: fixed;
		z-index: 999;
		top: 0;
		right: -82%;
	    background: rgba(251,251,251,0.95);
	    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
		display:block;
	}
	#lang { right: 64px;}
	
}

/*------------------------------------------------------------------*/ 
/*	3) Note: Design for a width of 320 px
/*------------------------------------------------------------------
@media only screen and (min-width: 200px) and (max-width: 479px){
    .controller 			{ width:100%; }
	.container              { width:300px; margin:0 auto; }
	.column       			{ width:300px; margin-left:0; margin-right:0;}
    .column-one-half,
    .column-one-third,
    .column-one-fourth,
    .column-two-third,
    .column-three-fourth 	{ width:300px; margin-left:0; margin-right:0;}
	
	#top_bar .top_search {width: 93%;background-position: -10px 0;padding: 3px 10px;}
	#top_bar .top_member {display:none;}
	.wrapper-dropdown-1{display:block;}
}
@media only screen and (max-width: 590px) {
	.top_member{display:none;}
	#top_bar .top_search{width:93%;}
}

*/