@font-face {
	font-family: "Relative Pro Book";
	src: url("/wp-content/themes/mammoth/public/fonts/relative-book-pro.ttf")
			format("opentype"),
		url("/wp-content/themes/mammoth/public/fonts/relative-book-pro.woff2")
			format("opentype"),
		url("/wp-content/themes/mammoth/public/fonts/relative-book-pro.woff")
			format("woff");
}

:root {
	--black: #000000;
	--charcoal: #2e2d2e;
	--white: #ffffff;
	--gold: #a39575;
	--h1: clamp(32px, calc(24px + 2.5vw), 54px);
	--h2: clamp(24px, calc(2.29vw + 0.55rem), 60px);
	--h4: clamp(12px, calc(2vw + 8px), 24px);
	--body: clamp(16px, 1.25vw, 20px);
	--kicker: clamp(14px, 1.1vw, 18px);
}

html {
	scroll-behavior: smooth;
}

.paddingall {
	padding: 10%;
}
.paddingtopbottomright {
	padding: 10% 10% 10% 0;
}
.paddingtopbottomleft {
	padding: 10% 0 10% 10%;
}
.paddingtopbottom {
	padding: 10% 0;
}
.paddingbottom {
	padding: 0 0 10% 0;
}
.paddingtop {
	padding: 10% 0 0 0;
}
.paddingbottomright {
	padding: 0 10% 10% 0;
}
.paddingbottomrightsm {
	padding: 0 5% 10% 0;
}
.paddingbottomleft {
	padding: 0 0 10% 10%;
}
.paddingsides {
	padding: 0 10%;
}
.paddingbottomleftsm {
	padding: 0 0 10% 5%;
}

@media only screen and (max-width: 820px) {
	.paddingall {
		padding: 10vh 4rem;
	}

	.paddingbottomleftsm,
	.paddingbottomright,
	.paddingbottomleft,
	.paddingbottomrightsm {
		padding: 0 0 10vh 0;
	}

	.paddingtopbottomleft,
	.paddingtopbottomright {
		padding: 10vh 0;
	}
}

@media only screen and (max-width: 600px) {
	.paddingall {
		padding: 10vh 2rem;
	}
}

.charcoal-bg {
	background: var(--charcoal);
}

.center {
	text-align: center;
}
.left {
	text-align: left;
}

.fadeInUp {
	opacity: 0;
}

.primaryBtn {
	background: var(--gold);
	color: var(--white);
	font-size: var(--kicker);
	text-transform: uppercase;
	padding: 0.5rem 2rem;
	transition: 0.3s ease all;
	letter-spacing: clamp(1px, 0.1vw, 2px);
}

.primaryBtn:hover {
	background: #7a6d50;
}

.secondaryBtn {
	font-size: var(--kicker);
	color: var(--charcoal);
	letter-spacing: clamp(1px, 0.1vw, 2px);
	text-transform: uppercase;
	padding: 0 0 0.5rem 0;
	position: relative;
}

.secondaryBtn:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	margin: auto;
	text-align: center;
	right: 0;
	width: 60%;
	height: 1px;
	background: var(--gold);
	transition: 0.3s ease all;
}
.secondaryBtn:hover:after {
	content: "";
	width: 100%;
}

h1 {
	font-size: var(--h1);
}

h2 {
	font-size: var(--h2);
	line-height: 1.2;
}

h4 {
	font-size: var(--h4);
	text-transform: uppercase;
}

ul li,
p {
	font-size: var(--body);
}

.kicker {
	text-transform: uppercase;
	font-size: var(--kicker);
	letter-spacing: clamp(1px, 0.1vw, 2px);
}

h2.kicker {
	letter-spacing: unset;
	text-transform: unset;
}

h3.kicker {
	margin-bottom: 20px;
}

ul.bullets {
	list-style: disc;
	margin-block-start: 1em;
	margin-block-end: 1em;
	padding-inline-start: 40px;
}

ul.lines {
	list-style: none;
	padding: 0;
}

ul.lines li {
	border-bottom: 1px solid var(--charcoal);
	padding: 0.5rem 0;
}

@keyframes bounce2 {
	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-10px);
	}
	60% {
		transform: translateY(-5px);
	}
}

