@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');

 @font-face {
  font-family: "nt";
  src: url("../fonts/NotoSansThaiSemiCondensed.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "nt";
  src: url("../fonts/NotoSansThaiSemiCondensedMedium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "nt";
  src: url("../fonts/NotoSansThaiSemiCondensedSemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "nt";
  src: url("../fonts/NotoSansThaiSemiCondensedBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "nt";
  src: url("../fonts/NotoSansThaiSemiCondensedBlack.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

* {
font-variant-ligatures: none;
}

body{
    font-family: 'nt', 'Barlow Semi Condensed' !important;
  font-weight: 400;
  color: #858796;
  font-size: 1em;
}

.bbb{
 background: url(../img/bbb.jpg);
    background-size: cover;
    height: 100vh;
    background-position: center;
}

.hero { 
    position: fixed; 
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
     background: url(../img/bbb.jpg);
    background-size: cover;
    background-position: center;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
       background-color: rgb(0 171 105);
    mix-blend-mode: multiply;
}

.fslist{
  font-size: 1.2em;
}

.bgbox{
	background: #0000007a;
	z-index: 9;
}


.bgbox .h-100 div:hover{
background: #00804896;
}

.bgbox a{
  display: block;
}

a:hover{
  text-decoration: none;
}

.txtg{
  color: #008048;
}

.bg{
  color:#fff;
  text-decoration: none;
	background: #008048;
}

.bg:hover{
  color:#fff;
  text-decoration: none;
  background: #006539;
}

.bgg{
  color:#fff;
  text-decoration: none;
  background: #008048;
}

.fw{
  filter: brightness(0) invert(1);
}

.txtlog a{
  font-size: 3em;
  font-weight: 600;
  padding: 20px 50px;
background: rgb(185,144,61);
background: linear-gradient(0deg, rgba(185,144,61,1) 0%, rgba(255,247,186,1) 100%);
color: #00462d;
border: 0;
border-bottom: 5px solid #4c3b17;
    box-shadow: 0px 10px 21px #014428;
    border-radius: 20px;
}

.txtlog{
  margin-top: 0px;
  transition: 0.5s;
  display: inline-block;

}
/*
.txtlog a{
    color: #5a4414;
     box-shadow: 
     0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 40px #d0af39,
    0 0 80px #d0af39,
    0 0 90px #fff,
    0 0 100px #fff,
    0 0 150px #fff;
     text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 40px #d0af39,
    0 0 80px #d0af39,
    0 0 90px #d0af39,
    0 0 100px #d0af39,
    0 0 150px #d0af39;

}*/


.h300{
	height: 333px;
	    overflow: hidden;
}

.h300 img{
	    height: 100% !important;
    width: auto !important;
    margin-left: -25%;
    margin-top: -12%;
/*    filter: blur(2px);
  -webkit-filter: blur(2px);*/
}

.logow{
  width: 200px;
}

.hcal{
  height: calc(100vh - 96px) !important;
      overflow: auto;
}

.boxim{
    height: 100%;
    width: auto;
    overflow: hidden;
}

.boxim img{
    height: 100% !important;
    width: 100% !important;

}

.boxfac{
    height: 100%;
    width: auto;
    overflow: hidden;
}

.boxfac img{
    height: 100% !important;
    width: auto;
    margin-left: -25%;

}

.boxgal{
   height: 100%;
    width: auto;
    overflow: hidden;
}

.boxgal img{
    height: 100% !important;
    width: 100%;

}

.hgall{
  height: 100%;
}

.hcalbox{
  height: calc(100vh - 96px) !important;
}

.boxroom{
  position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.boxmap{
    height: 100%;
    width: auto;
    overflow: hidden;
}

.h100v{
  height: 100vh !important;
}


@media screen and (max-width: 767px) {
.boxfac img{
  height: auto;
  width: 100%;
  margin-left: 0;
}



.hcal{
  height: auto !important;
}

.boxroom{
  position: relative;
    height: 100%;
    width: 100%;
    z-index: 1;
}

	.h300{
	height: auto;
	    overflow: hidden;
}

.h300 img{
	height: auto !important;
    width: 100% !important;
    margin-left: 0;
    margin-top: 0;

}
}

@media screen and (max-width: 991px) {
  #boxmenu{
  display: none;
}

.hgall{
  height: auto;
}

.boxmap iframe{
  min-height: 300px;
}

.hcalbox{
  height: auto !important;
}


.hcal{
  height: auto !important;
}

}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
.w-sm-100 {
width:100%!important;
}
.w-sm-75 {
width:75%!important;
}
.w-sm-50 {
width:50%!important;
}
.w-sm-25 {
width:25%!important;
}
.h-sm-100 {
height:100%!important;
}
.h-sm-75 {
height:75%!important;
}
.h-sm-50 {
height:50%!important;
}
.h-sm-25 {
height:25%!important;
}
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
.w-md-100 {
width:100%!important;
}
.w-md-75 {
width:75%!important;
}
.w-md-50 {
width:50%!important;
}
.w-md-25 {
width:25%!important;
}
.h-md-100 {
height:100%!important;
}
.h-md-75 {
height:75%!important;
}
.h-md-50 {
height:50%!important;
}
.h-md-25 {
height:25%!important;
}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
.w-lg-100 {
width:100%!important;
}
.w-lg-75 {
width:75%!important;
}
.w-lg-50 {
width:50%!important;
}
.w-lg-25 {
width:25%!important;
}
.h-lg-100 {
height:100%!important;
}
.h-lg-75 {
height:75%!important;
}
.h-lg-50 {
height:50%!important;
}
.h-lg-25 {
height:25%!important;
}
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
.w-xl-100 {
width:100%!important;
}
.w-xl-75 {
width:75%!important;
}
.w-xl-50 {
width:50%!important;
}
.w-xl-25 {
width:25%!important;
}
.h-xl-100 {
height:100%!important;
}
.h-xl-75 {
height:75%!important;
}
.h-xl-50 {
height:50%!important;
}
.h-xl-25 {
height:25%!important;
}
}