@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Kanit:300');
body{background:#fff ; color:#666; }
body img{ height:auto; max-width:100%;}
.clear {clear: both;}
.h1, .h2, .h3, h1, h2, h3{ margin:0px;font-family: 'Kanit', sans-serif;}
a:link, a:visited, a:active{ color: #222;text-decoration: none;}
a:hover {color: #39b54a;text-decoration: none;}
p { margin:0px; }

#head-slide{ }

.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%; }
.f-nav #menu{ background:#f26f21;box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,.26); }
.f-nav #menu-module{ padding-top:5px;}
.f-nav #logo2{ display: block;}
.f-nav #lang2{ display: block; padding-top:15px;}


/*** top **/
#top { background:#f3f3f3; color:#333;padding-top:7px; padding-bottom:7px;font-family: 'Kanit', sans-serif; font-size:14px; position:relative; z-index:5; border-top:5px solid #00a950;}

/*** head-top ***/
#head-top{ background:#fff; color:#333;}
#head-top a:link, #head-top a:visited, #head-top a:active{ color: #f26f21;text-decoration: none;}
#head-top a:hover {color: #39b54a;text-decoration: none;}
#logo{ padding-top:10px;}
#head-top-body{background:#fff url(../images/head-img.jpg) no-repeat left;}
#service{ font-family: 'Kanit', sans-serif; padding-left:0px;   }
#service .titleck{ font-size:1.8em;}

/*** menu ***/
#menu{   padding-bottom:5px; background: #f26f21;/** rgba(1, 1, 1, 0.4)**/ }
#logo2{ display:none;}
#lang2{display:none;}
#menu-body{padding-top:5px;}

/*** slide ***/

#slide{ padding:0px; overflow:hidden !important;  z-index:1; clear:both; }
#slide h3{  display: inline-block;font-family: 'Kanit', sans-serif;
    visibility: inherit;
    opacity: 1;
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform-origin: 50% 50% 0px;text-shadow: black 0.1em 0.1em 0.3em;}
#fav-caption.favstyle-bg-transparent p{font-family: 'Kanit', sans-serif; text-shadow: black 0.1em 0.1em 0.3em;}
@media screen and (max-width: 1920px) {
#slide h3 { font-size:4em; letter-spacing: 1px; color:#fff;}
.favdescription{ font-size:25px;}
}
@media screen and (max-width: 1600px) {
#slide h3 { font-size:3em; letter-spacing: 3px;}
.favdescription{ font-size:20px;}
}
@media screen and (max-width: 1400px) {
#slide h3 { font-size:2em; font-weight:bold;letter-spacing: 3px;}
.favdescription{ font-size:18px;}
}
@media screen and (max-width: 1200px) {
#slide h3 { font-size:25px; font-weight:bold;letter-spacing: 3px;}
.favdescription{ font-size:14px;}
}
@media screen and (max-width: 1024px) {
#slide h3 { font-size:25px; font-weight:bold;letter-spacing: 3px;}
.favdescription{ font-size:14px;}
}
@media screen and (max-width: 768px) {
#slide h3 { font-size:20px; font-weight:bold;letter-spacing: 3px;}
.favdescription{font-size:12px; }
}
#fav-caption.favstyle-bg-transparent h3{ color:#fff;font-family: 'Kanit', sans-serif;}
.favreadmore { border:1px solid #ac2018; background:#e22319; font-size:1.5em !important; text-transform:uppercase;font-family: 'Kanit', sans-serif; margin-top:10px; letter-spacing:0.5px;}
.fav-control-nav{bottom: 40px;}
.fav-control-paging li a:hover, .fav-control-paging li a:focus, .fav-control-paging li a.fav-active{ background:#f26f21 !important;}
.fav-control-paging li a{ background:#000 !important;}
.favslider{ margin:0px; }
#fav-caption.favstyle-default{ padding-left:4%;}

/*** intro***/
#intro{background:#fff url(../images/intro-bg.jpg) no-repeat center top fixed;padding-top:5%; padding-bottom:5%; color:#fff;overflow:hidden;}

/*** service-info ***/
#service-info{ background:#f6f6f6; padding-top:5%; padding-bottom:5%;overflow:hidden;}
#service-info a:link, #service-info a:visited, #service-info a:active{ color: #fff;text-decoration: none; background:#f26f21; padding:10px 15px; box-shadow:4px 4px 0 1px rgba(0,0,0,0.2);  }
#service-info a:hover {color: #fff;text-decoration: none; background:#00a950;}
#service-info h2 {text-align:center; font-size:3em; color:#f26f21;}
#service-info h3{ padding-bottom:10px;}
#service-info h4{color:#2da33d;font-family: 'Kanit', sans-serif; padding-bottom:20px;}
#service-info img{ padding-top:10px; padding-bottom:10px; }

/*** certified ***/
#certified{ padding-top:5%; padding-bottom:5%; background:#fff url(../images/bg1.png) no-repeat center top;overflow:hidden;}
#certified h2{padding-bottom:20px; color:#f26f21;}
#certified h3{padding-bottom:20px;}

/*** customer ***/
#customer{background:#f6f6f6; padding-top:5%; padding-bottom:5%;}

/*** contact ***/
#contact{ padding:0px;}

/*** footer ***/
#footer{ background:#231f20; color:#fff;font-family: 'Kanit', sans-serif; padding-bottom:5%; padding-top:3%;}
#footer h3{ color:#f26f21; font-size:18px;font-family: 'Kanit', sans-serif; padding-top:10px;}

#footer a:link, #footer a:visited, #footer a:active{ color: #fff;text-decoration: none;}
#footer a:hover {color: #39b54a;text-decoration: none;}


#copyright{ padding-top:5px; padding-bottom:5px; background:#f26f21; color:#fff;}







#component{ background:#fff; overflow:hidden;}

.blog h2{ height:35px; font-size:18px;}
.blog .btn{ background:#00a950; margin-top:20px !important;}
.blog .btn:link, .blog .btn:visited, .blog .btn:active{ color:#fff;}
.blog .btn:hover{color:#fff; background:#f26f21;}

.item-page img{ padding-bottom:20px;}
.item-page-home h2{ text-align:center; font-size:3em; color:#f26f21;}
.item-page-home h3{text-align:center; color:#2da33d; padding-bottom:20px;}

.item-page-home img{box-shadow:4px 4px 0 1px rgba(0,0,0,0.2)}



/***BLOG***/

.cols-1 {
	display: block;
	float: none !important;
	margin: 0 !important;
}

.cols-2 .column-1 {
	width:48%;
	float:left;
	
}

.cols-2 .column-2 {
	width:48%;
	float:right;
	margin:0;
}

.cols-3 .column-1 {
	float:left;
	width:32%;
	margin-right:1%;

}

.cols-3 .column-2 {
	float:left;
	width:32%;
	margin-right:1%;

}

.cols-3 .column-3 {
	float: left;
	width:32%;

}

.cols-4 .column-1 {
	width:22%;
	float:left;
	margin-right:3%;
}
.cols-4 .column-2 {
	width:22%;
	float:left;margin-right:3%;
}
.cols-4 .column-3 {
	width:22%;
	float:left;margin-right:3%;
}
.cols-4 .column-4 {
	width:24%;
	float:left;
}
.items-row {
	
	margin-bottom:10px !important;
}

.column-2 {
	width:55%;
	
}

.column-3 {
	 width:30%
}

.column-4 {
	 width:25%
}

.blog-more {
	padding:10px 5px
}


.blog .thumbnail{ margin-bottom:0px; border:none !important;}
.thumbnail{ padding:0px !important; margin:0px !important; border:none !important;}


/**********************
/*PAGINATION GENERAL
**********************/
.pagenav {
text-align: center; 
padding: 10px;
line-height: 2.1em; 
text-decoration: none;
border: 1px solid #dadada !important;
display: inline-block;
margin-left:5px;
}

.pagenav ul {
display: inline-block;
*display: inline;
list-style-type: none;
margin-left: 0;
margin-bottom: 0;
text-align: center;  
}

.pagenav li {
display: inline;
padding:  10px;
}

.pagenav a,span.pagenav {
padding: 20px;
}

.pagination {
float:none;
text-align:center;
width:100%;
margin-top:30px;
margin-bottom:40px;	
}

.pagination ul {
padding: 0;
text-align:center;
width:100%;
margin-bottom:40px;
}

.pagination li {
display: inline;
float:left; 


}

.pagination li a {
padding:5px 10px;
text-decoration: none;
display: inline-block;

}

.pagination .active  {
cursor: default;
 background:#252525; 
 font-weight:bold;
} 

.pagination span,.pagination span  a:hover {
cursor: default;
padding:5px 10px;
margin-left:5px;
 background:#262626; 
color:#fff;
font-weight:bold;
}

.pagination p.pull-right {
float: none;
text-align: center;
margin-bottom:15px;
}

ul.pager.pagenav  {
border:none !important;
text-align:center;
width:100%;
margin-bottom:25px;
}

 ul.pager.pagenav > li.next > a ,ul.pager.pagenav > li.previous > a {
background:#262626;
color:#fff !important;
margin:10px 12px 20px 0 ;

}
.pager li>a{ border-radius:0px !important; }
 
ul.pager.pagenav > li.next > a:hover ,ul.pager.pagenav > li.previous > a:hover {
border:none;
background:#262626;
color:#fff;
}

div.gk-article > ul.pager.pagenav ul li a:before {
content:"";
}

ul.pagination-list {
padding-bottom:40px;
}
 /*Button for print, editor and email icons */

ul.actions li {
float:left;
text-align:left;
margin:0;
padding:0 8px 0 0; 
list-style:none;
text-align:center;
list-style:none !important;
float:left;
}

li.print-icon a {
background: url(../images/system/printButton.png) 0 0 no-repeat;
text-indent:-5000px;
margin-left:10px;
width:15px;
float:left;
}

li.email-icon a {
background: url(../images/system/emailButton.png) 0 0 no-repeat;
text-indent:-5000px;
width:15px;
float:left;
}


/*   login   */
div.login-description {
font-size:14px;
color:#000;
font-weight:bold;
margin-left:15px;
margin-bottom:15px;
}

.login  {
margin-top:20px !important;
}
div.login fieldset {
margin:50px 0;
}

.login label  {
color:#000;
font-size:13px;
font-weight:bold;
text-transform:uppercase;
line-height:25px;
margin:0;
padding:0 10px;
width:100%;
text-align:left !important;

}

input  {
background:#fff;
font-size:14px;
font-weight: normal;

line-height:20px;
border:none;
padding:10px 10px;
margin:5px 0;
border:1px solid #d9d9d9;
width:95%;
}


 .login button {
background:#000;
color:#fff;
border:none;
padding:15px; 
margin:10px 0;
}

ul.nav.nav-tabs.nav-stacked  {
float:left;
padding-bottom:50px;
}

ul.nav.nav-tabs.nav-stacked > li  {

display:inline;
background:#f7f7f7 !important; 
}

ul.nav.nav-tabs.nav-stacked > li > a  {
padding:15px 15px;
} 

#remember.inputbox {
width:5%;
}

form#user-registration.form-validate.form-horizontal.well > fieldset {
margin:30px 0 20px 0;
}

form#user-registration.form-validate.form-horizontal.well > fieldset > p {
margin:10px 0;
padding:10px 5px;
}

 label#jform_email-lbl{
font-weight:bold;
}
 
input#jform_email {
margin:15px 0;
}

button.btn.btn-primary.validate {
margin-bottom:50px;
margin-top:0;
}
 
label#jform_spacer-lbl {
display:none !important;
}
 
.control-label {
margin:20px 0 0px 0;
}

.controls > a.btn {
background:#000;
margin-left:16px;
padding:14px;
color:#fff;
text-transform:uppercase;
}

fieldset > legend {
font-size:14px;
}

/*Print and E-mail popup window*/
body.contentpane {
background: none;
background-color: #fff;
padding: 22px;
}

body.contentpane div.pull-right a {
display: block;
padding: 0 0 10px 30px;	
}
	
div.mailto-close {
float: right;
}