@import url('fontello.css') screen;

@font-face {
  font-family: 'anakotmai';
  src: url('fonts/anakotmai-light.eot');
  src: url('fonts/anakotmai-light.eot#iefix') format('embedded-opentype'),
       url('fonts/anakotmai-light.woff') format('woff'),
       url('fonts/anakotmai-light.ttf') format('truetype'),
       url('fonts/anakotmai-light.svg') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'anakotmai';
  src: url('fonts/anakotmai-medium.eot');
  src: url('fonts/anakotmai-medium.eot#iefix') format('embedded-opentype'),
       url('fonts/anakotmai-medium.woff') format('woff'),
       url('fonts/anakotmai-medium.ttf') format('truetype'),
       url('fonts/anakotmai-medium.svg') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'anakotmai';
  src: url('fonts/anakotmai-bold.eot');
  src: url('fonts/anakotmai-bold.eot#iefix') format('embedded-opentype'),
       url('fonts/anakotmai-bold.woff') format('woff'),
       url('fonts/anakotmai-bold.ttf') format('truetype'),
       url('fonts/anakotmai-bold.svg') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
	--green : #4BB239;
	--red :   #911A11;
	--yellow : #ffe602;
	--pink : #F5B5BE;
	--grey : #666;
}

.img-round { border-radius: 10px; }
.word-rotator.slide span { padding: 0px; margin-top:-2px }
.word-rotator-words bg-primary { line-height: 150%; padding: 0px!important }
h2.word-rotator { line-height: 130%}
.logofooter img{ width:70% }
.logofooter { width:70%!important }
/* Custom Map */
section.section-longan {
	background: transparent url(../pic_data/Longan-farm-original.jpg) center 0 no-repeat;
	padding: 129px 0 0;
	margin: -40px 0 0;
	border: 0;
}

.thaifont { 
	font-family: 'anakotmai';
}
.lineheight0 {
	line-height: normal!important;
}
.f400 { font-weight: normal!important; }
.f500 { font-weight: 500!important; }
.f600 { font-weight: 600!important; }

.redmaster { color:#911A11; }
.goldmaster { color:#D9AF5D!important; }
.greenmaster  { color:#95CD41; }
.yellowmaster { color: #ffe602!important;}

section.section-longan section.section {
	border-top: 0;
	background: rgba(247, 247, 247, 0.15);
}
.ceo {
	width:100%;
	border-radius: 100%;
	overflow: hidden;
}
.ceo img{  width: 100%}
.vdo { margin-top: 100px;}
.vdo .heading { margin-bottom: 30px }
.vdo .ratio { width: 700px; margin:0 auto }
.cer-logo { width:200px}
.boxcenter { text-align: center!important }
.boxcenter h3 { margin-bottom: 0px; margin-top: 15px }
.ceotitle { background-color: #911A11; border-radius: 5px; display: inline-block ; margin-top: 10px}
.ceotitle p { padding: 5px 10px ; color:#fff; margin-bottom: 0px; font-size: 1.25em; line-height: 20px; text-align: center}
.ceotitle p sp { font-size: 0.75em!important; background-color: #d85e5e; border-radius: 50px; padding:2px 5px; }
.xcontact { margin-top: -40px}
.p-static h1 { font-weight: 800 }
.subheadcontact { color:#757575; }
.subheadcontact span { color:#10b513; }
.listqrcode li { display: inline-block; width:130px;}
.listqrcode li img { width:100% }
.btn { border: none;}
.breadcrumb li.active { color:#fff }
#header .header-btn-collapse-nav { margin-bottom: 15px}
.footerpad { padding-top: 1.1em}

@media (max-width: 991px) {
	#header .header-nav-main nav > ul li {
		padding: 5px 0px;
		border-bottom: none!important;
	}
	#header .header-nav-main nav > ul li a{
		font-size: 1.2em
	}
	.logofooter img{ width:100% }
	.langmobile { list-style: none; padding:0; margin:0;border-bottom: 1px solid #e8e8e8 }
	.langmobile li { display: inline-block!important; border-bottom: none!important;}
	.langmobile li a { background-color: #D9AF5D; color:#fff!important }
	.langmobile li a:hover { text-decoration: none; background-color:#911A11; }   
	
	.mainslide .owl-stage-outer {height: 550px;}
	.mainslide .owl-stage-outer .owl-stage { height: 550px!important }
	.mainslide .owl-stage-outer .owl-stage  .position-relative { background-size: cover!important; height: 550px!important}
	.mainslide .owl-carousel.show-dots-hover:hover .owl-dots { top: 580px!important}
	.header-nav-features .header-social-icons, .nav-lang { display: none!important;}
	.ceo { width: 400px;margin:0px auto 20px auto}
	
	.home-concept .process-image {
		background: none;
		width: 300px;
		margin: 30px auto 0 auto;
		padding-bottom: 30px;
	}
	
	.home-concept .process-image img {
		border-radius: 150px;
		margin: 7px 8px;
		width: auto;
		height: auto;
		max-width: 300px;
		max-height: 300px;
		border: 1px solid #c6c6c6;
		padding: 5px
	}
	.project-image .our-work { font-size: 1.5em!important;}
	.process-image.process-image-on-middle { padding-left: 0px;}
	
}
@media (max-width: 760px) {
	.ratio { width:90%!important;}
}
@media (max-width: 574px) {
	.frmaward { padding: 15px 30px}
}
@media (max-width: 480px) {
	
	.mainslide .owl-stage-outer {height: 300px;}
	.mainslide .owl-stage-outer .owl-stage { height: 300px!important }
	.mainslide .owl-stage-outer .owl-stage  .position-relative { background-size: cover!important; height: 300px!important}
	.mainslide .owl-carousel.show-dots-hover:hover .owl-dots { top: 350px!important}
	.ceo { width: 250px;margin:0px auto 20px auto}
	.ms-3 { margin-left: 0px!important}
}

@media (min-width: 992px) {
	.langmobile {
		display: none!important;
	}
}