@charset "UTF-8";
/* CSS Document */

/*Color Palette:
Cream:#F1E4D2
Dark Brown:#93795F
Light Brown:#AC9888
Dark Green:#909A76
Light Green:#BDC4AA
White:#FFFFFF
*/

/*ATTENTION!!!!!!!! THIS IS THE DESKTOP BREAKPOINT*/
@media only screen and (min-width : 992px) {
*{
	margin:0;
	padding:0;
	scroll-behavior: smooth;
}

body{
	background-color:#ffffff;
}

header {
	transition: background-color 0.5s ease;
	background-color:transparent;
	position: fixed;
	width:100%;
	height:10%;
	padding-bottom:none;
	
	nav{
		overflow:hidden;
	}
	
	ul{
		list-style-type:none;
	}
	
	li{
		
	}
	
	li a{
		font-family:avenir next;
		font-style:italic;
		text-decoration:none;
		float:right;
		display:block;
		color:white;
		text-align:center;
		padding:20px;
	}
	
	li a.split{
		float:left;
	}
	
	li a:hover{
		color:#909A76;
		transition:0.3s ease;
	}
	
/*navbar change color on scroll*/
&.inverted {
	background-color: white;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	z-index: 1;

	a {
		color:#93795F;
	}
	  
	a:hover {
		color:#909A76;
		transition: 0.5s ease;
	}
}
}

#navLogo-mobile{
	display:none;
}	

#navLogo{
	height:auto;
	width:10em;
}

#landingImg{
	height:95vh;
	z-index:-1000;
}

/*Book Now Button*/
.landingContainer #booknowbtn{
	position: absolute;
	top:80%;
	left:45%;
	font-family:avenir next;
	font-size:1em;
	color:white;
	background-color:transparent;
	padding: 7px 30px;
	border: 3px white solid;
	cursor: pointer;
	border-radius: 30px;
	text-align: center;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.landingContainer #booknowbtn:hover{
	color:#93795F;
	background-color:white;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
	transition: 0.5s;
}
	
/*POPUP*/
.popup{
    width: 400px;
    background: #fff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    text-align: center;
    padding: 0 30px 60px;
    color: #333;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

.open-popup{
    visibility: visible;
    top:150%;
    transform: translate(-50%, -50%) scale(1);
}

.popup h2{
    font-size: 38px;
    font-weight: 500;
    margin: 30px 0 10px;
}

.popup button{
    width: 100%;
    margin-top: 50px;
    padding: 10px 0;
    background-color: #e02189;
    color: #fff;
    border: 0;
    outline: none;
    font-size: 18px;
    border-radius: 4px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}

/*DESCRIPTION HEADINGS OF EACH SECTION*/
h2.pageHeading{
	display:flex;
	width:80%;
	margin:0 auto;
	padding-top:1.5em;
	padding-bottom:2em;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	color:#93795F;
}

/*HELLO, MY NAME IS JEN INTRODUCTION HEADING*/
h2.introHeading{
	display:flex;
	width:50%;
	margin:0;
	margin-bottom:2em;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	color:#93795F;
}


#properties{
	width:100%;
	margin:0 auto;
}

	/*Slideshow container*/	
	.slideshow-container {
		width:30%;
		position: relative;
		margin-top:0;
		margin-bottom:0;
		margin-left:3em;
		margin-right:3em;
		float:left;
	}

	/*images*/
	img.slideshow{
		width:100%;
		border-radius:2%;
		box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	}

	 /*Hide the images by default*/ 
	.mySlides {
	  display: none;
	}

	 /*Next & previous buttons*/ 
	.prev, .next {
	  cursor: pointer;
	  position: absolute;
	  top: 50%;
	  width:auto;
	  margin-top: -22px;
	  padding: 16px;
	  color: white;
	  font-weight: bold;
	  font-size: 18px;
	  transition: 0.6s ease;
	  border-radius: 0 3px 3px 0;
	  user-select: none;
	}

	 /*Position the "next button" to the right*/ 
	.next {
	  right: 0;
	  border-radius: 3px 0 0 3px;
	}

	 /*On hover, add a black background color with a little bit see-through*/ 
	.prev:hover, .next:hover {
	  background-color:#909A76;
		opacity:0.8;
	}

	 /*Caption text*/ 
	.text {
	  color: #f2f2f2;
		font-family: avenir next;
	  font-size: 1.5em;
	  padding: 8px 12px;
	  position: absolute;
	  bottom: 1.5em;
	  width: 90%;
	  text-align: center;
	}

	 /*Number text (1/3 etc)*/ 
	.numbertext {
	  color: #f2f2f2;
		font-family: avenir next;
	  font-size: 12px;
	  padding: 8px 12px;
	  position: absolute;
	  top: 0;
	}

	 /*The dots/bullets/indicator*/s 
	.dot {
	  cursor: pointer;
	  height: 10px;
	  width: 10px;
	  margin:2px;
		margin-top:10px;
	  background-color: #BDC4AA;
	  border-radius: 50%;
	  display: inline-block;
	  transition: background-color 0.6s ease;
	}

	.active, .dot:hover {
	  background-color: #909A76;
	}

	 /*Fading animation*/ 
	.fade {
	  animation-name: fade;
	  animation-duration: 1.5s;
	}

	@keyframes fade {
	  from {opacity: .4}
	  to {opacity: 1}
	}


