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

@font-face {
    font-family: 'AngsanaNewBd';
    src: url('./font/AngsanaNew-Bold.eot');
    src: url('./font/AngsanaNew-Bold.eot?#iefix') format('embedded-opentype'),
      
         url('./font/AngsanaNew-Bold.woff') format('woff'),
         url('./font/AngsanaNew-Bold.ttf') format('truetype'),
         url('./font/AngsanaNew-Bold.svg#AngsanaNewBd') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

@font-face {
    font-family: 'DBHelvethaicaX';
    src: url('./DBHelvethaicaX/DB-Helvethaica-X-v3.2_3.eot');
    src: url('./DBHelvethaicaX/DB-Helvethaica-X-v3.2_3.eot?#iefix') format('embedded-opentype'),
         url('./DBHelvethaicaX/DB-Helvethaica-X-v3.2_3.woff2') format('woff2'),
         url('./DBHelvethaicaX/DB-Helvethaica-X-v3.2_3.woff') format('woff'),
         url('./DBHelvethaicaX/DB-Helvethaica-X-v3.2_3.ttf') format('truetype'),
         url('./DBHelvethaicaX/DB-Helvethaica-X-v3.2_3.svg#DBHelvethaicaX') format('svg');
    font-weight: normal;
    font-style: normal;

}

  
  


html{
  width:100%;  
}

body{
  margin: 0;
  padding: 0;
  width:100%;  
	/* background-color:#e5e6e6;*/
  background: #f2f2f2;
  font-family: 'DBHelvethaicaX';
  color: #333333;
  font-size: 28px; line-height: 100%;
}

 

img{
	max-width: 100%;
}

h1{
	 margin: 5px; padding: 0; font-family: 'AngsanaNewBd';
	font-size: 46px; line-height: 90%;
}

h2{
	font-size: 36px; line-height: 90%;
	 margin: 0px; padding: 0;  font-family: 'AngsanaNewBd';
}

.top5{
	margin-top: 5px;
}


.top10{
	margin-top: 10px;
}

.top20{
	margin-top: 20px;
}

.top30{
	margin-top: 30px;
}


.top40{
	margin-top: 40px;
}


._left{
	float: left !important;
}

._right{
	float: right !important;
}


.clear{
	clear: both;
}


a{
	text-decoration: none;
	color: #296251;
}

a:hover{
	text-decoration: none;
	color: #296251;
}



img{
	max-width: 100%;
}

ul, li {
    margin:0; 
    padding:0; 
    list-style:none;
}

.mobileshow{
	display: none;
}

.area_content{
	width: 70%; margin-left: auto; margin-right: auto;
	position: relative; 
}

.theyard-bg{
	width:100%; height:auto;  padding-bottom: 40px;
	background:url("../../img/2023/theyard.jpg") top center no-repeat;
	 -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../img/2023/theyard.jpg', sizingMethod='scale')";
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../img/2023/theyard.jpg', sizingMethod='scale');	
  background-color:#e5e6e6;
	
	font-family: 'AngsanaNew';
  color: #333333;
  font-size: 28px; line-height: 100%;
	
}

.theyard-bg h2{
	font-style: italic;font-family: 'AngsanaNew';
	font-weight: normal; font-size: 28px; line-height: 100%;
}

.hedden-yard{
	width: 17.5%; position: relative;
	padding: 40px 0;
}

.hedden-yard img{
	width: 100%;
}

.hedden-yard-logo{
	position: absolute;
}

.theyard-menu{
	float: left; width: 50%;
	background: #2e4343; color: #fff;
	padding: 40px; 
}

.groundcoffee-menu{
	float: left; width: 50%;
	background: #000000; color: #fff;
	padding: 40px;
}

.menu-area{
	position: relative;
}

.logo-menu{
	position: absolute; width: 100%;
	left: auto; right: auto;  display: none;
}

.circle img {
transition: 0.7s ease;
}

.circle img:hover {
border-radius:50%;
transition: 0.7s ease;
}
  

.btn-menu{
	display: inline-block; vertical-align: top; font-family: 'AngsanaNewBd';
	background-color: #ffffff; color: #333333;
	border: 2px #fff solid;
	padding: 6px 60px; border-radius: 50px;
	margin-top: 20px;
}

.btn-menu:hover{
	background-color: transparent; color: #fff;
}

/*.btn-menu{
  border: 2px solid #ffffff;
   
  transition: .3s;
}
.btn-menu:hover {
  box-shadow: 8px 8px #99bdff;
  transition: .3s;
}*/



.social-menu{
	 z-index: 10;
	margin-bottom: -20px; position: relative;
}

.social-menu img{
	margin: 0 2px;
	width: 9%; transition: 0.7s ease;
	-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

.social-menu img:hover{
	
	-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
transition: 0.7s ease;
}

.theyard-zone{
	background: #2e4343; color: #fff;
	padding: 60px 0;
}

.logo-zone{
	width: 13%;
}

 

.private_box{
	margin-top: 20px;
}
  
.private_boxL{
	display: inline-block; vertical-align: top;
	width: 65%;
}

.private_boxR{
	display: inline-block; vertical-align: top;
	width: 34%; padding-left: 30px;
	font-family: 'ArialMT'; font-size: 18px; line-height: 140%;
	 
}

.private_boxR .boxL{
	 margin-top: 30px;
}

.private_boxR .boxR{
	margin-top: 20px;
	
}

.private_boxR img ,.socialL img ,.socialR img{
	height: 35px; margin-right: 2px;
}

.slider{
	position: relative; width: 100%;
}

 
.slider .active{
	 border: solid 5px #fff;
  
}

.slider .galleryL{
	float: left; width: 25%;
	padding-right: 20px;
	position: relative;
}

.slider li{
	position: relative; overflow: hidden;
}
.slider li  img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.slider li:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}


.slider .galleryR{
	float: left; width: 75%;  
}

.private_line{
	border-bottom: 1px #8094a8 solid;
	margin-top: 40px;
}

.style1{
	color: #ffcc66;
}


.location{
	background: #dde5e7; color: #333333;
	padding: 60px 0;
}

.location iframe{
	width: 100%; height: 500px;
}


.map{
	background: #ffffff;  
	padding: 60px 0;
}

.carpark{
	background: #dde5e7; color: #333333;
	padding: 60px 0;
}

.carparkL{
	float: left; width: 55%;
}

.carparkR{
	float: left; width: 45%;
	padding-left: 5%;
}

.footer{
	background: #2e4343; color: #cccccc;
	padding: 40px 0; font-family: 'ArialMT'; font-size: 14px; line-height: 140%;
}

.footerL{
	float: left;
}

.footerR{
	float: right; font-size: 12px; text-align: right;
}

.footerR a{
	color: #cccccc;
}

.social-footer img{
	width: 35px; margin: 0 2px;
	transition: 0.7s ease;
	-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

 

.social-footer img:hover{
	
	-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
transition: 0.7s ease;
}


.footer-line{
	border-bottom: 1px #ccc solid;
	margin: 30px 0;
}

.copyright{
	text-align: right; font-size: 12px; 
}



@media screen and (max-width: 1350px) {
	
	
body{
  font-size: 18px; line-height: 100%;
}

	h1{
	 margin: 5px; padding: 0;
	font-size: 30px; line-height: 110%;
}

	
 
	
}

@media screen and (max-width: 1024px) {
	body{
   
}
	.area_content{
		width: 80%;
	} 
	
}

@media screen and (max-width: 50em) {
	.webshow{
		display: none;
	}

	.mobileshow{
	display: block;
}
	
body{
  font-size: 20px; line-height: 100%;
  
}
	
h1{
	 font-size: 36px; line-height: 90%;
}

h2{
	font-size: 30px; line-height: 90%; 
}
	

.theyard-bg{
	 font-size: 24px; line-height: 100%;
	
}

.theyard-bg h2{
	 font-size: 24px; line-height: 100%;
}	
	

.btn-menu{
	 padding: 4px 50px; border-radius: 50px;
	margin-top: 20px; line-height: 90%;
}	
	
	.area_content{
		width: 90%;
	}


.hedden-yard{
	width: 45%;
	padding: 20px 0;
}	
	

.logo-zone{
	width: 25%;
}
	
.social-menu{
	 margin-bottom: -5px;  
}	
	
	
.theyard-menu {
	 width: 100%;
	 padding: 20px 20px 40px; margin:0;
}
	
.groundcoffee-menu{
	  width: 100%;
	 padding: 20px 20px 40px; margin: 20px 0;
}	

 	
	
.private_boxL  {
	display: none;
}
 
	.private_boxR{
	 width: 100%; padding: 20px 0;
}
	
.private_line{
	 margin-top: 20px;
}
	
	
.theyard-zone, .location ,.map ,.carpark{
	 padding: 30px 0;
}
	
.carparkL{
	  width: 100%;
}

.carparkR{
	float: left; width: 100%;
	padding: 20px 0;
}	
	
	
.location iframe{
	width: 100%; height: 400px;
}
	
.footer{
	 padding: 20px 0; 
}
	
	.footerL{
		width: 100%;
	 text-align: center;
	}	
	
.footerR{
	padding-top: 20px;
	width: 100%;
	 text-align: center;
}	
	
	.copyright{
		 text-align: center;
	}
 	
 
}