#topNavigation {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 4rem;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 9;
	background: transparent;
	transition: 0.3s ease all;
	.siteLogo {
		filter: invert(1) brightness(100);
		width: 200px;
		height: auto;
		transition: 0.1s ease all;
	}
	.inquireBtn {
		color: var(--white);
		font-size: var(--kicker);
		letter-spacing: clamp(1px, 0.1vw, 2px);
		padding: 0.5rem 2rem;
		border: 1px solid var(--white);
		font-family: "Relative Pro Book";
		text-transform: uppercase;
		transition: 0.3s ease all;
	}
	.inquireBtn:hover {
		background: #7a6d50;
		border: 1px solid #7a6d50;
	}
	@media only screen and (max-width: 820px) {
		& {
			padding: 1rem 2rem;
		}
	}
	@media only screen and (max-width: 600px) {
		& {
			justify-content: center;
			.siteLogo {
				width: 150px;
			}
			.inquireBtn {
				display: none;
			}
		}
	}
	@media only screen and (max-width: 420px) {
		.siteLogo {
			width: 130px;
		}
	}
}

.inquireBtnMobile {
	display: none;
	@media only screen and (max-width: 600px) {
		display: block;
		position: fixed;
		z-index: 10;
		bottom: 0px;
		left: 0px;
		right: 0px;
		width: 100%;
		text-transform: uppercase;
		margin: auto;
		text-align: center;
		color: var(--white);
		background: var(--gold);
		padding: 1rem 2rem;
		font-family: "Relative Pro Book";
		font-size: var(--kicker);
		letter-spacing: clamp(1px, 0.1vw, 2px);
	}
}

#topNavigation.sticky {
	background: var(--white);
	.siteLogo {
		filter: invert(0) brightness(0);
		width: 169px;
		height: auto;
	}
	.inquireBtn {
		color: var(--white);
		border: 1px solid var(--gold);
		background: var(--gold);
		transition: 0.3s ease all;
	}
	.inquireBtn:hover {
		background: #7a6d50;
		border: 1px solid #7a6d50;
	}
	@media only screen and (max-width: 600px) {
		.siteLogo {
			width: 120px;
		}
	}
	@media only screen and (max-width: 420px) {
		.siteLogo {
			width: 100px;
		}
	}
}

#textSection,
#heroSection,
#mediaContentSection,
#residencesSlider,
#fullMediaSection,
#inquire,
#footerContainer {
	width: 100%;
	display: block;
	position: relative;
	margin: auto;
}

#inquire h2,
#inquire p,
#textSection p,
#textSection p a,
#textSection h3,
#textSection h2,
#textSection ul,
#heroSection h1,
#heroSection h2,
#heroSection p,
#mediaContentSection h2,
#mediaContentSection h3,
#mediaContentSection p,
#mediaContentSection p a,
#mediaContentSection a,
#mediaContentSection ul,
#residencesSlider h2,
#residencesSlider h3,
#residencesSlider h4,
#residencesSlider ul,
#residencesSlider p,
#residencesSlider p a,
#residencesSlider a,
#fullMediaSection,
#fullMediaSection h2,
#fullMediaSection h3,
#fullMediaSection p,
#fullMediaSection a,
#fullMediaSection p a,
#footerBottom p,
#footerContainer h2,
#footerContainer a,
#footerContainer a:visited,
#footerContainer a:focus,
#footerContainer p,
#footerContainer address {
	font-family: "Relative Pro Book";
}

#inquire p {
	font-size: 12pt;
	letter-spacing: 0.15rem;
}

#footerContainer a,
#footerContainer p,
#footerContainer address {
	font-family: "Relative Pro Book";
	font-style: normal;
	font-size: var(--body);
}

#heroSection.full {
	height: 100vh;
}

#fullMediaSection .backgroundImage.half {
	height: 70vh;
}

#heroSection.backgroundImage,
#heroSection .textContainer {
	opacity: 0;
}

#heroSection .scrollContainer a {
	position: absolute;
	z-index: 2;
	bottom: 2rem;
	left: 0;
	right: 0;
	display: flex;
	gap: 1rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--white);

	img {
		animation: bounce2 2s ease infinite;
	}
	@media only screen and (max-width: 600px) {
		& {
			bottom: 5rem;
		}
	}
}
#heroSection .scrollContainer a:visited,
#heroSection .scrollContainer a:focus {
	color: var(--white);
}

#fullMediaSection .backgroundImage,
#heroSection.backgroundImage {
	background-size: cover !important;
	-moz-background-size: cover !important;
	-webkit-background-size: cover !important;
	-o-background-size: cover !important;
}