aside{
	height:93vh;
}

/*PROPERTIES TITLE*/
img#propertiesHeading{
	height:2.5em;
	width:auto;
}

img.headings{
	height:2.5em;
	width:100%;
}

/*PROPERTIES DESC*/
h2.propertyHeading{
	margin:0 auto;
	padding-top:1.5em;
	padding-bottom:1.5em;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	color:#93795F;
}

/*Property Details Button*/
#propertydetailsbtn{
	font-family:avenir next;
	font-size:1em;
	color:#fff;
	background-color:#93795F;
	padding: 5px 30px;
	border:none;
	cursor: pointer;
	border-radius: 30px;
	text-align: center;
}

#propertydetailsbtn:hover{
	background-color:#AC9888;
	transition:0.6s ease;
}

/*PROPERTIES*/
.popup{
    width: 400px;
    background: #fff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    text-align: center;
    padding: 0 30px 60px;
    color: #333;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

.open-popup{
    visibility: visible;
    top:150%;
    transform: translate(-50%, -50%) scale(1);
}

.popup h2{
    font-size: 38px;
    font-weight: 500;
    margin: 30px 0 10px;
}

.popup button{
    width: 100%;
	font-family:avenir next;
	font-size:1em;
	color:#fff;
	background-color:#93795F;
	padding: 5px 30px;
	border:none;
	cursor: pointer;
	border-radius: 30px;
	text-align: center;
}

/*AMENITIES*/
img#amenities{
	padding-top:3em;
}

	
/*AMENITIES GRID*/
ul.image-gallery{
	list-style-type:none;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:30px;
	padding-bottom:3em;
	width:90%;
	margin:0 auto;
}

ul.image-gallery li{
	flex-basis:30%;
	position:relative;
	max-width: 800px;  /*Maximum width*/
	margin: 0 auto;  /*Center it*/
}

ul.image-gallery li img{
	object-fit:cover;
	max-width:100%;
	height:auto;
	vertical-align:middle;
	border-radius:5px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
	
ul span{
	position:absolute;
	top:0;
	color:white;
	font-family:avenir next;
	font-size:1.5em;
	text-align:center;
	width:100%;
	height:100%;
}

ul .overlayBackground:hover{
	border-radius:5px;
	background-color:#93795F;
	opacity:0.8;
	transition:0.3s ease;
	height:100%;
}
	
ul h3{
	font-weight:normal;
	font-style:italic;
	padding-top:20%;
}

ul h3:hover{
	font-weight:normal;
	font-style:italic;
}

ul span p{
	font-size:20px;
	color:white;
	margin-left:2em;
	margin-right:2em;
	padding-top:20px;
}

#partners{
	background-color:#BDC4AA;
	padding-top:3em;
	padding-bottom:3em;
	margin-bottom:3em;
}

