@font-face {
	font-family: "Glenna Sans";
	src: url(//glennastone.com/wp-content/themes/dyad_theme/css/glenna-sans-font/GlennaSans-Regular.woff2) format("woff2"), url(//glennastone.com/wp-content/themes/dyad_theme/css/glenna-sans-font/GlennaSans-Regular.woff) format("woff");
}
/* ======================= 
 PERSPECTIVES CHILD
 ======================= */

/* ========================
	Old blog reset 
=========================== */
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .wp-block-image,
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .wp-caption:has(img),
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] *:has(img),
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .dyad-image-set,
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .dyad-image.image-holder {
	width: 80%;
	margin: var(--image-margin) auto;
}

#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] h4 + .wp-block-image,
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] h4 + *:has(img),
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] h4 + .dyad-image-set,
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] h4 + .dyad-image.image-holder {
	margin-top: -1rem !important;
}

@media screen and (min-width: 45em) {
	#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .wp-block-image,
	#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .wp-caption:has(img),
	#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] *:has(img),
	#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .dyad-image-set,
	#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .dyad-image.image-holder {
		max-width: 83rem;
	}
}

/* ========================
	New styles 
=========================== */
#primary-container[data-barba-namespace="perspectives-child"] {
	background-color: var(--color-wevet);
}

#primary-container[data-barba-namespace="perspectives-child"] :is(h1 strong, h2 strong, h3 strong) {
	font-weight: 400;
}

#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] {
	background-color: var(--color-wevet);
	padding-top: 0;
	padding-bottom: 3.8rem;
	text-align: center;
	padding: 0 0.85rem 3.8rem;
	--image-margin: 2rem;
}
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] h1#blog-title {
	font-size: clamp(1.3em, 4.8vw, 1.65em);
	margin: 4rem auto 3.5rem;
	text-wrap: balance;
}

#primary-container[data-barba-namespace="perspectives-child"] .dyad-hero-container {
	margin: 0 auto;
	--hero-margin: 2rem;
}
#primary-container[data-barba-namespace="perspectives-child"] .dyad-hero-container .scroll-instruct {
	display: none;
}
#primary-container[data-barba-namespace="perspectives-child"] .dyad-hero-container .dyad-hero,
#primary-container[data-barba-namespace="perspectives-child"] .dyad-hero-container img {
	height: calc(100vh - 8rem);
	height: calc(100svh - 8rem);
	min-height: calc(100vh - 8rem);
	min-height: calc(100svh - 8rem);
}
#primary-container[data-barba-namespace="perspectives-child"] h2 {
	font-family: "Glenna Sans", sans-serif;
	letter-spacing: 0.125em;
	font-size: clamp(1em, 1.4vw, 1.1em);
	color: rgb(101, 112, 106); /* Might want to setup a color variable */
	margin: 1.7em auto 0.5em;
}

#primary-container[data-barba-namespace="perspectives-child"] h3 {
	font-size: 1.1em;
}

#primary-container[data-barba-namespace="perspectives-child"] h2 + h3 {
	margin-top: -0.7em;
}

#primary-container[data-barba-namespace="perspectives-child"] .dyad-hero-container .tagline {
	margin: 0 auto;
	margin-bottom: 1.5rem;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	font-size: 0.9em;
	color: var(--color-hague-blue);
}

/* Captions */
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .dyad-image.image-holder figcaption,
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .wp-block-image figcaption {
	margin-top: 0.45em;
	text-wrap: balance;
	opacity: 0.6;
	font-style: italic;
	letter-spacing: 0.01em;
}

#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .dyad-image.is-vertical {
	max-width: unset;
}

#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .dyad-image-set .dyad-image,
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .dyad-image-set .dyad-image .ratio,
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .dyad-image-set .dyad-image img {
	margin: 0;
	width: 100%;
}
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .dyad-image:not(:first-of-type) {
	margin-left: 1rem;
}

#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .heart-slideshow-block-container,
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .heart-slideshow-block-container .heart-slideshow,
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .heart-slideshow-block-container .heart-slideshow .heart-slide,
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .heart-slideshow-block-container .heart-slideshow .heart-slide .image-holder,
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .heart-slideshow-block-container .heart-slideshow .heart-slide .image-holder img {
	height: 100%;
	width: 100%;
}
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .heart-slideshow-block-container .heart-slideshow .heart-slide {
	background-color: var(--color-wevet);
}
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .heart-slideshow-block-container .heart-slideshow .heart-slide .image-holder.is-vertical img {
	object-fit: contain;
}

/* #primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] *:has(img) a + figcaption {
	margin-top: -1.8em !important;
} */

#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] p:has(> strong) {
	margin-top: 1.5em;
	color: #717171;
	margin-bottom: 0;
}

/* Elements */
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .wp-block-separator {
	border-width: 0;
	background-color: var(--color-borrowed-lt);
	max-width: 42em;
	margin: 1.5em auto;
}

/* #primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] figure + h2 {
	margin-top: -1em;
} */

#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] p + figure.wp-block-image.is-style-large {
	margin-top: 3.5em;
}

#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .wp-block-image figure > a {
	width: 100%;
	margin: 0;
}

/* ========================
	Typography
=========================== */
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] h4 {
	font: var(--font-serif);
	font-size: 1.5em;
}

#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] p {
	color: var(--color-borrowed-lt); /* Subjective, but I think this lighter color looks nicer than the darker grey */
	max-width: 50rem;
	margin: 0.7em auto;
	font-size: 1.2em;
	text-wrap: pretty;
}

#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] ol {
	max-width: 41rem;
	margin: 0 auto;
}
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] ol li {
	width: fit-content;
	margin: 0 auto;
}

#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] p#view-more-blogs {
	font-size: 1.1em;
	margin: 2.5rem auto 1rem;
}

/* ========================
	Gutenburg image sizing
=========================== */
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .wp-block-image.is-style-default {
	max-width: 28rem;
	max-width: 83rem;
}
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .wp-block-image.is-style-xsmall {
	max-width: 19rem;
}
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .wp-block-image.is-style-small {
	max-width: 25rem;
}
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .wp-block-image.is-style-medium {
	max-width: 30rem;
}
#primary-container[data-barba-namespace="perspectives-child"] main[data-title="single-blog-post"] .wp-block-image.is-style-large {
	max-width: 37rem;
	max-width: 50rem;
}
/* ==================== 
Specific styles for the Grid layout template.
Once a design is chosen move styles into main.css
 ==================== */
.page-template-page-grid-layout {
	overflow-x: hidden;
}
.page-template-page-grid-layout main {
	width: calc(100% - 1.7rem);
	max-width: 89rem;
	margin: 0 auto;
	overflow-x: hidden;
}
@media screen and (min-width: 45em) {
	.page-template-page-grid-layout main {
		width: 86%;
	}
}
.page-template-page-grid-layout .flex-grid .grid-item {
	margin-bottom: 3rem;
}
.page-template-page-grid-layout .flex-grid .grid-item a > * {
	pointer-events: none;
}

.page-template-page-grid-layout .flex-grid .grid-item .image-holder {
	transition: opacity 0.35s ease-in;
}

@media screen and (pointer: fine) {
	.page-template-page-grid-layout .flex-grid .grid-item:hover .image-holder,
	.page-template-page-grid-layout .flex-grid .grid-item.no-img .image-holder {
		opacity: 0.6;
		transition: opacity 0.35s ease-in;
	}
}

.page-template-page-grid-layout .flex-grid .grid-item h3 {
	opacity: 0.45;
	transition: opacity 0.35s ease-in;
}

@media screen and (pointer: fine) {
	.page-template-page-grid-layout .flex-grid .grid-item:hover h3,
	.page-template-page-grid-layout .flex-grid .grid-item.no-img h3 {
		opacity: 1;
		transition: opacity 0.35s ease-in;
	}
}
.page-template-page-grid-layout .flex-grid .flex-slug {
	height: 0;
	margin: 0 !important;
	padding: 0;
}

.page-template-page-grid-layout .flex-grid .grid-item:not(.flex-slug)::after {
	content: "tap to view";
	position: absolute;
	top: auto;
	left: auto;
	bottom: 1.5rem;
	width: 100%;
	text-align: center;
	font-style: italic;
	opacity: 0;
	transition: opacity 1s ease-in;
}
.page-template-page-grid-layout .flex-grid .grid-item.touch-active::after {
	opacity: 1;
	transition: opacity 0.35s ease-out;
}
.content-area {
	opacity: 1;
	transition: opacity var(--barba-transition-timing) cubic-bezier(0.36, 0.04, 0.56, 0.73), background-color var(--barba-transition-timing) cubic-bezier(0.36, 0.04, 0.56, 0.73);
}

