/* COLOUR & FONTS */
:root {
  --ctp-green: #5abeb6;
  --ctp-darkgreen: #339a97;
}

/**** FONT FAMILY ****/
@font-face {
	font-family:"ThaiSans Neue";
	src: url('../font/ThaiSansNeue-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
	font-family:"ThaiSans Neue";
	src: url('../font/ThaiSansNeue-UltraLight.ttf') format('truetype');
  font-weight: lighter;
  font-style: normal;
}
@font-face {
	font-family:"ThaiSans Neue";
	src: url('../font/ThaiSansNeue-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
.font-ThaiSans{
	font-family: "ThaiSans Neue";
}

/**** FONT STYLE ****/
.font-60{ font-size: 60px ; }
.font-50{ font-size: 50px ; }
.font-40{ font-size: 40px ; }
.font-38{ font-size: 38px ; }
.font-36{ font-size: 36px ; }
.font-34{ font-size: 34px ; }
.font-32{ font-size: 32px ; }
.font-30{ font-size: 30px ; }
.font-28{ font-size: 28px ; }
.font-26{ font-size: 26px ; }
.font-24{ font-size: 24px ; }
.font-22{ font-size: 22px ; }
.font-20{ font-size: 20px ; }
.font-18{ font-size: 18px ; }
.font-16{ font-size: 16px ; }
.font-14{ font-size: 14px ; }
.font-12{ font-size: 12px ; }
.font-10{ font-size: 10px ; }

.font-150rem{ font-size: 1.50rem; }
.font-175rem{ font-size: 1.75rem; }
.font-200rem{ font-size: 2rem; }

.font-bold{ font-weight: bold; }
.font-wide{ letter-spacing: 0.1em; }


/**** LINE HEIGHT ****/
.lineheight80{ line-height:80px; }
.lineheight70{ line-height:70px; }
.lineheight60{ line-height:60px; }
.lineheight50{ line-height:50px; }
.lineheight45{ line-height:45px; }
.lineheight40{ line-height:40px; }
.lineheight35{ line-height:35px; }
.lineheight30{ line-height:30px; }
.lineheight25{ line-height:25px; }
.lineheight20{ line-height:20px; }
.lineheight15{ line-height:15px; }
.lineheight10{ line-height:10px; }
.lineheight5{	line-height:5px; }


/**** LETTER SPACE ****/
.letter-space16{ letter-spacing: 0.05em !important; }
.letter-space2{ letter-spacing: 2px !important; }
.letter-space4{ letter-spacing: 4px !important; }
.letter-space5{ letter-spacing: 5px !important; }
.letter-space6{ letter-spacing: 6px !important; }


/**** FONT COLOUR ****/
.red{ color:red; }
.darkred{ color:darkred; }
.black{ color:black; }
.white{ color:white; }
.grey{ color:#656565; }
.darkgrey{ color:#404449; }
.lightgrey{ color:silver; }
.ctp-green{ color:var(--ctp-green); }
.ctp-darkgreen{ color:var(--ctp-darkgreen); }


/**** BACKGROUND COLOUR ****/
.bg-red { background-color:red; }
.bg-darkred { background-color:darkred; }
.bg-black { background-color:black; }
.bg-white { background-color:white; }
.bg-grey { background-color:#656565; }
.bg-darkgrey { background-color:#404449; }
.bg-lightgrey { background-color:silver; }
.bg-ctp-green { background-color:var(--ctp-green);  }

/**** LINK COLOUR ****/
.link-red a { color:red; }
.link-darkred a { color:darkred; }
.link-black a { color:black; }
.link-white a { color:white; }
.link-grey a { color:#656565; }
.link-darkgrey a { color:#404449; }
.link-lightgrey a { color:silver; }
.link-ctp-green a { color:var(--ctp-green); }


/**** LINK HOVER STYLE ****/
.link-hover-none a:hover,
.link-hover-none a:focus { text-decoration:none; }
.link-hover-bold a:hover,
.link-hover-bold a:focus { font-weight:bold; }

.link-hover-red a:hover,
.link-hover-red a:focus { color:red; }
.link-hover-darkred a:hover,
.link-hover-darkred a:focus { color:darkred; }
.link-hover-black a:hover,
.link-hover-black a:focus { color:black; }
.link-hover-white a:hover,
.link-hover-white a:focus { color:white; }
.link-hover-grey a:hover,
.link-hover-grey a:focus { color:#656565; }
.link-hover-darkgrey a:hover,
.link-hover-darkgrey a:focus { color:#404449; }
.link-hover-lightrey a:hover,
.link-hover-lightgrey a:focus { color:silver; }
.link-hover-ctp-green a:hover,
.link-hover-ctp-green a:focus { color:var(--ctp-green); }

.hover-none:hover,
.hover-none:focus{ text-decoration:none; }
.hover-bold:hover,
.hover-bold:focus{ font-weight:bold; }
.link-hover-none a:hover,
.link-hover-none a:focus { font-weight:bold; }
.link-hover-bold a:hover,
.link-hover-bolf a:focus { font-weight:bold; }

.hover-red:hover,
.hover-red:focus{ color:red; }
.hover-darkred:hover,
.hover-darkred:focus{ color:darkred; }
.hover-white:hover,
.hover-white:focus{ color:white; }
.hover-black:hover,
.hover-black:focus{ color:black; }
.hover-grey:hover,
.hover-grey:focus{ color:#656565; }
.hover-darkgrey:hover,
.hover-darkgrey:focus{ color:#404449; }
.hover-lightgrey:hover,
.hover-lightgrey:focus{ color:silver; }
.hover-ctp-green:hover,
.hover-ctp-green:focus{ color:var(--ctp-green); }

.hover-border-red:hover,
.hover-border-red:focus{ border:1px solid red !important; }
.hover-border-darkred:hover,
.hover-border-darkred:focus{ border:1px solid darkred !important; }
.hover-border-white:hover,
.hover-border-white:focus{ border:1px solid white !important; }
.hover-border-black:hover,
.hover-border-black:focus{ border:1px solid black !important; }
.hover-border-grey:hover,
.hover-border-grey:focus{ border:1px solid #656565 !important; }
.hover-border-darkgrey:hover,
.hover-border-darkgrey:focus{ border:1px solid #404449 !important; }
.hover-border-lightgrey:hover,
.hover-border-lightgrey:focus{ border:1px solid silver !important; }

.hover-bg-red:hover,
.hover-bg-red:focus{ background-color:red !important; }
.hover-bg-darkred:hover,
.hover-bg-darkred:focus{ background-color:darkred !important; }
.hover-bg-white:hover,
.hover-bg-white:focus{ 	background-color:white !important; }
.hover-bg-black:hover,
.hover-bg-black:focus{ 	background-color:black !important; }
.hover-bg-grey:hover,
.hover-bg-grey:focus{ 	background-color:#656565 !important; }
.hover-bg-darkgrey:hover,
.hover-bg-darkgrey:focus{ 	background-color:#404449 !important; }
.hover-bg-lightgrey:hover,
.hover-bg-lightgrey:focus{ 	background-color:silver !important; }
.hover-bg-ctp-green:hover,
.hover-bg-ctp-green:focus{ background-color:var(--ctp-green) !important; }


/**** BREAK LINE ****/
.hr-red{ border-top: 1px solid red; }
.hr-darkred{ border-top: 1px solid darkred; }
.hr-white{ border-top: 1px solid white; }
.hr-black{ border-top: 1px solid black; }
.hr-grey{ border-top: 1px solid #656565; }
.hr-darkgrey{ border-top: 1px solid #404449; }
.hr-lightgrey{ border-top: 1px solid silver; }

/**** TEXT ALIGNMENT ****/
.text-justify{
	text-align:justify!important;
	text-justify: inter-word;
}
.center-justify{
  text-align: justify;
  text-justify: inter-character;
  text-align-last: center;
}
.text-centered{
  text-align: center;
  text-align-last: center;
}
tab{
  display: inline-flex;
  margin-left: 40px;
}


/**** OBJECT ALIGNMENT ****/
.center-item {
	display: -webkit-box;      
  display: -moz-box;         
  display: -ms-flexbox;      
  display: -webkit-flex;    
  display: flex;             
  justify-content: center;
  align-items: center;
}
.center-Y-item{
	display: -webkit-box;      
  display: -moz-box;         
  display: -ms-flexbox;      
  display: -webkit-flex;    
  display: flex; 
	flex-direction:column;
	justify-content:center;
}
.center-Y-item-row{
  display: -webkit-box;      
  display: -moz-box;         
  display: -ms-flexbox;      
  display: -webkit-flex;    
  display: flex; 
	flex-direction:row;
	justify-content:center;
}
.bottom-item{
	position:absolute;
	bottom:0;
}
.bottom-Y-item{
	position:absolute;
	bottom:0;
	right:20px;
}
.center {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.flex-break {
  flex-basis: 100%;
  height: 0;
}

/**** PADDING ****/
.padding-left10{ padding-left:10px !important; }
.padding-left20{ padding-left:20px !important; }
.padding-left30{ padding-left:30px !important; }
.padding-right10{ padding-right:10px !important; }
.padding-right20{ padding-right:20px !important; }
.padding-right30{ padding-right:30px !important; }
.padding-0{ padding:0; }
.margin-0{ margin:0; }


/**** BULLETS ****/
.ulnone{ padding-left: 15px; }
.ulsmall{ list-style: none; }
.ulsmall li:before{
	content: "\2022";
	color: grey;
	font-size:18px;
	font-weight:lighter;
	display: inline-block; 
	width: 1em;
	margin-left: -1em;
}
.uldat{ list-style: none; }
.uldat li:before{
	content: "-";
	color: grey;
	font-size:18px;
	font-weight:lighter;
	display: inline-block; 
	width: 1em;
	margin-left: -1em;
}


/**** ADDITION ****/
.boxshadow{ box-shadow: 5px 5px 10px rgba(0,0,0,0.5); }
.boxshadow-small{ box-shadow: 1px 1px 5px rgba(0,0,0,0.2); }
.textshadow{ text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);}
.button-radius{
  padding: 10px 5px 10px 5px; 
  width: 200px;
  border-radius: 25px;
}
.page{
  padding: 5px;
}
.bg-about-us{
  background-image: url("../img/index-bg-about-us.png");
  background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.cursor-pointer{ 	cursor:pointer; }
.bordered{ border: solid 1px; }
.container-fit{ display: inline-flex; }

/**** EFFECT ****/
/* CUSTOM SCROLLBAR */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; } /* Track */
::-webkit-scrollbar-thumb { background: #888; } /* Handle */
::-webkit-scrollbar-thumb:hover { background: #555; } /* Handle on hover */

/* INPUT */
.input-trans{
	background-color:rgba(0, 0, 0, 0);
	border: none;
	margin: 0 5px 0 5px;
	outline: none;
}
.input-trans:focus{
  border: none;
  outline: none;
}

.input-label{ display: none; }
input::placeholder, textarea::placeholder,
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder
{ 
  color: black; 
}
input:focus::placeholder, textarea:focus::placeholder,
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder
{ 
  color: white;
}
.input-container input:focus + .input-label,
.input-container input:not(:placeholder-shown) + .input-label,
.input-container textarea:focus + .input-label,
.input-container textarea:not(:placeholder-shown) + .input-label{
  display: block;
  position: absolute;
  left: 25px;
  font-size: 10px;
  font-weight: bold;
  transition: 0.2s ease;
}
.input-container input:focus + .input-label,
.input-container input:not(:placeholder-shown) + .input-label{ top: 1px; }
.input-container textarea:focus + .input-label,
.input-container textarea:not(:placeholder-shown) + .input-label{ top: 5px; }

/* Image Effect */
.img-container{ position: relative; }
.img-hover{
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}
.img-container:hover .img-hover{ display: inline-block; }
.img-container:hover .img-unhover{ display: none; }
.img-container:not(:hover) .img-unhover{ display: inline-block; }
.backtotop-hover{
  display: none;
}
.img-container:hover .backtotop-hover{ display: inline-block; }

/**** WEB SETTING ****/
a{ 
  color: black;
  text-decoration:none; 
}
a:hover{ 
  color: var(--ctp-green);
  text-decoration:none; 
}

nav{ 
  max-height: 80px;
  position: fixed;
  top: 0;
  left:0;
  margin-bottom: calc(50vh - 90px);
  z-index: 999;
}
.border-contact-us{ border: solid 2px var(--ctp-darkgreen);} 
.nav-menu:hover{
  background-image: url("../img/index-bg-about-us.png");
  background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  font-weight: normal!important;
}
.nav-menu a:hover{ font-weight: normal!important; }
#nav-services-sub {
  position: absolute;
  top: 55px;
  width: 200px;
  visibility: hidden;
  transition: 0.2s -ease;
}
#nav-services-sub .nav-menu{ height: 65px; }
#nav-service-header{
  background-image: url("../img/index-bg-about-us.png");
  background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#nav-services:hover + #nav-services-sub,
#nav-services:focus + #nav-services-sub,
#nav-services-sub:hover, 
#nav-services-sub:focus{
  visibility: visible;
}

#navmenu-sm{
  position: fixed;
  z-index: 999;
  left:0;
  top:-100vh;
  transition: 0.2s ease;
  opacity: 0;
}
#TFH-menu + #navmenu-sm{
  opacity: 0;
}
#nav-submenu-services{
  display: none;
  transition: 0.5s ease;
}
.col-nav{ max-width:120px; }

#main-font{ font-size: 40px; }
#company-font{ font-size: 32px; }
@media(max-width:767px){
  #main-font{ 
    font-size: 34px; 
    line-height: 50px;
  }
  #company-font{ font-size: 28px; }
}
@media(max-width:575px){
  #company-font{ font-size: 24px; }
}

[class^="icon-hover-"]{
  display: none;
}

#footer, #footer-sm{
  background-image: url("../img/footer-bg.png");
  background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  min-height: 400px;
}

#backtotop{
  position: fixed;
  bottom: 0px;
  right: 20px;
  z-index: 998;
}