img#partnerships{
	display:block;
	margin:auto;
	height:2.5em;
}
	
img#partnershipsMobile{
	display:none;
}

h2.whiteHeading{
	display:block;
	padding-top:1.5em;
	padding-left:2em;
	padding-bottom: 1.5em;
	width:80%;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	color:white;
	margin:0 auto;
}

section.partnershipsFAQ{
	margin:3em;
	margin-top:0;
	margin-bottom:0;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	color:white;
}

/*NEW Overflow:clear to even out the spacing between the image and text for floating images*/
section.partnershipsFAQ::after{
	content:"";
	clear:both;
	display:table;
}

h3.partnershipsFAQ{
	width:55%;
	margin-bottom:2em;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	font-size:20px;
	color:white;
}

img#archImage1{
	float:right;
	margin-top:none;
}

#archImage1 , #archImage2{
	width:40%;
	border-radius: 50% 50% 0 0;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.section1{
}

.connect{
	height:auto;
	display:block;
	padding-top:0;
}

div#connectButton{
	display:flex;
	justify-content: center;
	align-items:center;
	height:auto;
	margin:0;
	margin-bottom:4em;
}

input#connectbtn{
	font-family:avenir next;
	font-size:1em;
	color:#fff;
	background-color:#93795F;
	padding: 5px 30px;
	border:none;
	cursor: pointer;
	border-radius: 30px;
	text-align: center;
}

#connectbtn:hover{
	background-color:#AC9888;
	transition:0.6s ease;
}

.section2{
	margin:2em;
}

.section2::after{
	content:"";
	clear:both;
	display:table;
}

#letsConnect{
	margin-left:0;
	text-align:left;
}

img#archImage2{
	float:left;
	margin-right:4em;
}

h3.connectInfo{
	margin-bottom:2em;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	font-size:20px;
}

h3.connectInfo a{
	text-decoration:none;
	color:#909A76;
}

h3.connectInfo a:visited{
	color:#AC9888;
}

footer{
	background-color:#93795F;
	padding:2em;
}

img#footerLogo{
	height:2em;
	margin-bottom:2em;
}

p{
	font-family:avenir next;
	font-size:15px;
	margin-bottom:1em;
}

p a{
	text-decoration:none;
	color:white;
}

.loader-wrapper{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background-color:pink;
	display:flex;
	justify-content:center;
	align-items:center;
}

}





/*TABLET max-width:992px*/
@media only screen and (min-width:640px) and (max-width:992px){
*{
	margin:0;
	padding:0;
	scroll-behavior: smooth;
}

body{
	background-color:#ffffff;
	width:100%;
	overflow-x:hidden;
}


header {
	transition: background-color 0.5s ease;
	background-color:transparent;
	position: fixed;
	width:100%;
	height:10%;
}
	
	
	.topnav {
		background-color:white;
		height:100vh;
		width:100%;
		position:fixed;
		top:0;
		right:-1000px;
		display:flex;
		flex-direction:column;
		justify-content: center;
		align-items: center;
		text-align:center;
		transition:0.3s ease;
		font-size:20px;
	}
	
	.topnav.active{
		right:0;
		background-color:white;
		color:#909A76;
		z-index:1000;
	}
	
	nav{
		padding:1rem;
		display:flex;
	}

	ul{
	list-style-type:none;
	}
	
	li {
		font-family:avenir next;
		font-style:italic;
		margin:2.5rem 0;
	}
	
	li a {
		text-decoration:none;
		color:#909A76;
		padding:20px;
    }
	
	.ham-menu{
		height:50px;
		width:50px;
		margin-left:auto;
		position:relative;
	}
	
	.ham-menu span.bar{
		height:5px;
		width:80%;
		background-color:#93795F;
		border-radius:25px;
		position:absolute;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		transition:0.3s ease;
		z-index:1000;
	}
	
	.ham-menu span.bar:nth-child(1){
		top:25%;
	}
	
	.ham-menu span.bar:nth-child(3){
		top:75%;
	}
	
	.ham-menu.active span.bar:nth-child(1){
		top:50%;
		transform:translate(-50%, -50%) rotate(45deg);
	}
	
	.ham-menu.active span.bar:nth-child(2){
		opacity:0;
	}
	
	.ham-menu.active span.bar:nth-child(3){
		top:50%;
		transform: translate(-50%, -50%) rotate(-45deg);
	}

#navLogo-mobile{
	width:50%;
	float:left;
	margin-top:20px;
	margin-left:20px;
}