.transition-out .content-area:not(.page-to-enter) {
	opacity: 0;
}

.transition-out .content-area.page-to-hide {
	position: relative;
	opacity: 0;
}
.transition-out #primary-container.content-area.page-to-enter,
.transition-out #primary-container.content-area.hidden {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	opacity: 0;
	z-index: -1;
	transition: none;
}

.fade-nav#masthead.site-header {
	opacity: 0;
	transition: opacity var(--barba-transition-timing) 0.25s cubic-bezier(0.36, 0.04, 0.56, 0.73);
}

.transition-out #masthead:not(.fade-nav),
.transition-out .sub-navigation {
	transition: background-color var(--barba-transition-timing) cubic-bezier(0.36, 0.04, 0.56, 0.73), height 0s var(--barba-transition-timing) cubic-bezier(0.36, 0.04, 0.56, 0.73);
}

body.transition-out {
	position: absolute;
	width: 100%;
	height: auto;
	overflow: hidden;
}

@media screen and (min-width: 40em) {
	body {
		--barba-transition-timing: 1s;
	}
}
#background-gradient-container {
	background: linear-gradient(to right, #859997, #303e46);
	background-size: 800% 800%;

	-webkit-animation: backgroundGradientShift 5.3s forwards linear;
	-moz-animation: backgroundGradientShift 5.3s forwards linear;
	animation: backgroundGradientShift 5.3s forwards linear;
}

@-webkit-keyframes backgroundGradientShift {
	0% {
		background-position: 0% 51%;
	}
	100% {
		background-position: 100% 50%;
	}
}
@-moz-keyframes backgroundGradientShift {
	0% {
		background-position: 0% 51%;
	}
	100% {
		background-position: 100% 50%;
	}
}
@keyframes backgroundGradientShift {
	0% {
		background-position: 0% 51%;
	}
	100% {
		background-position: 100% 50%;
	}
}
#intro .text-container svg {
	-webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, 0.5) 30%, #000 50%, rgba(0, 0, 0, 0.5) 70%);
	-webkit-mask-size: 200%;
	-webkit-mask-position: 150%;
	mask-image: linear-gradient(-75deg, rgba(0, 0, 0, 0.5) 30%, #000 50%, rgba(0, 0, 0, 0.5) 70%);
	mask-size: 200%;
	mask-position: 150%;
}
#intro .text-container svg {
	-webkit-animation: shine 3s 0.25s forwards cubic-bezier(0.58, 0.01, 0.53, 0.87);
	animation: shine 3s 0.25s forwards cubic-bezier(0.58, 0.01, 0.53, 0.87);
}
@-webkit-keyframes shine {
	0% {
		-webkit-mask-position: 150%;
	}
	100% {
		-webkit-mask-position: 0%;
	}
}
@keyframes shine {
	0% {
		-webkit-mask-position: 150%;
	}
	100% {
		-webkit-mask-position: -50%;
	}
}
/* Ken burns effect */

:root {
	--burns-timing: 6.5s;
}

/* zoom in */
.start-anim .image-holder.zoom-in {
	-webkit-animation: zoomIn var(--burns-timing) forwards linear;
	animation: zoomIn var(--burns-timing) forwards linear;
}

@-webkit-keyframes zoomIn {
	to {
		-webkit-transform: translate3d(0, 0, 0) scale(1.05);
		transform: translate3d(0, 0, 0) scale(1.05);
	}
}

@keyframes zoomIn {
	to {
		-webkit-transform: translate3d(0, 0, 0) scale(1.05);
		transform: translate3d(0, 0, 0) scale(1.05);
	}
}

/* zoom out */
.start-anim .image-holder.zoom-out {
	-webkit-animation: zoomOut var(--burns-timing) forwards linear;
	animation: zoomOut var(--burns-timing) forwards linear;
}

