/*
Theme Name: keyhotels
Theme URI: http://underscores.me/
Author: Wayne Goodman
Author URI: http://waynegoodman.com
Description: Custom WordPress template for Key Hotels & Resorts
Version: 1.0.1
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: keyhotels
Tags: custom-menu, featured-images, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Keyhotels theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

*/

		:root {
   /*  --body-font-family:  "Montserrat", sans-serif; */
	--body-font-family: TimesNewRoman, "Times New Roman", Times, serif;
    --poppins-wght: 200;
	--headline-font-family: "Cormorant Garamond", serif;
	--content-links-color:#957e5e;
	--content-links-color-over:#957e5e;

}

.bookingBtn a {color:#fff; text-decoration:none}
.sm-coast li a {font-family: var(--body-font-family);}


/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

  


.decoration-none a {text-decoration:none}
/* fix video block to keep proportion on smaller widths */

.wp-block-embed iframe { aspect-ratio: 16 / 9 !important; margin:auto !important}
		
		/* make video... object-fit:cover, try a color overlay with mix-bend-mode:overlay */

		* {box-sizing:border-box}	
		
	
 li.mobileOnly {display:block}

@media (min-width:980px){
 li.mobileOnly {display:none !important}
.main p.justify {text-align:justify !important}
.main p.align-right {text-align:right !important}
			
			
}

	 
		
			html, body { margin:0; padding:0;  height:100%; position:relative; font-size:16px}
		
		body {  font-family: var(--body-font-family); font-weight:400; font-size:1.1em;  }
strong {  font-weight:600}

.content li {margin-bottom:6px}

.header {background:#000; 

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,ffffff+81,ffffff+100 */
background: #000000; /* Old browsers */
background: -moz-linear-gradient(top,  #000000 0%, #ffffff 81%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #000000 0%,#ffffff 81%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #000000 0%,#ffffff 81%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}


.main a { color: var(--content-links-color);}
.main a:hover {color: var(--content-links-color-over); }
		
		.site {position:relative;  width:100%; /*overflow-y:scroll;*/   min-height:100%;  }
figure {/*margin:0 !important;*/ margin:auto !important;  padding:0 !important;}

/* figure.secTop.shallow img {aspect-ratio:19 / 8} */

.wp-block-image figcaption {text-align:center}
		
		sup {font-size:12px}
		
		hr.separator, .wp-block-separator { height:1px;  background-color:#7cb2ca; margin:38px auto 30px auto; border: none;}

/* fixing default block issues */
.clearFix:after, .entry-content:after {content:"."; display:block; height:0; clear:both;visibility:hidden}
.wp-block-image.is-style-rounded img, .is-style-rounded img {border-radius:12px}

		
		figure img {display:block !important}
	
		/* .footerDown {padding-bottom:288px} */
		
		.hidden {position: absolute !important; clip: rect(1px, 1px, 1px, 1px); color:#000; background:#fff}
        a span.hidden {  color:#fff !important; background:#000 !important}
    
     

		/*
		.socialIcons {position:absolute; top:22px; right:3%; overflow:hidden}
		.socialIcons ul {list-style:none; margin:0; padding:0;  display:flex}
		.socialIcons ul li {  width:24px; height:24px; margin:.1rem}
		.socialIcons ul li a { color:#fff}
		.socialIcons svg {width:100%; height:auto}
		.socialIcons li:hover a .socialGray {fill:#334256}
		.socialIcons li:hover a .socialWhite {fill:#7eb7d0;}
		.socialGray{fill:#415065;}
		.socialWhite{fill:#fff;}
		*/
		
		.socialM {fill:#fff; margin:6px; }
a:hover .socialM {fill:#7eb7d0;}
.social {display: flex;  align-items: center; justify-content: center;flex-direction:row; margin:auto }
		
		img {max-width:100%; height:auto;}
		.alignLeft {text-align:left}
		/*.primaryNav {letter-spacing:.04em}*/

		.alignRight {text-align:Right}
		
		
		.topBar {  height:162px; width:100vw;  background:rgba(255, 255, 255, 0); ; position:absolute; top:0;  z-index:2; transition: background-color 0.5s ease; }

		
	
		
		.logo, .logo2 {text-align:center; width:263px; height:auto; margin:14px auto; z-index:11;  }

		.logo svg {width:100%; height:auto; }

		
		.wide, .alignfull {width:100vw; position:relative; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important}
        .alignwide {width:100%; height:auto; margin:22px auto}
		 .alignwide img {width:100%; height:auto}


			
			/* parallax block */
.parallaxSection { max-height:820px;  overflow:hidden; display:block; margin-top:42px !important; margin-bottom:42px !important}
.parallaxSection img {  height:auto; width:100vw !important; left:0; right:0;  bottom:0}

.overlay {position:absolute; z-index:1; width:100%; height:100%;display: flex;  align-items: center;justify-content: center;  }
.overlay:after {	position: absolute;height: 100%;width: 100%;background-color: rgba(29,52,65,.50);top: 0;left: 0;display: block;content: "";}
.overlayContent {line-height:130%; color:#fff; font-size:1.2rem; font-size: clamp(18px, 2.8vw, 1.8rem);padding:4%; text-align:center; z-index:4; font-weight:bold; max-width:1100px; margin:auto; text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);}
				
					@media only screen and (min-width: 800px) {
						.overlayContent {line-height:166%;}
				}
				
		

.grayGradient.secTop:after{
	
	content:"";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	

background: -moz-linear-gradient(top,  rgba(0,0,0,0.33) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.33) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.33) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

	
	
}

.blueGradient.secTop:after{
	
	content:"";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	


background: -moz-linear-gradient(top,  rgba(30,87,153,0.7) 0%, rgba(59,116,177,0) 30%, rgba(125,185,232,0) 100%); 
background: -webkit-linear-gradient(top,  rgba(30,87,153,0.7) 0%,rgba(59,116,177,0) 30%,rgba(125,185,232,0) 100%); 
background: linear-gradient(to bottom,  rgba(30,87,153,0.7) 0%,rgba(59,116,177,0) 30%,rgba(125,185,232,0) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#661e5799', endColorstr='#007db9e8',GradientType=0 ); 


	
	
}

	h2 {  font-weight:300;  text-align:center; font-size:28px; font-size: clamp(28px, 3.4vw, 35px); line-height:118%; color:#957e5e; font-family: var(--headline-font-family); margin:24px 0 18px}


		
		.footer {  width:100%; min-height:138px;  background:#005750; border-top:4px solid #957e5e; padding:18px 0 18px 0; /* position:absolute; bottom:0; left:0;  right:0; */}
		.footer h2 { font-size:1.2em; text-align:center; color:#fff; text-transform:uppercase; margin:4px auto}
		.footer p {margin:3px auto 11px auto}
		.footerContain {}
		.footer h3 { font-size:1.1em; margin:8px auto 0 auto}
		.addressCol div {margin-bottom:18px}
		.addressCol, .newsletterCol, .hoursCol, .addressCol a, .newsletterCol a, .hoursCol a { text-align:center; color:#fff; text-decoration:none; text-transform:uppercase}
		.addressCol, .newsletterCol, .hoursCol {padding:8px 0}
		.addressCol, .hoursCol {font-size:.95rem}
		.newsletterCol input.wpcf7-form-control.wpcf7-text {width:212px; padding:5px; text-align:center; height: 30px; border-top: 3px solid #58595b;}
		.newsletterCol h2 {font-size:1.1rem; font-weight:400; margin:0 auto 11px}

.footer p { color:#fff; line-height:1.4;}

.footerContain2 { width:92%; margin:22px auto 32px auto; text-align:center}
			.footerCol1, .footerCol2, .footerCol3 {margin:22px 0}
			.footerCol1 {text-align:center; color:#fff;  }
			.footer h2 { font-size:1.1em; text-transform:none}
			.footerCol1 a, .footerCol2 a, .footerCol3 a {color:#fff; text-decoration:none; }
			.footerCol1 a {}
			
			@media (min-width:980px){
				.footerContain2 { width:90%; text-align:left}
				.footerCol1, .footer h2 {text-align:left;}
				.footerContain2 { width:92%; margin:22px auto 32px auto; display:flex; flex-direction:row}
				.footerCol1, .footerCol2, .footerCol3 {width:26%;  min-height:200px; margin:0 1%}
				.footerCol4{width:14%;  min-height:200px; margin:0 1%}
			}




		.wpcf7-submit {display:block;   margin:0 auto 14px auto !important; font-size:.9rem; padding:8px 11px; color:#000; background:#957e5e; -webkit-border-radius: 6px; -moz-border-radius: 6px;border-radius: 6px; text-transform:uppercase;  border:none;  color:#fff; text-align:center;  }
		
		.main p { max-width:1080px; margin: 0 auto 22px auto; line-height:1.4;  }
		h1 {   margin:0 auto 22px auto; text-align:center; font-size:38px; font-size: clamp(2.5rem, 4vw, 4rem); line-height:118%; color:#957e5e; letter-spacing:-.04em }
h1, h2, h3 { font-family: var(--headline-font-family); text-transform:uppercase; font-weight:300}
 
		h1 sup {font-size: 18px !important; font-family:arial, sans-serif; }

	


.single h1  { font-size: clamp(31px, 3.6vw, 2.6rem);}
		
		.main {padding:56px 4% 48px;  line-height:1.5; min-height:500px}

.oneCol {max-width:1100px; margin:22px auto}
blockquote {max-width:980px; margin:32px auto; line-height:162%}

.floatRight {margin:22px auto}

.w1180px {max-width:1180px; margin:auto; padding:3%}

.logo, .topBar.sticky .logo {display:none; width:188px}
.logo2 { max-width:212px; margin:auto; padding:0 4px 2px 4px; -webkit-border-bottom-right-radius: 12px;

}
		
		@media (min-width:480px){
	.socialIcons { top:22px; right:6%}	
		}

		@media (min-width:680px){
			.floatRight {margin:22px auto; float:right; margin:0 0 11px 22px}
			
}
		
		@media (min-width:980px){
			
			
			.secTop img {padding-top:0; width:100%; margin:0}
			
			.sm-coast>li  {background:none !important}
			.content {max-width:1320px; margin:auto}
			
			
			hr.separator {width:91%;}
			.twoCols {display: flex;   justify-content: center; flex-direction:row}
			.twoCols div { padding:0 2%; text-align:justify}
			
			
			.break {display:block}
			.addressCol {display: flex;  align-items: center;justify-content: center;}
			.addressCol div {margin:0 33px}
			
		
			
			.logo, .logo2{text-align:center;  height:auto; margin: 0 6px auto; z-index:11;     transition: all .2s ease-in-out; }
			.logo {width:288px;     transition: all .2s ease-in-out; display:block; padding:24px 21px 11px}
			.logo2 {display:none;  width:212px; /*box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.22); -webkit-box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.22);*/}
			.primaryNav { width: calc(100% - 312px);}
			.topBar { height:138px; position:fixed; top:0; left:0; right:0}
		
		     .topBar.sticky {opacity:1; background:/*rgba(255, 255, 255, 1);*/ #fff; -webkit-box-shadow: 0px 5px 7px -4px rgba(0,0,0,0.35); box-shadow: 0px 5px 7px -4px rgba(0,0,0,0.35);transition: background-color 0.5s ease; border-bottom:3px solid #957e5e; z-index:6 }
			  .topBar.sticky .logo { display:none;-webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in; }
			.topBar.sticky .logo2 {display:block; width:202px; background:none; padding-top:8px}
			.topBar.sticky .primaryNav {margin-left:70px !important}
			
			
			.topBarContain {display: flex; justify-content: center; flex-direction:row; width:92%; margin:auto}
			
			.topBar { overflow:visible; }
			.footerContain {max-width:1200px; margin:auto}
			/* .addressCol, .newsletterCol, .hoursCol, .addressCol a, .newsletterCol a, .hoursCol a {width:33%; } */
			.newsletterCol h2, .addressCol, .hoursCol {font-size:1rem;}
			.newsletterCol h2 {margin-bottom:0}
			.main {padding:46px 4% 42px;}
			
			.wpcf7-submit { margin-left:0;  font-size:.9rem; padding:4px 11px; -webkit-border-radius: 2px; -moz-border-radius: 2px;border-radius: 2px; height: 30px; border-top:2px solid #957e5e; border-bottom:1px solid #000}
			input.newsletterInput {width:242px; border:3px solid #957e5e}
			.wpcf7-submit:hover {background:#000}
			
		
			
		}
		
		@media (max-width:980px){
			
			.logo2 img {padding-top:38px}
			
			.logo2 { max-width:200px}
			
			.languages {right:auto; left:2%}
				.header {overflow:auto !important}
			
			.main {padding:36px 5% 42px;}
			.homepageTop {aspect-ratio: 16 / 10; height:auto}
				.hide4mobile {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;} 
			
			a.footerBtn, span.emailEncode a {padding:6px 9px; max-width:248px; -webkit-border-radius: 6px; border-radius:6px;  background:#957e5e; color:#fff; margin:4px auto; display:block; font-weight:bold; font-size:16px}
			
			.newsletterCol, .hoursCol { }
			
			.newsletterCol {  margin:6px auto}
			
		
		     .topBar {opacity:1; background:rgba(255, 255, 255, 1); ; /*-webkit-box-shadow: 0px 5px 7px -4px rgba(0,0,0,0.35); box-shadow: 0px 5px 7px -4px rgba(0,0,0,0.35);*/transition: background-color 0.5s ease;  }
			
			.homepageTop {padding-top:88px}
			
		}


		
		
    #splash {
        position:fixed; background:#58595b;  height:100vh; width:100vw; top:0; bottom:0; left:0; right:0; display: flex;  align-items: center;justify-content: center;
        z-index: 999999999
    }
		
	 #splash .contain { width:377px;max-width:66%; height:auto;  position:relative; }
	 #splash  svg {max-width:500px; height:auto}
		
        .b1 {
  animation: stroke_fill 1.5s linear forwards;
  stroke-dasharray: 1670.9522705078125;
  stroke-dashoffset: 1670.9522705078125;
			 stroke:#7DB2CA;
			fill:none;
}
@keyframes stroke_fill {
  0% {
    fill: #58595b;
  }
  50% {
    fill: #58595b;
    stroke-dashoffset: 0;
  }
  100% {
    fill: #7DB2CA;
    stroke-dashoffset: 0;
  }
}


/*
		.homepageTop {  width:100%;
      height:100vh; overflow:hidden; position:relative}
			.homepageTop iframe {
			
      object-fit: cover;
      width:100vw;
      height:100%;
				 overflow:hidden;
				position:fixed; top:0; left:0; right:0; bottom:0
			
			}
			
			.homepageTop{width: 100vw;height: 100vh;z-index:0; }

.homepageTop img {width:100%; height:auto}
		

    
.homepageTop iframe {
	margin-top:-1px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
	
}
	
	@media (min-aspect-ratio: 16/9) {
	.homepageTop iframe {

    height: 56.25vw;
  }
}
    
@media (max-aspect-ratio: 16/9) {
	.homepageTop iframe {

    width: 177.78vh;
  }
}

*/

/* Portolio, Projects Single and lighbox */

.projectsBox {position:relative; width:380px; max-width:92%; padding:22px 3%; height:auto ; background:#fff; border:1px solid #999; margin:-54px auto 32px auto; z-index:1; font-size:1.2em;  -webkit-box-shadow: 0px 0px 15px -4px rgba(0,0,0,0.39); 
box-shadow: 0px 0px 15px -4px rgba(0,0,0,0.39);}
.projectsBox h1 {margin-bottom:4px}
.projectsBox ul {margin:16px 0 11px 3%; list-style:none }
.projectsBox ul li {margin-bottom:11px; line-height:109%;}

.postNav { margin:auto; font-size:.85rem; z-index:3; display:block; text-align:center}
.postNav a { text-decoration:none; text-transform:uppercase; color:#000}

.postNav .pipe {margin-left:2px; margin-right:2px;color:#88b1c7}
			
.slick-lightbox .slick-prev {  left: 22px !important;}
.slick-lightbox .slick-next { right: 44px !important;; }

.blueBreakout, .blueBreakout2 {background: #cee3eb;  width:100vw;  position: relative; left: calc(-50vw + 50%); margin: 22px 0}
	.blueBreakout {background: #cee3eb;  padding:11px 0 32px 0; }
.blueBreakout2 {background:#e9f0f3; padding:11px 0 11px 0;}
.photoCol  img { text-align:center; padding:16px 0; margin:auto; display:block}

.blueBreakout h2 {margin-bottom: 2px; font-size: 1.7em}
.blueBreakout2 h2 { font-size: 1.7em; text-align:center}
.clarification {text-align: center; font-size: .9em; margin:22px auto}

.portfolio {max-width:92% !important; margin:auto }


.galleryGrid {display: flex; flex-wrap: wrap;  position: relative; justify-content: center;}

.gallerytem3 img {margin:1% 0}

.categoryLink a:last-of-type .catComma { display:none !important}

.gallery_item3, .gallery_item4 {  margin: 1%;background:#fff; background: rgba(255, 255, 255, 0.85); padding:1%; border:1px solid #7cb2ca; position:relative; flex: 1 0 48%; max-width: 88%;  display: flex;  align-items: center; justify-content: center; flex-direction:column }



.galleryMainpage .gallery_item3 a, .galleryMainpage .gallery_item4 a, .portfolio .gallery_item4 a, .portfolio .gridCol_item a { top:0; right:0; bottom:0; left:0; width:100%; z-index:2; position:absolute}

.portfolio .gallery_item3, .portfolio  .gallery_item4 {  flex: 1 0 100% !important; max-width: 300px !important;}


.gallery_item3 h2, .gallery_item4 h2,  .gallery_item4 h2, .gridCol_item h2  {font-size:1.7rem; text-align:center; padding: 0 6px; margin:8px auto 0 auto; color:#61718a}

.gallery_item3 h2  {text-transform:uppercase; font-size:1.2em}

.gallery_item4:hover h2 { color:#588aa1}
			
.gallery_item3:hover, .gallery_item4:hover { background: rgba(255, 255, 255, 1); -webkit-box-shadow: 0px 1px 15px -6px rgba(0,0,0,0.31); 
-webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.49);
-moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.49);
box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.49);}


.gallery_item3 img, .gallery_item4 img {max-width: 100%; width: auto; max-height: 240px; height: auto}

.slick-lightbox-close:before {font-size: 30px !important;}

.viewAllCaseStudies {text-align:center; color:#fff; text-decoration:none; font-size:1.2em; text-transform:uppercase; display:block; margin:8px 0; }

	@media only screen and (min-width: 480px) {
		
		.portfolio .gallery_item3, .portfolio  .gallery_item4  {	 flex: 1 0 48% !important; max-width: 88% !important; }
}

	@media only screen and (min-width:640px) {
		
		.postNav .pipe {margin-left:8px; margin-right:8px;}
		.postNav { margin:auto; font-size:1rem;}
		
.gallery_item3, .gallery_item4 {margin: 1%;flex: 1 0 48%; max-width: 48%; flex-direction:column }

.projectsBox {  padding:2.5% 2.5%; max-width:480px; margin:-74px auto 32px auto;  font-size:1.2em; }

.projectsBox ul {margin:14px 0 11px 22px; list-style:none }

		
		
}

	@media only screen and (min-width: 920px) {
		
	.blueBreakout2 h2 {text-align:left}
		
		.gallery_item4 h2 {font-size:1rem;}
		
	
		
		.projectsBox { width:500px;  }
		.projectsBox ul {margin:14px 0 11px 42px;}
		
		.gallery_item3, .gallery_item4{ max-width: 50%;}
		.gallery_item3, .gallery_item4,	.portfolio .gallery_item3, .portfolio  .gallery_item4  {margin: 1%;flex: 1 0 31% !important; max-width: 31% !important; }
	
		
		
		.viewAllCaseStudies {text-align:right;}
		
		.caseStudiesCarousel h2 {text-align:left}
	
}

	@media only screen and (min-width: 1400px) {
		
		.portfolio {max-width:1310px !important }
		.gallery_item4,  .portfolio  .gallery_item4  {margin: 1%;flex: 1 0 23% !important; max-width: 23% !important; }
		
}
	



.slick-prev:before, .slick-next:before {color:#ccc !important }
.slick-prev {
    left: -24px !important;
	z-index:99999;
  top:50%  !important;
	min-height:48px !important;
	padding-bottom:22px
	
}
.slick-next {
    right: -2px !important;
	z-index:99999;
    top:50%  !important;
	min-height:48px !important;
	padding:0 !important;
	
}

.slick-prev, .slick-next { }
			
.slick-prev:before, .slick-next:before { width:45px; height:45px;  content: '';  display: block; border:none !important; opacity:.5}
button:hover.slick-prev:before, button:hover.slick-next:before {   content: '';  display: block; border:none !important; opacity:.8}
.slick-prev:before {background:url(/wp-content/themes/key-hotels/images/arrow-work/left-arrow1.svg) }
.slick-next:before {background:url(/wp-content/themes/key-hotels/images/arrow-work/right-arrow1.svg) }


/* reviews */

.reviewsCapt {max-width:300px; margin:22px auto 44px auto; display:block}
.reviews blockquote {padding:11px 66px 0}
.reviews blockquote p, .reviewName {position:relative}
.reviews blockquote p:first-of-type:before{content: "\201C";font-family: Georgia, serif;font-size: 68px;font-weight: bold;color: #97c2d5; position: absolute;left: -38px;top:5px;
}
reviewDesc {font-size:.85rem}

.reviewName:before { content: "\2014";font-family: Georgia, serif;font-size: 22px;font-weight: bold;color: #97c2d5; position: absolute;left: -33px;top:-2px;}

/* gallery Nav */

.galleryNav { margin:-22px auto 32px auto; padding:0; max-width:280px; }
.galleryNav ul { list-style:none; text-align:center; display:flex; flex-wrap:wrap; justify-content: space-between;  justify-content: center; margin:22px auto; padding:0;   }
.galleryNav ul li { width:48%; margin: 4px 1%; background:#cee3eb }
.galleryNav ul li:first-child {width:100%;  background:none}
.galleryNav ul li a {display:block;  text-decoration:none; text-transform:uppercase; font-size:.8em; line-height:1rem; color:#000; padding:3px}
.galleryNav ul li.active {background:#dcedf4}
.galleryNav ul li.active a {font-weight:bold; color:#508399}
.galleryNav ul li a:hover {color:#000}
.galleryNav ul li:first-child a:hover { color:#7eb7d0}
.galleryNav ul li:first-child, .galleryNav ul li:last-child {border-right:none}
.galleryNav ul li:first-child a:after {content: ": "}



	@media only screen and (min-width: 800px) {

		.galleryNav { margin: 22px auto 32px auto; padding:0; max-width:780px; width:780px}
.galleryNav ul { list-style:none; text-align:center; display:inline-block !important; width:780px !important; margin:8px auto}
.galleryNav ul li {display:inline-block !important; border-right:1px solid var(--content-links-color-over); width:auto; width:auto; background:none }
.galleryNav ul li a {background:none; display:block; padding: 0 18px 0 0; text-decoration:none; text-transform:uppercase; font-size:.8em; line-height:1rem; color:#000}
		.galleryNav ul li:first-child {width:auto}
		.galleryNav ul li.active {background:none}
	
}
.details1 {max-width:700px; margin:0 auto 82px auto}
			.details1 ul { list-style:none; text-align:center; margin:22px auto; padding: 22px 0;  border-top:1px solid #88b1c7; border-bottom:1px solid #88b1c7; z-index:0;  position:relative}
			
			.details1 ul li {padding: 6px 0}
			.details1 h2 {font-size:1.3rem; text-align:center; text-transform:uppercase; width:111px; margin:0 auto -34px auto; background:#fff; display:block; z-index:1; position:relative; font-family: var(--headline-font-family); color:#61718a}
			.details1 .bird {width:30px; height:30px; margin:-37px auto}
			.eyebrow {margin:0 auto 0 auto; font-size:clamp(15px, 2vw, 18px) !important; text-align:center; display:block; text-transform:uppercase; color:#957e5e;  letter-spacing:.09em}
.logofont {font-family:  "Marcellus", serif;}
			
				@media only screen and (min-width: 800px) {
			.details1 ul li {display:inline-block; margin:4px; border-right:1px solid #88b1c7; padding:0 18px 0 9px }
			.details1 ul li:last-child {border-right:none}
			}

/* grid revision 4-22 */
.gridCol_item{  display:inline-block; margin:4% 3%;position:relative; padding:0 0;  width: 94%; }
		.gridCol_item img {margin:0; padding:0}
		.whiteBreakout {background:#fff !important; padding:0 0 44px}
	.grid_col3, .grid_col4 {columns: 1;  }
	.gridCol_item img:hover, .gridCol_item:hover img { transform: scale(1.03);   transition: .8s; }
	
	@media only screen and (min-width: 480px) { .grid_col3, .grid_col4{  columns: 2 200px;} }
	@media only screen and (min-width: 640px) { .grid_col3, .grid_col4{  columns: 3 200px; }}
	 @media only screen and (min-width: 1180px) { .grid_col4 {  columns: 4 200px; } } 
 @media only screen and (min-width: 1500px) { .single .content, .project_template .content { max-width:1480px; margin:auto} } 

.wp-embed-aspect-16-9 {max-width:1040px !important; margin:32px auto !important}
.wp-embed-aspect-16-9 iframe { aspect-ratio: 16 / 9 !important; margin:auto !important; height:auto !important; width:100% !important;}
.wp-block-columns {  justify-content: center;}

.gallery4{  display:inline-block; margin:3% 1%;background:#fff; background: rgba(255, 255, 255, 0.85); padding:3% 3% 2%; border:1px solid #7cb2ca; position:relative; }
	
.galleryGrid2 {columns: 1 }
	
	.gallery4:hover { background: rgba(255, 255, 255, 1); -webkit-box-shadow: 0px 1px 15px -6px rgba(0,0,0,0.31); 
-webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.49);
-moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.49);
box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.49);}
	
	@media only screen and (min-width: 480px) { .galleryGrid2{  columns: 2 200px;} }
	@media only screen and (min-width: 640px) { .galleryGrid2{  columns: 3 200px;}}
	@media only screen and (min-width: 1180px) { .galleryGrid2{  columns: 4 200px;} }

/* grid for projects main page and gallery main page */

  .flexGrid3 {display:flex; flex-direction:row; flex-wrap: wrap; max-width:92% !important; margin:auto; justify-content: center; }
  .flexGrid3 .gridCol_item {  flex: 1 0 100%; margin:1%  auto;  text-align:center}
							   
@media only screen and (min-width: 480px) {
  .flexGrid3 .gridCol_item {  flex: 1 0 48%; margin:1% 1%; max-width:48%; }
							}
@media only screen and (min-width: 820px) {
									
  .flexGrid3 .gridCol_item {  flex: 1 0 31%; max-width:31%}
				}



/* gallery bottom nav  */
	.nav-links {display:flex; flex-direction:row;   justify-content: center;} 
	.nav-links a {text-Decoration:none; text-transform:uppercase}
	.nav-previous, .nav-next {margin:0 22px}
.projectsNav .nav-previous, .projectsNav .nav-next {margin:0 11px}
  .nav-previous:before {content:'«'; padding-right:8px}
	.nav-next:after  {content:'»'; padding-left:8px}

.nav-links.projectsNav{display:block; text-align:center}
.nav-links.projectsNav .pipe {visibility:hidden}
@media only screen and (min-width: 820px) {
	.nav-links.projectsNav{display:flex; flex-direction:row;   justify-content: center;}
	.nav-links.projectsNav .pipe {visibility:visible}
	.project-link:after  {content:''; }
}



/* homepage video TS  7-7-22 */
	.homepageTop  {width:100vw; position:relative; height:100vh; z-index:0; padding-top:10vh}
      .secTop {width:100vw; position:relative; z-index:0; }
.homepageTop .ariaLabel, .main-menu-btn span.ariaLabel, .social .hidden {color:#fff !important}
       
/* .secTop img {padding-top:122px; } */
        .homepageTop video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; background:#222}

        .secTop video {z-index:0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; background:#222}
		.homepageTop:after, secTop:after {
			
			content:"";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

background: -moz-linear-gradient(top,  rgba(0,0,0,0.51) 0%, rgba(80,80,80,0) 10%, rgba(229,229,229,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.51) 0%,rgba(80,80,80,0) 10%,rgba(229,229,229,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.51) 0%,rgba(80,80,80,0) 10%,rgba(229,229,229,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f000000', endColorstr='#00e5e5e5',GradientType=0 ); /* IE6-9 */
			z-index: 9;	
			
		}




/* homepage video rev  7-7-22 */

.homepageTop {  width:100%; height:100vh; background:#ccc; overflow:hidden; position:relative}
.homepageTop{width: 100vw;height: 100vh;z-index:0; }
.homepageTop video {opacity:1; background:#000}


@media (max-width: 981px) {
.homepageTop video, .homepageTop  {width:100vw; height:94vw; margin-top:124px; aspect-ratio: 16 / 9;}
	.secTop {margin-top:162px !important;}
	.homepageTop video, .homepageTop {margin-top:52px !important}
}x
@media (max-width:480px) {
	.secTop {margin-top:166px !important;}
	.languages {top:4px}
	.topBar {height:164px}
	.logo2 {margin-top:10px; max-width:200px}
	.homepageTop {top:100px}

}


			
.homepageTop:after, secTop:after {

				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.33+0,0.12+19,0+35,0+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.12) 19%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.33) 0%,rgba(0,0,0,0.12) 19%,rgba(0,0,0,0) 35%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.33) 0%,rgba(0,0,0,0.12) 19%,rgba(0,0,0,0) 35%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

			}
	/* fixing gap for mobile */		
@media (max-width: 640px) {
	.wp-block-columns.wp-container-3 {gap:0 !important}
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

.max640px {max-width:640px; margin:0 auto 22px auto}
.has-text-align-center,  p.has-text-align-center{text-align:center}
.has-text-align-right, p.has-text-align-right {text-align:right}
.has-text-align-left, p.has-text-align-left {text-align:left}

.noTopPadding {padding-top:0 !important}



/* Contact Form 7 Font Size */

.divform {max-width:640px; margin:auto}
.divform p {margin:0 3px}
.wpcf7-spinner {position:absolute !important}
.wpcf7-form .input-text,
.wpcf7-form input[type="text"],
.wpcf7-form input[type=".wpcf7-form input"],
.wpcf7-form input[type="password"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="search"],
.wpcf7-form textarea,
.wpcf7-form select {
	font-size: 1.3em;
	margin-bottom: 15px !important;
}
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"] {height:42px; width:100%}

@media (min-width: 800px) {
.c {width:48%; margin:0 1%; float:left}
	.wpcf7-form textarea {margin:0 1%}
}

.eut-one-third.eut-last-column,
.eut-one-half.eut-last-column {
	margin-right: 0;
}

fieldset {
	border: 1px solid rgba(0, 0, 0, 0.1);
	margin: 0 0 30px;
	padding: 15px;
}

legend {
	white-space: normal;
}

.eut-search {
	position: relative;
	display: block;
	max-width: 430px;
	margin: 0 auto;
}

.eut-search input[type='text'] {
	width: 100%;
	height: 45px;
	padding-left: 30px;
	padding-right: 35%;
}

.wpcf7-form .input-text, .wpcf7-form input[type="text"], .wpcf7-form input[type=".wpcf7-form input"], .wpcf7-form input[type="password"], .wpcf7-form input[type="email"], .wpcf7-form input[type="number"], .wpcf7-form input[type="url"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="search"], .wpcf7-form textarea, .wpcf7-form select, textarea {max-width:100%; border: 1px solid #957e5e;}

.wpcf7-form label {display:block}

.eut-one-third {text-align:center}

@media (min-width: 640px) {
	
.eut-one-third {
	width: 32.666666%;
	float: left;
	margin-right: 1%;
}

.eut-one-half {
	width: 49%;
	float: left;
	margin-right: 2%;
}
}




hr.short-rule { max-width:200px; margin:11px auto 16px ; color:#b1a382; border-bottom:1px solid #b1a382}

/* bird rule block */
.birdRule {cmax-width: 100%; height: 6px; border-top: 2px solid #b1a382; text-align: center; margin: 88px auto; }
.bird.ruleArt { width: 89px; text-align: center; margin: -40px auto 0 auto; background: #fff; padding: 0 10px; }

.footage {text-align:center; font-size:1.2em; color:#957e5e}

/* MP4 video */
figure.wp-block-video {margin:32px auto !important; max-width:1080px}

/* staff landing page */

.bioLink {position:absolute; top:0; left:0; right:0; bottom:0; z-index:1}
.staffGrid .gridCol_item {position:relative}
	.staffGrid .gridCol_item h2 { font-size:21px; text-transform:uppercase}   
	.staffGridTitle { font-size:16px; text-align:center; font-style:italic; margin-top:3px}
	.viewBio { text-align:center; text-transform:uppercase; font-size:13px}
	
	.grid_col3.staffGrid {display:flex; flex-direction:row;  flex-wrap: wrap;  }
	
	.grid_col3.eventsGrid .gridCol_item {flex: 1 0 96%;  width:96%;    margin: 2% 2%;}
	
		@media (min-width: 540px) {
				.grid_col3.staffGrid .gridCol_item {flex: 1 0 46%;  width:48%;    margin: 2% 2%;}
	}
	
	@media (min-width: 980px) {
		
		.staffGrid .gridCol_item h2 { font-size:24px;}
		
		.grid_col3.staffGrid .gridCol_item {flex: 1 0 26.5%;   max-width:31%;   margin: 2% 2%;}
		
	}


/* custom block colors */





.has-gold-background-color {
    background-color: #957e5e;
}

.has-gold-border-color {
    border-color:  #957e5e;
}

.has-gold-color {
    color: #957e5e;
}
 

.has-keyhotels-bluegray-background-color {
    background-color: #66758d;
}


 
.has-keyhotels-bluegray-color {
    color: #66758d;
}
 
.has-keyhotels-bluegray-border-color {
    color: #66758d;
}

.has-keyhotels-accent-background-color {
    background-color: #7eb7d0;
}
 
.has-keyhotels-accent-color {
    color: #7eb7d0;
}
 
.has-keyhotels-accent-border-color {
    color: #7eb7d0;
}


.has-black-background-color {
    background-color: #000000;
}
 
.has-black-color {
    color: #000000;
}
 
.has-black-border-color {
    color: #000000;
}

.has-white-background-color {
    background-color: #ffffff;
}
 
.has-white-color {
    color: #ffffff;
}
 
.has-white-border-color {
    color: #ffffff;
}

.has-gray-background-color {
    background-color: #003b49;
}
 
.has-gray-color {
    color: #003b49;
}
 
.has-gray-border-color {
    color: #003b49;
}

.has-red-background-color {
    background-color: #d3273e;
}
 
.has-red-color {
    color: #d3273e;
}
 
.has-red-border-color {
    color: #d3273e;
}

.has-blue-background-color {
    background-color: #1d4289;
}
 
.has-blue-color {
    color: #1d4289;
}
 
.has-blue-border-color {
    color: #1d4289;
}
/*
.bookingBtn {background:#957e5e; color:#000; padding:8px; position:absolute; top:16px; right:6%; font-weight:600}
.bookingBtn:hover {background: #957e5e; color:#fff}
*/
.languages {position:relative; width:100%; height:auto; z-index:1}
a.glink img {margin:0 1px !important}
.socialHeader {/*position:absolute; right:14%; top:11px; width:auto;*/}
.keyTranslate {position:absolute; left: 2%; top: 11px;}
.headerPhone { color:#005750; font-weight:400; font-size:22px; position:absolute; left:0; right:0; margin:auto; top:128px}
.headerPhone a {color:#fff}

div.social ul {margin:0 1em; padding:0; list-style:none; position:absolute; right:2%; top:66px}
div.social ul li {display:inline-block; font-size:1.2rem; margin:0 0.4rem; padding-top:4px}
div.social ul li a {color:#957e5e}
div.social ul li a span.hidden {display:none}
div.social ul li a:hover, .headerPhone a:hover {color:#ccc}

@media (min-width: 980px) {
	

		.languages {position:absolute; top:11px; right:111px; width:auto}
	.headerPhone {padding-right:11px}
	.headerPhone a, .headerPhone, div.social ul li a {color:#fff} 
	div.social ul li a:hover, .headerPhone a:hover {color:#957e5e}
	.headerPhone, div.social ul, .keyTranslate {position:relative; top:inherit; right:inherit; left:inherit}
	
		.topBar.sticky .headerPhone a, .topBar.sticky .headerPhone,  .topBar.sticky div.social ul li a {color:#005750}
}

@media (min-width: 1350px) {
	.bookingBtn {  }
	
}



	
		.languages {
    position: absolute;
    top: 11px;
    right: 5%;
    width: auto;
}
		
		.primaryNav {
    margin-top: 77px;
}
		.bookingBtn {display:block}
			.bookingBtn.mobileBook	 {display:none}
		
		.keyTranslate a.glink span {color:#fff; font-weight:bold}
		.keyTranslate #gt_lightbox a.glink span {color:#957e5e !important}
		.sticky .keyTranslate a.glink span {color:#005750}
		.mobileBook {display:none}
		.topBar.sticky .topBarContain .main-menu-btn {z-index:-1}
		
		.bookType span.notranslate {padding-left:8px}
		
	
		
				@media (max-width:980px){
					.headerPhone {display:none}
					
					.bookingBtn {display:none}
			.bookingBtn.mobileBook	 {display:block;}
					
					.topBar.sticky .topBarContain .bookingBtn.mobileBook {position:fixed !important; top:0; width:100%; padding:18px}
					.topBar.sticky .topBarContain .main-menu-btn, .topBar.sticky #main-menu {position:fixed !important; z-index:11; top:62px}
					div.social ul { right:-33px; top:146px; position:absolute; width:108px;  }
					div.social ul li a {color:#fff}
					.sticky div.social ul li a {display:none}
				
					.topBar.sticky 	.sm-coast {top:0}
					.main-menu-btn {z-index:9999}
		.keyTranslate a.glink span {color:#fff; font-weight:bold}
					
					.main-menu-btn {z-index:4 !important}
					
					.bookingBtn:hover { background:#957e5e;}
					
					.bookType {padding:6px; }
					.bookType:hover {cursor:pointer; color:#ffde9c}
					
					.sm-coast {}
					
					.sticky .sm-coast{padding-top:8px !important}
					.sticky .sm-coast{padding-top:8px !important}
					
						.keyTranslate {top:11px !important}
			
					}
					@media (min-width:980px){
						.phoneLI {display:none !important; }
						
				
		               }

@media (max-width:480px){
	div.social ul {top:154px; right:-44px;  }
	


}

/*  featured slider */



@media (max-width:720px){
	/*  featured slider to remove p from mobile */
.relaxText p {display:none !important}	
}

.full-width	.slick-slide {margin:0 0}

.relax_item {aspect-ratio:16/11 !important;}

@media only screen and (min-width: 480px){
	.relax_item {aspect-ratio:16/9 !important;}
}

@media only screen and (min-width: 720px){
	.relax_item {aspect-ratio:16/6 !important;}
}

.full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
			
.relaxLeft{color:#fff;width:70%;top:0;bottom:0;left:0;z-index:99;padding:6% 2% 5% 6%;background:#000;background:RGBA(0,0,0,0.5);text-align:left;flex-direction:column; /*min-height:400px*/ height:100%}
.relaxLeft h2{font-size:1.6em;line-height:116%;font-weight:300;margin:11px 0 22px 0; color:#fff; text-align:left}
.relaxText p{font-size:.95em;margin:0 0 11px 0;line-height:120%; display:block; padding-bottom:1em}
.relax { margin:36px 0; /* aspect-ratio:16/9 */}
.relax .slick-arrow{ margin-top:11px; padding:6px 8px 9px 8px;font-size:18px;background:none;color:#fff;border:1px solid #fff;}
.promoItem{min-height:320px;text-align:center;padding:0 11px;background:#fff;}


.relaxBtn {    margin:11px 0 16px; overflow:hidden; display:inline-block; }
.relaxBtn:after {  width:100%; display:block; height:11px}

a.relaxBtn {  text-decoration:none; display:inline-block; padding:8px 11px; background:#957e5e; color:#000; -webkit-border-radius: 6px;-moz-border-radius: 6px; border-radius: 6px; font-weight:400}
a.relaxBtn:hover {background:#000}
			
			.itemDescript { font-size:1.3em; margin-top:-6px }

.relaxText p { font-size: .8em}
	.relax .slick-arrow { background:#000; border:1px solid #ccc}
	.slider.relax .relaxLeft {padding:3% 2% 2% 6% !important}
	

@media only screen and (min-width:640px) {
	
	.relaxText p { font-size: 1em !important;}
.relaxLeft {  width:50% !important; padding:5% 6% 5% 6%; /*min-height:480px;*/}
.relaxLeft h2 { font-size:2.2em; margin:0 0 11px 0}
.relaxText p{ font-size:1em;  line-height:130%; }
	.relax .slick-arrow {background:none !important; border:1px solid #fff}
	
			}





.invertColor {-webkit-filter:invert(1); filter:invert(1);}

/* grid icon block */
.iconGrid { width:92%; margin:32px auto; max-width:1080px}
.iconGrid ul {list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; flex-direction:row; gap: 2%; justify-content: center; }
.iconGrid ul li {width:100%; min-height:300px;  /* border:1px solid #005750;*/margin:2% auto; max-width: 300px; position:inline-block; text-align:center; display:flex; flex-wrap:wrap; flex-direction:column; align-items: center;justify-content: center; padding:3%; position:relative}
.iconGrid ul li p {text-align:center; line-height:1.5; font-size:.85em; min-height:44px}
.iconGrid .icon {width:70px; height:auto}
.icon img {width:100%; height:auto}
.iconGridPhoto {position:absolute; z-index:-2; top:0; left:0; right:0; bottom:0; display:none;  background-color:#005750; }
.iconGrid li h3 { margin:8px auto 11px; font-weight:400; font-size: clamp(15px, 3.6vw, 1rem); font-family:var(--headline-font-family); text-transform:uppercase  }
.iconGrid ul li:hover .iconGridOverlay { position:absolute; top:0; left:0; right:0; bottom:0px; z-index:-1; background:#005750; background: RGB(94,64,37,0.6)}
.iconGrid .icon img, .iconGrid p, .iconGrid .icon h3 {z-index:1; position:relative}
.iconGridLink {position:absolute; z-index:3; top:0; left:0; right:0; bottom:0; }
.iconGrid ul li a:hover, a.iconGridLink:hover, a.iconGridLink {cursor: pointer !important}


.iconGrid ul li:hover .iconGridPhoto {display:block}
.iconGrid ul li:hover p, .iconGrid ul li:hover h3 {color:#fff}
.awesomeIcon { display: flex;border-radius: 60px;box-shadow: 0 0 2px #888;padding: 0.5em 0.6em;align-items: center;justify-content: center;width:88px;height:88px;background:#957e5e;}
.awesomeIcon i.fa, .awesomeIcon i.fa-solid, .awesomeIcon i.fas, .awesomeIcon i.fab {display:block;position:relative;font-size:44px;color:#fff;}
			
@media only screen and (min-width: 520px){
.iconGrid ul li {width:48%; max-width:100%; margin:1% 0;}
}

@media only screen and (min-width: 820px){
.iconGrid ul li {width:32%;}
.iconGrid .icon {width:86px; height:auto}
}

/* image rotator arrows */
.keyCarousel .slick-prev { left:1.5% !important}
.keyCarousel .slick-next {right:3% !important}
.keyCarousel img, .keyFade img {margin:0 !important}

.keyCarousel .slick-prev:before, .keyCarousel .slick-next:before {width:33px !important; height:33px !important; opacity:.5}

/* icon unordered list with columns  */

		.amenityList { max-width:780px;  margin:32px auto; padding:4%}
.amenityList li p {padding-right:22px; margin:0 0 4px 0; line-height:108%; font-size:.95em}
.amenityList li {padding-right:22px}
		.amenityList ul {display: grid;  column-gap: 10px; grid-template-columns: 1fr; row-gap: 1em; }
		.amenityList ul li:after {content: ''; display: block; height: 11px; }
		.fa-li img {max-width:22px; max-height:22px; width:auto; height:auto}
			@media (min-width: 480px) {
				.amenityList ul {grid-template-columns: 1fr 1fr; }
					.amenityList { padding:3%}
		}
		@media (min-width: 640px) {
			.amenityList ul { grid-template-columns: 1fr 1fr 1fr; }
			.amenityList { padding:2%}
		}

@media (min-width: 1200px) {
			.amenityList ul { grid-template-columns: 1fr 1fr 1fr 1fr; }
			.amenityList { max-width:1160px;  margin:32px auto; padding:4%}
		}

/* carousel */

.keyCarouselItem {position:relative; z-index:1}
 h2.roomCarouselHeadline {font-size:1.1em !important}
.gotoURL {width:100%;  position:absolute; top:0; right:0; left:0; bottom:0; z-index:2 }
a.viewAll { text-align:center; text-decoration:none; margin:18px auto; display:block; text-transform:uppercase; font-size:1.2em}
.slick-prev, .slick-next {width:48px !important}

/* fixing core blocks */
    /* adding margin for media text block */
.wp-block-media-text__media, .wp-block-media-text__content {margin:18px auto !important}
.wp-block-buttons:hover a {color:#fff; background:#000}


/* top Image rotator captions and titles */

/*figure.secTop,*/ figure.secTop img {aspect-ratio:16/9 !important; }
			.secTop  .slick-slider .slick-track {position:relatative}
			.secTop .slick-slide {margin-left:0 !important; margin-right:0 !important; padding:0 !important; /*aspect-ratio:16/9*/}
			.secTop  .rotateContent { position:absolute; top:0; color:#fff; display: flex;  align-items: center;
  justify-content:center; padding-bottom:8%;flex-direction:column; width:100%; height:100%  }
			.rotateContent p, .rotateContent h2 {color:#fff;padding:0 5%; text-align:center; max-width:920px; line-height:106%;filter: drop-shadow(0px 0px 4px #000);}
			.rotateContent p {font-size: clamp(18px, 2.2vw, 22px); margin:11px auto; }
			.rotateContent h2 {  margin:32px auto 11px;font-size:1.2rem; line-height:1; font-size: clamp(34px, 4.4vw, 3.2rem);  font-weight:100; }
.rotate-button {font-size: clamp(16px, 2vw, 17px); background:#957e5e; padding:8px 11px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; color:#fff; margin:8px auto}
			.secTop  .rotateHolder div {width:100%; height:100%; }
			.secTop  .rotateHolder img {position:relative;/* aspect-ratio:16/9 !important*/}
			
			.secTop.shallow {overflow:hidden; background:#544923;  background-size:100% }
.home .secTop.shallow {   background-size:100% }
			.rotateHolder {display:none}
			.slick-initialized.rotateHolder {display:block}

 .keyFade {position:relative}
			 .secTop .rotateContent2{  width:auto; position:absolute; width:auto !important; height:auto !important; bottom:0;  /*display:flex;  align-self: flex-end; flex-grow:1; flex-direction:column; */color:#fff;  width:400px; padding:0 8% 8%; }
	  /*
			.rotateContent2 p {font-size: clamp(22px, 2.9vw, 2.6rem); margin:0 auto; color:#fff; margin-top:-8px;  text-align:left; line-height:1.2;text-shadow: 0px 0px 4px rgba(0,0,0,0.88); font-family:'Lato', san-serif }
			.rotateContent2 h2 {color:#fff; font-size:1.2rem; font-size: clamp(28px, 4.4vw, 3.9rem); margin:32px auto 11px; font-weight:500;font-family: "Prata", serif; text-align:left; line-height:1 !important; text-shadow: 0px 0px 4px rgba(0,0,0,0.88);}
         */
/* De Gulden Poorte style changes */

img {width:100%; height:auto; display:block;}
a.glink img {max-width:32px}
.gt_container--u3w7pc a.glink span {color:#000;}
.keyTranslate .gt_container--u3w7pc a.glink span {color:#fff;}
.sticky .keyTranslate .gt_container--u3w7pc a.glink span {color:#fff;}
.gt_white_content {background:#000 !important}
.sticky .gt_white_content {background:#fff  !important}



.gt_white_content .gt_languages {max-height:375px !important}



		.test, .rotateDiv, .sliderContainer {position:relative;  content:''; /*width:100vw;*/ height:auto; aspect-ratio:16/9; /*max-height:100vh;*/ width: 100vw !important; margin:0; padding:0 }
		.imageRotate {width:100%; height:100%;  object-fit: cover; position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1; aspect-ratio:16/9; }
		.rotateDiv:after {content:"";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
			z-index:0;
	aspect-ratio:16/11; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+99,000000+99&0.66+0,0.04+36,0.08+86,1+100 */
background: linear-gradient(0deg, rgba(2,0,36,0.027048319327731107) 0%, rgba(0,0,0,0.3603816526610645) 100%); }

.rotateDiv {z-index:1; position:relative;}


.slick-slider .slick-list {
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  -o-transform: none !important;
  transform: none !important;
}

		
		.rotateContent { position:absolute; bottom:3%; z-index:2 !important; color:#fff;  }

.imageRotate img { object-fit: cover;  height:100%; aspect-ratio:16/9; }
.slick-slider {display:none}

		.secTop .rotateContent {
    position: absolute;
   top:inherit !important;
	bottom:0 !important;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
    flex-direction: column;
    width: 100%;
    height: 50%;
			padding-top:18%;
			
			 left:0; right:0; margin-left:auto; margin-right:auto;
				
				

}
			

@media (min-width: 640px) {
	.secTop .rotateContent {padding-top:42%}
	
	.rotateContent h2 {  margin:32px auto 22px;}
}
		

		
		.main-menu2 {display:none}
		
		
		
		.navAndLogoContain {display: flex;  align-items: center;
  justify-content: center; flex-direction:row}
		.logoCenter {max-width:252px;}
		.topBar.sticky .logoCenter  {display:none}
		
		.sm-coast {
text-align: inherit !important;
width: 100% !important;
}
		
	.rotateContent a {color:#fff !important; text-decoration:none}	
		
		@media (min-width: 981px) {
			
			.topBar.sticky .navAndLogoContain {margin-top:11px}
			.main-menu2 {display:block}
			.leftTopNav, .rightTopNav {width: calc(50% - 188px);}
			
			.topBar.sticky .leftTopNav, .topBar.sticky .rightTopNav {padding-top:32px}
			
			.leftTopNav {text-align:right}
			.leftTopNav ul {padding-right:4%; padding-top:32px}
			.rightTopNav ul {padding-left:4%; padding-top:32px}
			.sticky .leftTopNav ul, .sticky .rightTopNav ul {padding-top:0}
			.rightTopNav {text-align:left}
			
			.rotateContent {max-width:50%;}
			
			.rotateContent h2 {margin-bottom:4px;}
			
			.sm-coast li a:hover { color: #baa383;}
			.topBar .sm-coast>li>a:hover { color: #e9e2d8;}
			.topBar.sticky .sm-coast>li>a:hover {color:#957e5e}
			
			/*
				.rotateDiv:nth-of-type(odd) .rotateContent {left:-1111px}
		.rotateDiv:nth-of-type(even) .rotateContent {right:-1111px}
		
		.rotateDiv:nth-of-type(odd).slick-active .rotateContent { animation: fadeInRightBig; animation-duration: .8s;  left:6%; right:auto}
.rotateDiv:nth-of-type(even).slick-active .rotateContent { animation: fadeInLeftBig; animation-duration: .8s; right:6%; left:auto}
			
			*/
			

			.languages2 {position:relative; top:0; }
			
			.headerPhone, div.social ul, .keyTranslate, .bookingBtn {position:absolute}
			.headerPhone { left:13%; top:35px}
			div.social ul {left:6%; top:32px; }
			.keyTranslate {right:260px; top:35px}
			.bookingBtn {background: none; right:6%; top:30px; width:132px; position:absolute !important;; margin:0; left:inherit !important; text-align:center; border:1px solid #fff }
			
			.sticky .bookingBtn {border:#999 solid 1px; font-weight:300 }
			.sticky .bookingBtn:hover {background:rgba(0, 0, 0, 0.03)}
			.sticky .bookingBtn a {color:#666; }
						.social { display: block !important;}
			.headerPhone {font-size:20px;}
			
			.topBar.sticky .headerPhone a, .topBar.sticky .headerPhone, .topBar.sticky div.social ul li a {color:#957e5e}
			
		}
		
		@media (max-width: 981px) {
			
			.logoCenter { max-width:188px; display:block; margin:0 auto; width:188px; position:relative;}
			.navAndLogoContain {display:block; }
			.logo2 {display:none}
			#main-menu2 {display:none}
			.logoCenter {max-width:144px; }
			.topBar {background:none !important;height:auto !important}
			.header {background:#000}
			
			div.social ul {top:62px; right:0; text-align:right}
			
	
.secTop {margin-top: 161px !important }
			
			.rotateContent {padding-left:4%; padding-right:4%}
			
			
		}
		
.topBar.sticky {border-bottom:3px solid #baa383}
		
		
.footer {background:#000; background-position:center center; background-size:cover; position:relative; border-top:3px solid #957e5e }
		


.footerContain2 {z-index:1; position:relative}
		
	
		
		.LXRY-Home {max-width:164px; height:auto}
		.keymangement, .keymangement a {color:#fff; text-align:center; font-size:.9em; position:relative}
			p.keymangement  {text-transform:uppercase; font-size:.85em !important; /*letter-spacing:.08em*/ }
		.keymangement a {padding:6px 0;  display:block; text-underline-offset: 6px; text-decoration:none }
		.footerCol3, .footerCol3 a {color:#fff; }
         

	
.parallax-window{min-height:580px;background:transparent;scroll-behavior:smooth; width:100%;position:relative;z-index:0; }


.container{}
.parallax-slider{height:480px;width:100%;position:relative;}

		
.parallax-window2 {width:100%; height:320px;  z-index:-22; display:none; }
.parallax-slider p{width:100%;position:relative;box-shadow:1px -7px 7px -3px rgba(0,0,0,0.28);}
.sectionContent{height:auto;overflow:visible;z-index:2;position:relative;background:#fffdf6;}

.gold-borders {border-top:4px solid #957e5e; border-bottom:4px solid #957e5e}

/* fixed wide image block  */

.fixedWideImage {width:100vw;  height:0; padding-top:60%;  aspect-ratio:16 / 14 !important; }

@media (min-width: 640px) {
	.fixedWideImage {padding-top:40%;  aspect-ratio:16 / 12 !important; }
}
		
/*.entry-content p {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight: 300;
} */
.has-small-font-size {font-size:14px !important}

/*
.grayGradient {
background: linear-gradient(0deg, rgba(2,0,36,0.027048319327731107) 0%, rgba(0,0,0,0.3603816526610645) 100%);
}
*/
.grayGradient2.secTop .imageRotate, .grayGradient3.secTop  {position:relative}
.grayGradient2.secTop .imageRotate:after, .grayGradient3.secTop:after{
	content:"";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	z-index:1;
	
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+99,000000+99&0.66+0,0.04+36,0.08+86,1+100 */
background: linear-gradient(0deg, rgba(2,0,36,0.028) 0%, rgba(0,0,0,0.37) 100%); }
		
.home .secTop.shallow  { background:#000 !important; }
.home .secTop.shallow .slick-slide {height:auto !important; aspect-ratio:16/9}

/* to change core block columns to remove flex at 800px or less for mobile and tablets */
@media (min-width: 600px) and (max-width: 800px) {
  .wp-block-column:not(:only-child), body .is-layout-flex.wp-container-core-columns-is-layout-1 {
   display:block !important
  }
}

.full-width.gold-borders {margin-top:46px; margin-bottom:46px}

/* class to reverse flex columns */
@media (min-width: 600px) {
	.reverse {flex-direction: row-reverse;}
}

.mobile {display:block}
.desktop {display:none}
@media (min-width: 600px) {
 .mobile {display:none !important}
	.desktop {display:block}
}
.moveup {margin-top:-18px}


.fixedWideImage {background-size:cover !important;  background-attachment: fixed !important;}

@media (hover: none){
.fixedWideImage  { background-repeat:no-repeat !important; background-attachment:inherit !important}
}

/* promo in header */
.promoType {display:none}
a.headerPromo {text-decoration:none;  color:#fff; text-transform:uppercase; font-size:.9em; display: flex;  align-items: center;  justify-content: center; flex-direction:row;}
a.headerPromo p {margin:0; text-align:center}
.sticky a.headerPromo {color:#000}
.sun {color:#ffaa07; padding:0 4px; font-size:.8em}
@media (min-width:980px){
.promoType { position:absolute; top:27px !important; left:14% !important; right:inherit; height:42px; display: flex;  align-items: center; justify-content: center;}	
		}