/*--GENERAL--------------------------------------------*/

body{
	background:#F0F7F9;
	margin:0px;
	padding:0px;
	font-family: 'Montserrat', sans-serif;
	font-weight:400;
	color: #555960;
	font-size:15px;
	line-height: 1.5em;
	height:100%;
}

a{
	color:#000000;
}

li{
	margin-bottom:15px;
}

form input[type="submit"]{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

#banner{
	position:fixed;
	left:0;
	bottom:0;
	width:100%;
	padding:24px 8px;
	text-align:center;
	background-color:#D8B291;
	color:black;
	font-weight:bold;
	font-size:26px;
	z-index:2000;
}

@media all and (max-width: 840px) { 
	#banner{
		bottom:50px;
	}
}

/*--HEADER--------------------------------------------*/

header{
	display:grid;
	position:relative;

	width:100%;
	height:100vh;

	grid-template-columns: repeat(12, 1fr);
	grid-template-rows:1fr,85px,47px;
	grid-column-gap:15px;

	align-items:end;
}

/*booking Mask */

#bookingMask{
	display:none;
	background-color:#EFF5F6;
	border:5px solid #ffffff;
	z-index:100;
	width:100%;
	height:85px;

	grid-column:3/11;
	grid-row:2/3;
	margin-bottom:43px;
}

#bookingMask form{
	display:grid;
	grid-template-columns: repeat(4,1fr);
	grid-template-rows:85px;
	grid-column-gap:15px;
	align-items:center;
}

#bookingMask form label{
	display:block;
	font-size:1em;
	font-weight:400;
	color:#7A6D6D;
	text-transform: uppercase;
	margin:0px;
	padding:0px;
	line-height:1.1em;
}

#bookingMask form input[type="text"]{
	height:40px;
	border:1px solid #A3BAD4;
	margin:0px;
	padding:0px;
	width:100%;

	background-image: url("../assets/icons/CalendarOrange.svg");
	background-repeat:no-repeat;
	background-position: 98% center;
	background-color:#ffffff;

	font-size:1em;
	color:#7a6d6d;

	padding-left:15px;

	box-sizing: border-box;	
}

#bookingMask form input[type="submit"]{
	display:block;
	position:relative;
	
	font-family:"Playfair Display",serif;
	text-transform:uppercase;
	color:#000;
	font-weight:300;
	font-size:1.067em;
	margin-right:5px;
	height:55px;
	letter-spacing:2px;

	background-color:  #4DA3C1;
	border:1px solid #fff;

	box-shadow: 0px 0px 0px 3px #4DA3C1;

	transition: all .5s;

	cursor:pointer;
}

#bookingMask form input[type="submit"]:hover{
	background-color:rgba(0,0,0,1);
	color:#fff;
	box-shadow: 0px 0px 0px 0px #000000;
	border:1px solid #000000;
}

/* large home page logo placement */
#largeLogo{
	display:inline-block;
	z-index:10;
	justify-self:center;
}

#largeLogo img{
	width:50vw;
	height:auto;
}

/* top bar */
#topBarWrapper{
	display:block;
	position:fixed;
	left:0px;
	top:0px;

	width: 100%;
	height:95px;

	z-index:200;

	background-color:rgba(255,255,255,0);
	transition:all .5s;
}

.scrollView{
	background-color:rgba(255,255,255,1) !important;
	box-shadow: 0px 0px 80px 0px rgba(0,0,0,.4);
}

.topBarContent{
	display:block;
}

/* --booking items-- */
.bookingWrap{
	width:100%;
	display:flex;
	flex-wrap:wrap;
}

.calendar{
	overflow:hidden;
	display:block;
	margin:0 auto;
	width:100%;
	max-width:calc(100% - 400px);
	min-height:500px;
	border:none;
}

.booking{
	width:400px;
	background-color:#fff;
}

.booking iframe{
	overflow:hidden;
	display:block;
	margin:0 auto;
	width:100%;
	max-width:400px;
	min-height:500px;
	border:none;
}

