[[$page_head]]

<!-- internal CSS is used so client can change background images through the CMS -->

 <style type = "text/css" >  
    body {
	overflow:auto !important
	}
	.firstImgOnImg { background-image:url([[*background_image:phpthumbof=`w=1900&h=1200&f=jpg&zc=1`]]); }
    .firstImgOnImg .band { background-image:url([[*background_image:phpthumbof=`w=1900&h=1200&f=jpg&zc=1&fltr[]=gray`]]); }  
	.rowWrapper.tableRow.stacked {
	display:flex;
	flex-wrap:wrap;
	padding:0
	}
	.spacer.column {
		padding: 5px;
		display:none;}
	.roomWrapper.column.thirty	{
		width: 50%;
	}
	.roomWrapper img {
	  position: relative;
	  z-index: 50;
	  width: 100% !important;
	  transition: all ease .3s;
	  -webkit-filter: grayscale(0);
	  }
.roomWrapperContent h2 {
	    font-size: 20px !important;
    margin: 15px auto 25px !important;
	font-weight:500 !important;
	text-transform:uppercase
}	
.whiteBox .insetContent {
	text-align:center;
	}
	.roomWrapper .overlayContent {
	  display: flex;
	  flex-wrap: wrap;
	  padding-top: 0;
	  padding-left: 3%;
	  padding-right: 3%;
	  align-items: center;
	  justify-content: center;
	   align-self: center;
	  height: auto;
	  align-content: center;
  }
  	.roomWrapper .overlayContent a,
	.roomWrapper .overlayContent hr{
	  display:block;
	  flex: 1 100%;
	  font-size: 23px;
	  font-weight:400
	}
	.contentSliderSecondLoad {
		display:none;
	}
	.lightboxOverlay .whiteBox h3, 
	.lightboxOverlay .whiteBox .forty.column{
	  width: 100%;
	  float: none;
	  padding: 0 10% 50px
  }
.lightboxOverlay h1, .lightboxOverlay .h1Style, .lightboxOverlay h2, .lightboxOverlay .h2Style, .lightboxOverlay h3, .lightboxOverlay .h3Style, .lightboxOverlay h4, .lightboxOverlay .h4Style, .lightboxOverlay h5, .lightboxOverlay .h5Style, .lightboxOverlay h6, .lightboxOverlay .h6Style {
    color: #231F20;
    text-transform: uppercase;
    background-color: transparent;
    padding: 0;
    border-top: none;
    border-bottom: none;
	text-align:center
}
.lightboxOverlay h3.centered {
    padding:20px 0px 7px !important
}
.lightboxOverlay h3.centered span {
    color: #A7A9AC;
    font-size: 19px;
    line-height: 22px;
	padding:0
}
.lightboxOverlay .whiteBox .forty h3 {
    color: #A7A9AC;
    font-size: 18px;
    line-height: 22px;
	padding:0;
	margin:0 0 35px; 
	text-align:center;
	font-weight:700
	}
.lightboxOverlay .whiteBox .forty h2 {
    color: #A7A9AC;
    font-size: 23px;
    line-height: 23px;
    padding: 0;
    margin: 0 0 16px 0;
    text-align: center;
    font-weight: 500;
}
.lightboxOverlay .whiteBox .forty p {
    color: #A7A9AC;
    font-size: 15px;
    line-height: 22px;
    padding: 0;
    margin: 0 0 40px 0;
    text-align: center;
}
	.lightboxOverlay .whiteBox, .lightboxOverlay #dateInfoBox {
    margin:5% auto;
    padding: 2.5%;
	max-width: 800px;
	float:none
}
.lightboxOverlay .column.sixty.noPadding.notMobile,
.square.bottom.right,
.square.bottom.left{
	display:none !important;
	}
.lightboxOverlay .whiteBox .insetContent {
	border: 1px solid #d1a76c
}

@media (max-width: 825px) {
.dropShadow, .sticky-wrapper, .reservationsWrap, footer #top {
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.0);
}
.imgOnImg {
	    height: 100%;
    min-height: 0;
}

}

@media (max-width: 1250px) {
.col-8 {
    width: 60%;
    display: inline-block;
}
.col-4 {
    width: 35%;
    display: inline-block;
    vertical-align: top;
}
}


@media (max-width: 950px) {
.col-8 {
    width: 50%;
    display: inline-block;
}
.col-4 {
    width: 45%;
    display: inline-block;
    vertical-align: top;
}
.blackBox, .whiteBox, #dateInfoBox {
    background-color: white;
    border: none;
    padding: 16px;
    position: relative;
}
}

@media (max-width: 950px) {
.col-8 {
    width: 100%;
    display: inline-block;
}
.col-4 {
    width: 100%;
    display: inline-block;
    vertical-align: top;
}
.roomWrapper.column.thirty {
    width: 100%;
}
}

@media (max-width: 600px) {
.lightboxOverlay .whiteBox .forty h3 {
    font-size: 18px;
    line-height: 22px;
}
.lightboxOverlay .whiteBox .forty h2 {
     font-size: 19px;
    line-height: 19px;
}
.lightboxOverlay .whiteBox .forty p {
    color: #A7A9AC;
    font-size: 13px;
    line-height: 19px;
}
.desktopClass {
	display: none;
}
.mobileClass {
display: block;

}
}

<!-- mobile flickering issue code -->

.mobileClass {
	display: none !important;
}

  </style> 

  </head>

  <body class="resource-[[*id]] noSpacer"> 

	[[*code-inject-after-body]]

	[[++codeInject]]

  	[[$hiltonWidget]]
	
	[[$reservationsWidget]]

	[[$submenus]]
	
	[[$imgOnImgHeader]]

	[[$nav]]

<section class="mixedContent">

		[[*textblock1:is=`on`:then=``:else=`
			<div class="row text1">
            <div class="rowWrapper stacked" >

                             <div class="column">
                                [[*textblock1]]
                            </div>

                     </div>
                </div>
				`]]

    <div class="col-8">
	<div class="row">
      <div class="rowWrapper tableRow stacked desktopClass" >
      [[!getImageList ? 
      &tvname = `featured_blocks` 
      &tpl = `tpl_spa_blocks`
       ]]
      </div>
	  <div class="rowWrapper tableRow stacked mobileClass" >
      [[!getImageList ? 
      &tvname = `featured_blocks` 
      &tpl = `tpl_spa_blocks`
       ]]
      </div>
	  <!--close rowWrapepr-->
    </div>

	</div>
	<div class="col-4">
		<div class="roomWrapper column thirty sides">
							
		<div class="whiteBox column oneHundred ltBkg" >
			
			<div class="insetContent contentHeight ">
				
					<hr class="twenty">
					
					<h3 class="centered">Book Today</h3>
				
					<hr class="twenty">
				
					[[*text_block_2]]
																									
				<span class="left bottom square"></span>
			
				<span class="right bottom square"></span>
				
			</div><!-- inset content-->
			
		</div><!-- close black box-->
	
	
	</div><!--close room Wrapper -->

	</div>



  </section><!-- close mixedContent -->



	<!-- lightbox -->
  [[!getImageList ? 
  &tvname=`featured_blocks` 
  &tpl=`tpl_lightBox_blocks`
   ]]
  [[$footer]]
  [[$common_js]]
  [[$background_check]] 
  [[++codeInject_bottom]]
   
  </body> 
</html>