@-webkit-keyframes zoomOut {
	from {
		-webkit-transform: translate3d(0, 0, 0) scale(1.05);
		transform: translate3d(0, 0, 0) scale(1.05);
	}
	to {
		-webkit-transform: translate3d(0, 0, 0) scale(1);
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@keyframes zoomOut {
	from {
		-webkit-transform: translate3d(0, 0, 0) scale(1.1);
		transform: translate3d(0, 0, 0) scale(1.1);
	}
	to {
		-webkit-transform: translate3d(0, 0, 0) scale(1);
		transform: translate3d(0, 0, 0) scale(1);
	}
}
/* Pan up */
.start-anim .image-holder.pan-up {
	-webkit-animation: slideUp var(--burns-timing) forwards linear;
	animation: slideUp var(--burns-timing) forwards linear;
}

@-webkit-keyframes slideUp {
	from {
		-webkit-transform: translate3d(0, 2.5%, 0) scale(1.05);
		transform: translate3d(0, 2.55%, 0) scale(1.05);
	}
	to {
		-webkit-transform: translate3d(0, -2.5%, 0) scale(1.05);
		transform: translate3d(0, -2.5%, 0) scale(1.05);
	}
}
@keyframes slideUp {
	from {
		-webkit-transform: translate3d(0, 2.5%, 0) scale(1.05);
		transform: translate3d(0, 2.55%, 0) scale(1.05);
	}
	to {
		-webkit-transform: translate3d(0, -2.5%, 0) scale(1.05);
		transform: translate3d(0, -2.5%, 0) scale(1.05);
	}
}

/* Pan up to center */
.start-anim .image-holder.pan-up-to-center {
	-webkit-animation: slideUpToCenter var(--burns-timing) forwards linear;
	animation: slideUpToCenter var(--burns-timing) forwards linear;
}
@-webkit-keyframes slideUpToCenter {
	from {
		-webkit-transform: translate3d(0, 2.5%, 0) scale(1.05);
		transform: translate3d(0, 2.5%, 0) scale(1.05);
	}
	to {
		-webkit-transform: translate3d(0, -1.25%, 0) scale(1.05);
		transform: translate3d(0, -1.25%, 0) scale(1.05);
	}
}
@keyframes slideUpToCenter {
	from {
		-webkit-transform: translate3d(0, 2.5%, 0) scale(1.05);
		transform: translate3d(0, 2.5%, 0) scale(1.05);
	}
	to {
		-webkit-transform: translate3d(0, -1.25%, 0) scale(1.05);
		transform: translate3d(0, -1.25%, 0) scale(1.05);
	}
}

/* Pan down */
.start-anim .image-holder.pan-down {
	-webkit-animation: slideDown var(--burns-timing) forwards linear;
	animation: slideDown var(--burns-timing) forwards linear;
}
@-webkit-keyframes slideDown {
	from {
		-webkit-transform: translate3d(0, -2.5%, 0) scale(1.05);
		transform: translate3d(0, -2.55%, 0) scale(1.05);
	}
	to {
		-webkit-transform: translate3d(0, 2.5%, 0) scale(1.05);
		transform: translate3d(0, 2.5%, 0) scale(1.05);
	}
}
@keyframes slideDown {
	from {
		-webkit-transform: translate3d(0, -2.5%, 0) scale(1.05);
		transform: translate3d(0, -2.55%, 0) scale(1.05);
	}
	to {
		-webkit-transform: translate3d(0, 2.5%, 0) scale(1.05);
		transform: translate3d(0, 2.5%, 0) scale(1.05);
	}
}
/* Pan left */
.start-anim .image-holder.pan-left {
	-webkit-animation: slideLeft var(--burns-timing) forwards linear; /* was 12s*/
	animation: slideLeft var(--burns-timing) forwards linear;
}
@-webkit-keyframes slideLeft {
	from {
		-webkit-transform: translate3d(2%, 0, 0) scale(1.04); /* was -6% */
		transform: translate3d(2%, 0, 0) scale(1.04);
	}
	to {
		-webkit-transform: translate3d(-2%, 0, 0) scale(1.04); /* was -6% */
		transform: translate3d(-2%, 0, 0) scale(1.04);
	}
}
@keyframes slideLeft {
	from {
		-webkit-transform: translate3d(2%, 0, 0) scale(1.04); /* was -6% */
		transform: translate3d(2%, 0, 0) scale(1.04);
	}
	to {
		-webkit-transform: translate3d(-2%, 0, 0) scale(1.04); /* was -6% */
		transform: translate3d(-2%, 0, 0) scale(1.04);
	}
}
/* Pan right */
.start-anim .image-holder.pan-right {
	-webkit-animation: slideRight var(--burns-timing) forwards linear; /* was 12s*/
	animation: slideRight var(--burns-timing) forwards linear;
}

@-webkit-keyframes slideRight {
	from {
		-webkit-transform: translate3d(-2%, 0, 0) scale(1.04); /* was -6% */
		transform: translate3d(-2%, 0, 0) scale(1.04);
	}
	to {
		-webkit-transform: translate3d(2%, 0, 0) scale(1.04); /* was -6% */
		transform: translate3d(2%, 0, 0) scale(1.04);
	}
}

@keyframes slideRight {
	from {
		-webkit-transform: translate3d(-2%, 0, 0) scale(1.04); /* was -6% */
		transform: translate3d(-2%, 0, 0) scale(1.04);
	}
	to {
		-webkit-transform: translate3d(2%, 0, 0) scale(1.04); /* was -6% */
		transform: translate3d(2%, 0, 0) scale(1.04);
	}
}

.intro.background-image .image-holder {
	-webkit-animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
	animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
}
/* end Pan effects */
:root {
	/* Padding/Margins */
	--site-header-height: 6rem;
	--site-padding-left: 1.35rem;
	--horiztonal-padding-top: 68%;
	--vertical-padding-top: 136%;

	/* Typography */
	--font-sans-serif: normal 300 1em/1.8 mr-eaves-modern, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	--font-serif: normal 400 1em/1.8 Optima, Candara, "Noto Sans", source-sans-pro, sans-serif;
	--font-body: normal 300 1em/1.8 mr-eaves-modern, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	--glenna-sans: "Glenna Sans", "Optima", sans-serif;
	/* Colors */
	--color-hague-blue: #394a54;
	--color-oval-rm-blue: #000;
	--color-borrowed-lt: #909793;
	--color-wevet: #efeee8;

	/* Transitions */
	--barba-transition-timing: 1.05s;
}
@media screen and (min-width: 40em) {
	:root {
		--site-header-height: 7.5rem;
		--barba-transition-timing: 1.35s;
	}
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
body {
	font: var(--font-body);
	color: #666;
	font-size: 1.1rem;
}

body:not(.home-page) main {
	min-height: calc(100vh - 13rem);
	min-height: calc(100svh - 13rem);
}

h1,
h2,
h3 {
	font: var(--font-serif);
	color: var(--color-borrowed-lt);
	letter-spacing: 0.025em;
}

h2 {
	font-family: "Glenna Sans", sans-serif;
	letter-spacing: 0.125em;
	font-size: 1.45em;
	font-size: clamp(1.2em, 4.8vw, 1.4em);
	font-size: clamp(1.1em, 1.5vw, 1.4em);
}

h3 {
	font-size: 1.2em;
}

p {
	margin-bottom: 1em;
}
blockquote {
	margin: 4rem auto;
	max-width: 55rem;
	text-align: center;
}
blockquote p {
	font-size: clamp(1rem, 3vw, 1.15rem);
	width: 100%;
	margin-bottom: 0.5rem;
}
blockquote cite {
	font-size: clamp(0.95rem, 3vw, 1.1rem);
}
ul,
ol {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

.image-holder:has(.ratio) {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	transition: opacity 0.45s ease;
}
.image-holder .ratio {
	position: relative;
}
.image-holder.is-horizontal .ratio {
	padding-top: var(--horiztonal-padding-top);
}
.image-holder.is-vertical .ratio {
	padding-top: var(--vertical-padding-top);
}
.image-holder .ratio img {
	display: block;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	-o-object-fit: cover;
	object-fit: cover;
	font-family: "object-fit: cover;";
}

.link-to {
	position: relative;
}
.link-to a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: auto;
	width: 100%;
	z-index: 100;
}
.site-branding {
	position: relative;
	max-width: 18rem;
	width: 100%;
}
@media screen and (min-width: 40em) {
	.site-branding {
		max-width: 25rem;
	}
	.site-branding .link-to a {
		position: absolute;
		width: 100%;
	}
}
.site-icon {
	position: relative;
	max-width: 1.75rem;
}
@media screen and (min-width: 45em) {
	.site-icon {
		max-width: 2.5rem;
	}
}

#primary-container {
	position: relative;
	padding-top: var(--site-header-height);
	text-align: justify;
}
@media screen and (min-width: 45em) {
	#primary-container {
		text-align: center;
	}
}

button.scroll-instruct {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	font-size: 0.8em;
	letter-spacing: 0.1rem;
	color: #666;
	z-index: 10;
}

button.scroll-instruct:hover {
	cursor: pointer;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
.flex-grid {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	margin: 0 auto;
	width: 100%;
	--item-margin-right: 0.75rem;
}
.flex-grid .grid-item {
	flex: 0 0 100%;
}
@media screen and (min-width: 45em) {
	.flex-grid .grid-item {
		flex: 0 0 calc(50% - var(--item-margin-right));
	}
}
@media screen and (min-width: 65em) {
	.flex-grid .grid-item {
		flex: 0 0 calc(33.3333% - var(--item-margin-right));
	}
}
/* ======================= */
/* SITE FOOTER */
/* ======================= */
#colophon {
	padding: 0 var(--site-padding-left) 3.8rem;
}
#colophon .site-icon {
	margin: 0 auto;
}
.hide-site-footer footer#colophon {
	display: none;
}

footer .site-icon svg path,
#colophon .site-icon svg path {
	fill: var(--color-borrowed-lt);
}

.footer-light #colophon .site-icon svg path {
	fill: #ffffff8f;
}
/* ==================== 
This houses all general styles specific to each page.
All global styles are in styles.css.
Specific block styles are located in their specific folders.
Specific template styles are in tempary files. Once a design is chosen move styles into main.css
 ==================== */

/* ==================== 
 FEATURED IMAGE BACKGROUND
 ==================== */
.page-template-page-featured-img-background .image-holder,
.page-template-page-featured-img-background .image-holder img {
	max-height: 100vh;
	max-height: 100svh;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
}
@media screen and (max-width: 54.999em) {
	.page-template-page-featured-img-background .image-holder img:not(.mobile-background) {
		display: none;
	}
}
@media screen and (min-width: 55em) {
	.page-template-page-featured-img-background .image-holder img.mobile-background {
		display: none;
	}
}
.page-template-page-featured-img-background .content-container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	color: #fff;
	z-index: 10;
	font-size: 1rem;
	padding: 0 1rem;
}

/* ======================= 
 HEARTSLIDE OVERRIDES
 ======================= */
body .heart-slideshow {
	height: 100vh;
	height: 100svh;
}

/* ======================= 
 HOME
 ======================= */

#primary-container[data-barba-namespace="home-page"] {
	padding-top: 0;
	background-color: var(--color-wevet);
}
#primary-container[data-barba-namespace="home-page"] main::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(
		to bottom,
		hsl(100, 100%, 100%) 0%,
		hsla(100, 100%, 100%, 0.987) 8.1%,
		hsla(100, 100%, 100%, 0.951) 15.5%,
		hsla(100, 100%, 100%, 0.896) 22.5%,
		hsla(100, 100%, 100%, 0.825) 29%,
		hsla(100, 100%, 100%, 0.741) 35.3%,
		hsla(100, 100%, 100%, 0.648) 41.2%,
		hsla(100, 100%, 100%, 0.55) 47.1%,
		hsla(100, 100%, 100%, 0.45) 52.9%,
		hsla(100, 100%, 100%, 0.352) 58.8%,
		hsla(100, 100%, 100%, 0.259) 64.7%,
		hsla(100, 100%, 100%, 0.175) 71%,
		hsla(100, 100%, 100%, 0.104) 77.5%,
		hsla(100, 100%, 100%, 0.049) 84.5%,
		hsla(100, 100%, 100%, 0.013) 91.9%,
		hsla(100, 100%, 100%, 0) 100%
	);
	height: var(--site-header-height);
	opacity: 0.3;
	width: 100%;
	z-index: 15;
}

