@font-face {
	font-family: Zing;
	src: url(/zing.script-rust-semibold-demo-base.otf);
}
html {
	scroll-behavior: smooth;
}
*, ::before, ::after {
	box-sizing: border-box;
}
body {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	overflow-x: hidden;
}
header {
	display: none;
	position: fixed;
	z-index: 10;
	width: 95%;
	top: 0;
}
header > nav {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	padding: 1.5rem;
	position: relative;
	z-index: 1;
	background: linear-gradient(173deg, #FFFFFF, #FFFFFF, #FFFFFF,#FFFFFF, #FFFFFF, transparent, transparent, transparent, transparent, transparent);
}
nav > img {
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(-15%);
	z-index: 0;
}
nav img.logo {
	max-width: 50%;
	position: relative;
	z-index: 2;
}
nav button {
	appearance: none;
	background-color: transparent;
	border: none;
	position: relative;
	z-index: 2;
}
nav button img {
	max-width: 60%;
}
header .menu {
	position: absolute;
	top: 0;
	left: 0;
	height: auto;
	width: 100%;
	background: url(https://urnuts.s3.us-east-2.amazonaws.com/assets/index/header+bg.png) center bottom;
	transform: translateY(-100%);
	z-index: 2;
	transition: all 0.2s ease-in-out;
}
header .menu.active {
	transform: translateY(0);
}
.menu nav {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	padding: 1.5rem 0 10rem 1.5rem;
	position: relative;
}
.menu nav > a {
	width: 25%;
}
.menu button.closeMenu {
	margin-left: auto;
	display: block;
	margin-right: 1rem;
}
.menu nav > div {
	padding: 0 0 0 1rem;
	width: 70%;
}
.menu #links {
	margin-top: 0;
}
main {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: start;
}
#sidebar {
	background-color: #FFFFFF;
	width: 20%;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	padding: 2rem;
	box-shadow: 21px 0px 0px #3918080D;
	z-index: 5;
	height: 100vh;
}
#sidebar > div {
	height: 100vh;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
