@font-face {
	font-family: 'agbookrounded';
	font-style: normal;
	font-weight: normal;
	src: url('../_incf/AGBookRounded-Regular.woff2');
}
@font-face {
	font-family: 'agbookpro';
	font-style: normal;
	font-weight: normal;
	src: url('../_incf/AGBookProReg.woff2');
}
:root {
	--black: #000;
	--gray: #5a5a5a;
	--fontsize1: 0.85vw;
	--shadow: 1em 1em 1em #666;
	--shadow: none;
    --max-object-width: 44vw;
}
* { box-sizing: border-box; }
a {
	text-decoration: none;
	color: inherit;
}
body {
	border: 0; margin: 0; padding: 0;
	font-family: 'agbookrounded', 'agbookpro';
	font-size: var(--fontsize1);
	color: var(--black);
/*	background-color: #ececec; */
		background-image: url('/_inc/siteimages/Achtergrond_1366x768-80.webp');
	background-repeat: repeat;

/*	
background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.03) 0%, transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,0.02) 0%, transparent 70%);
*/
}
/*
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("https://www.transparenttextures.com/patterns/concrete-wall-2.png");
  background-image: url("https://www.transparenttextures.com/patterns/grunge-wall.png");
  opacity: 0.9;
}
*/
#rezi {
	display: block;
	position: absolute;
	left: 5.5vw;
	top: 1.6vw;
	width: 10vw;
	z-index: 100;
}
#hamburger {
	position: fixed;
	left: 1.1vw;
	top: 1.6vw;
	font-size: 2em;
	margin-top: -0.3em;
	cursor: pointer;
	width: 1.6vw;
}
#closemenu {
	position: fixed;
	left: 1.1vw;
	top: 1.6vw;
	font-size: 2em;
	cursor: pointer;
	display: none;
	width: 1.2vw;
	margin-top: -0.2em;
}
div.pagecontent {
	position: absolute;
	left: 28vw;
	margin-top: 1.6vw;
}
div.pagecontent p:first-of-type {
	margin-top: 0;
}
div.publication {
	width: 44vw;
	columns: 2;
}
div.longline {
	display: none;
}
div.work {
	width: 44vw;
	position: relative;
	display: flex;
	justify-content: center;
	height: calc(100dvh - 3.2vw);
	align-items: center;
	margin-top: 0;
}
div.work.home a {
	width: inherit;
	height: calc(100vh - 1.6vw);
}
div.work.home a {
	display: none;
}
div.work.home a:first-of-type {
	display: block;
}
/*
div.work.first {
	width: 70vw;
}
*/
div.work img {
/*	max-width: 44vw;
	max-height: calc(100dvh - 3.2vw);
	box-shadow: var(--shadow);
*/
/*	width: calc(var(--scale) * var(--max-object-width)); */
	height: calc(var(--scale) * var(--max-object-height));
	
    /* Maintain aspect ratio */
    width: auto;
	max-width: 44vw;

    /* IMPORTANT: viewport height cap */
    max-height: calc(100dvh - 3.2vw);

    display: block;	
}
div.work.testvertical img {
	max-height: calc(100dvh - 3.2vw);
}