#heroSection .textContainer {
	position: absolute;
	z-index: 2;
	display: block;
}
#heroSection .textContainer.bottomCenter {
	bottom: 15vh;
	left: 0px;
	right: 0px;
	width: 100%;
}
#heroSection .textContainer.centerCenter {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	@media only screen and (max-width: 600px) {
		& {
			top: 40%;
		}
	}
}

#heroSection .kicker {
	color: var(--white);
}

#heroSection .textContainer h1 {
	color: var(--white);
	margin: auto;
	display: block;
	text-align: center;
	width: 100%;
	max-width: 51%;
	@media only screen and (max-width: 1700px) {
		& {
			max-width: 61%;
		}
	}
	@media only screen and (max-width: 820px) {
		& {
			max-width: calc(100% - 8rem);
		}
	}
	@media only screen and (max-width: 600px) {
		& {
			max-width: calc(100% - 4rem);
		}
	}
}

.heroVideo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.5);
}

#textSection .container.max-80 {
	width: 100%;
	max-width: 65%;
	margin: auto;
	display: block;
	text-align: center;

	h2 {
		padding: 0 0 2rem 0;
	}
	@media only screen and (max-width: 1700px) {
		& {
			max-width: 61%;
		}
	}
	@media only screen and (max-width: 820px) {
		& {
			max-width: 90%;
		}
	}
	@media only screen and (max-width: 600px) {
		& {
			max-width: 100%;
		}
	}
}

#mediaContentSection .flexContainer.slider,
#mediaContentSection .flexContainer {
	display: flex;
	gap: 10%;
	flex-wrap: wrap;
}

#mediaContentSection .flexContainer.smGap {
	gap: 7%;
}

#mediaContentSection .flexContainer.alignBottom {
	align-items: flex-end;
}

#mediaContentSection .flexContainer.alignCenter {
	align-items: center;
}

#mediaContentSection .flexContainer.reverse {
	flex-direction: row-reverse;
}

#mediaContentSection .flexContainer .media {
	width: calc(52% - 5%);
	position: relative;

	img {
		width: 100%;
		margin: auto;
		max-width: 100%;
		height: auto;
	}
}

#mediaContentSection .flexContainer.smGap .media {
	width: calc(52% - 3.5%);
	position: relative;

	img {
		width: 100%;
		margin: auto;
		max-width: 100%;
		height: auto;
	}
}

#mediaContentSection .flexContainer.slider .media {
	width: calc(60% - 5%);
	position: relative;
}

#mediaContentSection .flexContainer.slider .media .slide {
	position: relative;
	width: 80%;
	margin-left: 20px;

	img {
		width: auto;
		max-width: auto;
		height: 100%;
	}
}

#mediaContentSection .flexContainer .textColumn {
	width: calc(48% - 5%);
	position: relative;

	h2 {
		padding: 0 0 1.5rem 0;
	}
}

#mediaContentSection .flexContainer.slider .textColumn {
	width: calc(40% - 5%);
	position: relative;
	@media only screen and (max-width: 820px) {
		&.flexInner {
			display: flex;
			flex-direction: column-reverse;
		}
	}
}

#mediaContentSection .flexContainer.slider .textColumn .galleryNav {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 3rem;
	padding: 4rem 0 0 0;

	img {
		width: 16px;
		max-width: 16px;
		height: auto;
		transition: 0.3s ease all;
		cursor: pointer;
	}
	img:hover {
		opacity: 0.6;
	}
	@media only screen and (max-width: 820px) {
		& {
			padding: 0 0 4rem 0;
			justify-content: flex-end;
		}
	}
}

#mediaContentSection .flexContainer.smGap .textColumn {
	width: calc(48% - 3.5%);
	position: relative;

	h2 {
		padding: 0 0 1.5rem 0;
	}
}

#mediaContentSection .flexContainer .textColumn .paddRight {
	max-width: 65%;
}

#mediaContentSection .flexContainer .textColumn .primaryBtn {
	margin: 2rem 0 0 0;
	display: block;
	width: fit-content;
	width: -webkit-fit-content;
}

#mediaContentSection .flexContainer.alignBottom .textColumn {
	padding: 0 0 4rem 0;
}
#mediaContentSection .flexContainer.slider .textColumn {
	padding: 0 0 0rem 0;
}