/* --main book now placement */
#mainBook{
	display:block;
	position:absolute;
	top:0px;
	right:0px;
	width:113px;
	height:95px;
	background-color:rgba(0,0,0,1);
	text-align:center;

	text-decoration:none;
	color:#ffffff;
	font-family:"Playfair Display", serif;
	font-size:1em;
	text-transform:uppercase;
	letter-spacing:.1em;
	line-height:1em;

	-webkit-transition: background-color .3s; /* Safari */
    transition: background-color .3s;
}

#mainBook img{
	padding-top:14px;
}

#mainBook p{
	margin:0px;
	padding-top:12px;
	color:#ffffff;
	line-height:1.1em;
}

#mainBook .innerBorder{
	position:absolute;
	right:0px;
	top:0px;
	width:113px;
	height:95px;
	border:1px solid;
	border-color:rgba(255,255,255,0);

	-webkit-transition: right .5s, top .5s, width .5s, height .5s, border-color .3s;  /* Safari */
    transition: right .5s, top .5s, width .5s, height .5s, border-color .3s;
}

#mainBook:hover {
	background-color: rgba(224,106,25,1);
}

#mainBook:hover .innerBorder{
	width:103px;
	height:85px;
	top:4px;
	right:4px;

	border-color:rgba(255,255,255,1);
}

#barLogo{
	display:none;
	position:absolute;
	top:17px;
	left:14px;
	opacity:0;

	transition:all .5s;
}

.scrollView #barLogo{
	display:block;
	opacity:1;
}

/* main navigation */

#mainNavigation{
	display:block;
	width:calc(100vw);
	margin-left:0px;
	height:95px;

	text-align:center;
}

.scrollView #mainNavigation{
	width:calc(100vw - 230px);
	margin-left:200px;
	text-align:right;
}

.mainNavWrapper{
	margin-top:20px;
}

#mainNavigation a, .mainNav2, .mainNav3{
	display:inline-block;
	padding:14px 16px;
	font-family:"Playfair Display", serif;
	color:#ffffff;
	font-size:1em;
	letter-spacing:.2em;
	text-align:center;

	text-transform:uppercase;

	text-decoration: none;


	width:calc((100vw - 120px - 32px) / 6);

	background-color: rgba(0,0,0,0);

	-webkit-transition: color .5s, background-color .5s;  /* Safari */
    transition:  color .5s, background-color .5s;
}

#closeNav{
	display:none !important;
	cursor:pointer;
}

#closeNav::after{
	font-family:"Font Awesome 5 Free";
	font-weight:300;
	color:#ffffff;
	content:" \f057";
	padding-left:5px;
	font-size:1.5em;
}

.scrollView #mainNavigation a, .scrollView .mainNav2, .scrollView .mainNav3{
	color:#000000;
	width: auto;
}

@media all and (max-width: 1149px) { 
	.scrollView #mainNavigation a, .scrollView .mainNav2, .scrollView .mainNav3{
		color:#ffffff;
	}
}



.mainNav2::after, .mainNav3::after{
	font-family: "Font Awesome 5 Free"; font-weight:300; color: #ffffff; content: " \f0fe";
	transition: all .5s;
}

.scrollView .mainNav2::after, .scrollView .mainNav3::after{
	color:#000000;
}

.scrollView .active::after{
	color:#ffffff;
}

@media all and (max-width: 1149px) { 
	.scrollView .mainNav2::after, .scrollView .mainNav3::after{
		color:#ffffff;
	}
}

.scrollView .topBarContent #mainNavigation .mainNavWrapper a.scrollview{
	color:#ffffff;
}

.rs-dropdown, .rp-dropdown{
	display:inline-block;
	/*overflow:hidden;*/
}

.rs-dropdownContent, .rp-dropdownContent{
	display:none;
	position:absolute;
	background-color:#000000;
	opacity:0;
	min-width:200px;
	z-index:100;
	overflow:hidden;
}

