/*@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');*/
/* CSS Document */
.navmenu {  
	margin: 0 auto;
	background: none;
	margin-left: 3%
/*	width: 500px;*/
}
.navlink { 
	display: flex;
	justify-content: center;
/*	padding : 10px 10px 10px 10px;*/
	}
.navlink > a { 
	padding:0.7em;
/*	text-decoration: none;*/
	color:black;
/*		opacity: 0.5;*/
	}
.navlink > a:hover { 
/*	transform: scale(1.2);*/
/*		opacity: 1;*/
		text-decoration: underline;
/*		font-weight: bold*/
	}	
.navlink > a:focus { 
		opacity: 1;
		text-decoration: underline;
	}
.nonact{
		opacity: 0.5;
	text-decoration: underline;
}
.act {
	opacity: 1;
	text-decoration: underline;
	font-size: calc(8px + 0.390625vw);
}
.nonact {
	text-decoration: none;
	font-size: calc(8px + 0.390625vw);
}
	h3 {
		color:black;
		padding-top: 10px;
	}
p {
	font-family: 'Kanit', sans-serif;
}
.image{
	width:38px;
	height:38px
}
.link{
	text-decoration: none;
	color:black;
}
.link:hover{
	text-decoration: none;
	color:black;
}
/*flex*/
* {
  box-sizing: border-box;
}

.flex-container {
  max-width: 90%;
  display: flex;
  flex-direction: row;
  font-size: auto;
  text-align: center;
/*  margin-top: 20px;*/
}

.flex-item {
  flex-wrap: wrap;
  padding: 10px;
  margin-top: 15px;
  flex: 22.5%;
  
}
.flex-item > img {
 width:10%;
 height:auto;
}

.swiper{
	    width: 100%;
    height: 100%;
    display: flex;
}
.swiper-wrapper{
	    width: 100%;
    height: 100%;
    display: flex;
}
.swiper-slide{
	    width: 100%;
    height: 100%;
    display: flex;
}
.swiper-slide >img {
	    width: 100%;
    height: 300px;
    transition: .3s ease;
    object-fit: cover;
	   border-radius: 15px;
}
.text{
	max-width: 400px;
/*	margin-left: 3%;*/
	 text-align: justify;
		font-size: calc(8px + 0.390625vw);
/*  text-align-last: left;*/
}
span {
	font-family: 'Kanit', sans-serif;
}
.footer {
	height:auto;
   position: absolute;
/*   left: 0;*/
   margin-top:0.8vw;
/*   margin-left:10%;*/
/*   margin-right:10%;*/
   width: 100%;
   font-weight: bold;
   background-color: black;
   color: #fff;
   text-align: center;
   font-size: calc(8px + 0.390625vw);
}



.card {
    text-align: center;
/*    box-shadow: 0 1px 1px 0 #d4d4d5, 0 0 0 1px #d4d4d5;*/
	border: none;
    max-width: 400px;
	height: auto;
    margin: 1vw;
    padding-bottom: 1rem;
}
.card > img {
	width: 400px;
	height: 300px;
	object-fit: cover;
	border-radius: 15px
}
a, a:hover{
	text-decoration: none;
	color:black;
}
/*
.card:empty {
    width: 300px;
    box-shadow: none;
    margin: 2rem;
    padding-bottom: 0;
}
*/

.con {
	max-width: 100%;
/*	background: #F80206;*/
	  display: flex;
  flex-wrap: wrap;
		justify-content: center
/*
	max-width: 100%;
  margin-right: 5%;
  margin-left: 5%;
*/

}

.recipe-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}

	.grid {
    overflow: hidden;
    --grid__col-width: 400px;
    --grid__column-gap: 30px;
    --grid__row-gap: 10px;
  
  max-width: 100%;
  margin: 0 auto;
}

.grid__outer-grid {
    display: grid;
    margin: 0 calc(var(--grid__column-gap) * -1);
    
    column-gap: var(--grid__column-gap);
    row-gap: var(--grid__row-gap);
    
    --grid__column-gap-double: calc(var(--grid__column-gap) * 2);
    --grid__column-gap-half: calc(var(--grid__column-gap) / 2);
    --grid__row-gap-half: calc(var(--grid__row-gap) / 2);
    --grid__inner-grid: repeat(auto-fit, minmax(min(var(--grid__col-width), calc(100% - var(--grid__column-gap-double))), var(--grid__col-width)));
    grid-template-columns: minmax(0, 1fr) [grid-start] var(--grid__inner-grid) [grid-end] minmax(0, 1fr);
}