img {
	max-width: 100%;
	height: auto;
}
ul#links {
	list-style-type: none;
	padding: 0;
	margin-top: 1rem;
}
ul#links li {
	padding: 1rem 0;
	text-transform: uppercase;
}
ul#links li:not(:last-of-type) {
	border-bottom: #3918082F 1px solid;
}
ul#links li a {
	text-decoration: none;
	font-weight: 700;
	color: #391808;
}
/* #socials {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
} */
#socials a {
	color: #00A7CF;
	text-decoration: none;
	margin: 0 0.2rem;
}
#content {
	width: 100%;
	padding-left: 20%;
}
#content > * {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: relative;
}
#hero, #heroBackground {
	padding: 4rem 2.5rem 5rem;
	justify-content: start;
	z-index: -1;
}
#heroBackground {
	background: url(https://urnuts.s3.us-east-2.amazonaws.com/assets/index/yellow+hero+bg.svg) center bottom;
}
#hero {
	position: fixed;
	top: 0;
}
#hero > img, #heroBackground > img {
	width: 70%;
	margin-bottom: 5rem;
}
#heroBackground > img {
	visibility: hidden;
}
#hero > div.circle {
	position: absolute;
	top: -33px;
	z-index: 5;
	left: 0;
	background: transparent url(https://urnuts.s3.us-east-2.amazonaws.com/assets/index/hero+cirlce.svg) 0% 0% no-repeat padding-box;
	opacity: 1;
}
#offer {
	background-color: #E7E3E1;
	padding: 1.5rem 3rem;
	color: #3C3930;
	margin-top: 150px;
}
#offer > img.nuts {
	position: absolute;
	top: 0;
	left: 50%;
	max-width: 50%;
	transform: translate(-50%, -100%);
}
#offer > img.wave {
	position: absolute;
	top: 0;
	transform: translateY(-99%);
}
#content > * > div {
	width: 90%;
}
h1 {
	width: 90%;
}
h1, h2, h3, h4 {
	color: #391808;
	font-family: 'Alfa Slab One', serif;
	font-weight: 400;
	letter-spacing: 0.5px;
}
.title h2, .title h3 {
	margin-bottom: 0;
}
.title h2 {
	font-size: 3rem;
}
.title p {
	margin-top: 0.5rem;
	font-weight: 600;
	font-family: Zing;
	font-size: 1.2rem;
}
#offer .title p {
	color: #7F341C;
}
#offer .content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: start;
}
#offer .content > * {
	line-height: 1.6;
	font-weight: 600;
}
#offer .content > :first-of-type {
	width: 46%;
	padding-right: 1rem;
	margin-right: 1%;
}
#offer .content > :last-of-type {
	width: 43%;
} 
:not(img).backImg {
	position: relative;
	width: 100% !important;
}
img.backImg {
	transform: translate(-12%, 8%) scale(130%);
}
#offer .callouts {
	position: relative;
	height: 80%;
}
#offer .callouts > div:not(.format) {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(-43%);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: start;
}
.format {
	visibility: hidden;
}
#offer .format {
	height: 330px;
}
#offer .callouts .card {
	width: 23%;
	position: relative;
}
#offer .callouts img {
	border-top-right-radius: 40px;
	border-top-left-radius: 40px;
	border-bottom-right-radius: 40px;
}
.callouts .card .bg {
	position: absolute;
	top: 5%;
	left: 0;
	z-index: -1;
}
.callouts img.bubble {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(30%, -30%);
	width: 45%;
	z-index: 5;
}
.orange {
	color: #FAA614;
}
#location {
	background-color: #391808;
	padding: 2rem 3rem 3rem;
	color: #FFFFFF;
}
#location .title p {
	color: #DAD1CC;
}
#location > div {
	display: flex;
	flex-direction: row;
}
#location > div > :first-child {
	width: 59%;
	margin-right: 5%;
}
#location .content {
	position: relative;
	z-index: 5;
}
#location .content > p {
	width: 95%;
	line-height: 1.7;
}
.location {
	color: #F6931C;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}
#location .location {
	margin-top: 2rem;
}
.location i[class^="fa-"] {
	margin-right: 1rem;
	color: #E2D4B4;
	font-size: 2rem;
}
.location p {
	font-weight: 600;
}
.location p:first-of-type {
	margin: 0 0 0.3rem;
}
.location p:last-of-type {
	margin: 0.3rem 0 0;
}
#location .images {
	position: relative;
	width: 40%;
}
#location .images #houseImg {
	position: absolute;
	top: -12%;
	right: -30%;
}
#houseImg > img {
	border-radius: 50%;
	aspect-ratio: 1;
}
#houseImg > div {
	position: absolute;
	bottom: 0;
	right: -13px;
	width: 550px;
	height: 550px;
}
#location .images #bridgeImg {
	position: absolute;
	top: 52%;
	left: 15%;
	z-index: 2;
}
#bridgeImg > img {
	border-radius: 50%;
	aspect-ratio: 1;
}
#bridgeImg > div {
	position: absolute;
	bottom: 0px;
	right: -13px;
	width: 420px;
	height: 420px;
}
#location img.wave {
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translateY(110%) scale(160%);
	z-index: 1;
}
section#map {
	background-color: #FFFFFF;
	height: 100vh;
}
#map img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
#story {
	background-color: #FFFFFF;
	padding: 1.5rem 3rem 5rem;
}
#timeline {
	padding: 2rem 0;
	width: 100%;
	position: relative;
}
#timeline .row {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}
#timeline .row.left {
	justify-content: flex-start;
}
#timeline .row.right {
	justify-content: flex-end;
}
#timeline .year {
	background-color: #FFFFFF;
	border: 5px solid #F4F4F4;
	color: #E2D4B4;
	font-weight: 700;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -5%);
	border-radius: 25px;
	padding: 0.5rem 2rem;
	letter-spacing: 1px;
	font-size: 1.2rem;
	z-index: 1;
}
#timeline .item {
	background-color: #F4F4F4;
	box-shadow: 0px 26px 0px #D9D1CD69;
	border-radius: 60px 60px 60px 0px;
	width: 37%;
	padding: 2.5rem;
	position: relative;
}
#timeline h3 {
	color: #FAA614;
	font-size: 1.8rem;
	margin: 1rem 0 0;
	line-height: 1;
}
#timeline .item p {
	font-weight: 500;
	line-height: 1.6;
	margin: 0.5rem 0 0;
}
#timeline .item .pointer {
	position: absolute;
	top: 35%;
	transform: translateY(-50%);
}
#timeline .row.left .item .pointer {
	left: 100%;
}
#timeline .row.right .item .pointer {
	right: 100%;
}
#timeline .indicator {
	position: absolute;
	left: 50%;
	top: 30%;
	transform: translate(-63%);
	z-index: 1;
}
#timeline .format .row:last-of-type {
	display: none;
}
#timeline .abs {
	position: absolute;
	width: 100%;
	left: 0;
}
#timeline .abs.one {
	top: 2%;
}
#timeline .abs.two {
	top: 18%;
}
#timeline .abs.three {
	top: 35%;
}
#timeline .abs.four {
	top: 50%;
}
#timeline .abs.five {
	top: 70%;
}
#timeline .abs.five img.nutty {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(-5%, -15%);
	max-width: 135px;
}
#timeline .line {
	width: 1px;
	height: 95%;
	background-color: #FAA614;
	position: absolute;
	left: 50%;
	top: 2rem;
	z-index: 0;
	transform: translate(-50%);
}
footer {
	padding: 0 3rem 0;
	position: relative;
	z-index: 2;
	width: 80%;
	margin-left: auto;
	background-color: #FFFFFF;
}
footer > img.background {
	position: absolute;
	bottom: 0;
	left: 0;
	transform: scaleX(127%);
}
footer > img.nuts {
	position: absolute;
	width: 50%;
	right: 5%;
	top: 0;
	transform: translateY(-39%);
}
footer section {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	padding: 0 5% 2.5rem;
	position: relative;
	z-index: 2;
}
footer .content > .row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	padding-top: 3.5rem;
	color: #FFFFFF;
}
footer .row > div {
	width: 40%;
}
footer .row > div > :first-child {
	margin-top: 0;
}
footer .row > div:first-of-type {
	padding-right: 1.5rem;
}
footer .row > div:first-of-type p:first-of-type {
	line-height: 1.7;
	margin-bottom: 0;
}
footer .row > div:first-of-type p:last-of-type {
	margin-top: 0.5rem;
}
footer hr {
	display: none;
}
footer .row > div:last-of-type {
	padding-left: 1.5rem;
	border-left: 1px solid #F6931C;
}
p a {
	color: #00A7CF;
	text-decoration: none;
	font-weight: 600;
}
footer h4 {
	color: #F6931C;
	text-transform: uppercase;
	font-family: 'Montserrat';
	font-weight: 800;
	margin: 0;
	font-size: 1.2rem;
}
footer h4 ~ p {
	margin: 0.5rem 0;
}
footer h4 ~ p:last-of-type {
	margin-bottom: 0.2rem;
}
@media screen and (max-width: 1550px) {
	#location .images #houseImg {
		position: absolute;
		top: -8%;
		right: -40%;
	}
	#houseImg > div {
		position: absolute;
		bottom: -2px;
	}
	#bridgeImg > div {
		position: absolute;
		right: -12px;
		width: 345px;
		height: 345px;
	}
}
@media screen and (max-width: 1400px) {
	#hero, #heroBackground {
		padding: 4rem 2.5rem 7.5rem;
	}
	#offer {
		margin-top: 80px;
	}
	#offer .format {
		height: 35vh;
	}
	#houseImg > div {
		position: absolute;
		right: -15px;
		width: 500px;
		height: 500px;
	}
	#location .images #bridgeImg {
		position: absolute;
		top: 45%;
		left: 0;
		right: 15%;
		z-index: 2;
	}
	#bridgeImg > div {
		position: absolute;
		right: -13px;
		width: 310px;
		height: 310px;
	}
	#timeline .abs.five img.nutty {
		position: absolute;
		top: 0;
		right: 0;
		transform: translate(15%, -45%);
		max-width: 135px;
	}
	footer > img.background {
		width: 100%;
		height: 75%;
		object-fit: cover;
	}
	footer .content > .row {
		padding-top: 4.5rem;
	}
}
@media screen and (max-width: 1300px) {
	#houseImg > div {
		position: absolute;
		right: -17px;
		bottom: 1px;
		width: 470px;
		height: 470px;
	}
	#location .images #bridgeImg {
		position: absolute;
		top: 35%;
		left: 0;
		right: 15%;
		z-index: 2;
	}
	#bridgeImg > div {
		position: absolute;
		right: -13px;
		width: 290px;
		height: 290px;
	}
	footer > img.background {
		transform: scaleX(100%);
	}
}
@media screen and (max-width: 1250px) {
	#location .images #houseImg {
		position: absolute;
		top: -5%;
		right: -40%;
	}
	#houseImg > div {
		position: absolute;
		right: -12px;
		width: 440px;
		height: 440px;
	}
	#location .images #bridgeImg {
		position: absolute;
		top: 35%;
		left: 0;
		right: 15%;
		z-index: 2;
	}
	#bridgeImg > div {
		position: absolute;
		right: -10px;
		width: 270px;
		height: 270px;
	}
}
@media screen and (max-width: 1200px) {
	#location .images #houseImg {
		position: absolute;
		top: 0;
		right: -40%;
	}
	#houseImg > div {
		position: absolute;
		width: 420px;
		height: 420px;
	}
	#location .images #bridgeImg {
		position: absolute;
		top: 35%;
		left: 0;
		right: 15%;
		z-index: 2;
	}
	#bridgeImg > div {
		position: absolute;
		right: -13px;
		width: 260px;
		height: 260px;
	}
	section#map {
		height: 85vh;
	}
}
@media (max-width: 1100px) and (min-height: 1300px) {
    section#map {
        height: 35vh;
    }
}
@media screen and (max-width: 1100px) {
	#location .images #houseImg {
		position: absolute;
		top: 3%;
		right: -40%;
	}
	#houseImg > div {
		position: absolute;
		width: 390px;
		height: 390px;
	}
	#location .images #bridgeImg {
		position: absolute;
		top: 35%;
		left: 0;
		right: 10%;
		z-index: 2;
	}
	#bridgeImg > div {
		position: absolute;
		right: -10px;
		width: 255px;
		height: 255px;
	}
	section#map {
		height: 80vh;
	}
}
@media screen and (max-width: 991px) {
	#offer {
		margin-top: 0;
	}
	#offer .callouts > div:not(.format) {
		transform: translateY(-5%);
		justify-content: space-around;
	}
	#offer .callouts .card {
		width: 40%;
	}
	#offer .callouts .card:first-of-type {
		margin-bottom: 1.5rem;
	}
	#offer .format {
		height: 100vh;
	}
	#location .images #houseImg {
		position: absolute;
		top: 3%;
		right: -50%;
	}
	#houseImg > div {
		position: absolute;
		right: -14px;
		bottom: -1px;
		width: 375px;
		height: 375px;
	}
	#location .images #bridgeImg {
		position: absolute;
		top: 40%;
		left: 0;
		right: 0;
		z-index: 2;
	}
	#bridgeImg > div {
		position: absolute;
		right: -10px;
		width: 250px;
		height: 250px;
	}
	section#map {
		height: 75vh;
	}
	#timeline .abs.five img.nutty {
		position: absolute;
		top: 0;
		right: 0;
		transform: translate(-5%, -15%);
		max-width: 135px;
	}
	footer .row > div {
		width: 50%;
	}
}
@media screen and (max-width: 900px) {
	#location .images #houseImg {
		position: absolute;
		top: 3%;
		right: -60%;
	}
	#houseImg > div {
		position: absolute;
		right: -10px;
		width: 355px;
		height: 355px;
	}
	#location .images #bridgeImg {
		position: absolute;
		top: 40%;
		left: 0;
		right: -10%;
		z-index: 2;
	}
	#bridgeImg > div {
		position: absolute;
		right: -10px;
		width: 250px;
		height: 250px;
	}
	section#map {
		height: 65vh;
	}
	footer .content > .row {
        padding-top: 6.5rem;
    }
	footer .row > div {
		width: 60%;
	}
	footer .row > div:first-of-type {
		padding-right: 0;
		padding-bottom: 1.5rem;
	}
	footer .row > div:last-of-type {
		padding-left: 0;
		padding-top: 1.5rem;
		border-left: none;
		border-top: 1px solid #F6931C;
	}
}
@media screen and (max-width: 850px) {
	section#map {
		height: 60vh;
	}
}
@media screen and (max-width: 800px) {
	#offer .format {
		height: 110vh;
	}
	#location .images #houseImg {
		position: absolute;
		top: 3%;
		right: -50%;
	}
	#houseImg > div {
		position: absolute;
		right: -15px;
		width: 295px;
		height: 295px;
	}
	#location .images #bridgeImg {
		position: absolute;
		top: 40%;
		left: 0;
		right: -30%;
		z-index: 2;
	}
	#bridgeImg > div {
		position: absolute;
		right: -12px;
		width: 255px;
		height: 255px;
	}
	section#map {
		height: 55vh;
	}
}
@media screen and (max-width: 767px) {
	header {
		display: block;
	}
	section#sidebar {
		display: none;
	}
	#content {
		padding-left: 0;
	}
	#hero, #heroBackground {
		padding: 11rem 1rem 20rem;
	}
	#hero {
		background: url(https://urnuts.s3.us-east-2.amazonaws.com/assets/index/yellow+hero+bg.svg) center bottom;
		position: sticky;
	}
	#heroBackground {
		display: none;
	}
	#hero > img, #heroBackground > img {
		width: 100%;
		margin-bottom: 1.5rem;
	}
	#content > * > div {
		width: 100%;
	}
	#offer {
		margin-top: -8%;
		padding: 0.5rem 2.5rem;
	}
	#offer > img.nuts {
		max-width: 75%;
	}
	#offer > img.wave {
		transform: translateY(-95%);
	}
	#offer .content {
		flex-direction: column;
	}
	#offer .content > :first-of-type, #offer .content > :last-of-type {
		width: 100%;
	}
	img.backImg {
		transform: translate(-7%, 20%) scale(138%);
	}
	#offer .callouts img {
		border-top-right-radius: 40px;
		border-top-left-radius: 40px;
		border-bottom-right-radius: 40px;
	}
	#offer .format {
		height: 130vh;
	}
	#location {
		padding: 1rem 2rem 20rem;
	}
	#location > div {
		flex-direction: column;
	}
	#location > div > :first-child {
		width: 100%;
	}
	#location .images {
		width: 100%;
	}
	#location .images #houseImg {
		top: 100%;
		z-index: 2;
		right: 0;
		transform: translate(10%, 10%);
	}
	#houseImg > img {
		width: 450px;
		height: 450px;
	}
	#houseImg > div {
		position: absolute;
		right: -17px;
		width: 475px;
		height: 475px;
	}
	#location .images #bridgeImg {
		display: none;
	}
	#location img.wave {
		transform: translateY(95%) scale(100%);
	}
	#map {
		display: none;
	}
	#story {
		padding: 9rem 3rem 15rem 0;
	}
	#story .title h2 {
		margin-left: 3rem;
	}
	#timeline {
		width: 100%;
		padding-right: 1rem;
	}
	#timeline .row {
		padding-left: 0;
	}
	#timeline .row.right {
		justify-content: flex-start;
	}
	#timeline .year {
		left: 20%;
		transform: translate(-50%, -50%);
	}
	#timeline .item {
		width: 100%;
		border-top-left-radius: 0;
	}
	#timeline .pointer, #timeline .indicator {
		display: none;
	}
	#timeline .format .row:last-of-type {
		display: block;
	}
	#timeline .abs {
		z-index: 2;
	}
	#timeline .abs.one {
		top: 5%;
	}
	#timeline .abs.two {
		top: 27%;
	}
	#timeline .abs.three {
		top: 48%;
	}
	#timeline .abs.three .item {
		border-bottom-right-radius: 0;
	}
	#timeline .abs.four {
		top: 67%;
	}
	#timeline .abs.four .item {
		border-top-right-radius: 0;
		padding-top: 0.5rem;
	}
	#timeline .abs.five {
		top: calc(87% + 10px);
	}
	#timeline .line {
		left: 20%;
		height: 105%;
	}
	footer {
		margin-left: 0;
		padding: 0;
		width: 100%;
		background-image: linear-gradient(to bottom, transparent, transparent, #391808, #391808, #391808, #391808, #391808, #391808);
	}
	footer > img.background {
		top: 0;
		transform: translate(0, -35%);
		height: auto;
	}
	footer > img.nuts {
		right: 0;
		transform: translate(1%, -86%);
		z-index: 2;
	}
	footer .content {
		top: 0;
		padding: 5%;
		transform: translateY(-16%);
		background-image: linear-gradient(to bottom, transparent, transparent, #391808, #391808, #391808, #391808, #391808, #391808);
	}
	footer .content > img {
		max-width: 40%;
	}
	footer .content > .row {
		flex-direction: column;
		padding-top: 3rem;
	}
	footer .row > div {
		width: 100%;
	}
	footer .row > div:first-of-type {
		padding-right: 0;
		padding-bottom: 0;
	}
	footer hr {
		display: block;
		width: 20%;
		border: none;
		border-top: 1px solid #F6931C;
		margin: 2.5rem 0 2.2rem;
	}
	footer .row > div:last-of-type {
		border-left: none;
		padding-left: 0;
		border-top: none;
		padding-top: 0;
	}
}
@media screen and (max-width: 700px) {
	#offer .format {
		height: 120vh;
	}
}
@media screen and (max-width: 650px) {
	#hero, #heroBackground {
		padding: 11rem 1rem 17rem;
	}
	#offer .format {
		height: 110vh;
	}
}
@media screen and (max-width: 600px) {
	#hero, #heroBackground {
		padding: 11rem 1rem 15rem;
	}
	#offer .format {
		height: 100vh;
	}
}
@media screen and (max-width: 565px) {
	#hero, #heroBackground {
		padding: 11rem 1rem 14rem;
	}
	#offer .callouts .card {
		width: 45%;
	}
	#offer .callouts img {
		border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
	}
	#offer .format {
		height: 105vh;
	}
	#location {
		padding: 1rem 2rem 12rem;
	}
	#location .images #houseImg {
		top: 100%;
		z-index: 2;
		right: 0;
		transform: translate(15%, 15%);
	}
	#houseImg > img {
		width: 350px;
		height: 350px;
	}
	#houseImg > div {
		position: absolute;
		right: -15px;
		width: 370px;
		height: 370px;
	}
	#story {
		padding: 12rem 3rem 17rem 0;
	}
	#timeline .abs.five img.nutty {
		position: absolute;
		top: 0;
		right: 0;
		transform: translate(15%, -50%);
		max-width: 135px;
	}
}
@media screen and (max-width: 500px) {
	#hero, #heroBackground {
		padding: 11rem 1rem 12rem;
	}
	#offer {
		margin-top: -5%;
	}
	#offer .format {
		height: 85vh;
	}
}
@media screen and (max-width: 450px) {
	#offer .format {
		height: 75vh;
	}
}
@media screen and (max-width: 400px) {
	#hero, #heroBackground {
		padding: 11rem 1rem 9rem;
	}
	#offer .callouts img {
		border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
	}
	#offer .format {
		height: 65vh;
	}
	#location {
		padding: 1rem 2rem 12rem;
	}
	#location .images #houseImg {
		top: 100%;
		z-index: 2;
		left: 0;
		transform: translate(0, 15%);
	}
	#houseImg > img {
		max-width: 300px;
		height: 300px;
	}
	#houseImg > div {
		position: absolute;
		right: -35px;
		width: 320px;
		height: 320px;
	}
	#story {
		padding: 9rem 3rem 17rem 0;
	}
	footer .content {
        top: 0;
        padding: 5%;
        transform: translateY(-16%);
        background-image: linear-gradient(to bottom, transparent, transparent, #391808, #391808, #391808, #391808, #391808, #391808, #391808, #391808);
    }
}
@media screen and (max-width: 1500px) and (height: 788px) {
	section#map {
		height: 95vh;
	}
}
@media screen and (max-width: 1440px) and (height: 788px) {
	section#map {
		height: 90vh;
	}
}
@media screen and (max-width: 1350px) and (height: 788px) {
	section#map {
		height: 85vh;
	}
}
@media screen and (max-width: 1300px) and (height: 788px) {
	section#map {
		height: 80vh;
	}
}
@media screen and (max-width: 1220px) and (height: 788px) {
	section#map {
		height: 75vh;
	}
}
@media screen and (max-width: 1150px) and (height: 788px) {
	section#map {
		height: 70vh;
	}
}
@media screen and (max-width: 1050px) and (height: 788px) {
	section#map {
		height: 60vh;
	}
}
@media screen and (max-width: 950px) and (height: 788px) {
	section#map {
		height: 55vh;
	}
}
@media screen and (max-width: 850px) and (height: 788px) {
	section#map {
		height: 50vh;
	}
}
@media screen and (max-width: 800px) and (height: 788px) {
	section#map {
		height: 45vh;
	}
}