#mainNavigation .rs-dropdownContent a, #mainNavigation .rp-dropdownContent a{
	color:#ffffff;
	display:block;
	text-align:center;
}

#mainNavigation .mainNav:hover, #mainNavigation .active{
	background-color: rgba(0,0,0,1);
	color:#ffffff !important;
}

.rs-dropdown:hover .mainNav2, .rp-dropdown:hover .mainNav3{
	background-color: rgba(0,0,0,1) !important;
	color:#ffffff !important;
}

.rs-dropdown:hover .mainNav2::after, .rp-dropdown:hover .mainNav3::after{
	content: " \f146";
	color:#ffffff;
}

.rs-dropdown:hover .rs-dropdownContent, .rp-dropdown:hover .rp-dropdownContent{
	display:block;
	
	animation-name:showDropdown;
	animation-duration:.4s;
	animation-fill-mode:forwards;
}

#mainNavigation .rs-dropdown .rs-dropdownContent a:hover, #mainNavigation .rp-dropdown .rp-dropdownContent a:hover{
	background-color:rgba(224,106,25,1);
}

/* home page image rotator */

#mainImageRotator, #subImageRotator{
	display:grid;

	grid-template-columns:1fr;

	align-items:center;
	align-content:center;

	position:absolute;
	top:0px;
	left:0px;

	width:100%;
	height:100vh;
}

#subImageRotator{
	height:80vh;
}

.imageRotatorItem{
	position:absolute;
	top:0px;
	left:0px;

	width:100%;
	height:100vh;
	overflow:hidden;
	background-size:cover;
	background-position: center center;
}

#subImageRotator .imageRotatorItem{
	height:80vh;
}

/*--tablet mobile nav --*/
.navLauncher{
	display:none;
}

#mobileNavBar{
	display:none;
	position:fixed;
	left:0px;
	bottom:0px;

	height:50px;
	width:100%;

	background-color:#D8EAED;

	z-index:9500;
}

/*--UNIVERSAL ITEMS------------------------------------------*/

.callouts{
	display:grid;
	grid-template-columns: repeat(3, 4fr);

	grid-gap:15px;

	padding:15px;
	background-color:#ffffff;
}

@media all and (max-width: 1060px) { 
	.callouts{
		grid-template-columns: 1fr;
	}
}	

.calloutItem{
	position:relative;
	width:100%;
	background:#225161;
}

.calloutItem img{
	width:100%;
	height:auto;
	opacity:.55;
	padding:0px;
	margin:0px;
}

@media all and (max-width: 840px) { 
	.calloutItem img{
		opacity:.40;
	}
}

.calloutItem .caption{
	position:absolute;
	left:0px;
	top:40%;
	width:100%;
	text-align: center;
	line-height:1em;
	font-family:"Montserrat", sans-serif;
	font-weight:300;
	font-size:3em;
	color:#ffffff;
	text-transform: uppercase;
}

@media all and (max-width: 840px) { 
	.calloutItem .caption{
		top:40%;
		font-size:2em;
		line-height: 1em;
	}
}

.buttonHolder{
	position:absolute;
	bottom:30px;
	left:0px;
	width:100%;

	text-align:center;
}

.secondaryButtonWhite{
	display:inline-block;
	font-family:"Playfair Display",serif;
	text-transform:uppercase;
	color:#ffffff;
	font-weight:400;
	font-size:1.067em;
	letter-spacing:2px;

	background-color: rgba(0,0,0,.2);
	border:1px solid rgba(255,255,255,1);

	box-shadow: 0px 0px 0px 4px rgba(0,0,0,.2);

	transition: all .5s;

	cursor:pointer;

	text-decoration:none;
}

.secondaryButtonWhite:hover{
	background-color: rgba(0,0,0,1);
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,1);
	border:1px solid rgba(255,255,255,0);
}

.secondaryButtonWhite span{
	display:block;
	padding:12px 30px 15px 30px; 
}