#navLogo{
	height:auto;
	width:10em;
}

#landingImg{
	height:95vh;
	margin-left:-20em;
	z-index:-1000;
}

.landingContainer{
	width:100%;/*
	overflow-x: hidden;*/
}

/*Book Now Button*/
.landingContainer #booknowbtn{
	position: absolute;
	top:80%;
	left:45%;
	font-family:avenir next;
	font-size:1em;
	color:white;
	background-color:transparent;
	padding: 7px 30px;
	border: 3px white solid;
	cursor: pointer;
	border-radius: 30px;
	text-align: center;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.landingContainer #booknowbtn:hover{
	color:#93795F;
	background-color:white;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
	transition: 0.5s;
}

/*DESCRIPTION HEADINGS OF EACH SECTION*/
h2.pageHeading{
	display:flex;
	width:80%;
	margin:0 auto;
	padding-top:1.5em;
	padding-bottom:2em;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	color:#93795F;
}

/*HELLO, MY NAME IS JEN INTRODUCTION HEADING*/
h2.introHeading{
	margin-top:0;
	margin-bottom:1.5em;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	color:#93795F;
}
	
#properties{
	width:100%;
	margin:0 auto;
}

	/* Slideshow container */
	.slideshow-container {
		position: relative;
		margin:0 auto;
		height:75vh;
		overflow:hidden;
	}

	/*images*/
	img.slideshow{
		margin-top:-25em;
		width:100%;
		border-radius:2%;
		box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	}

	/* Hide the images by default */
	.mySlides {
	  display: none;
	}

	/* Next & previous buttons */
	.prev, .next {
	  cursor: pointer;
	  position: absolute;
	  top: 50%;
	  width:auto;
	  margin-top: -22px;
	  padding: 16px;
	  color: white;
	  font-weight: bold;
	  font-size: 18px;
	  transition: 0.6s ease;
	  border-radius: 0 3px 3px 0;
	  user-select: none;
	}

	/* Position the "next button" to the right */
	.next {
	  right: 0;
	  border-radius: 3px 0 0 3px;
	}

	/* On hover, add a black background color with a little bit see-through */
	.prev:hover, .next:hover {
	  background-color:#909A76;
		opacity:0.8;
	}

	/* Caption text */
	.text {
	  color:#93795F;
		font-family: avenir next;
	  font-size: 1.5em;
	  padding: 8px 12px;
	  position: absolute;
		top:40%;
	  width: 100%;
	  text-align: center;
	}

	/* Number text (1/3 etc) */
	.numbertext {
	  color: #f2f2f2;
		font-family: avenir next;
	  font-size: 12px;
	  padding: 8px 12px;
	  position: absolute;
	  top: 0;
	}

	/* The dots/bullets/indicators */
	.dot {
	  cursor: pointer;
	  height: 10px;
	  width: 10px;
	  margin:2px;
		margin-top:10px;
	  background-color: #BDC4AA;
	  border-radius: 50%;
	  display: inline-block;
	  transition: background-color 0.6s ease;
	}

	.active, .dot:hover {
	  background-color: #909A76;
	}

	/* Fading animation */
	.fade {
	  animation-name: fade;
	  animation-duration: 1.5s;
	}

	@keyframes fade {
	  from {opacity: .4}
	  to {opacity: 1}
	}
	
