@charset "UTF-8";

/* CSS Document */


.White { color: #ffffff; } 

.MidnightBlue { color: #000099; } 
.NavyBlue2 { color: #0041a2; } 
.SkyBlue { color: #00ccff; } 

.Orange { color: #ff9900; } 
.RedOrange-2 { color: #710101; }


h1 {font-size: 38px;
	line-height: 1.1;
	color: navy;
	padding: 20px 2px 20px 2px}	

h2 {font-size: 28px;
	line-height: 1.2;
	padding-top: 10px;
	padding-bottom: 10px}	
	
h3 {font-size: 24px;
	line-height: 1.3}	
	
h4 {font-size: 24px;
	text-align: center;
	color: #63DFFE;
	line-height: 1.3;
}

h5 {font-size: 18px;
	text-align: center;
	padding: 12px 0;	
	line-height: 1.3}	


h1, h2, h3, strong, summary, h5  {
	font-family: "Kanit", sans-serif;
	font-display: swap;
}


h4, i, p, tr, li, details  {
	font-family: "Kanit2", sans-serif;
	font-display: swap;
}		
	

a {
	color: #0041FF;
	text-decoration: none;
	font-display: swap;
}

	
p {
	padding-bottom: 14px;
	font-size: 18px;
	font-display: swap;
}

ul {
	font-size: 16px;
	font-display: swap;	
}


i {
	font-size: 18px;
	font-display: swap;	
}

body {background-color: #F1F1F1}


 /* accordian section for rates and details + click for more photos */
	
summary {
	background: #F1F1F1;
	padding: 6px 12px;
	font-size: 20px;
	color: #000000;
	text-align: center;    
}

details {
	background: #E6EFF3;
	color: #000000;
	border: none;    
	text-align: center;    
	font-size: 18px;
}



.hero-pic {
	padding-top: 80px;
	text-align: center;
}

@media screen and (max-width: 700px) {
  .hero-pic {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
	padding: 100px 0 0;
  }
}


.photo-gallery-titles {  
  	display: flex;
  	flex-wrap: wrap;
	background-color: #333;
	padding: 10px 0;
}

.photo-category-description {
	color: #FFF;
	text-align: center;
	padding: 0 8px 4px;
	font-size: 20px;
}


 /* Rates and Details */


.rates-details-grid {
  	display: flex;
  	flex-wrap: wrap;
	padding: 14px 0 20px 0;
}

.rates-details-rows {
  	display: -ms-flexbox;
  	display: flex;
  	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
	background-color: #333;
	text-align: center;

}

.rates-details-titles {
	padding-bottom: 10px;
}


.rates-column {
	-ms-flex: 48%;
  	flex: 48%;
 	width: 100%;
	padding: 8px 4px 8px 8px;
	
}

@media screen and (max-width: 700px) {
  .rates-column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
	padding: 8px 8px 3px;
  }
}


.details-column {
	-ms-flex: 48%;
  	flex: 48%;
 	width: 100%;
	padding: 8px 8px 8px 4px;
}

@media screen and (max-width: 700px) {
  .details-column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
	padding: 3px 8px 8px;
  }
}


.policies {
	text-align: left;
	padding: 0 14px 4px 28px;	
}


.dates {
	color: #000099;
	font-size: 16px;
}


.accordian-space{
	padding-bottom: 8px;
	background-color: #DBE5E9;
}

 /* main content */

.row-11 {  
  	display: flex;
  	flex-wrap: wrap;
	padding-left: 10px; 
	padding-right: 10px;
}	

.side {
  	flex: 0%;
}

.main {
  	flex: 800px;
}

.side2 {
  	flex: 0%;
}	
	
 /* 2 columns */

.row-photo-gallery {
  	display: -ms-flexbox;
  	display: flex;
  	-ms-flex-wrap: wrap;
 	 flex-wrap: wrap;
	background-color: #DBE5E9;
	text-align: center;
	padding-top: 4px;
}


.column22-1 {
  	-ms-flex: 48%;
  	flex: 48%;
	width: 100%;
	text-align: right;
	padding: 0px 2px 0px 4px;
}

.column22-2 {
  	-ms-flex: 48%;
  	flex: 48%;
 	width: 100%;
	text-align: left;
	padding: 0px 4px 0px 2px;
}


@media screen and (max-width: 700px) {
	.column22-1 {
   	-ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
	padding: 0px 2px 0;
  }
}

@media screen and (max-width: 700px) {
	.column22-2 {
    -ms-flex: 100%;
    flex: 100%;
   	max-width: 100%;
	padding: 0px 2px 0;
  }
}
	
 /* 4 columns */ 
		
.row44 {
  	display: -ms-flexbox;
  	display: flex;
  	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
}
	
.column44 {
  	-ms-flex: 25%;
  	flex: 25%;
  	max-width: 25%;
  	padding: 0px 2px 4px;
}

.column44 img {
  	margin-bottom: 4px;
  	vertical-align: middle;
  	width: 100%;
}

@media screen and (max-width: 700px) {
  .column44 {
    -ms-flex: 48%;
    flex: 48%;
    max-width: 100%;
  	padding: 0px 2px 2px;
  }
}



.footer {
  	flex: 800px;
	color: #FFFFFF;
	background-color: #000000;
	text-align-last: left;
	padding-top: 12px;
}
	
	
	*, 	
*::before, 
	*::after { 
	margin: 0; 
	padding: 0; 
	box-sizing: border-box; 
} 	


iframe { width: 100% } 			

			
	.header{position:fixed;z-index: 999; display:flex;align-items:center;justify-content:space-between;background-color:#252525;padding:10px 80px;width:100%}.sidemenu a img{width:75px}.header .logo img{width:75px}.header .middle-button{transition:.5s}.header .middle-button a{text-decoration:none;font-size:1.1rem;font-family: Kanit; color:#fff;background-color:#A20121;padding:7px 11px;border-radius:8px;box-shadow:0 0 5px #FBF8F8;letter-spacing:1px}.header .middle-button:hover {transform:scale(1.05)}
	
	.menu p{color:#fff;font-size:1.2rem;padding-left:30px}#toggle.active{background:#00ead3}
	.toggle-menu{width:80px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer}#toggle{transition:.2s}#toggle.active::before{transform:translateY(0) rotate(45deg);box-shadow:0 0 0 #fff}#toggle::before{content:'';position:absolute;background:#fff;width:20px;height:3px;transition:.2s;box-shadow:0 8px 0 #fff;transform:translateY(-8px)}#toggle::after{content:'';position:absolute;background:#fff;width:20px;height:3px;transition:.2s;transform:translateY(8px)}#toggle.active::after{transform:translateY(0) rotate(-45deg)}
	.sidemenu{position:fixed;top:0;left:-41%;width:40%;height:100%;background:#fff;z-index:1;overflow-x:hidden;transition:.5s;display:flex;justify-content:center;align-items:center;flex-direction:column;box-shadow:1px 0 3px grey}
	.sidemenu a{text-decoration:none;font-family: Kanit2; display:block;color:#000;padding:7px 0;font-size:1.4rem;transition:.3s}.sidemenu a:hover{transform:scale(1.05)}
	.sidemenu.active{left:0}.sidemenu .quote-btn{margin-top:10px}
	.sidemenu .quote-btn a {padding:10px 15px;background-color:#C1072C;border-radius:10px;color:#fff}
	.sidemenu .contactInfo {margin-top:20px;border-top:1px solid grey}
	.sidemenu .contactInfo a {text-transform:none;text-align:center}
	.sidemenu .contactInfo a {font-size:1.5rem;padding-top:10px;padding-right:0px}
	@media screen and (max-width:780px){.header .middle-button {position:absolute;top:90px;display:flex;align-items:center;justify-content:center;margin:0 16px 0 0px}.header .middle-button a{font-size:1rem;text-align:center;padding:5px}.header{padding:15px 20px 50px 20px;border-radius:0}.sidemenu{left:-71%;width:70%}.sidemenu a{font-size:1.1rem}.sidemenu .contactInfo i{font-size:1rem}}	
	

	
.img-fluid { 
	max-width: 100%; 
	height: auto;
}



div.scroll-container {
  background-color: #DBE5E9;
  overflow: auto;
  white-space: nowrap;
}

div.scroll-container img {
  padding-top: 4px;
}


@media screen and (max-width: 700px) {.scroll-container img {
	max-width: 340px; 
	height: auto;
	  padding: 0px;

}
}