.grid__inner-grid {
    display: grid;
    
    grid-column-start: grid-start;
    grid-column-end: grid-end;
    
    column-gap: var(--grid__column-gap);
    row-gap: var(--grid__row-gap);
    
    grid-template-columns: var(--grid__inner-grid);
}
.pack {
	background-color: lightgreen; 
	width:50%; 
	margin-left: auto; 
	margin-right: auto; border-radius: 15px; 
	padding: 10px; 
	text-align: center; 
	font-weight: 700;
}


@media(max-width:627px){  /*Mobile */
.box > a > img {
	width: 100%;
	max-width: 100vw;
	height: 250px;
/*	object-fit:fill;*/
}
	.text{
		max-width: 350px;
	margin-left: 0%;
	 text-align: justify;
	font-size: calc(12px + 0.390625vw);	
		
}		
	
}
@media screen and (max-width: 831px) and (min-width: 600px){    /*ipad */
	.box {
/*  background: red;*/
	max-width: 600px;
  height: auto;

}
.box > a > img {
	width: 600px;
	height: 400px;;
}
	.grid {
    overflow: hidden;

  
  max-width: 100%;
  margin: 0 auto;
}
	.text{
		max-width: 600px;
	margin-left: 0%;
	 text-align: justify;
	font-size: calc(12px + 0.390625vw);	
}	
	.pack{
		max-width:70%;
		width:100%;
	}	
}

@media(max-width:1300px){
h3{
	padding-top: 0px;
	margin: 0px;
	font-size: calc(8px + 0.390625vw);				
}	
/*
.text{
		margin-left: 6%;
	 text-align: justify;
	font-size: calc(6px + 0.390625vw);	
}	
*/
.image{
	width:6vw;
	height:6vw;
}
	.flex-container {

    flex-direction: column;
	width:100%		
	}
.flex-container {
/*	flex-wrap:wrap;*/
  max-width: 100%;
}	
.flex-container > img {
/*  display: flex;*/
/*  flex-direction: row;*/
  padding-top: 10px;
	width: 100%;
	height: auto;
  font-size: auto;
  text-align: center;
/*	background-color: black;*/
font-family: 'Century Gothic', sans-serif;
/*border: 1px solid #f39535;	*/
}
	.swiper-slide > img {
		height: 35vh;
	}
.flex-item {
			flex-wrap:wrap;
  margin-top: 15px;
}
.footer{
	width:100%;
	height: 2vh;
/*	font-size: 2vw;*/
}	
}


/*-------------------------------------------------------*/




html {
  scroll-behavior: smooth;
  	font-family: 'Fira Sans', sans-serif;
}

body{
	line-height: 1.5;
/*font-family:fondamento;*/
	font-weight: 400;
	background-image: url("../../tms/img/bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
body.hidden-scrolling{
	overflow-y: hidden;
}
table {
  border-collapse: collapse;
/*  border-spacing: 0;*/
  width: 100%;
  border: 1px solid #ddd;
}

td {
	width: auto;
  text-align: center;
	border: 1px solid #ddd;
	font-size: calc(8px + 0.390625vw);
/*  padding: 8px;*/
}


*{
	margin:0;
	box-sizing: border-box;
}
.container{
	max-width: 100vw;
	margin:auto;
}
ul{
	list-style: none;
	margin:0;
	padding:0;
}
a{
	text-decoration: none;
}

.footer{
	font-size: calc(7px + 0.390625vw);
	background: #414143;
	width:100%;
/*	max-width: 80%;*/
	margin: 0 auto;
	height:auto;
	color:#fff;
	text-align: center;
	position: absolute;
  	right: 0;
  	bottom: auto;
  	left: 0;
/*	font-size: auto;	*/
}
/*header*/
.banner > img {
	width:100%;
	height:auto;
	object-fit:cover;
	max-height:auto;
  	margin-bottom : 0px;
  	padding: 0px;
	display: block;
}

.tag{
	max-width:100%;
/*	background-image: url("../../tms/img/bk.jpg");*/
	color:#0a1e59;
	background: #faea00;
/*	height:200px;*/
/*	margin-top: 100px;*/
	margin: 0 auto;
	text-align:center;
/*	display: block;*/
	 font-size: calc(15px + 0.390625vw);
	font-weight:700;
/*	white-space: nowrap;*/
	margin-top: 0px;
/*	margin-bottom: 3%;*/
  	padding: 0px;
}

body{
	width: 100%;
	height: auto;
	background-image: url("../img/machill_bg.jpg");
/*	display: block;*/
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
/*	  position:static;*/
}

.color{
/*  border-width: 2px;*/
/*	position: absolute;*/
	height:5px;
	background-color: #56a0dd;
	width:100%;
	padding-top: 0px;
    margin: -7px;
}
.test{
/*	position:fixed;*/
}
.test.black{
/*	margin-top:-10vh;*/
	position:fixed;
}
#nav {
/*    position: absolute;*/
    left: 0px;
/*    height: 40px;*/
/*  position:fixed;*/
    width: 100%;
    display: flex;
    justify-content: center;
}
#nav ul {
    margin: 0;
    padding: 0;
}
#nav ul li {
    margin: 0;
    padding: 0;
    float:left;
}
#nav ul li a {
    text-decoration: none;
    padding: 0px 2vw;
    display: block;
    color: #FFF;
    text-align: center;
	 font-size: calc(8px + 0.390625vw);
	font-weight:700;
	 background-color:rgba(6,6,6,0.3);
}
#nav ul li a:hover {
    color: #56a0dd;
}