aside{
	width:100%;
	text-align:center;
}

/*PROPERTIES TITLE*/
img#propertiesHeading{
	height:2.5em;
	padding-top:2.5em;
}

img.headings{
	padding-top:2.5em;
	height:2.5em;
	width:100%;
}

/*PROPERTIES DESC*/
h2.propertyHeading{
	text-align:center;
	padding-top:1.5em;
	padding-bottom:1.5em;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	color:#93795F;
}

/*Property Details Button*/
#propertydetailsbtn{
	font-family:avenir next;
	font-size:1em;
	color:#fff;
	background-color:#93795F;
	padding: 5px 30px;
	border:none;
	cursor: pointer;
	border-radius: 30px;
	text-align: center;
}

#propertydetailsbtn:hover{
	background-color:#AC9888;
	transition:0.6s ease;
}
	
/*POPUP*/
.popup{
    width: 400px;
    background: #fff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    text-align: center;
    padding: 0 30px 60px;
    color: #333;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

.open-popup{
    visibility: visible;
    top:220%;
    transform: translate(-50%, -50%) scale(1);
}

.popup h2{
    font-size: 38px;
    font-weight: 500;
    margin: 30px 0 10px;
}

.popup button{
    width: 100%;
	font-family:avenir next;
	font-size:1em;
	color:#fff;
	background-color:#93795F;
	padding: 5px 30px;
	border:none;
	cursor: pointer;
	border-radius: 30px;
	text-align: center;
}

/*AMENITIES*/
img#amenities{
	padding-top:3em;
}

	
/*AMENITIES GRID*/
ul.image-gallery{
	list-style-type:none;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:5px;
	padding-bottom:3em;
	width:90%;
	margin:0 auto;
}

ul.image-gallery li{
	flex-basis:45%;
	position:relative;
	max-width: 800px; /* Maximum width */
	margin: 0 auto; /* Center it */
	margin-bottom:20px;
}

ul.image-gallery li img{
	object-fit:cover;
	max-width:100%;
	height:auto;
	vertical-align:middle;
	border-radius:5px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
	
ul span{
	position:absolute;
	top:0;
	color:white;
	font-family:avenir next;
	font-size:1.5em;
	text-align:center;
	width:100%;
	height:100%;
}

ul .overlayBackground:hover{
	border-radius:5px;
	background-color:#93795F;
	opacity:0.8;
	transition:0.3s ease;
	height:100%;
}
	
ul h3{
	font-weight:normal;
	font-style:italic;
	padding-top:20%;
}

ul h3:hover{
	font-weight:normal;
	font-style:italic;
}

ul span p{
	font-size:20px;
	color:white;
	margin-left:2em;
	margin-right:2em;
	padding-top:20px;
}

#partners{
	background-color:#BDC4AA;
	padding-top:3em;
	padding-bottom:3em;
	margin-bottom:3em;
}

img#partnerships{
	display:none;
}
	
img#partnershipsMobile{
	height:6em;
	margin:0 auto;
	width:100%;
}

h2.whiteHeading{
	display:block;
	padding-top:1.5em;
	padding-bottom: 1.5em;
	width:90%;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	color:white;
	margin:0 auto;
}

section.partnershipsFAQ{
	margin:3em;
	margin-top:0;
	margin-bottom:0;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	color:white;
}

h3.partnershipsFAQ{
	width:100%;
	margin-top:2em;
	margin-bottom:0;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	font-size:20px;
	color:white;
}

img#archImage1{
	margin-top:none;
}

#archImage1 , #archImage2{
	width:100%;
	border-radius: 50% 50% 0 0;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.section1{
}

#letsConnect{
}
	
.connect{
	height:auto;
	display:block;
	margin-top:-30px;
}

div#connectButton{
	display:flex;
	justify-content: center;
	align-items:center;
	height:auto;
}

input#connectbtn{
	font-family:avenir next;
	font-size:1em;
	color:#fff;
	background-color:#93795F;
	padding: 5px 30px;
	border:none;
	cursor: pointer;
	border-radius: 30px;
	text-align: center;
}