@media only screen and (max-width: 820px) {
	#mediaContentSection .flexContainer.slider,
	#mediaContentSection .flexContainer,
	#mediaContentSection .flexContainer.reverse,
	#mediaContentSection .flexContainer.smGap {
		flex-direction: column;
		gap: 5vh;
	}

	#mediaContentSection .flexContainer.slider .textColumn,
	#mediaContentSection .flexContainer .textColumn,
	#mediaContentSection .flexContainer.slider .media,
	#mediaContentSection .flexContainer.smGap .media,
	#mediaContentSection .flexContainer .media {
		width: calc(100% - 5%);
	}

	#mediaContentSection .flexContainer.slider .textColumn,
	#mediaContentSection .flexContainer .textColumn,
	#mediaContentSection .flexContainer.smGap .textColumn {
		width: calc(100% - 12rem);
	}

	#mediaContentSection .flexContainer .textColumn .paddRight {
		width: 100%;
		max-width: 100%;
	}
}

@media only screen and (max-width: 600px) {
	#mediaContentSection .flexContainer.slider .textColumn,
	#mediaContentSection .flexContainer .textColumn,
	#mediaContentSection .flexContainer.smGap .textColumn {
		width: calc(100% - 6rem);
	}
}

/* flickity-fade */

.flickity-enabled.is-fade .flickity-slider > * {
	pointer-events: none;
	z-index: 0;
	opacity: 0 !important;
	transition: 0.5s opacity ease-in-out;
}

.flickity-enabled.is-fade .flickity-slider > .is-selected {
	pointer-events: auto;
	z-index: 1;
	opacity: 1 !important;
	color: var(--black);
}

.flickity-button-icon:hover {
	fill: #a39575;
}

.carousel-cell {
	width: 80%;
}

.residencesSlider {
	width: 100%;
	display: block;
	position: relative;
	margin: auto;
}

.residencesSlider .slide {
	width: 33.33%;
	margin-right: 1rem;
	position: relative;

	img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	@media only screen and (max-width: 820px) {
		& {
			width: 55%;
		}
	}
	@media only screen and (max-width: 600px) {
		& {
			width: 80%;
		}
	}
}

.residencesSlider .slide .banner {
	position: absolute;
	top: 0;
	z-index: 2;
	background: var(--gold);
	color: var(--white);
	text-transform: uppercase;
	font-size: var(--kicker);
	letter-spacing: clamp(1px, 0.1vw, 2px);
	width: 100%;
	padding: 0.5rem;
	font-family: "Relative Pro Book";
	margin: auto;
	text-align: center;
	opacity: 0;
}
.residencesSlider .slide.is-selected .banner {
	opacity: 1;
}

.residencesNav {
	width: 100%;
	max-width: calc(33.33% + 3rem);
	margin: auto;
	display: block;
	text-align: center;
	overflow: hidden;
	@media only screen and (max-width: 820px) {
		& {
			max-width: calc(55% + 3rem);
		}
	}
	@media only screen and (max-width: 600px) {
		& {
			max-width: 100%;
		}
	}
}

.residencesNav .textContainer {
	width: 100%;
	margin: auto;
	display: block;
	padding: 2rem 0 0 0;
}

.residencesNav .textContainer ul {
	list-style: none;
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0;
	li {
		position: relative;
		text-transform: uppercase;
		font-size: var(--body);
	}
	li:nth-child(2):after {
		content: "|";
		top: 0;
		bottom: 0;
		right: -0.6rem;
		position: absolute;
	}
	li:nth-child(2):before {
		content: "|";
		top: 0;
		bottom: 0;
		left: -0.6rem;
		position: absolute;
	}
}

#residencesSlider .secondaryBtn {
	display: block;
	margin: 3rem auto auto auto;
	text-align: center;
	width: fit-content;
	width: -webkit-fit-content;
}

#inquire h2:first-of-type {
	margin-bottom: 50px;
}

#inquire .gform-body.gform_body {
	padding: 2rem 0;
	max-width: 70%;
	width: 100%;
	position: relative;
	margin: auto;
	@media only screen and (max-width: 1700px) {
		& {
			max-width: 80%;
		}
	}
	@media only screen and (max-width: 820px) {
		& {
			max-width: 100%;
		}
	}
}

#inquire p,
#inquire h2 {
	color: var(--white);
}

#inquire #gform_3 legend,
#inquire #gform_3 label {
	color: var(--white);
	font-family: "Relative Pro Book";
	font-size: var(--kicker);
	letter-spacing: clamp(1px, 0.1vw, 2px);
}

#inquire #gform_3 input,
#inquire #gform_3 select {
	color: var(--white);
	font-family: "Relative Pro Book";
	border-bottom: 1px solid var(--white);
	border-radius: 0;
	font-size: var(--kicker) !important;
}