/*
div.work.first img {
	max-width: 70vw;
	max-height: calc(100dvh - 3.2vw);
}
*/
div.work div.left {
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	height: calc(100vh - 1.6vw);
	background-color: transparent;
	cursor: pointer;
}
div.work div.right {
	position: absolute;
	left: 50%;
	top: 0;
	width: 50%;
	height: calc(100vh - 1.6vw);
	background-color: transparent;
	cursor: pointer;
}
div.workinfo {
	height: 3em;
	position: relative;
}
#toggledesc {
	position: absolute;
	left: 0;
	height: 3em;
	width: 1.8vw;
}
#toggledesc img {
	width: 1.8vw;
	height: 0.9em;
}
div.pagenav {
	position: absolute; left: 77vw;
	width: 20vw;
	margin-top: 1.6vw;
}
/*
body.firstimage div.pagenav {
	visibility: hidden;
}
*/
div.pagenav a {
	color: inherit;
}
#workdesc {
	display: none;
	position: absolute;
	left: 2.5vw;
}
#nextwork.nonactive {
	color: var(--gray);
	visibility: hidden;
}
#prevwork.nonactive {
	color: var(--gray);
	visibility: hidden;
}
div.pagenav div.arrows {
	margin-top: 1em;
}
div.pagenav div.arrows a {
	text-decoration: none;
	margin-right: 2vw;
}
#mainnav {
	display: none;
	position: absolute;
	left: 5.5vw;
	top: 1.6vw;
	width: 15vw;
	width: 10vw;
	z-index: 101;
	background-color: #ececec;
}
#mainnav a,
#rezi a {
	display: block;
	text-decoration: none;
	color: inherit;
	text-indent: -1vw;
	margin-left: 1vw;
}
#mainnav a:hover {
	color: var(--gray);
}
#mainnav a.active {
	color: var(--gray);
}
#worknav {
	text-transform: lowercase;
	margin-left: 1em;
}
div.mainnavitems {
	margin-top: 0;
	text-transform: uppercase;
}
form {
	margin-top: 4em;
}
form div.fld {
	margin-bottom: 0.5em;
}
form input[type="text"] {
	border: 0;
	border-bottom: 2px solid black;
	border-radius: 0;
	background-color: white;
	width: 15vw;
	font-family: 'agbookrounded', 'agbookpro';
	font-size: var(--fontsize1);
	margin-top: 1em;
}
form input[type="email"] {
	border: 0;
	border-bottom: 2px solid black;
	border-radius: 0;
	background-color: white;
	width: 15vw;
	font-family: 'agbookrounded', 'agbookpro';
	font-size: var(--fontsize1);
	margin-top: 1em;
	margin-bottom: -0.5em;
}
textarea {
	border: 0;
/*	border-top: 2px solid black;*/
	border-bottom: 2px solid black;
	border-radius: 0;
	background-color: white;
	width: 15vw;
	height: 10em;
	font-family: 'agbookrounded', 'agbookpro';
	font-size: var(--fontsize1);
	margin-top: 1em;
	margin-bottom: -0.5em;
}	
form button {
	border: 0;
	font-family: 'agbookrounded', 'agbookpro';
	font-size: var(--fontsize1);
	cursor: pointer;
	margin-top: 1em;
	color: black;
}
@media only screen and (max-width: 768px) {
	:root {
		--fontsize1: 3.4vw;
		--max-object-width: 90vw;
	}
	* {
		-webkit-tap-highlight-color: transparent;
	}
	body {
		font-size: 3.4vw;
	}
	body.menu-open {
		overflow: hidden;
	}
	#rezi {
		width: 80vw;
	}
	#rezi a {
		padding-left: 10.5vw;
		padding-top: calc(3vw);
		font-size: 1.5em;
	}
	#hamburger {
		position: fixed;
		left: 5vw;
		top: 5vw;
		font-size: 2em;
		margin-top: -0.3em;
		cursor: pointer;
		width: 6.4vw;
		width: 7.2vw;
		z-index: 102;
	}
	#closemenu {
		position: fixed;
		left: 5vw;
		top: 5vw;
		font-size: 2em;
		cursor: pointer;
		display: none;
		width: 4.8vw;
		margin-top: -0.1em;
		z-index: 101;
	}
	div.pagecontent {
		position: absolute;
		left: 5vw;
		margin-top: 5em;
	margin-top: 10em;
		padding-bottom: 4em;
	}
	#mainnav {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		padding-left: 16vw;
		padding-top: calc(5vw - 0.1em);
		background-color: white;
		width: 100vw;
		height: 100dvh;
		
		z-index: 100;
		margin-top: -0.5em;
		font-size: 1.5em;
		margin-top: 0;
	}
	#mainnav a {
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		padding-top: 0.1em;
		padding-bottom: 0.1em;
		padding-right: 2em;
	}
	div.publication {
		width: 88vw;
		columns: 1;
	}
	div.longline {
		display: block;
		margin-left: 0;
		width: 50vw;
		margin-bottom: 2em;
	}
	div.longline img {
		background-color: black;
	}
	div.work {
		width: 88vw;
		top: 3em;
		align-items: flex-start;
		height: calc(100dvh - 14em);
	}
	div.work div.left,
	div.work div.right {
		height: calc(100dvh - 16em);
	}
/*	
	div.work.first {
		width: 88vw;
		top: 6em;
	}
*/
	div.work img {
		max-height: unset;
		max-height: calc(100dvh - 14em);
		max-width: 90vw;
	}
/*
	div.work.first img {
		max-height: unset;
		max-width: 90vw;
	}
*/
	#toggledesc {
		width: 7.2vw;
	}
	#workdesc {
		left: 8.2vw;
	}
	div.pagenav {
		left: 5vw;
		top: 5em;
		width: 88vw;
	}
/*
	body.firstimage div.pagenav {
		visibility: visible;
	}
*/
	#toggledesc img {
		width: 7.2vw;
		height: 1em;
		margin-right: 2vw;
		padding-top: 0;
	}
	div.pagenav div.arrows a {
		margin-right: 8vw;
	}
	form input[type="text"],
	form input[type="email"],
	textarea {
		width: 44vw;
	}
}

@media only screen and (min-width: 2561px) {
	:root {
		--fontsize1: 21.75px;
	}
	#hamburger {
		left: calc(21px + ((100vw - 2560px) / 2));
		top: 41px;
		margin-top: -13px;
		width: 41px;
	}
	#rezi {
		left: calc(5.5vw + ((100vw - 2560px) / 2));
		top: 45px;
	}
	#closemenu {
		left: calc(21px + ((100vw - 2560px) / 2));
		top: 41px;
		width: 31px;
		margin-top: -0.2em;
	}
	#mainnav {
		top: 41px;
		width: 384px;
	}
	div.pagecontent {
		left: calc(717px + ((100vw - 2560px) / 2));
		margin-top: 41px;
	}
	div.work {
		width: 1126px;
	}
	div.work img {
		max-width: 1126px;
		max-height: 1838px;
	}
	div.work div.left {
		height: 1838px;
	}
	div.work div.right {
		height: 1838px;
	}
	div.pagenav {
		left: calc(1971px + ((100vw - 2560px) / 2));
		width: 512px;
		margin-top: 41px;
	}
	#toggledesc img {
		width: 46px;
	}
	div.pagenav div.arrows a {
		margin-right: 50px;
	}
	div.publication {
		width: 1126px;
	}
	form input[type="text"] {
		width: 384px;
	}
	form input[type="email"] {
		width: 384px;
	}
	form textarea {
		width: 384px;
	}
}