* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
a{text-decoration:none; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s;}
img {display:block;}
h1{font-size:2.2em;}
h2{font-size:2em;}
h3{font-size:1.8em;}
h4{font-size:1.5em;}
h5{font-size:1.25em;}
h6{font-size:1em;}
body, html{margin:0; padding:0; max-width:100%; height:100%; font-family:'Kanit', sans-serif !important; background:white;}

.elementor-widget-container{margin: 0; padding: 0; width: 100vw; height:100vh;  position: relative;}
.kanit-sb{font-weight:600 !important; font-family:'Kanit', sans-serif;}
.kanit-m{font-weight:500 !important; font-family:'Kanit', sans-serif;}
.kanit-r{font-weight:400 !important; font-family:'Kanit', sans-serif;}
.kanit-l{font-weight:300 !important; font-family: 'Kanit', sans-serif;}
.kanit-el{font-weight:200 !important; font-family: 'Kanit', sans-serif;}
.kanit-t{font-weight:100 !important; font-family: 'Kanit', sans-serif;}

.c-red{color:#EF3937;}
.c-purple{color:#6668AA;}

/* #m-grid{width:1300px; text-align:center; position:relative; z-index:999; display:block; left:50%; top:0; transform: translateX(-50%);} */
#m-grid{width:1300px; text-align:center; position:relative; margin:auto;}
#wapper{width:100%; display:block;}
header{width:100%; text-align:center; display:block; position:relative;}
main{width:1300px; margin:auto; text-align:center; display:block;}
#pic-topic{width:100%; height:500px; margin:0; top:0; display:block; position:relative; z-index:90; background:black;}
#pic-topic em{width:100%; height:90px; display:block; position:absolute; top:0; left:0; z-index:-1; background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);}
#pic-topic #grid{width:1300px; margin:auto; display:block; position:relative; z-index:40;}
#pic-topic h1{width:100%; margin:10% auto 0 auto; padding:0; text-align:center; color:#FFF; text-transform:uppercase; font-weight:600 !important; font-family:'Kanit', sans-serif; position:relative; z-index:30; text-shadow: 4px 4px 2px rgba(0,0,0,0.6);}
#pic-topic::before{content:attr(data-topic);; width:100%; text-align:center; color:#FFF; font-size:2.2em; line-height:1.2; display:block; position:absolute; top:290px; z-index:-2; text-shadow: 4px 4px 2px rgba(0,0,0,0.6); font-family:'Kanit', sans-serif; font-weight:600; text-transform:uppercase; }

#top-head{width:100%; padding:10px 0 0 0; display:inline-block;}
.logo{width:auto; text-align:left; display:block; float:left;}
.logo i{margin:0; display: inline-block;}
.logo i img{height:70px;}
.booking{width:auto; line-height:44px; margin-top:12px; padding:0 25px; font-size:1.2em; color:#FFF; border-radius:10px; text-align:left; display:block; float:right; background:#6668AA; text-decoration: none;}
.booking:hover{color:#FFF;}

nav.menu{width:1300px; border-radius:10px; top:86px; padding:16px 13px 16px 22px; text-align:center; background:rgba(102,104,170,0.8); overflow:hidden; display:block; position:absolute; z-index:999; box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);}
nav.menu span{width:100%; text-align:center; display:inline-block;}
/* nav.menu.nofade{ background:rgba(2,90,190,1); transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;} */
nav.menu a{width:auto; height:22px; padding:0 30px 0 35px; color:#FFF; line-height:20px; font-size:1.1em; text-transform:uppercase; position:relative; display:inline-block; text-shadow: 0px 0px 0px rgba(0,0,0,0); text-decoration:none;}
nav.menu a i{width:auto; font-style:normal; font-size:0.85em; line-height:18px; position:absolute; display:block; left:8px; top:0; z-index:90; transition: transform 1s; transform-style: preserve-3d;}
nav.menu a:hover{color:#EF3937; text-shadow: 1px 1px 1px rgba(0,0,0,0.4);}
nav.menu a:hover i{transform: rotateY( 360deg ); transition: transform 0.5s;}

/* nav.menu .lang{width:auto; display:block; position:absolute; right:22px; top:15px; z-index:40;}
nav.menu .lang a{ width:35px; height: auto; padding:2px; margin:0 3px;  border-radius:3px; display:block; float:left; cursor: pointer;overflow:hidden; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}
nav.menu .lang a::after{content:""; width:100%; height:100%; border:2px solid #FFF; display:block; position:absolute; left:0; top:0; } 
nav.menu .lang a:first-child{}
nav.menu .lang a img{width:100%; filter: grayscale(100%); transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; position: relative; }
nav.menu .lang a:hover img, nav.menu .lang a.active img{width:100%; filter: grayscale(0); transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;} */

#top-head .lang{width:auto; display:block; position:absolute; right:0; top:35px; z-index:40; border:0;}
#top-head .lang a{ width:35px; height: auto; padding:2px; margin:0 3px;  border-radius:3px; display:block; float:left; cursor: pointer;overflow:hidden; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}
#top-head .lang a img{width:100%; filter: grayscale(100%); transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; position: relative; }
#top-head .lang a:hover img, #top-head .lang a.active img{width:100%; filter: grayscale(0); transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}

nav.menu .title{width:auto; color:#FFF; margin:0; padding:0; height:20px; line-height:20px; font-weight:500;; display:none; float:left;}

.content-menu{width:100%; display:inline-block;}

.content-menu .m-menu{width:37px; padding:3px 4px 2px 4px; line-height:40px; text-align:center; font-size:1.8em; font-weight:500; color:#FFF; display:none; position:absolute; right:12px; top:7px; z-index:50; background:#EF3937; border:.08em solid #FFF; border-radius:5px; overflow:hidden; cursor:pointer;}
.content-menu .m-menu i{}
.content-menu .list-menu{width:100%; height:0; padding:0; margin:0; border-top:0; display:inline-block; position:relative; top:20px; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}
.content-menu .list-menu a{width:50%; margin:15px 0; padding:0 30px 0 35px; color:#FFF; line-height:20px; font-size:1.2em; text-transform:uppercase; display:block; float:left; text-align: left;}
.content-menu.is-open .list-menu{padding:10px 0 25px 0; margin-bottom:25px; border-top:2px solid #FFF; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}

footer{width:100%; margin-top:70px; text-align:center; z-index:999; display:block; float:left;}
footer .social{width:100%; display:block;}
footer .icon{width:54px; margin:0 10px; display: inline-block;}
footer .icon img{width:100%;}
footer .copy{width:100%; margin-top:20px; padding:15px 0; color:#FFF; line-height:1.1; font-size:0.9em; display:block; background:rgba(102,104,170,1);}
footer .copy a{color:#FFF; margin:0 5px;}
footer .copy a:hover{text-decoration:underline;}
footer .payment{width:100%; padding-top:25px; margin-top:25px; border-top:2px solid #025ABE; text-align:center; display:block;}
footer .payment em{width:auto; display:inline-block;}
footer .payment img{height:30px; margin:0 2px;}

.cookies-submit{width:100%; left:0; bottom:0; display:block; position:fixed; background:#6668AA; z-index:999;
  opacity:0;
  animation:cookies-alert cubic-bezier(0,1,1,1);
  animation-fill-mode:forwards;
  animation-duration:0.6s;
  animation-delay: 1s
}
@keyframes cookies-alert {
    from {
      opacity:1;
      -ms-transform: translateX(0) translateY(100px);
      -webkit-transform: translateX(0) translateY(100px);
      transform: translateX(0) translateY(100px);
    }
    to {
      opacity:1;
      -ms-transform: translateX(0) translateY(0);
      -webkit-transform: translateX(0) translateY(0);
      transform: translateX(0) translateY(0);
    }
 }
.cookies-submit span{width:100%; padding:20px 25% 20px 0; display:block; float:left; position:relative;}
.cookies-submit b{width:auto; line-height:28px; color:#FFF; font-size:1.2em; font-style:normal; text-decoration:underline; display:block; float:left;}
.cookies-submit p{width:auto; line-height:24px; margin:15px 0 0 0; color:#FFF; font-size:1em; text-align: left; display:block; float:left;}
.cookies-submit p a{color:#FFF; font-size:1em; font-style:normal; text-decoration:underline;}
.cookies-submit p a:hover{color:#CCC; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}
.cookies-submit .accept{width:210px; height:44px; line-height:44px; color:#000; font-size:16px; text-align:center; font-style:normal; border-radius:10px; display:block;
  position:absolute; right:0; top:50%; transform: translate(0, -50%); background:#FFF; }
.cookies-submit .close-cookies{display:block; position:absolute; top:10px; right:20px; z-index:50;}
.cookies-submit .close-cookies i{font-size:1.6em; color:#FFF;}

.social-side{width:auto; display:block; position:fixed; z-index:900; bottom:50px; right:30px;}
.social-side a{width:54px; margin:10px 0; display:block;}
.social-side a img{width:100%;}


/* @media (min-width: 1921px) {
  .wapper{width:1920px; margin:auto;}
} */

@media (max-width: 1680px) {
  #pic-topic{height:430px;}
  #pic-topic::before{top:270px;}
}

@media (max-width: 1440px) {
  #pic-topic{height:375px;}
  #pic-topic::before{top:240px;}
}

@media (max-width: 1366px) {
  #pic-topic{height:357px;}
  #pic-topic::before{top:230px;}
  #pic-topic::after{background-size: auto 357px !important;}
}

@media (max-width: 1300px) {  
  #m-grid {width:100%;}
  .logo i{margin-left:0;}
  #top-head .lang{right:0;}
  main {width:100%; padding:0 25px;}
  #pic-topic #grid{width:100%;}
  nav.menu{width:calc(100% - 50px); margin:0 25px;}
  .cookies-submit #m-grid {padding:0 20px;}
}

@media (max-width: 1280px) {
  #pic-topic #grid{z-index:70;}
  #pic-topic h1{margin-top:5%;}
  header{z-index:40;}
  nav.menu .des{display:none;}
  nav.menu .lang{right:60px; top:13px;}
  nav.menu .title, nav.menu .m-menu{display:block;}
  nav.menu .lang a{}
}
@media (max-width: 1122px) {
  #pic-topic h1{margin-top:7%;}
  #pic-topic::before{top:230px;}
}
@media (max-width: 840px) {
  .main {padding:0 20px;}
  .main .product li{width:48%;}
  .logo i img{height:60px;}
}
@media (max-width: 780px) {
  h1{font-size:2.4em;}
  h2{font-size:2.1em;}
  h3{font-size:1.7em;}
  h4{font-size:1.6em;}
  h5{font-size:1.15em;}
  h6{font-size:.9em;}

  #pic-topic{height:280px;}
  #pic-topic::before {top:190px; font-size:1.9em;}
  #pic-topic::after{background-size: auto 280px !important;}

  .cookies-submit span{padding:20px 35% 20px 0;}
}
@media (max-width: 600px) {
  /* .main .product li {width:75%; padding:7px 15px;} */
  .logo i img{height:70px;}
}
@media (max-width: 500px) {
  .main {padding:0 14px;}
  .logo i img{height:70px;}
}
@media (max-width: 480px) {

  h1{font-size:2.1em;}
  h2{font-size:1.75em;}
  h3{font-size:1.35em;}
  h4{font-size:1.2em;}
  h5{font-size:1em;}
  h6{font-size:.9em;}

  main{padding: 0 15px;}
  .main {padding:0 10px;}
  .logo{top:30px;}
  .logo i img{height:46px;}
  nav.menu{width: calc(100% - 30px); margin: 0 15px; padding:16px 13px 16px 13px; top:70px;}

  #pic-topic{height:225px;}
  #pic-topic::before{top:153px; font-size: 1.5em;}
  #pic-topic::after{background-size: auto 225px !important;}

  .content-menu .list-menu a{width:100%; margin:7px 0; font-size:.9em; line-height:18px;}

  .cookies-submit span{padding:20px 0; text-align:center;}   
  .cookies-submit b{font-size:1.02em; display:inline-block; float:none;}
  .cookies-submit p {width:100%; margin-bottom:15px; font-size:.9em; line-height:18px; text-align:center; display:inline-block; float:none;}
  .cookies-submit .accept {width:150px; height:36px; line-height:36px; font-size:.9em; display:inline-block; position:relative;right:auto; top:auto; transform:translate(0, 0);}

  footer{margin-top:50px;}
  footer a{width:46px; margin:0 5px;}
  footer .copy{font-size:.75em;}
}
@media (max-width: 414px) {

  h1{font-size:2.1em;}
  h2{font-size:1.75em;}
  h3{font-size:1em;}
  h4{font-size:.9em;}
  h5{font-size:.8em;}
  h6{font-size:.7em;}

  .logo i img{height:40px;}
  #pic-topic{height:205px;}
  #pic-topic::before{top:140px; font-size: 1.45em;}
  #pic-topic::after{background-size: auto 205px !important;}
  nav.menu a{font-size:.9em;}
  
}
@media (max-width: 380px) {
  h1{font-size:1.9em;}
  h2{font-size:1.55em;}
  h3{font-size:1em;}
  h4{font-size:.9em;}
  h5{font-size:.8em;}
  h6{font-size:.7em;}
}
@media (max-width: 360px) {
  .logo i img{height:33px;}
  #pic-topic::before{top:132px;}
  nav.menu .lang{right:54px; top:12px;}
  nav.menu{padding:13px;}
  nav.menu a{font-size:.75em;}
  #pic-topic{height:198px;}
  #pic-topic::after{background-size: auto 198px !important;}
  .content-menu .m-menu{width:30px; font-size:1.5em; top:8px;}
}