@charset "utf-8";
/* CSS Document */

/*reset*/
*{margin:0; padding:0; outline:none; box-sizing:border-box;}
img,fieldset{border:0px; display:block;}
br.clear, div.clear{clear:both; font-size:0px;}
ul, ol{list-style:none;}
textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox, button{-webkit-appearance:none; border-radius:8px;}
header, nav, article, aside, section, footer{display:block; overflow:hidden;}
main, header, section, footer{width:100%; height:auto; position:relative;}

/*template*/
html{width:100%; height:100%; font-size:62.5%;}
body{width:100%; height:100%; font-family:"Roboto", sans-serif; font-size:1.6rem; line-height:1.628571; color:#454545; overflow-x:hidden; overflow-y:scroll; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

/*text*/
h1, h2, h3, h4, h5, h6{width:100%; height:auto; font-family:"Kanit", sans-serif; font-weight:700;}
h1{font-size:4.2rem; margin-bottom:32px;}
h2{font-size:3.2rem; margin-bottom:24px;}
h3{font-size:2.4rem; margin-bottom:16px;}
h4{font-size:1.8rem; margin-bottom:16px;}
p{margin:0px 0px 32px 0px;}
p:last-of-type{margin:0px 0px 0px 0px;}
a, a{color:#005705; text-decoration:none;}
a:hover, a:hover {color:#006e7d;}
small{font-size:1.2rem;}
section{padding:32px 0;}
.nopadding{padding:0 !important;}
.nomargin{margin:0 !important;}
article ul,
article ol{list-style:disc outside; margin:0px 0px 30px 20px;}
.left{float:left;}
.right{float:right;}
.txt-center{text-align:center;}
.txt-uppercase{text-transform:uppercase;}
.txt-shadow{text-shadow:2px 4px 3px rgba(0,0,0,0.2);}
.box-shadow{box-shadow:4px 8px 6px rgba(24,24,24,0.2);}

/*buttons*/
.button{font-family:"Kanit", sans-serif; font-weight:700; width:fit-content; font-weight:500; padding:12px 20px; border:unset; cursor:pointer;}
.button.full{width:100%;}
.button.no-padding-left{padding-left:0px;}
.button.bg-green{color:#ffffff;} 
.button.bg-green:hover{background:#c5a321;} 
.button.bg-gold{color:#ffffff;} 
.button.bg-gold:hover{background:#006e7d;} 
.button.bg-lightgrey{color:#454545;}
.button.bg-lightgrey:hover{background:#454545; color:#cccccc;}

/*
.button.bg-green:hover{box-shadow:0 0 2px inset #04b149; color:#04b149;background:unset;}
.button.bg-red:hover{box-shadow:0 0 2px inset #e2001a; color:#e2001a;background:unset;}
.button.bg-gold:hover{box-shadow:0 0 2px inset #228dd9; color:#228dd9;background:unset;}
.button.bg-yellow:hover{box-shadow:0 0 2px inset #fbbb2a; color:#fbbb2a;background:unset;}
.button.ol-yellow:hover{background:#fbbb2a; color:white;}
*/

/*colors*/
.bg-white{background:#ffffff;}
.bg-white-40{background:rgba(255,255,255,0.4);}
.bg-grey{background:#2f3440;}
.bg-green{background:#006e7d;}
.bg-gold{background:#c5a321;}
.bg-red{background:#ca1800;}
.bg-lightgrey{background:#cccccc;}

.txt-white{color:#ffffff;}
.txt-grey{color:#2f3440;}
.txt-green{color:#006e7d;}
.txt-gold{color:#c5a321;}
.txt-red{color:#ca1800;}
.txt-lightgrey{color:#cccccc;}

/*form*/
.form-grid{grid-template-columns:200px auto; gap:8px; display:grid;}
.form-grid > .wide{grid-column:1 / -1;}
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"]{width:100%; height:24px; line-height:24px; padding:16px; border-radius:8px; font-family:"Roboto", sans-serif; font-size:1.6rem; border:1px solid #eae9e9; color:#454545; background:#ffffff;}
select{width:100%; height:24px; line-height:24px; font-size:1.6rem; padding:16px; border-radius:8px; color:#454545; background:#ffffff; font-family:"Roboto", sans-serif; border:1px solid #eae9e9;  color:#555555;}
select{height:unset; line-height:unset; padding:8px 16px;}
select option{color:#555555;}
input[type="text"].red,
input[type="number"].red,
input[type="date"].red,
input[type="time"].red,
select.red,
textarea.red,
input[type="datetime-local"].red{border:1px solid #ca1800;}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus{border:1px solid #454545;}
textarea{width:100%; height:300px; line-height:24px; padding:16px; border-radius:8px; font-family:"Roboto", sans-serif; font-size:1.6rem; background:#ffffff; color:#454545; border:1px solid #eae9e9} 
textarea:focus{border:1px solid #303030;}
input[type="submit"]{font-family:"Roboto", sans-serif; cursor:pointer;}

/*main-container*/
main{width:100%; max-width:1920px; min-height:100vh; margin:0px auto;}
.container{max-width:1440px; margin:0px auto; padding:0 24px; position:relative;}
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:24px;}

.grid > .span-2{grid-column-end:span 2;}
.grid > .span-3{grid-column-end:span 3;}
.grid > .span-4{grid-column-end:span 4;}
.grid > .span-5{grid-column-end:span 5;}
.grid > .span-6{grid-column-end:span 6;}
.grid > .span-7{grid-column-end:span 7;}
.grid > .span-8{grid-column-end:span 8;}
.grid > .span-12{grid-column-end:span 12;}

/*breadcrumbs*/
.breadcrumbs{width:100%; height:32px;}
.breadcrumbs ol{display:flex; justify-content:flex-start;}
.breadcrumbs li,
.breadcrumbs li ,
.breadcrumbs li a span{font-size:1.2rem; line-height:32px; color:#5C5C5C;}
.breadcrumbs li:hover a span{color:#006e7d;}

/*header*/
header{width:100%; height:96px; padding:24px 16px;}
header .grid{display:grid; grid-template-columns:186px 1fr; gap:24px; line-height:80px;}
header .logo{height:48px;}
header .logo img{object-fit:contain;}
header .cta{text-align:right; line-height:48px; }

/*sections*/
section.divider .wallpaper{width:100%; height:100%;}
section.divider .wallpaper img{width:100%; height:100%; object-fit:cover;}
section.divider article{margin-bottom:24px;}
section.divider .events{display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:minmax(auto, auto); gap:24px;}
section.divider .events > a.event:nth-child(6n + 1){grid-column:1 / 2; grid-row:auto;}
section.divider .events > a.event:nth-child(6n + 2){grid-column:2 / 3; grid-row:auto;}
section.divider .events > a.event:nth-child(6n + 3){grid-column:1 / -1; grid-row:auto;}
section.divider .events > a.event:nth-child(6n + 4){grid-column:1 / 2; grid-row:span 2;}
section.divider .events > a.event:nth-child(6n + 5){grid-column:2 / 3; grid-row:auto;}
section.divider .events > a.event:nth-child(6n + 0) {grid-column:2 / 3; grid-row:auto;}
section.divider .events > a.event{position:relative; display:block; overflow:hidden; text-decoration:none; color:inherit; aspect-ratio:3 / 2;}
section.divider .events > a.event .image{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}
section.divider .events > a.event .image img{width:100%; height:100%; object-fit:cover; display:block;}
section.divider .events > a.event .details{position:absolute; bottom:0; left:0; right:0; z-index:2; padding:16px; display:flex; flex-direction:column; justify-content:flex-end;}
section.divider .events > a.event:nth-child(6n + 4){aspect-ratio:auto;}

section.signup .slider{position:relative; width:100%; height:360px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;}
section.signup .slider > .image{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}
section.signup .slider > .image img{width:100%; height:100%; object-fit:cover; display:block;}
section.signup .slider > .title{position:relative; z-index:2; padding:16px;}
section.signup .slider > .title h1{margin:0; line-height:1;} 

/*footer*/
footer{}
footer *{color:#000000 !important; font-size:1.4rem;}
footer .address{width:80%; margin:0px auto; padding:24px 0px; text-align:center;}
footer .address *{margin:0px 8px;}

/*tablet:1220*/
@media only screen and (max-width:1220px) 
{

}


/*tablet:768-1023*/
@media only screen and (max-width:1023px) 
{
    body.noscroll{overflow:hidden;}

    h1{font-size:2.6rem; margin-bottom:24px;}
    h2{font-size:2.2rem; margin-bottom:24px;}
    h3{font-size:2.0rem; margin-bottom:16px;}
    h4{font-size:1.8rem; margin-bottom:16px;}




}

/*mobile l:427-767*/
@media only screen and (max-width:767px) 
{
    h1{font-size:2.2rem; margin-bottom:16px;}
    h2{font-size:2.0rem; margin-bottom:16px;}
    h3{font-size:1.6rem; margin-bottom:16px;}
    h4{font-size:1.8rem; margin-bottom:16px;}

    .left{float:unset;}
    .right{float:unset;}


    .col-2{grid-column:span 6;}
    .col-3{grid-column:span 6;}
    .col-6{grid-column:span 6;}
  

}

/*mobile s:320-426*/
@media only screen and (max-width:426px)
{
   
    
}