@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

body {
	padding-top: 5vw;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 24px;
	font-weight: 300;
}

body.homepage {
	padding: 0;
}

h1 {
	font-size: 200%;
	margin-bottom: .4em;
}

h2 {
	font-size: 150%;
	margin-bottom: .666em;
}

img {
	width: 100%;
	max-width: 2000px;
}

main,
footer {
	margin: 0 auto;
	padding: 0 20px;
}

footer {
	margin-top: 8em;
	margin-bottom: 2em;
	font-size: 50%;
}

p {
	margin-bottom: .75em;
}

header p {
	font-size: 120%;
}

.viewportwidth {
	display: block;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	/* margin-right: -50vw; */
}

.spaceabove {
	margin-top: 24px;
}

.spacebelow {
	margin-bottom: 48px;
}

.gridspacebelow {
	margin-bottom: 10px;
}

.portfolioimageX {
	display: block;
	margin: 5px 0;
}

section.keyideas {
	border-left: 2px solid black;
	margin-left: 3em;
	padding-left: 1em;
	font-size: initial;
}

section.keyideas h2 {
	margin-bottom: .5em;
	font-weight: 400;
}

.sixteennine {
	height: 56.25vw;
}

#homepagecontent {
	padding: 10vw;
	min-height: calc(100vh - 10vw);
	margin: 0 auto;
	font-size: 125%;
}

#homepagecontent h1 {
	font-size: 166.67%;
}

.bigmessage {
	padding: 0 10vw 5vw;
	font-size: 125%;
}

a {
	text-decoration: none;
	border-bottom: solid .15em black;
	background: transparent;
	color: initial;
	padding: 0;
}

a:hover {
	background-color: black;
	color: white;
}

#primarynav2 a,
a.special {
	padding: 0 .1em;
	color: white;
	font-weight: inherit;
	text-decoration: none;
	background: black;
	background: linear-gradient(
		0deg,
		white 0%,
		white 20%,
		black 20%,
		black 100%
	);
	background-size: 125% 125%;
	background-position: 0 0;
	transition: background-position .2s;
	border-bottom-width: 0;
}

#primarynav2 a:hover,
a.special:hover {
	background-position: 0 500%;
}

#primarynav2 {
	position: fixed;
	bottom: 30px;
	left: 30px;
	z-index: 900;
	opacity: 1;
	transition: opacity .5s;
}

body.homepage #primarynav2 {
	display: none;
}

#primarynav2.initialstate {
	opacity: 0;
	pointer-events: none;
}

#primarynav2[data-scroll-direction="up"] {
	opacity: 1;
	pointer-events: auto;
}

#primarynav2 ul {
	list-style: none;
}

.portfolio-li {
	margin-top: .2em;
}

#primarynav2:hover .portfolio-li {
	/*height: 1.3em;*/
}

.gotoportfolio {
	white-space: nowrap;
}

.contactblock .label {
	display: none;
}


.portfoliogrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	font-size:0;
}

.portfoliogrid .portfolioitem {
	display: block;
	position: relative;
	background: #eee;
	width: 100%;
	height: 66.67vw;
}
.portfoliogrid a.portfolioitem:hover {
    border-bottom-width: 0;
}

.portfoliogrid .portfolioitem img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.portfolioitem .descriptioncontainer {
	font-size: initial;
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgb(0,0,0);
	background: linear-gradient(0deg,
		hsl(0, 0%, 100%, .9) 0%,
		hsla(0, 0%, 100%, 0.738) 19%,
		hsla(0, 0%, 100%, 0.541) 34%,
		hsla(0, 0%, 100%, 0.382) 47%,
		hsla(0, 0%, 100%, 0.278) 56.5%,
		hsla(0, 0%, 100%, 0.194) 65%,
		hsla(0, 0%, 100%, 0.126) 73%,
		hsla(0, 0%, 100%, 0.075) 80.2%,
		hsla(0, 0%, 100%, 0.042) 86.1%,
		hsla(0, 0%, 100%, 0.021) 91%,
		hsla(0, 0%, 100%, 0.008) 95.2%,
		hsla(0, 0%, 100%, 0.002) 98.2%,
		hsla(0, 0%, 100%, 0) 100%
	);
	width: 100%;
	height: 50%;
	display: none;
}

.portfolioitem:hover .descriptioncontainer {
	display: block;
}

.portfolioitem .descriptioncontainer h2 {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
	margin: 1em;
	color: black;
	border-bottom: solid .25em black;
	font-size: 120%;
}

iframe {
	height: 100%;
	width: 100%;
}





@media all and (min-width: 600px) {


	h1 {
		font-size: 250%;
		margin-bottom: .4em;
	}

	header p {
		font-size: 150%;
	}

	#homepagecontent,
	.bigmessage {
		font-size: 160%;
	}

	.portfoliogrid {
		margin: 0 10px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		font-size:0;
	}

	.portfoliogrid .portfolioitem {
		height: 33.33vw;
	}
}





@media all and (min-width: 720px) {

	main,
	footer {
		max-width: 720px;
	}

	section.keyideas {
		margin-left: 6em;
		padding-left: 2em;
	}

	section.keyideas p {
		margin-bottom: 1.5em;
	}

	.spaceabove {
		margin-top: 48px;
	}

	.spacebelow {
		margin-bottom: 96px;
	}

	.twocolumn,
	.threecolumn {
		display: flex;
		justify-content: space-between;
	}

	.twocolumn > * {
		width: calc(50% - 5px);
	}

	.threecolumn > * {
		width: 33.25%;
	}

	.slidercontainer {
		position: relative;
	}

	.slidercontainer::before {
		content: " ";
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		background: rgb(255,255,255);
		background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
		width: 33vw;
		height: 100%;
		pointer-events: none;
	}

	.slider {
		white-space: nowrap;
		overflow-x: scroll;
		font-size: 0;
	}

	.slider > * {
		width: 33.25%;
		vertical-align: top;
		margin-right: .1262vw;
	}

	.sliderstack {
		display: inline-block;
	}

	.sliderstack img {
		display: block;
		margin-bottom: .1262vw;
	}




	.two-column-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		font-size:0;
	}

	.two-column-grid > .spantworows-left {
		grid-row: 1/3;
		grid-column: 1/2;
	}

	.two-column-grid > .spantworows-right {
		grid-row: 1/3;
		grid-column: 2/3;
	}

	.two-column-grid > figure > img,
	.forty-sixty-grid > figure > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}


	.forty-sixty-grid {
		display: grid;
		grid-template-columns: .4fr .6fr;
		gap: 10px;
		font-size:0;
	}
}





@media all and (min-width: 1000px) {

	main,
	footer {
		max-width: 800px;
	}



	.portfoliogrid {
		margin: 0 10px;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 10px;
		font-size:0;
	}

	.portfoliogrid .portfolioitem {
		height: 22.22vw;
	}
}





@media all and (min-width: 1300px) {

	#homepagecontent,
	.bigmessage {
		font-size: 3vw;
	}
}