.primaryButton{
	display:inline-block;
	font-family:"Playfair Display",serif;
	text-transform:uppercase;
	color:#000;
	font-weight:400;
	font-size:1.067em;
	letter-spacing:2px;

	background-color: #4DA3C1;
	border:1px solid #ffffff;

	box-shadow: 0px 0px 0px 4px #4DA3C1;

	transition: all .5s;

	cursor:pointer;

	text-decoration:none;
}

.primaryButton:hover{
	background-color: #4DA3C1;
	box-shadow: 0px 0px 0px 0px #4DA3C1;
	border:1px solid rgba(255,255,255,0);
}

.primaryButton span, .actionButton span{
	display:block;
	padding:12px 30px 15px 30px; 
}

.actionButton{
    display: inline-block;
    font-family: "Playfair Display",serif;
    text-transform: uppercase;
    text-decoration:none;
    color: #000;
    font-weight: 300;
    font-size: 1.067em;
    letter-spacing: 2px;
    background-color:  #4DA3C1;
    border: 1px solid #fff;
    box-shadow: 0px 0px 0px 3px #4DA3C1;
    transition: all .5s;
    cursor: pointer;
}

.actionButton:hover{
	color:#fff;
	background-color: #000;
	box-shadow: 0px 0px 0px 0px #4DA3C1;
	border:1px solid rgba(255,255,255,0);
}



/*--FOOTER---------------------------------------*/
footer{
	display:grid;
	grid-template-columns: 9fr 3fr;
	grid-gap:15px;
	padding:15px;
	height:190px;
	background-color:#000000;
	/*background-image: url("../assets/footerPattern.png");*/
}

@media all and (max-width: 1060px) { 
	footer{
		grid-template-columns:1fr;
		grid-template-rows:1fr 1fr 1fr;
	}
}

@media all and (max-width: 840px) { 
	footer{
		height:340px;
	}
}

footer navigation a{
	display:inline-block;
	margin:33px;
	margin-top:18px;
	margin-bottom:0px;
	padding-bottom:0px;
	border-bottom:2px solid rgba(246,151,87,0);

	font-family: "Playfair Display",serif;
	font-weight:300;
	font-size:1.1em;
	color:#ffffff;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;

	transition: all .3s;
}

@media all and (max-width: 1060px) { 
	footer navigation{
		text-align: center;
	}
}

footer navigation a:hover{
	color:#F69757;
	padding-bottom:5px;
	border-bottom:1px solid rgba(246,151,87,1);
}

#social{
	margin-top:10px;
	text-align: right;
}

@media all and (max-width: 1060px) { 
	#social{
		text-align:center;
	}
}

#social img{
	margin-left:20px;
}

/*--standard text styles-------------------------*/
h1{
	font-family:"Playfair Display",serif;
	font-weight:800;
	font-size:3.667em;
	line-height: .8em;
	margin-bottom:15px;
	color:#2F3135;
}

@media all and (max-width: 840px) { 
	h1{
		font-size:3em;
		margin-bottom:7px;
	}
}

h1 span.small{
	font-weight:400;
	font-size:.636em;
}

h2{
	font-family:"Playfair Display",serif;
	font-weight:400;
	font-style:italic;
	font-size:2.2em;
	line-height:1em;
	color:#2F3135;

	margin:0px;
	margin-bottom:25px;
}

@media all and (max-width: 840px) { 
	h2{
		font-size:2em;
	}
}

h3{
	font-family:"Playfair Display",serif;
	font-weight:900;
	font-size:2.5em;
	line-height: 1em;
	margin-bottom:15px;
	letter-spacing: 1px;
	color:#2F3135;
}

h4{
	font-family:"Playfair Display",serif;
	font-size:1.867em;
	line-height:1em;
	margin:0px;
	padding:15px 0px;
	color:#2F3135;
}

h4.bookTitle{
	padding-left:15px;
}

h5{
	font-family:"Playfair Display",serif;
	color:#2F3135;
	font-size:1.667em;
	text-transform: uppercase;
	font-weight:400;
	line-height:1em;
	margin:0px;
	margin-top:25px;
}