/* Intro */
#intro {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	z-index: 2000;
	display: flex;
	justify-content: center;
	align-items: center;
}
#intro.remove-intro {
	opacity: 0;
	transform: translateX(-100vw);
	pointer-events: none;
	transition:
		opacity 3s ease-in,
		transform 0s 3s;
}
#intro #background-gradient-container,
#intro #text-gradient-container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: -1;
}

#intro #background-gradient-container img {
	display: none;
}
#intro img {
	height: 100vh;
	height: 100svh;
}

#intro #text-gradient-container {
	display: none;
}
#intro .text-container {
	position: relative;
	overflow: hidden;
	width: 76%;
	max-width: 40rem;
	text-align: center;
}
#intro .text-container h2 {
	display: none;
	color: #fff;
	text-transform: uppercase;
	margin: 0;
}
#intro .text-container svg {
	display: block !important;
}
#intro .text-container svg path {
	fill: #fff;
}

.overview-link {
	position: absolute;
	top: auto;
	bottom: 0.5em;
	z-index: 999;
	left: 0;
	right: 0;
	opacity: 0.7;
	cursor: pointer;
	text-align: center;
	text-transform: lowercase;
	font-style: italic;
	color: #fff;
	opacity: 0.5;
	transition: opacity 0.3s ease-in-out;
}

.overview-link:hover {
	opacity: 1;
}
.return-link {
	cursor: pointer;
	transition: opacity 0.4s ease-in-out;
}

.return-link:hover {
	opacity: 0.5;
}

.overview-content {
	/* display: none; */
	margin: 0 auto;
	overflow: hidden;
	height: 100%;
	max-height: 0;
	width: 100%;
	padding: 0 1em;
	text-align: center;
	max-width: 48rem;
	transition: max-height 0.4s ease-in-out;
}

.overview-content.active {
	max-height: 9999px;
	transition: max-height 0.8s ease-in-out;
}

.overview-content h2 {
	letter-spacing: 0.125em;
	font-size: clamp(1em, 1.4vw, 1.1em);
	color: rgb(101, 112, 106);
}

.overview-content h2:not(:first-of-type) {
	margin-top: 4em;
}

.overview-content p {
	color: var(--color-borrowed-lt);
	margin: 0.7em auto;
	font-size: 1.05em;
	text-wrap: pretty;
}

.overview-content ul {
	text-align: center;
	margin: 0 auto;
	justify-self: anchor-center;
	list-style: none;
	max-width: 16em;
	line-height: 2;
	color: #888888;
}

.overview-content h3 {
	margin-bottom: 0;
	margin-top: 2em;
}

/* ======================= 
 PORTFOLIO
 ======================= */
#primary-container[data-barba-namespace="portfolio-child"] {
	background-color: var(--color-wevet);
}
#primary-container[data-barba-namespace="portfolio-child"] main {
	padding-top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
	margin-bottom: 1rem;
}

#primary-container[data-barba-namespace="portfolio-child"] .flex-grid {
	--item-margin-right: 1.05rem;
}
#primary-container[data-barba-namespace="portfolio-child"] .flex-grid.horizontal-images .grid-item .ratio {
	padding-top: var(--horiztonal-padding-top);
}
#primary-container[data-barba-namespace="portfolio-child"] .flex-grid.vertical-images .grid-item .ratio {
	padding-top: var(--vertical-padding-top);
}

#primary-container[data-barba-namespace="portfolio-child"] .flex-grid .grid-item {
	margin-bottom: 1rem;
}
@media screen and (min-width: 45em) {
	#primary-container[data-barba-namespace="portfolio-child"] .flex-grid .grid-item {
		margin-bottom: 1.95rem;
	}
}
@media screen and (min-width: 65em) {
	#primary-container[data-barba-namespace="portfolio-child"] .flex-grid .grid-item {
		margin-bottom: 1.45rem;
	}
}

#primary-container[data-barba-namespace="portfolio-child"] .item-title-container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ccd6d5df;
	opacity: 0;
	text-align: center;
	color: var(--color-hague-blue);
	padding: 0 1rem;
	transition: opacity 1s ease-in;
}
#primary-container[data-barba-namespace="portfolio-child"] .no-img .item-title-container {
	opacity: 1;
}

@media screen and (pointer: coarse) {
	#primary-container[data-barba-namespace="portfolio-child"] .grid-item.touch-active .item-title-container {
		opacity: 1;
		transition: opacity 0.35s ease-out;
	}
	#primary-container[data-barba-namespace="portfolio-child"] .flex-grid .grid-item.touch-active .image-holder {
		opacity: 0.6;
		transition: opacity 0.35s ease-in;
	}
	#primary-container[data-barba-namespace="portfolio-child"] .flex-grid .grid-item.touch-active h3 {
		opacity: 1;
		transition: opacity 0.35s ease-in;
	}
}

@media screen and (pointer: fine) {
	#primary-container[data-barba-namespace="portfolio-child"] .grid-item:hover .item-title-container {
		opacity: 1;
		transition: opacity 0.35s ease-out;
	}
}

#primary-container[data-barba-namespace="portfolio-child"] .item-title-container h2,
#primary-container[data-barba-namespace="portfolio-child"] .item-title-container p {
	color: var(--color-hague-blue);
	margin: 0 auto;
}
#primary-container[data-barba-namespace="portfolio-child"] .item-title-container h2 {
	line-height: 1.35;
}
#primary-container[data-barba-namespace="portfolio-child"] .item-title-container p {
	letter-spacing: 0.1rem;
	font-size: 0.85em;
	text-transform: uppercase;
}

.portfolio-child #colophon {
	padding-bottom: 1.5rem;
}

#primary-container[data-barba-namespace="portfolio-child"] .flex-grid.vertical-images .grid-item {
	flex: 0 0 calc(25% - var(--item-margin-right));
}
#primary-container[data-barba-namespace="portfolio-child"] .flex-grid.vertical-images .grid-item:nth-child(8) {
	display: none;
}

#primary-container[data-barba-namespace="portfolio-child"] .flex-grid.vertical-images .grid-item .item-title-container p {
	font-size: clamp(0.75em, 1.1vw, 0.9em);
}

#primary-container[data-barba-namespace="portfolio-child"] .all-media-link {
	margin: 2rem auto;
}

.all-media-link:is(#view-more-press, #view-more-blogs) a {
	background: #152a37;
	color: #fff;
	padding: 1.1em 2.8em;
	outline: 1px solid #152a37;
	outline-offset: 2.5px;
}

/* ======================= 
 PORTFOLIO CHILD
 ======================= */
#primary-container[data-barba-namespace="project-page"] {
	background-color: var(--color-wevet);
	padding-top: 0;
}

#primary-container[data-barba-namespace="project-page"] .dyad-hero-container {
	--hero-margin: 6rem;
	margin-bottom: var(--hero-margin);
}
#primary-container[data-barba-namespace="project-page"] .dyad-hero-container .dyad-hero-innerblock p {
	text-align: justify;
}
#primary-container[data-barba-namespace="project-page"] .dyad-hero-container .dyad-hero-innerblock p:last-child {
	line-height: 1.5;
	/* max-width: 50rem; */
}
#primary-container[data-barba-namespace="project-page"] .dyad-hero-container::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 15rem;
	background: linear-gradient(
		to bottom,
		hsl(100, 100%, 100%) 0%,
		hsla(100, 100%, 100%, 0.987) 8.1%,
		hsla(100, 100%, 100%, 0.951) 15.5%,
		hsla(100, 100%, 100%, 0.896) 22.5%,
		hsla(100, 100%, 100%, 0.825) 29%,
		hsla(100, 100%, 100%, 0.741) 35.3%,
		hsla(100, 100%, 100%, 0.648) 41.2%,
		hsla(100, 100%, 100%, 0.55) 47.1%,
		hsla(100, 100%, 100%, 0.45) 52.9%,
		hsla(100, 100%, 100%, 0.352) 58.8%,
		hsla(100, 100%, 100%, 0.259) 64.7%,
		hsla(100, 100%, 100%, 0.175) 71%,
		hsla(100, 100%, 100%, 0.104) 77.5%,
		hsla(100, 100%, 100%, 0.049) 84.5%,
		hsla(100, 100%, 100%, 0.013) 91.9%,
		hsla(100, 100%, 100%, 0) 100%
	);
	z-index: 1;
	opacity: 0.6;
}