.content {
	max-width:80%;
	margin-top:20px;
	margin-left: auto;
	margin-right: auto;
	background-color:none;
	 font-size: calc(12px + 0.390625vw);
	font-weight:1000;
/*	margin: 0 auto;*/
/*	height:50px*/
}
.contents{
	font-size: calc(7px + 0.390625vw);
}
.contents2{
	font-size: calc(7px + 0.390625vw);
	text-align: center;
}

.flex {
/*  max-width:80%;	*/
/*  background: #aaa;*/
/*	margin-top:20px;*/

  display: flex;
  flex-wrap: wrap;
	margin: 0 auto;
	margin-top: 10px;
}
.contact {
	max-width:80%;
	margin-top:20px;
	margin-left: auto;
	margin-right: auto;
	background-color:none;
	 font-size: calc(12px + 0.390625vw);
	font-weight:1000;
/*	margin: 0 auto;*/
/*	height:50px*/
}
.contact_flex {
/*
  flex-grow: 1;
  max-width: 26%;
  height: 100px;
	background: #23a;
	margin:5px
*/
	   display: flex;
	width: 50%;
/*	  max-width: 32%;*/
/*	max-height: 32%;*/
/*	width:100%;*/
/*	margin-right:1%;*/
/*   justify-content: center;*/
   flex-direction: column;
/*		margin:auto;*/
}
.img_flex {
/*
  flex-grow: 1;
  max-width: 26%;
  height: 100px;
	background: #23a;
	margin:5px
*/
	width:auto;
	   display: flex;
	  max-width: 32%;
/*	max-height: 32%;*/
/*	width:100%;*/
	margin-right:1%;
/*   justify-content: center;*/
   flex-direction: column;
	margin-bottom: 1%;
/*		margin:auto;*/
}
.img_flex > a > img {
	max-width:400px;
	width:100%;
	height:100%;
	max-height:300px;
	object-fit: cover; 
}
.txt_flex{
/*	   background-color:#56a0dd;*/
       text-justify:auto;
/*	max-width: 50%;*/
	   margin-left: 10px;
	   margin-right: 10px;
	 font-size: calc(8px + 0.390625vw);
}




.header{
	position: absolute;
	width: 100%;
	height:auto;
	z-index: 99;
}

.header-main{
	background-color: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
/*	padding: 10px 0;*/
	border-radius: 4px;
}
.header .logo{
	padding: 0 15px;
	max-width:15%
}
.header .logo a img{
	width:100%;
	max-width:120px;
	height:auto;
	max-height:70px;
}
.header .nav-menu{
/*	padding: 0 15px;*/
	background-color:red;
	width: 100%;
/*	max-width:auto*/
}
.header .menu > .menu-item{
	display: inline-block;
	margin-left: 10px;
	position: relative;
}
.header .menu > .menu-item > a{
	display: block;
	padding: 0px 0;
	 font-size: calc(8px + 0.390625vw);
	color: white;
	text-transform: capitalize;
	font-weight: 200;
	transition: all 0.3s ease;
}
.header .menu > .menu-item > a .plus{
	display: inline-block;
	height: 12px;
	width: 12px;
	position: relative;
	margin-left:5px; 
	pointer-events: none;
}
.header .menu > .menu-item > a .plus:before,
.header .menu > .menu-item > a .plus:after{
	content:'';
	position: absolute;
	box-sizing: border-box;
	left: 50%;
	top:50%;
	background-color: white;
	height: 2px;
	width: 100%;
	transform: translate(-50%,-50%);
	transition: all 0.3s ease;
}
.header .menu > .menu-item:hover > a .plus:before,
.header .menu > .menu-item:hover > a .plus:after{
   background-color: #59a1dd;
}
.header .menu > .menu-item > a .plus:after{
   transform: translate(-50%,-50%) rotate(-90deg);	
}
.header .menu > .menu-item > .sub-menu > .menu-item > a:hover,
.header .menu > .menu-item:hover > a{
	color: #59a1dd;
}
.header .menu > .menu-item > .sub-menu{
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	width: 220px;
	position: absolute;
	left:0;
	top:100%;
	background-color: #ffffff;
	padding: 10px 0;
	border-top: 3px solid #59a1dd;
	transform: translateY(10px);
	transition: all 0.3s ease;
	opacity:0;
	visibility: hidden;
}
/*@media(min-width: 992px){*/
.header .menu > .menu-item-has-children:hover > .sub-menu{
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
 }
 .header .menu > .menu-item-has-children:hover > a .plus:after{
    transform: translate(-50%,-50%) rotate(0deg);		
 }