#inquire #gform_3 select {
	text-transform: uppercase;
	letter-spacing: clamp(1px, 0.1vw, 2px);
	-webkit-appearance: none;
	-moz-appearance: none;
	background: transparent;
	background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
	background-repeat: no-repeat;
	background-position-x: 100%;
	background-position-y: 5px;
	cursor: pointer;
}

.gchoice * {
	cursor: pointer;
}

#inquire #gform_3 input[type="radio"] {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	border-radius: 100%;
	background: transparent;
	border: 1px solid var(--white);
}
#inquire #gform_3 input[type="radio"]:checked {
	background: var(--white);
}

#inquire #gform_3 input#gform_submit_button_3 {
	border-bottom: 0px solid var(--white);
	background: var(--gold) !important;
	transition: 0.3s ease all;
	padding: 1rem 2rem;
	width: calc(43%);
	max-width: 425px;
	@media only screen and (max-width: 820px) {
		& {
			width: 100%;
		}
	}
}

#inquire #gform_3 input#gform_submit_button_3:hover {
	background: #7a6d50 !important;
}

#inquire .gform_wrapper.gravity-theme .gform_footer {
	margin: 0 0 4rem 15%;
	padding: 0;
	justify-content: flex-start;
	margin-top: 2rem !important;
	@media only screen and (max-width: 1700px) {
		& {
			margin: 0 0 4rem 10%;
		}
	}
	@media only screen and (max-width: 820px) {
		& {
			margin: 0 0 4rem 0;
		}
	}
}

#inquire #gform_3 ::-webkit-input-placeholder {
	/* Chrome/Opera/Safari */
	color: var(--white);
	font-family: "Relative Pro Book";
	font-size: var(--kicker);
	letter-spacing: clamp(1px, 0.1vw, 2px);
	text-transform: uppercase;
}
#inquire #gform_3 ::-moz-placeholder {
	/* Firefox 19+ */
	color: var(--white);
	font-family: "Relative Pro Book";
	font-size: var(--kicker);
	letter-spacing: clamp(1px, 0.1vw, 2px);
	text-transform: uppercase;
}
#inquire #gform_3 :-ms-input-placeholder {
	/* IE 10+ */
	color: var(--white);
	font-family: "Relative Pro Book";
	font-size: var(--kicker);
	letter-spacing: clamp(1px, 0.1vw, 2px);
	text-transform: uppercase;
}
#inquire #gform_3 :-moz-placeholder {
	/* Firefox 18- */
	color: var(--white);
	font-family: "Relative Pro Book";
	font-size: var(--kicker);
	letter-spacing: clamp(1px, 0.1vw, 2px);
	text-transform: uppercase;
}

#footerContainer {
	padding: 0 4rem;

	.line {
		width: 100%;
		margin: auto;
		display: block;
		border-top: 1px solid var(--white);
	}
	.flexContainer {
		display: flex;
		padding: 2rem 0 3rem 0;
		justify-content: space-between;
		align-items: flex-start;

		.columnInner {
			display: flex;
			gap: 4rem;
			align-items: flex-start;
			justify-content: flex-start;

			.footerLinks {
				display: flex;
				gap: 1.25rem;
				flex-direction: column;
				align-items: flex-start;

				p,
				address,
				h2 {
					color: var(--white);
					font-family: "Relative Pro Book";
				}

				.container {
					display: flex;
					gap: 0.5rem;
					flex-direction: column;
					align-items: flex-start;

					a,
					a:visited,
					a:focus {
						font-family: "Relative Pro Book";
						font-size: var(--body);
						color: var(--white);
					}

					a:hover {
						color: var(--gold);
					}
				}
			}
		}
	}
	@media only screen and (max-width: 820px) {
		& {
			padding: 0 2rem;

			.flexContainer {
				flex-direction: column;
				gap: 5vh;
			}
		}
	}
	@media only screen and (max-width: 600px) {
		& {
			padding: 0 2rem;

			.flexContainer {
				.columnInner {
					flex-direction: column;
					gap: 2rem;
				}
			}
		}
	}
}

#footerBottom {
	padding: 2rem 4rem;
	background: #1d1d1d;
	p {
		color: #6b6a6b;
		font-family: "Relative Pro Book";
		font-size: clamp(10px, 1vw, 15px);
	}
	@media only screen and (max-width: 820px) {
		& {
			padding: 2rem 2rem;
		}
	}
}

.page-id-1820 header,
.page-id-1820 footer,
.page-id-1820 .cta-footer {
	display: none !important;
}
