/* —————————————————————————————————————————————————— */
/* BASE */

:root {
	--bgBlack: rgba(0,0,0,1);
	--bgWhite: rgba(255,255,255,1);
	--bgTrans: transparent;
	--fgBlack: rgba(0,0,0,1);
	--fgWhite: rgba(255,255,255,1);
	--fgDisabled: rgba(196, 196, 196, 1);
	--fillDisabled: rgba(196, 196, 196, 1);
	--fillBlack: rgba(0,0,0,1);
	--fillWhite: rgba(255,255,255,1);
	--strokeBlack: rgba(0,0,0,1);
	--strokeWhite: rgba(255,255,255,1);
	--fillTrans: transparent;
	--pad: 2rem;
	--p: 2rem;
	--pLarge: 2.2rem;
	--pLargest: 3.2rem;
	--lHeight: 1.2;
	--headerArtists: 9.6rem;
	--headerlHeight: 1.1;
	--figCaption: 1.5rem;
	--column: 4;

	--bp-w-extra-small: 380px;
	--bp-w-small: 767px;
	--bp-w-medium: 1024px;
	--bp-w-large: 1204px;

	--bp-h-extra-extra-small: 380px;
	--bp-h-extra-small: 480px;
	--bp-h-small: 670px;
}

@media only screen and (max-width: 1024px) {
	:root {
		--type-preset--marquee--font-size: 2.4rem;
	}
}

@media only screen and (max-width: 768px) {
	:root {
		--p: 1.375rem;
		--lHeight: 1.275;
		--column: 2;
		--pLarge: 1.875rem;
		--pLargest: 2.2rem;
		--lHeight: 1.2;
		--headerArtists: 3.5rem;
		--headerlHeight: 1.1;
		--figCaption: 1.5rem;
	}
}

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
	padding: 0;
}

html {
	font-size: 10px;
	line-height: 10px;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	height: 100%;
}

body {
	font-family: Arial, sans-serif;
	font-weight: normal;
	line-height: var(--lHeight);
	height: 100%;
	-webkit-font-smoothing: antialiased;
}

@media only screen and (max-width: 768px) {
	html {
		  height: -webkit-fill-available;
	}

	body {
		min-height: -webkit-fill-available;
		min-height: 100vh;
		/* mobile viewport bug fix */
		min-height: -webkit-fill-available;
	}
}

.off-screen {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-size: var(--p);
	font-weight: normal;
}

p {
	font-size: var(--p);
	margin-bottom: 2rem;
	line-height: var(--lHeight);
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: black;
	font-size: var(--p);
	text-decoration: underline;
}

a:hover {
	text-decoration: underline;
}

a.item-img:hover {
	opacity: 1;
}

ul li {
	list-style: none;
}

input, textarea, button, select, a {
	outline: none;
}

/* —————————————————————————————————————————————————— */
/* GRID */

.col-100 {
	display: flex;
	width: 100%;
}

.col-50 {
	display: flex;
	width: 50%;
}


@media only screen and (max-width: 1024px) {
	.col-50 {
		flex-direction: column;
	}
}

.col-33 {
	display: flex;
	width: 33%;
}

.col-wrapper {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	justify-content: space-between;
	width: 100%;
}

.cover-image {
  width: 100%;
  min-height: 45vh;
  background-image: url('wh-lake.jpeg');
  background-size: cover;
  border: 20px solid #90EE90;
}



/* —————————————————————————————————————————————————— */
/* Holding */
.holding .col-wrapper {
	flex-direction: row;
}

.holding .col-50 {
	flex-direction: column;
	position: relative;
	height: 100%;
	min-height: 100vh;
}

h2 {
	font-size: 5rem;
	position: absolute;
	mix-blend-mode: overlay;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.description-wrapper{
  position: relative;
}
.description {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #90EE90;
}

.description a {
	position: relative;
	color: var(--fgBlack);
}

.description a:hover span {
	opacity: 1;
}


@media only screen and (max-width: 767px) {
	.holding .col-wrapper {
		flex-direction: column;
	}
	.holding .col-50 {
		min-height: 45vh;
		width: 100%;
	}
	.holding .col-50.text-col {
		order: 2;
		z-index: 1;
	}
	.holding .col-50.img-col {
		order: 1;
		z-index: 0;
	}
	.holding-img img {
		max-width: 45%;
	}
	.holding-img img:hover {
		max-width: 45%;
	}
	.holding h2, .holding p {
		max-width: 80%;
	}

	.description {
		top: 2%;
		left: 15%;
	}
	.description a span {
		right: -6rem;
	}
	.contact {
		top: 62%;
		left: 25%;
	}
}
@media only screen and (max-width: 380px) {
	.description {
		top: 0;
	}
}