#connectbtn:hover{
	background-color:#AC9888;
	transition:0.6s ease;
}

.section2{
	margin:2em;
	margin-bottom:0;
}

.section2::after{
	content:"";
	clear:both;
	display:table;
}

#letsConnect{
	margin-top:2em;
	margin-bottom:2em;
}

img#archImage2{
	margin:0 auto;
	margin-bottom:2em;
}

h3.connectInfo{
	margin-bottom:1.5em;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	font-size:20px;
}

h3.connectInfo a{
	text-decoration:none;
	color:#909A76;
}

h3.connectInfo a:visited{
	color:#AC9888;
}

footer{
	background-color:#93795F;
	padding:2em;
}

img#footerLogo{
	height:2em;
	margin-bottom:2em;
}

p{
	font-family:avenir next;
	font-size:15px;
	margin-bottom:1em;
}

p a{
	text-decoration:none;
	color:white;
}

.loader-wrapper{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background-color:pink;
	display:flex;
	justify-content:center;
	align-items:center;
}
}



	
	
	
	
	
	
	
	







	
/*ATTENTION!!!!!!!! THIS IS THE MOBILE BREAKPOINT*/
@media only screen and (min-width: 480px) and (max-width:640px) { 
*{
	margin:0;
	padding:0;
	scroll-behavior: smooth;
}

body{
	background-color:#ffffff;
	width:100%;
	overflow-x:hidden;
}


header {
	transition: background-color 0.5s ease;
	background-color:transparent;
	position: fixed;
	width:100%;
	height:10%;
}
	
	
	.topnav {
		background-color:white;
		height:100vh;
		width:100%;
		position:fixed;
		top:0;
		right:-650px;
		display:flex;
		flex-direction:column;
		justify-content: center;
		align-items: center;
		text-align:center;
		transition:0.3s ease;
		font-size:20px;
	}
	
	.topnav.active{
		right:0;
		background-color:white;
		color:#909A76;
		z-index:1000;
	}
	
	nav{
		padding:1rem;
		display:flex;
	}

	ul{
	list-style-type:none;
	}
	
	li {
		font-family:avenir next;
		font-style:italic;
		margin:2.5rem 0;
	}
	
	li a {
		text-decoration:none;
		color:#909A76;
		padding:20px;
    }
	
	.ham-menu{
		height:50px;
		width:50px;
		margin-left:auto;
		position:relative;
	}
	
	.ham-menu span.bar{
		height:5px;
		width:80%;
		background-color:#93795F;
		border-radius:25px;
		position:absolute;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		transition:0.3s ease;
		z-index:1000;
	}
	
	.ham-menu span.bar:nth-child(1){
		top:25%;
	}
	
	.ham-menu span.bar:nth-child(3){
		top:75%;
	}
	
	.ham-menu.active span.bar:nth-child(1){
		top:50%;
		transform:translate(-50%, -50%) rotate(45deg);
	}
	
	.ham-menu.active span.bar:nth-child(2){
		opacity:0;
	}
	
	.ham-menu.active span.bar:nth-child(3){
		top:50%;
		transform: translate(-50%, -50%) rotate(-45deg);
	}

#navLogo-mobile{
	width:70%;
	float:left;
	margin-top:20px;
	margin-left:20px;
}

#navLogo{
	height:auto;
	width:10em;
}

#landingImg{
	height:95vh;
	margin-left:-30em;
	z-index:-1000;
}

.landingContainer{
	width:100%;/*
	overflow-x: hidden;*/
}

/*Book Now Button*/
.landingContainer #booknowbtn{
	position: absolute;
	top:80%;
	left:35%;
	font-family:avenir next;
	font-size:1em;
	color:white;
	background-color:transparent;
	padding: 7px 30px;
	border: 3px white solid;
	cursor: pointer;
	border-radius: 30px;
	text-align: center;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.landingContainer #booknowbtn:hover{
	color:#93795F;
	background-color:white;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
	transition: 0.5s;
}