#primary-container[data-barba-namespace="project-page"] .dyad-hero-container h2 {
	margin-top: var(--hero-margin);
	margin-bottom: 0;
	color: var(--color-borrowed-lt);
}
#primary-container[data-barba-namespace="project-page"] .dyad-hero-container .tagline {
	text-align: center;
	margin: 0 auto;
	text-transform: uppercase;
	margin-bottom: 1.5rem;
	letter-spacing: 0.1rem;
	font-size: 0.9em;
	color: var(--color-borrowed-lt);
}
#primary-container[data-barba-namespace="project-page"] .dyad-hero-container ul {
	text-align: center;
}

#primary-container[data-barba-namespace="project-page"] .dyad-image + .dyad-image {
	margin-top: 0.7rem;
	margin-top: 0.9rem;
}

#primary-container[data-barba-namespace="project-page"] .dyad-image-set .dyad-image-set-innerblock {
	width: calc(100% - 1.6rem);
}
@media screen and (min-width: 60em) {
	#primary-container[data-barba-namespace="project-page"] .dyad-image-set .dyad-image-set-innerblock {
		width: calc(100% - 1.4rem);
	}
	#primary-container[data-barba-namespace="project-page"] .dyad-image-set .dyad-image {
		margin-top: 0;
	}
}

#primary-container[data-barba-namespace="project-page"] .dyad-textbox-block .dyad-textbox-block-innerblock {
	font-size: clamp(1em, 1.9vw, 1.4em);
	/* font-family: var(--glenna-sans);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased; */
}
#primary-container[data-barba-namespace="project-page"] .dyad-textbox-block .dyad-textbox-block-innerblock p {
	opacity: 0.8;
}

/* ==========================
 Interiors footer
 ============================ */
#primary-container[data-barba-namespace="project-page"] .interiors-child-footer {
	padding: 2rem 0;
}
#primary-container[data-barba-namespace="project-page"] .interiors-child-footer ul {
	display: flex;
	justify-content: center;
	align-items: center;
	font: var(--font-serif);
	font-family: var(--glenna-sans);
	color: var(--color-borrowed-lt);
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	font-size: 0.8em;
}
#primary-container[data-barba-namespace="project-page"] .interiors-child-footer ul li {
	width: 33%;
	position: relative;
	text-align: right;
}
#primary-container[data-barba-namespace="project-page"] .interiors-child-footer ul li:last-of-type {
	text-align: left;
}
#primary-container[data-barba-namespace="project-page"] .interiors-child-footer ul li span.hover-container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	opacity: 0;
}
#primary-container[data-barba-namespace="project-page"] .interiors-child-footer ul li span {
	transition: opacity 0.75s ease-out;
}

@media screen and (pointer: fine) {
	#primary-container[data-barba-namespace="project-page"] .interiors-child-footer ul li:hover span,
	.transition-out #primary-container[data-barba-namespace="project-page"] .interiors-child-footer ul li:hover span {
		opacity: 0;
		transition: opacity 0.35s ease-in;
	}
	#primary-container[data-barba-namespace="project-page"] .interiors-child-footer ul li:hover span.hover-container,
	.transition-out #primary-container[data-barba-namespace="project-page"] .interiors-child-footer ul li:hover span.hover-container {
		opacity: 1;
	}
}

#primary-container[data-barba-namespace="project-page"] .interiors-child-footer ul li a {
	color: var(--color-borrowed-lt);
}

#primary-container[data-barba-namespace="project-page"] .interiors-child-footer .site-icon {
	width: auto;
	margin: 0 0.8rem;
}
@media screen and (min-width: 45em) {
	#primary-container[data-barba-namespace="project-page"] .interiors-child-footer .site-icon {
		margin: 0 1.5rem;
	}
}
/* #primary-container[data-barba-namespace="project-page"] .interiors-child-footer .site-icon path {
	fill: var(--color-borrowed-lt);
} */

/* ======================= 
 STUDIO
 ======================= */
/* .studio-page #colophon .site-icon path {
	fill: #5d716e;
} */
#primary-container[data-barba-namespace="studio-page"] {
	background-color: var(--color-wevet);
	font: var(--font-serif);
	padding-top: 0;
	padding-bottom: 2rem;
	--text-color: var(--color-borrowed-lt);
	--width: calc(100% - 1.6rem);
	--max-width: 83rem;
}
@media screen and (min-width: 45em) {
	#primary-container[data-barba-namespace="studio-page"] {
		--width: 85%;
	}
}
@media screen and (min-width: 65em) {
	#primary-container[data-barba-namespace="studio-page"] {
		--width: 79%;
	}
}

#primary-container[data-barba-namespace="studio-page"] .dyad-hero-container h2 {
	display: none;
}
#primary-container[data-barba-namespace="studio-page"] .dyad-hero-container .dyad-hero {
	transition: none;
	width: 100vw;
}

#primary-container[data-barba-namespace="studio-page"] .dyad-hero-container .dyad-hero-innerblock {
	min-height: 100vh;
	min-height: 100svh;
	width: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* color: var(--text-color); */
	color: var(--color-hague-blue);
	/* background-color: #c9d7d6; */
	background-color: rgba(201, 215, 214, 0.96);
	display: flex;
	justify-content: center;
	align-items: center;
	font: var(--font-serif);
}
#primary-container[data-barba-namespace="studio-page"] .dyad-hero-container .dyad-hero-innerblock.remove-quote {
	opacity: 0;
	transition: opacity 3.22s ease-in-out;
}
#primary-container[data-barba-namespace="studio-page"] .dyad-hero-container .dyad-hero-innerblock p {
	font-size: clamp(1.2rem, 3vw, 1.45rem);
	font-size: clamp(1em, 1.9vw, 1.4em);
	text-align: center;
	max-width: unset;
	margin: 0 auto;
}

#primary-container[data-barba-namespace="studio-page"] .wp-block-group {
	margin: 3rem auto;
	color: var(--text-color);
	text-align: center;
	width: var(--width);
}
#primary-container[data-barba-namespace="studio-page"] .wp-block-group h2 {
	letter-spacing: 0.125rem;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}
#primary-container[data-barba-namespace="studio-page"] .wp-block-group h3 {
	margin-bottom: 0.25rem;
}

#primary-container[data-barba-namespace="studio-page"] .wp-block-group blockquote p {
	font: var(--font-serif);
	font-size: 1.35em;
	font-size: clamp(0.95em, 3.1vw, 1.05em);
	max-width: 100%;
	color: inherit;
}

#primary-container[data-barba-namespace="studio-page"] .wp-block-group p,
#primary-container[data-barba-namespace="studio-page"] .wp-block-group li,
#primary-container[data-barba-namespace="studio-page"] .wp-block-group li a {
	font: var(--font-sans-serif);
	line-height: 1.45;
	max-width: 52rem;
	margin: 0 auto;
	color: #666666;
	transition: opacity 0.35s ease;
}
#primary-container[data-barba-namespace="studio-page"] .wp-block-group li a:hover {
	transition: opacity 0.35s ease;
}

#primary-container[data-barba-namespace="studio-page"] .dyad-image-set,
#primary-container[data-barba-namespace="studio-page"] #slideshows-container.wp-block-group {
	max-width: var(--max-width);
}
@media screen and (min-width: 45em) {
	#primary-container[data-barba-namespace="studio-page"] #slideshows-container.wp-block-group {
		--width: 100%;
	}
	#slideshows-container .wp-block-group__inner-container {
		display: flex;
		flex-flow: row;
		width: calc((var(--width) - 2rem));
		margin: 0 auto;
	}
}
@media screen and (min-width: 65em) {
	#primary-container[data-barba-namespace="studio-page"] #slideshows-container.wp-block-group {
		--width: 90%;
	}
}

#slideshows-container .heart-slideshow-block-container {
	position: relative;
	padding-top: 68%;
	width: 100%;
	margin-bottom: 1rem;
}
@media screen and (min-width: 45em) {
	#slideshows-container .heart-slideshow-block-container {
		padding-top: 32%;
		width: calc(100% - 0.75rem);
	}
}
@media screen and (min-width: 65em) {
	#slideshows-container .heart-slideshow-block-container {
		padding-top: 21%;
	}
}