h6{
	font-family:"Playfair Display",serif;
	color:#2F3135;
	font-size:1.5em;
	font-weight:400;
	font-style: italic;
	line-height:1em;
	margin:0px;
	margin-bottom:25px;
}

p{
	line-height:2em;
	margin-top:0px;
}

hr{
    overflow: visible; /* For IE */
    padding: 15px;
    border: none;
    border-top: 1px dotted #0E81AA;
    color: #0E81AA;
    text-align: center;
    width:100%;
}

.borderOn{
	padding:15px;
	border: 1px dotted #0E81AA;
}

/*accordion*/
details{
	padding:10px;
	background:#C9E5ED;
	margin-bottom:1px;
}


summary{
	font-family:"Playfair Display",serif;
	font-size:1.3em;
	font-weight:900;
	color:#000;
	list-style: none;
}

details:hover{
	cursor:pointer;
}

summary:focus{
	outline:none;
}

details[open]{
	background:#ffffff;
}

summary::-webkit-details-marker {
  background-image: url("../assets/icons/plus.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 10px;
  color: transparent;
}

details p{
	padding:15px;
}

/*grids*/
.grid12{
	display:grid;
	grid-template-columns:repeat(12, 1fr);
	grid-gap:15px;
}

@media all and (max-width: 840px) { 
	.grid12{
		grid-template-columns: 1fr;
	}
}

/* spans */
.span12{
	grid-column:span 12;
}
@media all and (max-width: 840px) { 
	.span12{
		grid-column:auto;
	}
}

.span6{
	grid-column:span 6;
}
@media all and (max-width: 840px) { 
	.span6{
		grid-column:auto;
	}
}

.span2{
	grid-column:span 2;
}
@media all and (max-width: 840px) { 
	.span2{
		grid-column:auto;
	}
}

.span3{
	grid-column:span 3;
}
@media all and (max-width: 840px) { 
	.span3{
		grid-column:auto;
	}
}

.span4{
	grid-column:span 4;
}
@media all and (max-width: 840px) { 
	.span4{
		grid-column:auto;
	}
}


/* -- KEYFRAMES --*/
@keyframes showDropdown{
	0% {opacity:0; margin-top:25px;}
	100% {opacity:1; margin-top:0px;}
}

@keyframes expandDrop1{
	0% {height:0px;}
	100% {height:255px;}
}

@keyframes expandDrop2{
	0% {height:0px;}
	100% {height:255px;}
}

@keyframes showNavAnim{
	0% {height:0vh;}
	100% {height:100vh;}
}

@keyframes removeNavAnim{
	0% {height:100vh;}
	100% {height:0vh; display:none !important;}
}


/* responsive */

@media all and (max-width: 1149px) { 
	.navLauncher{
		display:block;
		position:absolute;
		right:16px;
		top:17px;

		cursor:pointer;
	}

	.navLauncher > * {
		vertical-align:middle;
	}

	.navLauncher span{
		font-family:"Playfair Display", serif;
		text-transform:uppercase;
		color:#4A4A4A;
		letter-spacing:.1em;
		font-size:.9em;

		padding-right:10px;
	}

	.navLauncher .navThumb{
		display:inline-block;
		width:80px;
		height:60px;
		border:1px solid #4DA3C1;
		border-radius:6px;
	}

	.hamBar{
		display:block;
		height:1px;
		width:50%;
		background-color:#000000;
		margin-bottom:8px;
		margin-left:auto;
		margin-right:auto;
	}

	.hamBar:first-child{
		margin-top:20px;
	}

	#closeNav{
		display:block !important;
		text-align:right !important;
	}

	#topBarWrapper{
		background-color:rgba(255,255,255,1) !important;
	}

	#barLogo{
		display:block;
		opacity:1;
	}

	#mainNavigation, .scrollView #mainNavigation{
		overflow:scroll;
		display:none;
		height:0vh;
		background-color:#000000;
		width:100%;
		margin:0px;
		position:absolute;
		left:0px;
		top:0px;
		z-index:9000;
	}

	.showNav{
		display:block !important;
		animation-name: showNavAnim;
		animation-duration:.5s;
		animation-fill-mode:forwards;
	}

	.removeNav{
		display:block !important;
		animation-name: removeNavAnim;
		animation-duration:.5s;
		animation-fill-mode:forwards;
	}

	#mainNavigation a, .mainNav2, .mainNav3, .rs-dropdown, .rp-dropdown{
		display:block;
		margin-left:auto;
		margin-right:auto;
		width:auto;
		border-bottom:1px solid #333333;
	}

	.mainNav2::after, .mainNav3::after{
		color: #ffffff;
	}

	.rs-dropdownContent, .rp-dropdownContent{
		position:relative;
	}

	#bookingMask{
		grid-column:2/12;
		grid-row:2/3;
		margin-bottom:43px;
	}

	.rs-dropdown:hover .rs-dropdownContent{		
		opacity:1;
		height:0px;
		overflow:hidden;
		animation-name: expandDrop1;
		animation-duration:1s;
		animation-fill-mode:forwards;
	}

	.rp-dropdown:hover .rp-dropdownContent{		
		opacity:1;
		height:0px;
		overflow:hidden;
		animation-name: expandDrop2;
		animation-duration:1s;
		animation-fill-mode:forwards;
	}
}

