@font-face {
  font-family: "Copper";
  src: url("/fonts/copperplate-400.ttf");
  font-weight:400;
  font-style:normal;
}
@font-face {
  font-family: "Copper";
  src: url("/fonts/copperplate-300.ttf");
  font-weight:300;
  font-style:normal;
}

:root {
	--accent-color:#5e5e40;
}

body {
	margin:0; padding:0;
	font-family:"Red Hat Display";
	font-weight:300;
	font-size:12pt;
	background-color:#eee;
}
#body-wrapper {
	width:100vw;
	overflow-x:hidden;
}
h1, h2, h3, h4, h5, h6 {
	font-family:"Copper";
}
a, a:hover, a:visited {color:#000;}
button, .button {
	border:2px solid #aaa;
	padding:10px;
	color:#000;
	text-transform:uppercase;
	cursor:pointer;
}

#navbar {
	position:fixed;
	top:0; left:0;
	width:100vw; height:60px;
	display:flex;
	flex-direction:row;
	justify-content:center;
	z-index:99;
	box-shadow:0 5px 15px rgba(0,0,0,0.2);
}
#navbar, #footer, .jumbotron-button {
	background-color:var(--accent-color);
	/* backdrop-filter: blur(10px); */
}
#navbar ul {
	position:relative;
	left:0; top:0;
	width:100%; height:60px;
	list-style-type:none;
	padding:0; margin:0;
	flex-direction:row;
	align-items:center;
	justify-content:space-around;
	max-width:800px;
}
#navbar li {
	position:relative;
	font-family:"Copper";
	font-size:1em;
	font-weight:400;
	color:#fff;
	cursor:pointer;
}
#navbar a, #nav-mobile a {
	color:#fff;
	text-decoration:none;
}
#navbar > ul > li > a {
	display:block;
	height:60px; line-height:60px;
	padding:0 30px;
}

#navbar ul ul {
	display:block;
	display:none;
	position:absolute;
	left:0; top:60px;
	width:360px;
	background-color:#333;
	height:auto;
	padding:10px 0;
}
#navbar ul ul li a {
	font-family:"Red Hat Display", Arial, Helvetica, sans-serif;
	display:block;
	padding:5px 30px;
}

#navbar-buffer {
	height:60px;
}
#nav-button {
	color:#fff;
	position:absolute;
	right:0;
	font-size:18pt;
	padding:18px;
	cursor:pointer;
	line-height:20px;
}

#nav-mobile {
	position:fixed;
	z-index:98;
	left:100vw; top:60px;
	width:50vw; height:calc(100vh - 60px);
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
	background-color:#7d6b5e;
	transition:0.33s ease-in-out;
	box-shadow:0 0 15px rgba(0,0,0,0.5);
	-webkit-box-shadow:0 0 15px rgba(0,0,0,0.5);
	-moz-box-shadow:0 0 15px rgba(0,0,0,0.5);
}
#nav-mobile.menu-open {
	left:50vw;
}
#nav-mobile-inner {
	width:calc(100% - 60px);
	list-style-type:none;
	margin:0; padding:30px;
	font-family:"Copper";
	font-weight:400;
	color:#fff;
}
#nav-mobile-inner > li {
	margin-bottom:10px;
}
#nav-mobile-inner > li a {
	font-size:1.25em;
	line-height:1.75em;
}
#nav-mobile-inner > li a:hover {
	opacity:1;
	transition:0.2s ease-in-out;
	text-shadow:0 0 10px rgba(255,255,255,0.5);
}
#nav-mobile-logo {
	position:absolute;
	left:60px; top:-75px;
	width:150%;
	opacity:0.05;
	pointer-events:none;
}

#nav-mobile > ul {
	width:100%;
}
#nav-mobile ul ul {
	display:block;
	margin:0; padding:0 0 0 15px;
	width:100%;
	list-style-type:disc;
}
#nav-mobile ul ul li a {
	display:block;
	width:100%;
	font-family:"Red Hat Display", Arial, Helvetica, sans-serif;
	opacity:0.75;
	font-size:1em;
	line-height:1.25em;
	margin:0;
	padding:5px;
	width:100%;
}

#nav-fullscreen {display:flex;}
#nav-mobile, #nav-button {display:none;}
@media(max-width:767px) {
	#nav-fullscreen {display:none;}
	#nav-mobile, #nav-button {display:block;}
}


#content {
	position:fixed;
	width:100vw; height:100vh;
	overflow-x:hidden;
	overflow-y:scroll;
}

.fullpage-section {
	position:relative;
	width:100vw; height:100vh;
	background-color:#eee;
	z-index:1;
	display:flex;
}
.section-inner {
	position:relative;
	margin:90px 30px 30px 30px;
	width:calc(100% - 60px); height:calc(100% - 120px);
}
.no-bg {
	z-index:2;
	height:calc(100vh - 30px);
	height:auto;
}
.no-bg .section-inner {
	margin-top:30px;
	margin-bottom:60px;
}
.fullpage-bg {
	position:absolute;
	left:0; top:0;
	width:100vw; height:100vh;
	object-fit:cover;
	transform:scale(1.2);
	z-index:0;
}
.fill-page {
	padding-top:60px;
	height:calc(100vh - 120px);
}