#slideshows-container .heart-slideshow-block-container:not(:first-of-type, :last-of-type) {
	display: none;
}
@media screen and (min-width: 45em) {
	#slideshows-container .heart-slideshow-block-container:not(:last-of-type) {
		margin-right: 0.75rem;
		margin-right: calc(0.75rem * 2);
	}
}
@media screen and (min-width: 65em) {
	#slideshows-container .heart-slideshow-block-container:not(:first-of-type) {
		display: block;
	}
}

#slideshows-container .heart-slideshow {
	min-height: unset;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
}

#primary-container[data-barba-namespace="studio-page"] .glenna-container .description-container,
#primary-container[data-barba-namespace="studio-page"] .additional-staff .description-container {
	font: var(--font-sans-serif);
	line-height: 1.5;
	text-align: justify;
}

#primary-container[data-barba-namespace="studio-page"] .dyad-flex-grid-container .dyad-flex-grid-innerblock {
	width: var(--width);
	max-width: var(--max-width);
}

#primary-container[data-barba-namespace="studio-page"] .glenna-container .dyad-flex-grid-innerblock.flex-grid {
	--max-width: 58rem;
}

#primary-container[data-barba-namespace="studio-page"] .dyad-flex-grid-container.glenna-container .dyad-flex-grid-innerblock {
	justify-content: center;
}

#primary-container[data-barba-namespace="studio-page"] .dyad-flex-grid-container:first-of-type .dyad-flex-grid-innerblock {
	max-width: 61rem;
}

@media screen and (min-width: 55em) {
	#primary-container[data-barba-namespace="studio-page"] .dyad-flex-grid-container .flex-grid .grid-item {
		flex: 0 0 calc(var(--images-per-row, 33%) - 1.2rem);
	}
}
#primary-container[data-barba-namespace="studio-page"] .dyad-flex-grid-innerblock.acf-innerblocks-container .grid-item h3 {
	font-family: var(--glenna-sans);
}
#primary-container[data-barba-namespace="studio-page"] #partners {
	max-width: 39rem;
}

#primary-container[data-barba-namespace="studio-page"] #relationships {
	text-align: center;
}

/* ======================= 
 PRESS/PERSPECTIVES/INSTAGRAM PAGE
 ======================= */

#sb_instagram .sbi_type_carousel .fa-clone {
	font-size: 20px !important;
}
#sb_instagram .sbi_type_video .sbi_playbtn {
	font-size: 23px !important;
}

#sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,
#sb_instagram .sbi_type_video .svg-inline--fa.fa-play {
	top: 1.6em;
	bottom: auto;
}

#sb_instagram #sbi_load {
	margin-top: 2.5em;
}
#sb_instagram #sbi_load .sbi_load_btn:is(:hover, :focus, :active),
#sb_instagram #sbi_load .sbi_load_btn {
	background-color: #152a37 !important;
	border-radius: 0 !important;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	cursor: pointer;
	outline: 1px solid #152a37;
	outline-offset: 2px;
	padding: 0.7em 2.8em;
}

#sb_instagram svg:not(:root).svg-inline--fa,
#sb_instagram .sbi_photo svg {
	position: absolute;
	right: 0.6em;
	left: auto;
	width: auto;
}

#primary-container[data-barba-namespace="instagram-page"],
#primary-container[data-barba-namespace="press-page"],
#primary-container[data-barba-namespace="perspectives-page"] {
	background-color: var(--color-wevet);
}
#primary-container[data-barba-namespace="instagram-page"] main,
#primary-container[data-barba-namespace="perspectives-page"] main,
#primary-container[data-barba-namespace="press-page"] main {
	width: var(--width);
	max-width: var(--max-width);
	padding: 0 0.8rem 3rem;
	margin: 0 auto;

	--width: 100%;
	--max-width: 83rem;
}
@media screen and (min-width: 45em) {
	#primary-container[data-barba-namespace="instagram-page"] main,
	#primary-container[data-barba-namespace="perspectives-page"] main,
	#primary-container[data-barba-namespace="press-page"] main {
		--width: 86%;
	}
}
@media screen and (min-width: 65em) {
	#primary-container:is([data-barba-namespace="press-page"], [data-barba-namespace="perspectives-page"], [data-barba-namespace="instagram-page"]) main {
		--width: 79%;
	}
}

#primary-container:is([data-barba-namespace="press-page"], [data-barba-namespace="perspectives-page"]) .media-grid-container .placeholder {
	margin: 0;
	height: 0;
	pointer-events: none;
}

#primary-container:is([data-barba-namespace="press-page"], [data-barba-namespace="perspectives-page"]) .media-grid-container {
	max-width: 80rem;
	margin: 0 auto;
}
#primary-container:is([data-barba-namespace="press-page"], [data-barba-namespace="perspectives-page"]) :is(#press-container, .media-grid-container) {
	margin-bottom: 4rem;
	margin-bottom: 7rem;
}

@media screen and (min-width: 45em) {
	#primary-container:is([data-barba-namespace="press-page"], [data-barba-namespace="perspectives-page"]) .media-grid-container .flex-grid .grid-item {
		flex: 0 0 calc(50% - 0.5rem);
	}
}
@media screen and (min-width: 55em) {
	#primary-container:is([data-barba-namespace="press-page"], [data-barba-namespace="perspectives-page"]) .media-grid-container .flex-grid .grid-item {
		flex: 0 0 calc(33% - 1rem);
	}
}
@media screen and (min-width: 65em) {
	#primary-container:is([data-barba-namespace="press-page"], [data-barba-namespace="perspectives-page"]) .media-grid-container .flex-grid .grid-item {
		flex: 0 0 calc(25% - 1.2rem);
	}
}

#primary-container:is([data-barba-namespace="press-page"], [data-barba-namespace="perspectives-page"]) .media-grid-container .link-to {
	transition: opacity 0.55s ease;
}

#primary-container:is([data-barba-namespace="press-page"], [data-barba-namespace="perspectives-page"]) .media-grid-container .link-to:hover {
	opacity: 0.75;
	transition: opacity 0.35s ease;
}

#primary-container:is([data-barba-namespace="press-page"], [data-barba-namespace="perspectives-page"]) .media-grid-container h3 {
	letter-spacing: 0.075rem;
	line-height: 1.4;
	font-size: clamp(0.8em, 1.1vw, 0.9em);
	font-family: var(--glenna-sans);
}

#primary-container:is([data-barba-namespace="press-page"], [data-barba-namespace="perspectives-page"]) #persepectives .grid-item figcaption {
	padding: 0 0.5rem;
}

#primary-container:is([data-barba-namespace="press-page"], [data-barba-namespace="perspectives-page"]) #persepectives .grid-item figcaption h3 {
	font: var(--font-serif);
	letter-spacing: 0;
	line-height: 1.4;
	font-size: 1em;
	text-transform: none;
}

.wp-block-buttons.is-content-justification-center {
	display: flex;
	justify-content: center;
}

#primary-container:is([data-barba-namespace="press-page"], [data-barba-namespace="perspectives-page"]) .wp-block-buttons .wp-block-button__link {
	outline: none;
	border: none;
	font-size: 1em;
	text-transform: uppercase;
	font: var(--font-sans-serif);
	color: #666;
	font-size: 0.75em;
	letter-spacing: 0.1rem;
}

#primary-container:is([data-barba-namespace="press-page"], [data-barba-namespace="perspectives-page"]) h2 {
	text-align: center;
	text-transform: uppercase;
}

.all-media-link {
	text-align: center;
	margin-top: 0;
	font: var(--font-sans-serif);

	text-transform: uppercase;
	font-size: 0.75em;
	letter-spacing: 0.1rem;
}

.all-media-link a {
	color: #666;
}
/* 
.media-page #colophon path {
	fill: var(--color-hague-blue);
} */

/* ======================= 
 INDEX PAGE
 ======================= */
#primary-container[data-barba-namespace="index-page"] {
	background-color: var(--color-hague-blue);
}
#primary-container[data-barba-namespace="index-page"] main {
	padding-top: 3rem;
	padding-bottom: 5rem;
	padding: 3rem 1rem 5rem;
	width: var(--width);

	--width: 100%;
	--max-width: 83rem;
}
@media screen and (min-width: 45em) {
	#primary-container[data-barba-namespace="media-page"] main {
		--width: 86%;
	}
}
@media screen and (min-width: 65em) {
	#primary-container[data-barba-namespace="media-page"] main {
		--width: 79%;
	}
}