/*DESCRIPTION HEADINGS OF EACH SECTION*/
h2.pageHeading{
	display:flex;
	width:80%;
	margin:0 auto;
	padding-top:1.5em;
	padding-bottom:2em;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	color:#93795F;
}

/*HELLO, MY NAME IS JEN INTRODUCTION HEADING*/
h2.introHeading{
	margin-top:0;
	margin-bottom:1.5em;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	color:#93795F;
}
	
#properties{
	width:100%;
	margin:0 auto;
}

	/* Slideshow container */
	.slideshow-container {
		position: relative;
		margin:0 auto;
		height:50vh;
		overflow:hidden;
	}

	/*images*/
	img.slideshow{
		margin-top:-21em;
		width:100%;
		border-radius:2%;
		box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	}

	/* Hide the images by default */
	.mySlides {
	  display: none;
	}

	/* Next & previous buttons */
	.prev, .next {
	  cursor: pointer;
	  position: absolute;
	  top: 50%;
	  width:auto;
	  margin-top: -22px;
	  padding: 16px;
	  color: white;
	  font-weight: bold;
	  font-size: 18px;
	  transition: 0.6s ease;
	  border-radius: 0 3px 3px 0;
	  user-select: none;
	}

	/* Position the "next button" to the right */
	.next {
	  right: 0;
	  border-radius: 3px 0 0 3px;
	}

	/* On hover, add a black background color with a little bit see-through */
	.prev:hover, .next:hover {
	  background-color:#909A76;
		opacity:0.8;
	}

	/* Caption text */
	.text {
	  color:white;
		font-family: avenir next;
	  font-size: 1.5em;
	  padding: 8px 12px;
	  position: absolute;
		top:40%;
	  width: 90%;
	  text-align: center;
	}

	/* Number text (1/3 etc) */
	.numbertext {
	  color: #f2f2f2;
		font-family: avenir next;
	  font-size: 12px;
	  padding: 8px 12px;
	  position: absolute;
	  top: 0;
	}

	/* The dots/bullets/indicators */
	.dot {
	  cursor: pointer;
	  height: 10px;
	  width: 10px;
	  margin:2px;
		margin-top:10px;
	  background-color: #BDC4AA;
	  border-radius: 50%;
	  display: inline-block;
	  transition: background-color 0.6s ease;
	}

	.active, .dot:hover {
	  background-color: #909A76;
	}

	/* Fading animation */
	.fade {
	  animation-name: fade;
	  animation-duration: 1.5s;
	}

	@keyframes fade {
	  from {opacity: .4}
	  to {opacity: 1}
	}
	
aside{
	width:100%;
	text-align:center;
}

/*PROPERTIES TITLE*/
img#propertiesHeading{
	height:2.5em;
	padding-top:2.5em;
}

img.headings{
	padding-top:2.5em;
	height:2.5em;
	width:100%;
}

/*PROPERTIES DESC*/
h2.propertyHeading{
	text-align:center;
	padding-top:1.5em;
	padding-bottom:1.5em;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	color:#93795F;
}

/*Property Details Button*/
#propertydetailsbtn{
	font-family:avenir next;
	font-size:1em;
	color:#fff;
	background-color:#93795F;
	padding: 5px 30px;
	border:none;
	cursor: pointer;
	border-radius: 30px;
	text-align: center;
}

#propertydetailsbtn:hover{
	background-color:#AC9888;
	transition:0.6s ease;
}
	
/*POPUP*/
.popup{
    width: 400px;
    background: #fff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    text-align: center;
    padding: 0 30px 60px;
    color: #333;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

.open-popup{
    visibility: visible;
    top:220%;
    transform: translate(-50%, -50%) scale(1);
}

.popup h2{
    font-size: 38px;
    font-weight: 500;
    margin: 30px 0 10px;
}

.popup button{
    width: 100%;
	font-family:avenir next;
	font-size:1em;
	color:#fff;
	background-color:#93795F;
	padding: 5px 30px;
	border:none;
	cursor: pointer;
	border-radius: 30px;
	text-align: center;
}

/*AMENITIES*/
img#amenities{
	padding-top:3em;
}

	
/*AMENITIES GRID*/
ul.image-gallery{
	list-style-type:none;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:5px;
	padding-bottom:3em;
	width:90%;
	margin:0 auto;
}