/*}*/
.header .menu > .menu-item > .sub-menu > .menu-item{
	display: block;
}
.header .menu > .menu-item > .sub-menu > .menu-item > a{
	display: block;
	padding: 10px 20px;
	font-size: 16px;
	font-weight: 600;
	color: #000000;
	transition: all 0.3s ease;
	text-transform: capitalize;
}
.header .open-nav-menu{
	height: 34px;
	width: 40px;
	margin-right: 15px;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.header .open-nav-menu span{
	display: block;
	height: 3px;
	width: 24px;
	background-color: white;
    position: relative;
}
.header .open-nav-menu span:before,
.header .open-nav-menu span:after{
	content: '';
	position: absolute;
	left:0;
	width: 100%;
	height: 100%;
	background-color: white;
	box-sizing: border-box;
}
.header .open-nav-menu span:before{
	top:-7px;
}
.header .open-nav-menu span:after{
	top:7px;
}
.header .close-nav-menu{
	height: 30px;
	width: 30px;
	background-color: #59a1dd;
	border-radius:50%;
	margin:0 0 0px 0px;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
}
.header .close-nav-menu img{
	width: 30px;
}
.header .menu-overlay{
	position: fixed;
	z-index: 999;
	background-color: rgba(0,0,0,0.5);
	left:0;
	top:0;
	height: 100%;
	width: 100%;
	visibility: hidden;
	opacity:0;
	transition: all 0.3s ease;
}

/*home section*/
.home-section{
	width: 100%;
	display: block;
	min-height: 100vh;
/*	background-image: url('../img/home.jpg');*/
	background-position: center top;
	background-size: cover;
}

.swiper-slide > img {
	  width:100%;
	  height: auto;
	max-height:600px;
	object-fit: cover;
}
	.swiper {
  max-width:100%;
  max-height: auto;
}

.rcat_history {
	background-image: url("../../tms/img/bg.jpg");
/*	background: #9BD9FC;*/
	font-weight: 1000;
}
.rcat_history > #con{
	width:100%;
	height:auto;
	object-fit: cover;
}
.rcat_president, .rcat_venue, .icf_history, .icf_president, .venues_mytt, .venues_aone, .schedule, .attraction_1, .attraction2, .attraction3, .attraction4, .attraction5, .attraction6 {
	background-image: url("../../tms/img/bg.jpg");
/*	background: #9BD9FC;*/
	font-weight: 1000;
}
.rcat_president > #con2, .rcat_venue > #con3, .icf_history > #con_icf_history, .icf_president > #con_icf_president, .venues_mytt > #con_venues_mytt, .venues_aone > #con_venues_aone, .schedule > #con_schedule{
	width:100%;
	height:auto;
/*	max-height:500px;*/
	object-fit: cover;
}
iframe{
	width:100%;
	height:400px;
}


.box {
	margin-top: 7%; 
	max-width: 400px;
  	height: auto;
/*	background-color: #1e4b51;*/
	background-color: #faea00;
/*	color: #FCD403;*/
	color: #0a1e59;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}

	.box > a > img {
/*  background: red;*/
  	width: 400px;
  	height: 300px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;

/*  	border-radius: 15px;*/
}
.text {
	margin-left: 3%;
}
.btnBooking{
	width:100%;
/*	background-color: #8cc43f;*/
	background-color: #39039C;
	color:white;
	border: none;
	padding: 10px;
	margin-top: 10px;
/*	padding: 10px;*/
/*	border-radius: 15px;*/
	font-size: 0.7em;
}

.calendar {
	background-color:red;
}

@media only screen and (max-width: 400px) {

.tag{
	 font-size: calc(12px + 0.390625vw);
}

}
@media only screen and (max-width: 600px) {
.schedule > #con_schedule{
	width:100%;
	height:100%;	
}
.tag{
	max-width:100%;

}
.content {
	max-width:90%;
}
.txt_flex{
	margin-left: 0px;
	margin-right: 0px;
}
iframe{
	width:100%;
	height:300px;
}	
}
@media only screen and (max-width: 1150px) {
	.swiper-slide > img {
/*	max-height:300px;*/
}
}
/*
@media only screen and (max-width: 670px) {
	.swiper-slide > img {
	max-height:150px;
}
}
*/
@media(max-width: 422px){
	#nav ul li a {
    padding: 0px 1.1vw;
}
}