.halfpage-section {
	width:100vw; height:400px;
}
.halfpage-bg {
	position:absolute;
	left:0; top:0;
	width:100%; height:100%;
	object-fit:cover;
}


.full-center {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
.centered-col {
	max-width:750px;
	margin:0 auto;
}

.jumbotron {
	overflow:hidden;
}
.jumbotron-inner {
	position:absolute;
	left:0; top:0;
	width:100%; height:100%;
	color:#fff;
	text-shadow:1px 1px 5px rgba(0,0,0,0.4);
	z-index:1;
	padding:30px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	font-size:1.2em;
}
.jumbotron h1, .jumbotron h2, .jumbotron h3 {
	margin:0;
}
.jumbotron-inner h1, .jumbotron-inner h2, .jumbotron-inner h3 {
	text-align:center;
}
.jumbotron p {
	font-weight:500;
	font-size:1.1em;
	text-shadow:0 0 2.5px #000;
}
.jumbotron-button {
	background:none;
	border:2px solid #fff;
	padding:10px;
	color:#fff;
	text-transform:uppercase;
	background-color:rgba(0,0,0,0);
}

#jumbotron-logo, .jumbotron-logo {
	position:absolute;
	width:600px;
	right:-10%;
	opacity:0.1;
}

.properties-intro-text {
	margin-left:30px; margin-right:30px;
}
#section-2 h1 {
	margin:30px 0;
}
#section-2 .properties-intro-text {
	margin-top:15px;
	margin-bottom:60px;
}
#section-4 .properties-intro-text {
	margin-top:-90px;
	margin-bottom:60px;
}

/* HOMEPAGE */

#homepage-logo {
	width:75%;
	max-width:400px;
	margin-top:-25px;
	filter:contrast(200%);
	background-color:rgba(0,0,0,0.33);
	border-radius:100%;
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
}
#scroll-hint {
	position:absolute;
	left:calc(50% - 15px); bottom:30px;
	background-color:rgba(255,255,255,0.2);
	color:#fff;
	font-size:24pt;
	z-index:1;
	border-radius:100%;
	width:40px; height:40px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	animation: shadow-pulse 2s infinite;
}

#section-2 .section-inner {
	flex-direction:column;
	align-items:center;
	justify-content:center;
}



#intro-video {
	width:100%;
	max-width:900px;
	padding-top:33.5%;
	position:relative;
	margin:0 auto 30px auto;
	overflow:hidden; /* important */
}

#intro-video iframe {
	position:absolute;
	top:50%;
	left:50%;

	/* 16:9 ratio coverage */
	width:100%;
	height:56.25%;

	min-width:100%;
	min-height:100%;

	transform:translate(-50%, -50%);
}

#video-overlay {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:2;
	cursor:pointer;
	transition:all 1s ease;
}

#play-button {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:150px;
	height:150px;
	border:6px solid white;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:all 0.5s ease;
	opacity:0.75;
}

#play-button::after {
	content:"";
	width:0;
	height:0;
	border-left:32px solid white;
	border-top:20px solid transparent;
	border-bottom:20px solid transparent;
	margin-left:6px;
}

#play-button:hover {
	transform:translate(-50%, -50%) scale(1.08);
	opacity:1;
}






#section-3::before {
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(
		to bottom,
		rgba(0,0,0,0.35) 0%,
		rgba(0,0,0,0.25) 35%,
		rgba(0,0,0,0.15) 60%,
		rgba(0,0,0,0.05) 100%
	);
	z-index:1;}


#section-4 .section-inner {
	padding-top:100px;
	padding-bottom:100px;
}
#section-5 {
	height:calc(100vh + 180px);
	overflow-y:hidden;
}

/* PROPERTY LISTINGS PAGE */