ul.image-gallery li{
	flex-basis:45%;
	position:relative;
	max-width: 800px; /* Maximum width */
	margin: 0 auto; /* Center it */
	margin-bottom:20px;
}

ul.image-gallery li img{
	object-fit:cover;
	max-width:100%;
	height:auto;
	vertical-align:middle;
	border-radius:5px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
	
ul span{
	position:absolute;
	top:0;
	color:white;
	font-family:avenir next;
	font-size:1.5em;
	text-align:center;
	width:100%;
	height:100%;
}

ul .overlayBackground:hover{
	border-radius:5px;
	background-color:#93795F;
	opacity:0.8;
	transition:0.3s ease;
	height:100%;
}
	
ul h3{
	font-weight:normal;
	font-style:italic;
	padding-top:10%;
	font-size:20px;
}

ul h3:hover{
	font-weight:normal;
	font-style:italic;
}

ul span p{
	font-size:15px;
	color:white;
	width:95%;
	margin:0 auto;
	padding-top:20px;
}

#partners{
	background-color:#BDC4AA;
	padding-top:3em;
	padding-bottom:3em;
	margin-bottom:3em;
}

img#partnerships{
	display:none;
}
	
img#partnershipsMobile{
	margin-left:1em;
	margin-right:1em;
}

h2.whiteHeading{
	display:block;
	padding-top:1.5em;
	padding-bottom: 1.5em;
	width:90%;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	color:white;
	margin:0 auto;
}

section.partnershipsFAQ{
	margin:3em;
	margin-top:0;
	margin-bottom:0;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	color:white;
}

h3.partnershipsFAQ{
	width:100%;
	margin-top:2em;
	margin-bottom:0;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	font-size:20px;
	color:white;
}

img#archImage1{
	margin-top:none;
}

#archImage1 , #archImage2{
	width:100%;
	border-radius: 50% 50% 0 0;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.section1{
}

#letsConnect{
}
	
.connect{
	height:auto;
	display:block;
	margin-top:-30px;
}

div#connectButton{
	display:flex;
	justify-content: center;
	align-items:center;
	height:auto;
}

input#connectbtn{
	font-family:avenir next;
	font-size:1em;
	color:#fff;
	background-color:#93795F;
	padding: 5px 30px;
	border:none;
	cursor: pointer;
	border-radius: 30px;
	text-align: center;
}

#connectbtn:hover{
	background-color:#AC9888;
	transition:0.6s ease;
}

.section2{
	margin:2em;
	margin-bottom:0;
}

.section2::after{
	content:"";
	clear:both;
	display:table;
}

#letsConnect{
	margin-top:2em;
	margin-bottom:2em;
}

img#archImage2{
	margin:0 auto;
	margin-bottom:2em;
}

h3.connectInfo{
	margin-bottom:1.5em;
	font-family:avenir next;
	font-style:italic;
	font-weight:normal;
	font-size:20px;
}

h3.connectInfo a{
	text-decoration:none;
	color:#909A76;
}

h3.connectInfo a:visited{
	color:#AC9888;
}

footer{
	background-color:#93795F;
	padding:2em;
}

img#footerLogo{
	height:2em;
	margin-bottom:2em;
}

p{
	font-family:avenir next;
	font-size:15px;
	margin-bottom:1em;
}

p a{
	text-decoration:none;
	color:white;
}

.loader-wrapper{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background-color:pink;
	display:flex;
	justify-content:center;
	align-items:center;
}
}








/*ATTENTION!!!!!!!! THIS IS THE !!! LARGE !!! DESKTOP BREAKPOINT
}
/*