/*	################################################################
	COOLLIE Styles
################################################################# */ 
/* Add font */
/* @import url(http://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,900); */

/* import css file */
@import url(assets/animate/animate.css) screen;
@import url(assets/bootstrap-3.3.4-dist/css/bootstrap.css) screen;
@import url(assets/font-awesome-4.1.0/css/font-awesome.min.css) screen;
@import url(assets/thaisan/font-thaisan.css) screen;
@import url(assets/kitithada/font-kitithada.css) screen;
@import url(overide-bootstrap.css) screen;

h1,h2,h3,h4,h5,h6,
p,small,strong,b,
body{
  font-family: 'ThaiSansNeue','Lato','Helvetica Neue', Helvetica, sans-serif;
  font-weight: 400;
}
h1,h2,h3,h4,h5,h6,
b,strong{
  font-weight: bold;
}
p {
  margin: 0 0 10px;
}

a{ text-decoration: none !important; }

/* Color */
.blue 			{ color: #21C2F8; }
.mblue 			{ color: #428bca; }
.orange 		{ color: #ff6c13; }
.purple 		{ color: #574de5; }
.yellow 		{ color: #e2e41f; }
.black 			{ color: #292723; }
.red 			{ color: #f00000; }
/* .green 			{ color: #419641; } */
.green 			{ color: #1caf9a; }
.white 			{ color: #ffffff; }
.gray 			{ color: #83939C; }
.dark-white 	{ color: #f7f7f7; }
.light-gray 	{ color: #e4e7ea; }
.smooth 		{ color: #636e7b; }
.dark-blue		{ color: #1D2939; }
.danger 		{ color: #d9534f; }
.color333 		{ color: #333333; }
.colorbbb 		{ color: #bbbbbb; }

/* Color bg */
.bg-blue 			{ background-color: #21C2F8; }
.bg-lightblue 		{ background-color: #F0FFFC; }
.bg-orange 			{ background-color: #ff6c13; }
.bg-purple 			{ background-color: #574de5; }
.bg-yellow 			{ background-color: #e2e41f; }
.bg-black 			{ background-color: #292723; }
.bg-red 			{ background-color: #f00000; }
.bg-green 			{ background-color: #419641; }
.bg-white 			{ background-color: #ffffff; }
.bg-gray 			{ background-color: #f1f1f1; }
.bg-dark-white		{ background-color: #f7f7f7; }
.bg-light-gray 		{ background-color: #e4e7ea; }
.bg-dark-blue 		{ background-color: #1D2939; }
.bg-mblue 			{ background-color: #428bca; }
.bg-black2d 		{ background-color: #2d2d2d; }
.bg-black0 			{ background-color: #000000; }

.bg-teal 		{ background-color: teal; }

/* border color */
.border-blue	{ border-color: #21C2F8 !important;}
.border-error	{ border-color: #b94a48 !important;}

/* Global style */
.mt-xlg{ margin-top: 115px;}
.mt-mlg{ margin-top: 100px;}
.mt-xmlg{ margin-top: 75px;}
.mt-lg{ margin-top: 60px;}
.mt-45{ margin-top: 45px;}
.mt-lmd{ margin-top: 35px;}
.mt-md{ margin-top: 30px;}
.mt-smd{ margin-top: 20px;}
.mt-lsm{ margin-top: 15px;}
.mt-sm{ margin-top: 10px;}
.mt-xs{ margin-top: 5px;}
.mt-none{ margin-top: 0px !important; }

.mb-xxlg{ margin-bottom: 125px;}
.mb-xlg{ margin-bottom: 115px;}
.mb-lg{ margin-bottom: 60px;}
.mb-md{ margin-bottom: 30px;}
.mb-sm{ margin-bottom: 10px;}
.mb-xs{ margin-bottom: 5px;}
.mb-none{ margin-bottom: 0px !important; }

.m-center { margin-left: auto; margin-right: auto;}

.pt-lg{ padding-top: 60px;}
.pt-md{ padding-top: 30px;}
.pt-sm{ padding-top: 10px;}
.pt-xs{ padding-top: 5px;}
.pt-none{ padding-top: 0px !important; }

.pb-lg{ padding-bottom: 60px;}
.pb-md{ padding-bottom: 30px;}
.pb-sm{ padding-bottom: 10px;}
.pb-xs{ padding-bottom: 5px;}
.pb-none{ padding-bottom: 0px !important; }

.margin-none{ margin: 0px !important; }
.padding-none{ padding: 0px !important; }

.boxed-lg{ padding: 60px; }
.boxed-md{ padding: 30px; }
.boxed-sm{ padding: 10px; }
.boxed-xs{ padding: 5px; }
.boxed-side{ padding-left: 15px; padding-right: 15px; }

.boxed{ padding: 20px; }

.box-shadow{
	box-shadow: 0 1px 2px rgba(0,0,0,.1);
	-moz-box-sizing: border-box;
}

.border-none{ border: none !important; }
.border-radius-lg{ border-radius: 8px; }
.border-radius-md{ border-radius: 4px; }
.border-radius-sm{ border-radius: 2px; }

.cursor-pointer{ cursor: pointer;}

/* min-height */
.mh-p1{ min-height: 100px; padding-top: 3%;}
.mh-sm{ min-height: 200px; padding-top: 3%;}
.mh-md{ min-height: 400px; padding-top: 3%;}
.mh-lg{ min-height: 600px; padding-top: 3%;}
.mh-vh{ min-height: 100vh; padding-top: 3%;}


/* height control */
.ht-max{ height: 100% !important; }
.ht-lg{ height: 200px !important; }
.ht-md{ height: 120px !important; }
.ht-sm{ height: 60px !important; }
.ht-xs{ height: 30px !important; }

/* width control */
.wd-max{ width: 100% !important; }
.wd-lg{ width: 200px !important; }
.wd-md{ width: 120px !important; }
.wd-sm{ width: 60px !important; }
.wd-xs{ width: 30px !important; }

.max-width-md { max-width: 300px;}
/* position control */
.ps-rela{ position: relative; }
.ps-abs{ position: absolute; }

/* font style */
.font-normal{ font-weight: normal; }
.font-bold{ font-weight: bold; }
.font-italic{ font-style: italic; }
.text-indent{ text-indent: 30px; }
.text-justify{ text-align: justify;}
.letter-spacing{ letter-spacing: .1em; }
.letter-spacing-sm{ letter-spacing: .05em; }

/* text control */
.word-wrap{ word-wrap:break-word; }
.no-wrap{ white-space:nowrap; }
.txt-lg{ font-size: 26px;}
.txt-ellipsis{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
}

/* overflow control */
.ovflow-hidden{	overflow: hidden; }

.p-2row{ overflow: hidden; height: 40px;}
.p-4row{ overflow: hidden; height: 80px;}


/* hover-style */
.hover-style-1 a{ color: #ffffff; }
.hover-style-1 a:hover{ color: #636e7b; }
.hover-style-2 a{ color: #ffffff; }
.hover-style-2 a:hover{ color: #ffffff; }
.hover-style-3 a{ color: inherit; }
.hover-style-3 a:hover{ color: inherit; }
.hover-transparent a:hover { background-color: transparent !important; }

/* text-size */
.text-sm { font-size: 13px; }
.text-md { font-size: 21px; }

/* ===============================================================================  */
/* write css for this web */
.wtext-primary{ color: #bbce00; }
.wtext-default{ color: #898989; }
.wtext-gray{ color: #707070; }
.wtext-blackgreen{ color: #5b602a; }
.wbg-primary{ background-color: #bbce00; }
.wbg-default{ background-color: #898989; }

.hover-primary{ color: #5b602a !important;}
.hover-primary:hover,
.hover-primary:active,
.hover-primary:focus{
	color: #bbce00 !important;
}

.home-page{
	/* background: url("img/bg-snow.jpg"); */
}

.nav-logo .navbar-header .logo{
	position: absolute;
	left: 0px;
	width: 100%;
}
.nav-logo .navbar-header .logo a{
	width: 100%;
	margin: 0 auto;
}
.nav-logo .navbar-header .logo a img{
	margin: 0 auto;
	width: 12%;
}

.nav-logo .navbar-nav{
	margin-top: 85px;
/* 	margin-left: -24px; */
/* 	margin-bottom: 90px; */
}

.nav-logo .nav>li>a{
	padding: 15px 50px;
	/* border-bottom: 1px solid #898989; */
	font-family: 'ThaiSansNeue-SemiBold','ThaiSansNeue-ExtraLight','ThaiSansNeue';
	font-weight: bold;
	font-size: 24px;
}

.width-about-page{
		width: 80%; 
		margin: auto;
	}

.nav-logo .nav>li>a{
	color: #898989;
	
}


.nav-logo .nav>li>a:focus,
.nav-logo .nav>li>a:hover,
.nav-logo .nav>li.active>a{
	background: inherit;
	color: #bbce00;
	position: relative;
	text-align: center;
}

.nav-logo .nav>li>a:hover{
	color: #333333;
	box-shadow: graytext;
}
.nav-logo .nav>li.active>a:after{
	content: url('img/leaf-ico2.png');
	position: absolute;
	top:0px;
/*   	right: 20%; */
}

/* carousel-leafaround */
#carousel-leafaround .carousel-inner{
	text-align: center;
}
#carousel-leafaround .carousel-inner img{
	margin: 90px auto;
}

#carousel-leafaround .carousel-control.left,
#carousel-leafaround .carousel-control.right{
	background: none;
	filter: none;
	color: #959595;
}
#carousel-leafaround .carousel-control:focus,
#carousel-leafaround .carousel-control:hover{
	color: #bbce00;
}

.carousel-control .fa-chevron-left,
.carousel-control .fa-chevron-right{
	width: 30px;
	height: 30px;
	margin-top: -15px;
	font-size: 30px;
	position: absolute;
	top: 50%;
	z-index: 5;
	display: inline-block;
}

.carousel-control .fa-chevron-left{
	left: 350%;
}
.carousel-control .fa-chevron-right{
	right: 350%;
}

#carousel-leafaround .carousel-indicators {
    bottom: -30px !important;
}


.hexagon-indicators li.active,
.hexagon-indicators li {
	position: relative;
	width: 12px; 
  	height: 6.93px;
	background-color: #959595;
	margin: 3.46px 0;
	border-radius: 0px;
	border: none;
}

.hexagon-indicators li:before,
.hexagon-indicators li:after {
	content: "";
	position: absolute;
	width: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	left: 0px;
}

.hexagon-indicators li:before {
	bottom: 100%;
	border-bottom: 3.46px solid #959595;
}

.hexagon-indicators li:after {
	top: 100%;
	width: 0;
	border-top: 3.46px solid #959595;
}

.hexagon-indicators li.active{
	background-color: #bbce00;
}
.hexagon-indicators li.active:before {
	border-bottom: 3.46px solid #bbce00;
}

.hexagon-indicators li.active:after {
	border-top: 3.46px solid #bbce00;
}



.ThaiSans-block {
	font-family: 'ThaiSansNeue-ExtraLight' !important;
	font-size: 22px;
	line-height: 1.3em;
}
.ThaiSans-block strong{
	font-family: 'ThaiSansNeue-SemiBold','ThaiSansNeue-ExtraLight','ThaiSansNeue' !important;
	font-weight: bold;
}

.kitithada-font{
	font-family: 'kitithada' !important;
	letter-spacing: -1px;
}

.kitithada-font-bold{
	font-family: 'kitithada-SemiBold' !important;
	letter-spacing: 1px;
}

.bg-bigleaf{
	background: url('img/bg-bigleaf.png');
	background-repeat:no-repeat;
	background-position:10% 68%;
/* 	min-height: 340px; */
}

/* ico-lan */
.ico-lan{
	background: url('img/th_en-ico.png') no-repeat;
	width: 60px;
	height: 59px;
	display: inline-block;
}
.ico-lan.ico-th{ background-position: top left; }
.ico-lan.ico-en{ background-position: top right; }

.active .ico-lan.ico-th, 
.ico-lan.ico-th:hover,
.ico-lan.ico-th:active{
	background-position: bottom left; 
}

.active .ico-lan.ico-en,
.ico-lan.ico-en:hover,
.ico-lan.ico-en:active{
	background-position: bottom right; 
}


/* line-shadow */
.line-shadow{
	background: url('img/line-shadow.png') no-repeat top center;
	background-size: contain;
	height: 10px;
	width: auto;
}


/* footer */
.footer{
	background: #cccccc;
	font-family: 'ThaiSansNeue-UltraLight';
	font-size: 16px;
	overflow: hidden;
}
.footer .container{
	position: relative;
	min-height: 40px;
	padding-left: 45px;
	padding-right: 45px;
}
.footer .container:before{
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 40px 40px 0;
	border-color: #ccc #bbce00 #ccc transparent;
  	top: 0px;
	left: 0px;
}
.footer .container:after{
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 40px 0 0 40px;
	border-color: #ccc transparent #bbce00;
  	top: 0px;
	right: 0px;
}

.footer .container>p{
	margin-bottom: 0px;
	line-height: 40px;
}

.social-inline{
	float: right;
	line-height: 40px;
	margin-bottom: 0px;
}
.social-inline a{ color: #fff; }
.social-inline a:hover{ color: #60662c; }


/* Overide html5-vedio */
#html5-watermark{
	display: none !important;
}

/* nav affix */
.navbar.affix + .hidden-top{
	padding-top: 230px;
}
.navbar.affix{
	width: 100%;
	z-index: 1000;
	background: transparent;
	overflow: hidden;
	background-color: #fff;
	border-bottom: 1px solid #e4e7ea;
/* 	box-shadow: 0 1px 2px rgba(0,0,0,.1); */
	-moz-box-sizing: border-box;

}
.nav-logo.affix .navbar-brand{
	padding: 5px 15px;
	-webkit-transition: all .3s ease-out; /* Safari */
	transition: all .3s ease-out;
}
.nav-logo.affix .navbar-header .logo a img{
	max-width: 100px;
}


.nav-logo.affix .navbar-nav{
	margin-top: 25px; 
	margin-left: -25px;
/* 	margin-bottom: 15px;  */
	-webkit-transition: all .3s ease-out; /* Safari */
	transition: all .3s ease-out;
}
.nav-logo.affix .nav>li>a{
	border-bottom-color: transparent;
/* 	font-size: 22px; */
}


.nav-logo .logo-normal{ display: block;	}
.nav-logo .logo-small{ display: none;	}

.nav-logo.affix .logo-normal{ display: none; }
.nav-logo.affix .logo-small{ display: block; }


.nav-logo:not(.affix) .navbar-brand .logo-normal.logo-hover,
.nav-logo:not(.affix) .navbar-brand:hover .logo-normal.logo-def,
.nav-logo:not(.affix) .navbar-brand:active .logo-normal.logo-def,
.nav-logo:not(.affix) .navbar-brand:focus .logo-normal.logo-def{
	display: none;
}
.nav-logo:not(.affix) .navbar-brand:hover .logo-normal.logo-hover,
.nav-logo:not(.affix) .navbar-brand:active .logo-normal.logo-hover,
.nav-logo:not(.affix) .navbar-brand:focus .logo-normal.logo-hover{
	display: block;
}

.nav-logo.affix .logo-normal{ display: none; }
.nav-logo .logo-small{ display: none; }


.nav-logo.affix .navbar-brand .logo-small.logo-hover,
.nav-logo.affix .navbar-brand:hover .logo-small.logo-def,
.nav-logo.affix .navbar-brand:active .logo-small.logo-def,
.nav-logo.affix .navbar-brand:focus .logo-small.logo-def{
	display: none;
}
.nav-logo.affix .navbar-brand .logo-small.logo-def,
.nav-logo.affix .navbar-brand:hover .logo-small.logo-hover,
.nav-logo.affix .navbar-brand:active .logo-small.logo-hover,
.nav-logo.affix .navbar-brand:focus .logo-small.logo-hover{
	display: block;
}



.art-title{
	position: relative;
	display: block;
	margin-bottom: 20px;
}
.art-title:after{
	content: " ";
	border-bottom: 2px solid #959595;
	position: absolute;
	left: 0px;
	bottom: -10px;
	width: 60%;
}

.title-primary{
	position: relative;
	display: inline-block;
	margin-bottom: 20px;
	text-align: center;
	letter-spacing: .1em;
}
.title-primary:after{
	content: " ";
	border-bottom: 2px solid #959595;
	position: absolute;
	bottom: -20px;
	width: 33%;
	left: 33%;
}
.title-primary > span{
	display: block;
	margin-bottom: 10px;
	margin-top: 10px;
}

.title-subline{
	position: relative;
	display: inline-block;
	text-align: center;
	margin-bottom: 30px;
}
.title-subline:after{
	content: "";
	position: absolute;
	width: 40%;
	left: 30%;
	bottom: -10px;
	border-bottom: 1px solid #959595;
}


/* Hexagon border */
.bg-hexagon-border{
	background: url("img/product/hex-border-light.png") no-repeat center center;
	background-size: contain;
}

/* button green primary */
.btn-gprimary.active,
.btn-gprimary:hover,
.btn-gprimary:active,
.btn-gprimary:focus{
	background-color: #bbce00;
	color: #eee;
	-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,.2);
	-moz-box-shadow: 	inset 0px 1px 1px rgba(0,0,0,.2);
	box-shadow: 		inset 0px 1px 1px rgba(0,0,0,.2);
}

.btn-gprimary{
	background-color: #60662c;
	color: #eee;
	padding: 6px 30px;
	font-size: inherit;
}

/* detail-title */

.detail-title{
	position: relative;
	display: inline-block;
}


.detail-title:after{
	content: "";
	position: absolute;
	top:50%;
	width: 30px;
	border-top : 1px solid #cccccc;
}


.detail-title:before{
	content: "";
	position: absolute;
	background: url("img/left-line.png") no-repeat;
	width: 111px;
    height: 42px;
    left: -111px;
    top: 0px;
}

.detail-title:after{
	content: "";
	position: absolute;
	background: url("img/right-line.png") no-repeat;
	width: 70px;
    height: 2px;
	right: -100px;
	top: 42px;
}


.detail-text{
	position: relative;
	display: inline-block;
	line-height: 18px;
	white-space: nowrap;
	font-size: 50px;
	margin-top: 10px;
	margin-bottom: 10px;
}


.detail-text:before{
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	border-top : 1px solid #cccccc;
	width: 100%;
}


.detail-text .small,
.detail-text small{
	font-size: 20px;
}

hr.line-primary{
	border-color: #bfbfbf;
}

/* mark-hex */
.img-hex-border{
	position: relative;
/* 	text-align: center; */
}


.img-hex-border .hover-content{
/* 	position: absolute; */
/* 	text-align: center; */
/* 	top:40%; */
	color: #fff;
}
.img-hex-border:hover .hover-wrapper{
	opacity: 1;
}

.img-hex-border:hover img{
	-webkit-transform: scale(1);
    transform: scale(1);
}


.hover-wrapper img{
	min-height: 43px !important;
	width: 43px;
	height: 43px !important;
}


.img-hex-border.img-hex-border-fixed{
	width: 232px;
	height: 266px;
	margin: 0 auto;
}
.img-hex-border.img-hex-border-fixed .mark-hex,
.img-hex-border.img-hex-border-fixed a img{
	width: 100%!important;
	height: 100%!important;
}

.img-hex-border.img-hex-border-fixed .hover-wrapper{
	height: 100% !important;
	max-height: none !important;
}

.img-hex-border > a{
	display:inline-block ;
	overflow: hidden;
}


.img-hex-border .mark-hex:before{
	content: "";
    position: absolute;
    z-index: 999;
    height: 100%;
    background-color: #fff;
    top: 0;
}
.img-hex-border .mark-hex:after{
	content: "";
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 10px;
    background-color: #fff;
    bottom: -10px;
    left: 0px;
}


/* carousel-project */
.carousel-project{
	padding: 0px 60px;
}
.carousel-project .carousel-control{
	width: 40px;
}

.carousel-project .carousel-control.left{
	background: transparent;
	left: -5px;
}
.carousel-project .carousel-control.right{
	background: transparent;
	left: auto;
	right: -5px;
}


/* carousel-control-circle */
.carousel-control-circle{
	width:10%;
	background-image: none!important;
	filter: none !important;
}
.carousel-control-circle > .glyphicon{
	width: 70px;
	height: 70px;
	font-size: 0px;
	top: 47%;
	background: url("img/arrow-control.png") no-repeat;
}
.carousel-control-circle > .glyphicon-chevron-left{ background-position: top left; }
.carousel-control-circle:hover > .glyphicon-chevron-left,
.carousel-control-circle:active > .glyphicon-chevron-left,
.carousel-control-circle:focus > .glyphicon-chevron-left{
	background-position: bottom left; 
}

.carousel-control-circle > .glyphicon-chevron-right{ background-position: top right; }
.carousel-control-circle:hover > .glyphicon-chevron-right,
.carousel-control-circle:active > .glyphicon-chevron-right,
.carousel-control-circle:focus > .glyphicon-chevron-right{
	background-position: bottom right; 
}

/* carousel-control-circle-2 */
.carousel-control-circle.circle-styled-product > .glyphicon{
	width: 70px;
	height: 70px;
	font-size: 0px;
/* 	top: 45%; */
	background: url("img/arrow-control.png") no-repeat;
}
.carousel-control-circle.circle-styled-product > .glyphicon-chevron-left{ background-position: top left; }
.carousel-control-circle.circle-styled-product:hover > .glyphicon-chevron-left,
.carousel-control-circle.circle-styled-product:active > .glyphicon-chevron-left,
.carousel-control-circle.circle-styled-product:focus > .glyphicon-chevron-left{
	background-position: bottom left;
}

.carousel-control-circle.circle-styled-product > .glyphicon-chevron-right{ background-position: top right; }
.carousel-control-circle.circle-styled-product:hover > .glyphicon-chevron-right,
.carousel-control-circle.circle-styled-product:active > .glyphicon-chevron-right,
.carousel-control-circle.circle-styled-product:focus > .glyphicon-chevron-right{
	background-position: bottom right;
}
.carousel-control-circle.circle-styled-2 > .glyphicon{
	width: 70px;
	height: 70px;
	font-size: 0px;
/* 	top: 45%; */
	background: url("img/arrow-control.png") no-repeat;
}
.carousel-control-circle.circle-styled-2 > .glyphicon-chevron-left{ background-position: top left; }
.carousel-control-circle.circle-styled-2:hover > .glyphicon-chevron-left,
.carousel-control-circle.circle-styled-2:active > .glyphicon-chevron-left,
.carousel-control-circle.circle-styled-2:focus > .glyphicon-chevron-left{
	background-position: bottom left;
}

.carousel-control-circle.circle-styled-2 > .glyphicon-chevron-right{ background-position: top right; }
.carousel-control-circle.circle-styled-2:hover > .glyphicon-chevron-right,
.carousel-control-circle.circle-styled-2:active > .glyphicon-chevron-right,
.carousel-control-circle.circle-styled-2:focus > .glyphicon-chevron-right{
	background-position: bottom right;
}

.carousel-control-inner{
	left: 0px;
	right: 0px;
	z-index: 999;
/* 	width: 10%; */
}

.carousel-control-circle.circle-styled-2.left{
	left: -70px;
/* 	width: 10%; */
}
.carousel-control-circle.circle-styled-2.right{
	right: -70px;
/* 	width: 10%; */
}

/* one-page */
.one-page{
/* 	min-height: 100vh; */
	padding-top: 55px;
	padding-bottom: 70px;
}
.single .one-page{
	padding-top: 60px;
	padding-bottom: 60px;
}

.single .project-page{
	padding-top: 0px;
	padding-bottom: 0px;
}

/* contact-social */
.contact-social>li{
	min-height: 60px;
	line-height: 50px;
	min-width: 50px;
	text-align: center;
}
.contact-social img{
	width: 80%;
	-webkit-transition: all .2s ease-out; /* Safari */
    transition: all .2s ease-out;
}
.contact-social img:hover,
.contact-social img:active,
.contact-social img:focus{
	width: 100%;
}

/* contact-form */
.contact-form .form-control{
	text-align: center !important;
	min-height: 45px;
	border:1px solid #959595;
	box-shadow: 0 1px 2px #d5d5d5;
	font-style: italic;
	font-size: 18px;
}


/* tablist-border */
.tablist-border .nav-tabs li{
	white-space: nowrap;
	overflow: hidden;
	font-size: 17px;
	font-weight: bold;
}
.tablist-border .nav-tabs li > a{
	color: #5b602a;
	border-color: #e0e0e0;
	-webkit-transition: all .1s ease-out; /* Safari */
    transition: all .1s ease-out;
}
.tablist-border .nav-tabs li.active > a,
.tablist-border .nav-tabs li:active > a,
.tablist-border .nav-tabs li:hover > a,
.tablist-border .nav-tabs li:focus > a{
	background: #bbce00;
	color: #fff;
}
.tablist-border .tab-content{
	border: 1px solid #e0e0e0;
	border-top: 0px;
	border-radius: 4px;
}

/* title-project */
.title-project{
	padding-left: 15px;
	padding-right: 60px;
}

/* add-tm */
.add-tm{
	display: inline-block;
	position: relative;
	padding-right: 5px;
}
.add-tm:after{
	content: "TM";
	position: absolute;
	right: -10px;
	top: -5px;
	font-size: 35%;
}
.add-tm-x{
	display: inline-block;
	position: relative;
	padding-right: 5px;
}
.add-tm-x:after{
	content: "TM";
	position: absolute;
	right: -10px;
	top: -5px;
	font-size: 55%;
}

/* related-link */
.related-link{
/* 	font-size: 80%; */
	font-weight: bold;
}
.related-link .add-tm{
	padding-right: 0px;
}


/* style sheet for text editor */
.text-editor img{
	max-width: 100%;
}

.navbar-toggle{
	float: left;
	margin-left: 15px;
}


/* product cover */
.product-cover{
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center center;
	max-width: 228px;
	width: 100%;
}



/* Media-control
========================== */



.top{
	position: fixed; 
	display: none;}
.top-detail{
	position: absolute; 
	display: none;}
	
.push{margin-bottom: 30px}

.project-hr {
    height: 0;
    margin-top: 0;
    margin-bottom: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.footer-img {
	height: 24px;
	width: auto;
}
.footer-img-ul {
	float : right;
}


.img-wrapper {
  position: relative;
 }
 
.img-overlay {
  position: absolute;
  bottom: 10px;
  left: 10px;
  visibility:hidden;
}

.img-overlay-add {
  position: absolute;
  top:0;
  right:0;
  visibility:hidden;
  text-align: center;
}

a:hover .img-overlay{
	visibility:visible;
}

.img-wrapper:hover .img-overlay-add{
	visibility:visible;
}


.img-overlay-blog {
  bottom: 0;
  left: 0;
  text-align: center;
}

.img-wrapper:hover .img-overlay-blog{
	font-size: 26px;
}


.img-overlay:before {
  content: ' ';
  display: block;
  /* adjust 'height' to position overlay content vertically */
  height: 50%;
}

.img-overlay-add:before {
  content: ' ';
  display: block;
  /* adjust 'height' to position overlay content vertically */
  height: 50%;
}
.bg-side-blog {
	background-color: #bbce00;
	padding-bottom: 2%;
}
.bg-b-side-blog{
	background-color: #F1FA94;
	padding-bottom: 2%;
}
.mao-card {
	background-color: black; 
	color: white;
	display:inline-block;
	width:100%;
	white-space: nowrap;
	overflow:hidden !important;
	text-overflow: ellipsis;
}

.gd-thum-2:hover {
    height: 70px;
    width: 95.2%;
    font-size: 22px;
}

.gd-thum-2 {
	font-family : 'kitithada-SemiBold','ThaiSansNeue','Lato','Helvetica Neue', Helvetica, sans-serif;
    white-space: normal;
    overflow:hidden !important;
    text-overflow: ellipsis;
    
    display: block;
    padding: 0.2em 1em;
    margin: 5px 0px 0px 6px;
	background-color: rgba(0, 0, 0, 0.45);
/* 	color: #bbce00; */
	color:white;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 95.2%;
    height: 40px;
    line-height: 1.6em;
    transition: height 0.2s;
}

.mao-card:hover {
	white-space: normal;
	overflow:visible;
}

.mao-wrap-text {
	display:inline-block;
    width:200px;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}

.mao-wrap-text-blog {
	display:inline-block;
    width:100%;
    white-space: normal;
    overflow:hidden !important;
    text-overflow: ellipsis;
    font-size: 20px;
    line-height: 90%;
}

.mao-wrap-blog {
	text-align: justify;
	display:inline-block;
    width:100%;
    white-space: normal;
    overflow:hidden !important;
    text-overflow: ellipsis; font-size: 17px;
}
a{
	color: #576128;
}
a:hover {
	color: #bbce00;
}
.project-hover a:hover{
    background:#A5A5A5  !important;
}

.project-left-hover a:hover{
    background:#ffffff!important;
}

.carousel-inner { margin: auto; width: 97%; }
.carousel-control{ width:  4%; top:30%;}
.carousel-control.left,
.carousel-control.right {
  background-image:none;
}
 
.glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
  margin-top:-10px;
  margin-left: -10px;
  color: #444;
}

a .carousel-inner {

    display:table-cell;
    height: 180px;
    width: 200px;
    vertical-align: middle;
  }
 img  .carousel-inner{
    max-height: 150px;
    margin: auto auto;
    max-width: 100%;
  }


/* ul::-webkit-scrollbar { */
/*     width: 0.5em; */
/* } */
 
/* ul::-webkit-scrollbar-track { */
/*     -webkit-box-shadow: inset 0 0 0px 8px rgba(0,0,0,0.6); */
/* } */
 
/* ul::-webkit-scrollbar-thumb { */
/*   background-color: #959595; */
/*   outline: 1px solid aqua; */
/* } */

/* ul::-webkit-scrollbar { */
/*       width: 15px; */
/* } */

/* ul::-webkit-scrollbar-track { */
/*       background-color: #b46868; */
/* }  */
/* ul::-webkit-scrollbar-thumb { */
/*       background-color: rgba(0, 0, 0, 0.2); */
/* }  */
/* ul::-webkit-scrollbar-button { */
/*       background-color: #7c2929; */
/* }  */
/* ul::-webkit-scrollbar-corner { */
/*       background-color: black; */
/* }  */


.body {
    display: table;
}

.left-side {
    float: none;
    display: table-cell;
}
.center-side {
    float: none;
    display: table-cell;
}
.right-side {
    float: none;
    display: table-cell;
}

.modal-dialog {
    width: 92% !important;
    text-align: -webkit-center;
}

.modal-content{
    width: 781px;
    height: 512px;
/*     top: -1%; */
/*     left: -16%; */
/* 	right: 21%; */
/* 	bottom: 15%; */
}
.image-curve{
	border-radius: 20px;
}
.fb-share-position{
	padding-top: 10px;
	padding-right: 10px;
}
.blog-image-width{
/* 	width: 221.22px; */
	padding-top: 5px;
	padding-left:15px;
	padding-right:15px;
}
.home-grid-image{
	padding-left: 0px;
	padding-right: 0px;
}

.modal-open .modal {
    overflow-y: hidden;
}
.project-remove-padding{
	padding-left: 0px;
	padding-right: 0px;
}
.center-div{
	margin:auto;
	display:block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.shop-width{
	padding-left: 15%;
	padding-right: 15%;
}
.shop-no-padd{
	padding-left: 0px;
	padding-right: 0px;
}
.image-width-auto{
	width: auto;
}
.tag{
	font-family : 'Lato','Helvetica Neue', Helvetica, sans-serif;
	background-color: #252525;
	color: white;
	white-space:nowrap;
	min-width: 50px; font-size: 16px; padding: 2px 5px 5px 5px;
}
.tag:hover {
	color:#bbce00;
	background-color: white;
}

.tag-header{
	font-family : 'Lato','Helvetica Neue', Helvetica, sans-serif;
	background-color: #60662C;
	color: white;
	min-width: 50px; font-size: 16px; padding: 2px 5px 5px 5px;
}
.tag-header:hover {
	color:white;
	background-color: #646464;
}

.next-prev{ color: #5b602a !important; width: 100%;}
.next-prev:hover{ color: gray !important;}

.next-prev-text{
	display: inline-block;
	height: 100%;
}
.next-prev-row{
	height:50px; border-style: solid; border-width: 4px;
	border-color:#ebebeb;
	text-align: center;
}
.next-prev-text-right{
	padding: 4px 0px 0px 0px;
}
.next-prev-text-left{
	padding: 4px 0px 0px 0px;
}
.blog-writer-img{
	vertical-align: baseline;
	height: auto; width: 33px; padding-bottom: 2px;
}
.blog-writer-name{
	color:#363636; display: inline-block;
	vertical-align:super;
	line-height: 90%;
}
.blog-grid-padding{
/* 	padding-left: 10%; */
/* 	padding-right: 10%; */
}




#wrapper {
	width: 80%;
/* 	max-width: 1100px; */
/* 	min-width: 800px; */
	margin: 50px auto;
}


.pin {
	display: inline-block;
/* 	background: #FEFEFE; */
/* 	border: 2px solid #FAFAFA; */
/* 	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); */
	margin: 0 0px 15px;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
/* 	padding: 15px; */
/* 	padding-bottom: 5px; */
/* 	background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9); */
/* 	opacity: 1; */
	
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}

/* .pin img { */
/* 	width: 100%; */
/* 	border-bottom: 1px solid #ccc; */
/* 	padding-bottom: 15px; */
/* 	margin-bottom: 5px; */
/* } */

/* .pin p { */
/* 	font: 12px/18px Arial, sans-serif; */
/* 	color: #333; */
/* 	margin: 0; */
/* } */


.body {
    display: table;
    height: 100%;
}

.side {
    float: unset;
    display: table-cell;
    vertical-align: top;
    height: 100%;
}

.project-slide-margin{
	margin-left: 0px;
	margin-right: 0px;
}

.project-slide-padding{
	width:274px;
	padding-left: 0px;
	padding-right: 0px;
}

.project-height{
	width: auto;
}
.project-mobile-height{
	width: auto;
}

.project-left-img{
	max-height:172px; max-width: 258px;height: 100%;
}
.project-left-mobile-img{
	max-height:172px; max-width: 258px;height: 100%;
}


.change-color{
	
}
.change-color:hover{
	background-color: #e9cba3;
}

.product-tab-padding{
	padding-left: 5%;
	padding-right: 5%;
}

input::-webkit-input-placeholder {
    font-size: 25px;
    line-height: 3;
}

.category-style{
	font-size: 66px; color:#576128;
	font-family : 'kitithada-SemiBold','ThaiSansNeue','Lato','Helvetica Neue', Helvetica, sans-serif; 
	margin-left: 10%; margin-top: 20px; margin-bottom: 30px;
}
.category-line-top{
	border-top: 4px solid #576128; margin-bottom: 0px; margin-top: 40px;
}
.category-line-bot{
	border-top: 2px solid #96b310;
}
.category-span-vertical-line{
	font-family : 'ThaiSansNeue','Lato','Helvetica Neue', Helvetica, sans-serif; 
	font-size: 76px; color:#576128;
}
.category-span{
	font-family : 'ThaiSansNeue','Lato','Helvetica Neue', Helvetica, sans-serif; 
	color: #d59833; font-size: 44px;
	vertical-align: bottom;
}

.blog-wrap-text {
	display:inline-block;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}
.project-left-product{
	width: auto;
	height: auto; 
	cursor: pointer
}
.project-text-modal{
	min-height: 45px; 
	padding-left:70px; 
	padding-right:70px; 
	color: white; 
	font-size: 26px;
}
.project-modal-body{
	padding-left: 50px; 
	padding-right: 50px;
}
.project-modal-content{
	background-repeat: no-repeat; 
	background-size:781px 512px; 
	background-color: transparent; 
	background-position:center;
	border-color: white;
}
.project-text-modal-start{
	text-align: start; 
}
.project-text-modal-end{
	text-align: end; 
}
.project-text-modal-center{
	text-align: center; 
}
.project-left-a{
	border-color: gray; 
	border-style: solid; 
	border-width: 1px; 
	border-radius: 8px; 
	text-align: left;
}
.project-left-selected{
	background-color: #fefff0; 
}
.project-left-link{
	display:inline-block;
    width:90%;
    height: 37px;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis; font-size: 19px;
    vertical-align: middle;
}
.project-left-link-empty{
	display:inline-block;
    width:90%;
    height: 37px;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis; font-size: 19px;
    vertical-align: middle;
}
.about-padding{
	width: 80%; 
	margin: 0 0 100px 11%;
}
.about-slogan-padding{
	padding-top: 10px;
    padding-bottom: 40px;
}
.product-title-fsize{
	font-size: 90%;
}

.project-place-title{
	margin-bottom: 10px; 
	font-size: 34px;
}

.modal-text-margin{
	margin:0 0 0;
}

.hr-mobile{
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 4px solid #bbce00;
}
.top-social-mobile{
	display: table;
}
.blog-rec-relate-mobile{
	border: 2px solid #676d36;
	margin-bottom: 10px;
}
.blog-font-rec-relate-mobile {
    font-size: 43px;
    color: #676d36;
    margin-top: 19px;
    font-weight: 600;
    margin-bottom: 14px;
    font-family: 'kitithada-ExtraLight','ThaiSansNeue','Lato','Helvetica Neue', Helvetica, sans-serif;
}
}
.tag-radius{
    border-radius: 4px;
}
.padding-social-mobile{
}
#columns-rec {
    column-count: 2;
}
#columns-relate {
    column-count: 2;
}

.prev-mobile-nav{
    overflow: hidden !important;
    text-overflow: ellipsis;
    margin-left: -2px;
    margin-right: 5px;
    width: 69%;
}
.fb-share-pad{
	padding-left: 56%;
}

.blog-img-blank{
	margin: auto;
	width: 90%;
}



.mobile-logo-style{
	margin-top: 6px !important;
    margin-left: 220px !important;
    max-width: 150px !important;
    width: 150px !important;
}

.title-project-mobile {
    /* padding-left: 15px; */
    /* padding-right: 60px; */
    text-align: center;
}

.project-detail-popup{
	padding-left: 50px; padding-right: 50px
}

.clickable {
    cursor: pointer;
}

.form-control-ios{
	padding: 10px 10px 40px 10px;
	line-height: 46px;
	width: 100%;
}