#primary-container[data-barba-namespace="index-page"] .index-list-header {
	font: var(--font-sans-serif);
	font-size: 1em;
	margin-bottom: 0;
	text-align: center;
	margin-top: 3rem;
	margin-bottom: 0.6rem;
}

#primary-container[data-barba-namespace="index-page"] ul {
	text-align: center;
	margin: 0 auto;
	max-width: 80rem;
}
@media screen and (min-width: 900px) {
	#primary-container[data-barba-namespace="index-page"] ul.use-columns {
		column-count: 2;
		width: 80%;
	}
}
@media screen and (min-width: 1232px) {
	#primary-container[data-barba-namespace="index-page"] ul.use-columns {
		width: 100%;
		column-count: 3;
	}
}
#primary-container[data-barba-namespace="index-page"] li.no-link a:hover {
	opacity: 1;
}
#primary-container[data-barba-namespace="index-page"] ul li,
#primary-container[data-barba-namespace="index-page"] ul a,
#primary-container[data-barba-namespace="index-page"] .return-link a {
	color: #ffffff8f;
}
#primary-container[data-barba-namespace="index-page"] .return-link {
	padding-top: 5rem;
	text-align: center;
	margin-top: 0;
	font: var(--font-sans-serif);
	text-transform: uppercase;
	font-size: 0.75em;
	letter-spacing: 0.1rem;
}

/* ======================= 
 INQUIRE
 ======================= */
.inquire-page #masthead:not(.toggled) .site-branding,
.entering-inquire #masthead:not(.toggled) .site-branding {
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.35s ease-in-out;
}
.leaving-inquire.transition-out #masthead .site-branding {
	transition: opacity 1s 0.35s ease-in-out;
}

@media screen and (min-width: 40em) {
	.inquire-page #masthead .menu-desktop-left-container,
	.entering-inquire #masthead .menu-desktop-left-container {
		transform: translateX(256px);
		transition: transform 1s 0.35s ease-in-out;
	}
	.inquire-page #masthead .menu-desktop-right-container,
	.entering-inquire #masthead .menu-desktop-right-container {
		transform: translateX(-256px);
		transition: transform 1s 0.35s ease-in-out;
	}
	.leaving-inquire.transition-out #masthead .menu-desktop-left-container,
	.leaving-inquire.transition-out #masthead .menu-desktop-right-container {
		transform: translateX(0);
		transition: transform 1.35s 0s ease-in-out;
	}
}

#primary-container[data-barba-namespace="inquire-page"] {
	padding-top: 0;
}

#primary-container[data-barba-namespace="inquire-page"] .logo-icon-container {
	margin: 0.5rem auto;
}
#primary-container[data-barba-namespace="inquire-page"] .site-icon {
	margin: 2rem auto;
}
#primary-container[data-barba-namespace="inquire-page"] .logo-container {
	max-width: 14rem;
}
#primary-container[data-barba-namespace="inquire-page"] svg path {
	fill: var(--color-hague-blue);
}

#primary-container[data-barba-namespace="inquire-page"] main::after {
	content: "";
	background: linear-gradient(
		to bottom,
		hsl(100, 100%, 100%) 0%,
		hsla(100, 100%, 100%, 0.987) 8.1%,
		hsla(100, 100%, 100%, 0.951) 15.5%,
		hsla(100, 100%, 100%, 0.896) 22.5%,
		hsla(100, 100%, 100%, 0.825) 29%,
		hsla(100, 100%, 100%, 0.741) 35.3%,
		hsla(100, 100%, 100%, 0.648) 41.2%,
		hsla(100, 100%, 100%, 0.55) 47.1%,
		hsla(100, 100%, 100%, 0.45) 52.9%,
		hsla(100, 100%, 100%, 0.352) 58.8%,
		hsla(100, 100%, 100%, 0.259) 64.7%,
		hsla(100, 100%, 100%, 0.175) 71%,
		hsla(100, 100%, 100%, 0.104) 77.5%,
		hsla(100, 100%, 100%, 0.049) 84.5%,
		hsla(100, 100%, 100%, 0.013) 91.9%,
		hsla(100, 100%, 100%, 0) 100%
	);
	width: 100%;
	height: 12rem;
	opacity: 0.5;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 500;
}

#primary-container[data-barba-namespace="inquire-page"] main p {
	margin: 0;
	color: var(--color-hague-blue);
	font: var(--font-serif);
	text-align: center;
}
#primary-container[data-barba-namespace="inquire-page"] main a {
	color: var(--color-hague-blue);
}
#primary-container[data-barba-namespace="inquire-page"] main .form-link a {
	font-style: italic;
	text-decoration: underline;
}

/* ======================= 
 Inquire Form
 ======================= */
#primary-container[data-barba-namespace="inquire-child"][data-title="form"] {
	background-color: var(--color-hague-blue);
	padding-bottom: 5rem;
}
#primary-container[data-barba-namespace="inquire-child"][data-title="form"] main {
	display: flex;
	justify-content: center;
	align-items: center;
}
#primary-container[data-barba-namespace="inquire-child"][data-title="form"] .image-holder,
#primary-container[data-barba-namespace="inquire-child"][data-title="form"] .image-holder img {
	min-height: unset;
	max-height: unset;
	height: 100%;
	display: none;
}
@media screen and (min-width: 1180px) {
	#primary-container[data-barba-namespace="inquire-child"][data-title="form"] .image-holder,
	#primary-container[data-barba-namespace="inquire-child"][data-title="form"] .image-holder img {
		display: block;
	}
}

#primary-container[data-barba-namespace="inquire-child"][data-title="form"] .content-container {
	position: relative;
}
@media screen and (max-width: 1179px) {
	#primary-container[data-barba-namespace="inquire-child"][data-title="form"] .content-container {
		height: 100vh;
		padding-top: 3rem;
	}
}
#primary-container[data-barba-namespace="inquire-child"][data-title="form"] article.form {
	width: 100%;
	margin: 0 auto;
}
@media screen and (min-width: 1180px) {
	#primary-container[data-barba-namespace="inquire-child"][data-title="form"] article.form {
		display: flex;
		gap: 3rem;
		max-width: 69%;
		max-width: 69rem;
	}
	#primary-container[data-barba-namespace="inquire-child"][data-title="form"] article.form > * {
		flex: 0 0 50%;
	}
}

#primary-container[data-barba-namespace="inquire-child"][data-title="form"] iframe {
	opacity: 0;
}
#primary-container[data-barba-namespace="inquire-child"][data-title="form"].iframe-loaded iframe {
	opacity: 1;
	transition: opacity 1s 0.2s ease-in;
}

#primary-container[data-barba-namespace="inquire-child"][data-title="form"] article.form #form-container {
	width: 100%;
	height: 100%;
}
#primary-container[data-barba-namespace="inquire-child"][data-title="form"] article.form #form-container .wp-block-group__inner-container {
	height: 100%;
}
#primary-container[data-barba-namespace="inquire-child"][data-title="form"] article.form iframe {
	width: 100% !important;
	height: calc(100% - 2.9rem);
}

#primary-container[data-barba-namespace="inquire-child"][data-title="form"] p.complete-all-fields-prompt {
	padding-left: 2.2rem;
	opacity: 0;
}
#primary-container[data-barba-namespace="inquire-child"][data-title="form"].iframe-loaded p.complete-all-fields-prompt {
	opacity: 0.65;
	transition: opacity 1s 0.2s ease-in;
}
/* ======================= 
 404 Page
 ======================= */
#primary-container[data-barba-namespace="page-404"] {
	padding-top: 0;
}
#primary-container[data-barba-namespace="page-404"] main {
	padding-top: var(--site-header-height);
	min-height: calc(100vh - var(--site-header-height) + 0.8rem);
	min-height: calc(100svh - var(--site-header-height) + 0.8rem);
	display: flex;
	justify-content: center;
	align-items: center;
}

#primary-container[data-barba-namespace="page-404"] h2 {
	color: var(--color-oval-rm-blue);
}

