@font-face {
	font-family: 'Optima';
	src: url('/fonts/Optima-Regular.eot');
	src: local('☺'),
     url('/fonts/Optima-Regular.woff') format('woff'), 
     url('/fonts/Optima-Regular.ttf') format('truetype'), 
     url('/fonts/Optima-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
    font-display: swap;
}

*, *::before, *::after {box-sizing: border-box;}
* {padding: 0; margin: 0;}

html {font-size: 15px; height: 100%;}
body {font-size: 1.25rem; line-height: 1.5; font-family: "Optima"; color: white; background: #0c0c0c; letter-spacing: 0.05em; overflow-y: scroll;}
a {color: white;}

h1, h2, h3, strong {font-weight: normal; line-height: 0.9;}
strong {font-style: italic;}



/* HEADER */

.header {position: fixed; height: 6rem; padding: 0 5vw; display: flex; justify-content: space-between; width: 100%; background: #0c0c0c; z-index: 10;}
.header > div {position: absolute; left: 50%; transform: translateX(-50%); height: 6rem; display: flex; flex-direction: column; justify-content: center; z-index: 2;}
.header > div img {display: block; width: 10rem; margin-top: 0.25rem;}
.header > ul {display: flex; height: 6rem; width: 100%; align-items: center; justify-content: space-between; position: relative;}
.header > ul li {list-style: none;}
.header > ul li:nth-child(2) {position: absolute; left: 10.5rem;}
.header > ul li:nth-child(3) {position: absolute; right: 10rem;}
.header > ul li a {text-decoration: none; text-transform: uppercase;}
.header button#togglemenu {
	opacity: 0; 
    pointer-events: none;
	border: 0;
	background: transparent; 
	width: 0; 
	height: 0; 
	padding: 6rem 0 0 3rem; 
	background: url(/img/menu.svg) center 45% / auto 1.5rem no-repeat; 
	position: absolute; 
	right: calc(5vw - 0.75rem); 
	cursor: pointer; 
	z-index: 2;
	overflow: hidden;
}
body.menu_open .header button#togglemenu {background: url(/img/close.svg) center 45% / auto 1.25rem no-repeat;}
@media only screen and (max-width: 950px) {
	.header > div {left: 5vw; transform: none;}
	.header > ul {display: none; position: fixed; top: 6rem; background: #0c0c0c; z-index: 9; height: auto; padding: 0.75rem 5vw 3rem; left: 0;}
	.header > ul li {position: relative!important; left: 0!important; text-align: center;}
	.header > ul li a {line-height: 2.2; display: block;}
	.header button#togglemenu {opacity: 1; pointer-events: all;}
	body.menu_open .header > ul {display: block;}
}
@media only screen and (max-width: 750px) {
	.header > ul li {text-align: left;}
}



/* FULLSCREEN */

.fullscreen {width: 100%; height: 100vh; background: url(/img/square.svg) left top / 100% 100%; position: relative; overflow: hidden;}
.fullscreen video {position: relative; z-index: 1; width: 100%; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.fullscreen h1 {width: 60vw; font-size: 7vw; margin-left: 5vw; position: absolute; top: 53%; z-index: 3;}
@media (max-width: 145vh) {
    .fullscreen video {width: auto; height: 100%;}
}
@media only screen and (max-width: 750px) {
	.fullscreen {height: 50rem;}
	.fullscreen h1 {width: auto; max-width: 30rem; font-size: 3.5rem;}
}




/* HEADING */

.heading {padding: 13rem 5vw 0; text-align: center;}
.heading span {font-size: 2.15rem; text-transform: uppercase; letter-spacing: 0.05rem; margin: 0 0 2.5rem; display: block;}
.heading h1 {font-size: 7rem; text-transform: uppercase; margin: 0 auto 8rem; line-height: 1.15; max-width: 11em;}
.heading img {width: calc(100% + 10vw); display: block; margin: 0 -5vw; object-fit: cover;}
body.noimage.page.single .heading h1 {margin-bottom: 0rem;}
body.posts.single .heading h1 {margin-bottom: 10rem;}
@media only screen and (max-width: 750px) {
    .heading {padding: 13rem 5vw 0!important; text-align: left;}
	.heading h1 {font-size: 5rem; margin-bottom: 6rem;}
	.heading span {font-size: 1.8rem;}
	body.posts.single .heading h1 {margin-bottom: 8rem;}
}
@media only screen and (max-width: 500px) {
	.heading {padding: 13rem 5vw 0!important;}
	.heading h1 {font-size: 3.5rem;}
	.heading span {font-size: 1.6rem;}
}


/* CONTENT */

.content {padding: 15rem 0; letter-spacing: 0;}
.content.half > * {width: 40vw; left: 50vw; position: relative; font-size: 2vw; line-height: 1.1;}
.content.half > h2 {position: absolute; left: 5vw; font-size: 4vw; line-height: 0.9; max-width: 40vw;}
.content.third {position: relative; padding: 0 5vw 15rem;}
.content.third p {margin-bottom: 1.3em;}
.content.third > * {width: 50vw; left: 23vw; position: relative; font-size: 2.15rem; line-height: 1.3;}
.content.third > h2 {position: relative; left: 10vw; font-size: 5.3rem; line-height: 0.9; padding: 15rem 0 1.5rem;}
body.posts .content.third {padding-top: 13rem;}
body.projects .content.third {padding-top: 11rem;}
@media only screen and (max-width: 1300px) {
	.content {padding: 9rem 0;}
	.content.third > * {font-size: 1.6rem;}
	body.posts .content.third,
	body.projects .content.third {padding-top: 9rem;}
}
@media only screen and (max-width: 1200px) {
	.content.third > * {left: 0; padding-left: 13rem; width: auto;}
	.content.third > h2 {left: 0;}
	.content.half > h2 {max-width: 100%; font-size: 4.5rem; position: relative; padding-bottom: 4rem;}
	.content.half > * {
		width: 90vw;
		left: 5vw;
		font-size: 1.6rem;
		line-height: 1.3;
	}
}
@media only screen and (max-width: 750px) {
	.content.third > * {padding-left: 0; width: auto;}
	.content.third > h2 {left: 0; max-width: auto; font-size: 4.5rem; padding-bottom: 4rem; padding-top: 9rem;}
	body.posts .content.third, body.projects .content.third {padding-top: 6rem;}
}
@media only screen and (max-width: 500px) {
    .content.third > h2 {font-size: 3.5rem;}
	.content.half > h2 {font-size: 3.5rem;}
}


/* THIRDS/STATS */
.thirds {display: flex;}
.thirds .item {width: 33.33%;}
.thirds.stats {margin-bottom: 3rem;}
.thirds.stats .item {margin-bottom: 3rem;}
.thirds .item.stat span {display: block; margin-bottom: 0.35rem;}
@media only screen and (max-width: 500px) {
    .thirds {display: block;}
	.thirds.stats {margin-bottom: 4rem;}
}



/* LABEL/VALUE */

.label {font-size: 1.25rem!important; text-transform: uppercase!important; letter-spacing: 0.05em!important; margin-bottom: 1.1rem;}
.value {font-size: 3rem;}
@media only screen and (max-width: 750px) {
	.label {font-size: 1rem!important;}
	.value {font-size: 2.2rem;}
}


/* FILTER */
ul.filter {display: flex; justify-content: center; gap: 0.15rem 2rem; position: relative; bottom: 2rem; margin-bottom: 4rem; flex-wrap: wrap;}
ul.filter li {list-style: none; font-size: 1.25rem;	text-transform: uppercase;}
ul.filter li a {display: inline-block; margin: 0.5rem 0; text-decoration: none; white-space: nowrap;}
ul.filter li.active a {border-bottom: 1px solid white;}
@media only screen and (max-width: 750px) {
	ul.filter {flex-direction: column; justify-content: flex-start; margin-bottom: 2rem;}
}


/* CONTACT PAGE */

.page.contact .heading {padding-top: 18rem;}
.page.contact .heading h1 {margin-bottom: 3rem;}
.page.contact .content {display: flex; padding: 6rem 5vw 15rem; width: 100%; text-align: center; font-size: 2.5rem;}
.page.contact .content > div {width: 50%; line-height: 1.4;}
.page.contact .content h2 {font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 1rem 0;}
.page.contact .content a {display: inline-block; position: relative; text-decoration: none;}
.page.contact .content a::after {width: 100%; background: white; content: ""; height: 1px; position: absolute; left: 0; bottom: 0.25rem;}

@media only screen and (max-width: 1200px) {
	.page.contact .content {font-size: 1.8rem;}
	.page.contact .content h2 {font-size: 1rem;}
}
@media only screen and (max-width: 750px) {
	.page.contact .content {display: block; text-align: left; padding: 6rem 5vw 0rem;}
	.page.contact .content > div {width: auto; padding-bottom: 8rem;}
}


/* OTHER IMAGES GRID */
.imagegrid.otherimages ul {margin: 15rem -10rem 4rem; gap: 1rem; background: none;}
.imagegrid.otherimages ul li {width: calc(33.33% - 2/3 * 1rem);}
.imagegrid.otherimages ul li a::after {content: none;}
@media only screen and (max-width: 1300px) {
	.imagegrid.otherimages ul {margin: 9rem 0 2rem;} 
}
@media only screen and (max-width: 750px) {
	.imagegrid.otherimages ul {gap: 0.5rem;}
	.imagegrid.otherimages ul li {width: calc(33.33% - 2/3 * 0.5rem);}
}

/* IMAGE GRID */

.imagegrid h2 {text-align: center; padding: 8rem 5vw; font-size: 6rem; letter-spacing: 0;}
.imagegrid ul {margin-bottom: 10rem; display: flex; flex-wrap: wrap; background: url(/img/square.svg) left top / 25% auto;}
.imagegrid ul li {width: 25%; position: relative; list-style: none;}
.imagegrid ul li a {padding-bottom: 100%; display: block;}
.imagegrid ul li a img {position: absolute; width: 100%; height: 100%; object-fit: cover;}
.imagegrid ul li a::after {content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-image: linear-gradient(0deg, rgba(13, 13, 17, 0.76) 22%, rgba(13, 13, 17, 0) 60%);}
.imagegrid ul li a > span {position: absolute; bottom: 1.75rem; left: 2.15rem; z-index: 9; line-height: 1.1; width: calc(100% - 4.5rem);}
.imagegrid ul li a > span > span, .imagegrid ul li a > span > span:nth-child(3) {font-size: 1.25rem; display: block; text-transform: uppercase; padding-bottom: 0.6rem;}
.imagegrid ul li a > span > span + span {font-size: 2.15rem; text-transform: none; letter-spacing: 0; padding-bottom: 0.9rem;}
@media only screen and (max-width: 2250px) {
	.imagegrid ul li {width: 33.33%;}
	.imagegrid ul {background-size: 33.33% auto;}
}
@media only screen and (max-width: 1500px) {
	.imagegrid ul li {width: 50%;}
	.imagegrid ul {background-size: 50% auto;}
}
@media only screen and (max-width: 750px) {
	.imagegrid ul li {width: 100%;}
	.imagegrid ul {background-size: 100% auto;}
	.imagegrid ul li a > span {left: 5vw; width: calc(100% - 10vw);}
	.imagegrid h2 {font-size: 5rem;}
}
@media only screen and (max-width: 500px) {
	.imagegrid h2 {font-size: 3.5rem; padding-top: 6rem; padding-bottom: 6rem; text-align: left;}
}


/* FOOTER */

.footer {padding: 3rem 5vw 4.5rem; display: flex; justify-content: space-between; text-transform: uppercase;}
.footer ul {display: flex;}
.footer ul li {padding-right: 3.5rem; list-style: none;}
.footer ul li a {text-decoration: none;}
.footer > div {font-size: 1rem; letter-spacing: 0;}
@media only screen and (max-width: 1000px) {
	.footer {text-align: center; display: block;}
	.footer ul {display: block;}
	.footer ul li {padding-right: 0; line-height: 2.2;} 
	.footer > div {padding-top: 4.5rem;}
}
@media only screen and (max-width: 750px) {
	.footer {font-size: 1rem; text-align: left;}
	.footer > div {padding-top: 3rem;}
}



/* ABOUT US */

ul.people li {list-style: none;}
ul.people li div {font-size: 1.1rem; padding: 0.3rem 0 3rem;}



@media only screen and (max-width: 1900px) {
	html {font-size: 14px;}
}

@media only screen and (max-width: 1500px) {
	html {font-size: 13px;}
}