.property-list {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	max-width:1200px;
}
.property-list-item {
	position:relative;
	width:calc(33% - 10px); height:0;
	padding-top:33%;
	overflow:hidden;
	margin-bottom:20px;
	background-color:#ccc;
	cursor:pointer;
}
@media(max-width:1000px) {
	.property-list-item {width:calc(50% - 10px); padding-top:50%;}
}
@media(max-width:767px) {
	.property-list-item {width:calc(100%); padding-top:100%;}
}
.property-list-item img {
	position:absolute;
	left:0; top:0;
	width:100%; height:100%;
	object-fit:cover;
	transition:0.5s ease-in-out;
	filter:brightness(0.75);
}
#properties-sold .property-list-item img {
	/* filter:grayscale(100%); */
}
.property-overview {
	position:absolute;
	left:0; top:0;
	width:100%; height:100%;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items:center;
	text-align:center;
	color:#fff;
	text-shadow:2px 2px 2px rgba(0,0,0,0.5);
	padding:30px 0;
}
.property-overview > * {margin:0; padding:0 15px;}
.property-overview h1, .property-overview h2, .property-overview h3 {
	/*
	font-family:Arial, Helvetica, sans-serif;
	font-weight:600;
	*/
	margin-bottom:15px;
	line-height:30px;
}
.property-overview p {
	font-size:1.1em;
	font-weight:600;
	text-transform:uppercase;
	margin-bottom:5px;
	opacity:0;
	transition:0.5s ease-in-out;
}
.property-overview p.button-container {
	opacity:1;
}
.property-list-item .button-container {
	margin-top:30px;
}
.property-list-item .jumbotron-button {
	backdrop-filter: blur(10px);
	background-color:rgba(0,0,0,0.2);
}
.property-list-item:hover img {
	transform:scale(110%);
	filter:brightness(0.75) blur(3px);
}
#properties-sold .property-list-item:hover img {
	/* filter:blur(5px) grayscale(100%); */
}
.property-list-item:hover p {
	opacity:1 !important;
}

/* PROPERTY INFO PAGE */

#property-jumbotron h1 {
	margin:0;
}
.jumbotron-status {
	font-size:1.4em;
	font-weight:600;
	text-transform:uppercase;
	margin:0;
}
.property-info {
	width:100%;
	text-align:center;
	font-size:1.4em;
	font-weight:600;
	text-transform:uppercase;
	margin-bottom:15px;
}
#photo-gallery {
	list-style-type:none;
	margin:30px auto 0 auto; padding:0;
	width:100%; max-width:900px;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
}
#photo-gallery img {
	width:200px; height:200px;
	object-fit:cover;
	margin-bottom:15px;
	cursor:pointer;
}

#photo-viewer img {
	width:100%; height:100%;
	object-fit:contain;
}
#photo-viewer .modal-body {padding:0 !important;}
#photo-viewer .modal-content {
	background:none;
	border:none;
	box-shadow:none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
}
#photo-viewer .close {
	float:none;
	position:absolute;
	right:0; top:-25px;
	color:#fff;
	cursor:pointer;
}

#property-agent-list {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:center;
}
#property-agent-wrapper {
	display:inline;
	text-align:center;
	cursor:pointer;
	flex:1;
}
#property-agent {
	display:inline-flex;
	flex-direction:row;
	flex-wrap:nowrap;
	margin:45px auto 0 auto;
}
#property-agent img {
	width:180px; height:180px;
	object-fit:cover;
	background-color:#bbb;
	margin-right:30px;
	filter:grayscale(100%);
	border-radius:100%;
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
}
#property-agent .agent-titles {
	margin:-10px 0 10px 0;
	font-weight:600;
	text-transform:uppercase;
}
#property-map {
	width:100vw; height:390px;
	border:none;
	border-top:1px solid #ccc;
	margin:40px -30px -65px -30px;
}

.carousel-item, .carousel-item img {
	height:75vh;
	object-fit:cover;
}

/* MORTGAGE CALCULATOR */

#mortgage-calculator iframe {
	width:100%; height:1200px;
	border:0;
}

/* TITILE INSURANCE */

#title-insurance ol {
	margin:0; padding:0;
}
#title-insurance ol li {
	margin-bottom:15px;
}
.ti-header {
	margin-bottom:30px;
}

/* INSPECTIONS */

.paragraph-header {
	font-weight:800;
	margin-bottom:5px;
	margin-top:30px;
	text-transform:uppercase;
}
blockquote {
	margin-left:45px;
}

/* ESCROW */

em {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:800;
	text-transform:uppercase;
	font-style:normal;
}
ol ul {
	list-style-type:disc;
}
#escrow > ol > li {
	margin-bottom:30px;
}
#escrow > ol > li > ol {
	margin:15px 0;
}
#escrow > ol > li > ol > li {
	margin-bottom:10px;
}
#escrow ul {
	margin:15px 0;
}

.blank-underline {
	display:inline-block;
	width:150px;
	border-bottom:1px solid #000;
	margin:0 5px;
}

/* FOOTER */

#footer {
	position:relative;
	z-index:4;
	background-color:#222;
	background-color:var(--accent-color);
	width:100vw; height:300px;
	padding:1em 0;
	margin-top:-180px;
	color:#ddd;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
}
#footer a {
	color:#ddd;
	text-decoration:none;
	transition:0.2s ease-in-out;
}
#footer a:hover {
	color:#fff;
	text-shadow:0 0 5px rgba(255,255,255,0.5);
}
#footer-logo {
	width:100px;
	margin-bottom:30px;
}
#agent-portal-link {
	position:absolute;
	right:30px; bottom:30px;
	opacity:0.5;
	transition:0.5s ease-in-out;
}
#agent-portal-link:hover {
	opacity:1;
}