#primary-container[data-barba-namespace="page-404"] .dyad-image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: -1;
}
#primary-container[data-barba-namespace="page-404"] .dyad-image::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(
		to bottom,
		hsl(100, 100%, 100%) 0%,
		hsla(100, 100%, 100%, 0.987) 8.1%,
		hsla(100, 100%, 100%, 0.951) 15.5%,
		hsla(100, 100%, 100%, 0.896) 22.5%,
		hsla(100, 100%, 100%, 0.825) 29%,
		hsla(100, 100%, 100%, 0.741) 35.3%,
		hsla(100, 100%, 100%, 0.648) 41.2%,
		hsla(100, 100%, 100%, 0.55) 47.1%,
		hsla(100, 100%, 100%, 0.45) 52.9%,
		hsla(100, 100%, 100%, 0.352) 58.8%,
		hsla(100, 100%, 100%, 0.259) 64.7%,
		hsla(100, 100%, 100%, 0.175) 71%,
		hsla(100, 100%, 100%, 0.104) 77.5%,
		hsla(100, 100%, 100%, 0.049) 84.5%,
		hsla(100, 100%, 100%, 0.013) 91.9%,
		hsla(100, 100%, 100%, 0) 100%
	);
	z-index: 10;
	width: 100%;
	height: 9rem;
	opacity: 0.5;
}
#primary-container[data-barba-namespace="page-404"] .dyad-image .ratio {
	padding-top: 100vh;
}

/* ======================= 
 Image Loading Style 
 ======================= */
.image-holder img[onload],
.image-holder img[onload].image-loading,
.image-holder img.lazyload,
.fade-in {
	opacity: 0;
	transition: opacity 0.35s ease-out;
}

.image-holder img[onload].image-loaded,
.image-holder img.lazyloaded,
.fade-in.in-view {
	opacity: 1;
}
.fade-in {
	transition: opacity 1.3s ease-out;
}
/*!
Theme Name: Dyad Starter Theme
Theme URI: https://dyadcom.com
Author: Dyad Communications
Author URI: https://dyadcom.com
Description: A humble starter theme – made with love by Dyad ♥
Version: 1.0.0
Tested up to: 8.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dyad-custom-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Dyad Starter Theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	position: relative;
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
.site {
	background-color: inherit;
}

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #666;
	font: var(--font-body);
	font-size: 1.1rem;
	line-height: 1.5;
}

p {
	margin-bottom: 1em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

.wp-block-columns,
.wp-block-group {
	max-width: 60rem;
	margin: 0 auto;
}

.wp-block-group .wp-block-columns {
	max-width: 100%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 0;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

figure {
	margin: 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

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

svg {
	display: block;
	height: auto;
	width: 100%;
	overflow: visible;
}

/* Links
--------------------------------------------- */
a {
	color: #000;
	text-decoration: none;
}

a:visited {
	color: #000;
}

a:hover,
a:focus,
a:active {
	color: #000;
	opacity: 0.75;
}

a:focus {
	outline: none;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: none;
	background: transparent;
	color: rgba(0, 0, 0);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	opacity: 0.75;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	opacity: 0.5;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/* Navigation
--------------------------------------------- */
#masthead {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	max-height: unset;
	height: 5rem;
	background: transparent;
	z-index: 1000;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	font-size: 0.95em;
	font-weight: 400;
	transition:
		opacity 0.55s ease,
		background-color 0.55s ease,
		max-height 0s,
		height 0s 0.55s;
}
#masthead.toggled {
	background-color: var(--color-hague-blue);
	height: 100vh;
	height: 100dvh;
	max-height: 100vh;
	max-height: 100dvh;
	transition:
		opacity 0.55s ease,
		background-color 0.55s ease,
		max-height 0s 0.55s,
		height 0s;
}
@media screen and (min-width: 55em) {
	#masthead {
		max-height: var(--site-header-height);
		font-size: 0.85em;
	}
}

#site-navigation {
	--scroll-animation-duration: 0.35s;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column-reverse;
	width: 100%;
	padding-top: 2rem;
	background-color: transparent;
	transition:
		opacity 0.35s ease-in-out,
		background-color var(--scroll-animation-duration) ease-in-out;
}
@media screen and (min-width: 55em) {
	#site-navigation {
		padding-top: 0;
		flex-flow: row;
	}
}

@media screen and (min-width: 55em) {
	body.scrolled:not(.transition-out) #masthead:hover #site-navigation {
		background-color: var(--site-background-color);
		transition:
			opacity 0.35s ease-in-out,
			background-color var(--scroll-animation-duration) ease-in-out;
	}
	body.scrolled:not(.transition-out) #masthead:not(:hover) #site-navigation {
		opacity: 0;
		transition:
			opacity 0.35s ease-in-out,
			background-color var(--scroll-animation-duration) ease-in-out;
	}
}

.menu-desktop-left-container,
.menu-desktop-right-container {
	display: none;
}
@media screen and (min-width: 55em) {
	.menu-desktop-left-container,
	.menu-desktop-right-container {
		display: flex;
	}
}

.menu-mobile-container {
	position: absolute;
	top: 50%;
	left: auto;
	transform: translateY(-50%);
	opacity: 0;
	max-height: 0;
	pointer-events: none;
	transition:
		opacity 0.55s ease,
		max-height 0s 0.55s;
}
.toggled .menu-mobile-container {
	opacity: 1;
	max-height: 100vh;
	pointer-events: all;
	transition:
		opacity 0.55s ease,
		max-height 0s 0s;
}
#masthead .menu-mobile-container li a {
	color: #fff;
}
@media screen and (min-width: 55em) {
	.menu-mobile-container {
		display: none;
	}
}

#masthead .site-branding {
	margin: 0 auto;
	transition: opacity 0.55s ease-in;
	pointer-events: none;
}
@media screen and (min-width: 55em) {
	#masthead .site-branding {
		margin: 0 4rem;
		pointer-events: auto;
	}
}
#masthead .site-branding:hover {
	opacity: 0.5;
	transition: opacity 0.35s ease-out;
}

@media screen and (max-width: 54.99em) {
	.scrolled:not(.transition-out) #masthead:not(.toggled) .site-branding,
	.inquire-page #masthead:not(.toggled) .site-branding {
		opacity: 0;
		transform: translateY(-3rem);
		transition:
			opacity 0.35s ease-out,
			transform 0.85s ease-in;
	}
}

#masthead .site-branding path {
	fill: var(--color-hague-blue);
	transition: fill 0.55s ease-in;
}

#masthead.toggled .site-branding path,
.light-nav:not(.scrolled) #masthead:not(.toggled) .site-branding path {
	fill: #fff;
}

#masthead ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
	text-align: center;
}

@media screen and (min-width: 55em) {
	#masthead ul {
		display: flex;
		justify-content: center;
		align-items: center;
		height: var(--site-header-height);
	}
}

#masthead li {
	position: relative;
	margin-bottom: 1rem;
}

@media screen and (min-width: 55em) {
	#masthead li {
		margin-bottom: 0;
	}
	#masthead li:not(:first-child) {
		margin-left: 1.25rem;
	}
	#masthead li.page_item_has_children ul {
		display: none;
	}
}

#masthead a {
	display: block;
	text-decoration: none;
	color: #fff;
	color: var(--color-hague-blue);
	transition: opacity 0.55s ease-in;
}
#masthead a:hover,
#masthead .current-menu-item a {
	opacity: 0.5;
	transition: opacity 0.35s ease-in;
}

.light-nav:not(.scrolled) #masthead a {
	color: #fff;
}

/* Small menu. */
.menu-toggle,
#masthead.toggled ul {
	display: block;
}

.menu-toggle {
	width: max-content;
	height: min-content;
	margin: 0 auto;
	padding: 0.6rem 0.85rem;
	z-index: 40;
	transition: transform 0.25s ease-in;
}
.scrolled:not(.transition-out) #masthead:not(.toggled) .menu-toggle,
.inquire-page:not(.transition-out) #masthead:not(.toggled) .menu-toggle {
	transform: translateY(-2.75rem);
	transition: transform 0.65s ease-in-out;
}

.menu-toggle span {
	display: block;
	width: 2rem;
	height: 1px;
	background-color: var(--color-hague-blue);
	margin: 0.4rem auto;
	transition: background-color 0.55s ease;
}

.light-nav .menu-toggle span {
	background-color: #000;
	background-color: #fff;
}
.toggled .menu-toggle span {
	background-color: #fff;
	transition: background-color 0.55s ease;
}

@media screen and (min-width: 55em) {
	.menu-toggle {
		display: none;
	}
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}