@media all and (max-width: 840px) { 
	#bookingMask{
		display:none;
	}

	#mobileNavBar{
		display:grid;
		grid-template-columns: repeat(3,1fr);
		grid-column-gap:4px;
	}

	.topBarContent .navLauncher{
		display:none;
	}

	#mobileNavBar .navLauncher{
		display:block;
		position:relative;
		right:auto;
		top:auto;

		height:39px;
		width:100%;

		cursor:pointer;
		margin-top:5px;

		border-radius:8px;

		background-color:#ffffff;

		text-align: center;
	}

	.navLauncher > * {
		vertical-align:middle;
	}

	.navLauncher span{
		display:inline-block;
		font-family:"Playfair Display", serif;
		text-transform:uppercase;
		color:#4A4A4A;
		letter-spacing:.1em;
		font-size:.8em;
		padding:6px 4px 0px;
	}

	.navLauncher .navThumb{
		display:inline-block;
		width:40px;
		height:30px;
		margin-top:3px;
		border:1px solid #4DA3C1;
		border-radius:6px;
	}

	.hamBar{
		display:block;
		height:1px;
		width:60%;
		background-color:#000000;
		margin-bottom:5px;
		margin-left:auto;
		margin-right:auto;
	}

	.hamBar:first-child{
		margin-top:8px;
	}

	.mobileNav{
		display:block;
		height:39px;
		background-color:#ffffff;
		text-align:center;

		border-radius:8px;
		margin-top:5px;

		text-decoration:none;
	}

	.mobileNav span{
		display:block;
		padding:4px;
		padding-top:9px;

		font-family:"Playfair Display",serif;
		text-transform:uppercase;
		color:#4A4A4A;
		letter-spacing:.1em;
		font-size:.8em;
	}

	#largeLogo img{
		width:80vw;
	}
}

table{
	margin-bottom:30px;
	border-spacing:1px;
}

th{
	text-align:left;
	background-color:#000;
	color:#ffffff;
}

th.tableTitle{
	background-color:#4DA3C1;
	color:#000;
}

th,td{
	padding:10px;
}

.even{
	background-color:#DAEDF2;
}

.odd{
	background-color:#ffffff;
}

.column-1{
	font-weight:bold;
}

.white{
	color:#ffffff;
}

.borderOutline{
	box-sizing:border-box;
	border:5px #fff solid;
}

@media all and (max-width: 840px) { 
	.mobileRow1{
		grid-row: 1;
	}

	.mobileRow2{
		grid-row: 2;
	}

}