@font-face {font-family:'Plex';
    src:url('/_code/fonts/plex-italic.woff2') format('woff2');
    font-weight:500;    font-style:normal;	font-display:auto;
}

@font-face {font-family:'Plex';
    src:url('/_code/fonts/plex-lightitalic.woff2') format('woff2');
    font-weight:100;    font-style:normal;	font-display:auto;
}

@font-face {font-family:'Plex';
    src:url('/_code/fonts/plex-bolditalic.woff2') format('woff2');
    font-weight:700;    font-style:normal;	font-display:auto;
}



::selection {background:#666; color:white}
#mobile {display:block}

html, body {overflow-x:clip; max-width:100vw}
html {scroll-behavior: smooth}
body {
	font-family:'Plex', sans-serif;
	font-size:18px;
	color:#000;
	hyphens: auto;
}
body, p {margin:0}/*reset*/

.pagehome, .pagehome #MenuLayer {background:#f3eb78}
.pageautonoom, .pageautonoom #MenuLayer {background:#abdcb8}
.pageillustraties, .pageillustraties #MenuLayer {background:#cfbbff}
.pageover, .pageover #MenuLayer {background:#ffbda2}
.pagewerken, .pagewerken #MenuLayer {background:#c4fcff}
.pagecontact, .pagecontact #MenuLayer {background:#f3eb78}

strong {font-weight:700}

a {
	text-decoration:none;
    cursor:pointer;
	color:#000;
}
.text a {font-weight: 700}
a:focus-visible, a:focus:not(:focus-visible) {outline:none}

.nh, p.text.nh, .endorse p.text, a {hyphens: manual}



/* ____________ MENU ____________ */

#menu {
	position:fixed;
	top:0;
	right:0;
	z-index:9998;
}

.hamburger {
    position:absolute;
    width:7vw;
    height:14vw;
    min-height:46px;
    min-width:46px;
    max-height:85px;
    max-width:45px;
    right:0;
    top:0;
    margin:2vh 5vw;
	background-position:right;
    background-size:contain;
    background-repeat:no-repeat;
    cursor:pointer;
}
.menuopen {
	background-image:url(/_images/menuopen.png), none;

}
.menuclose {
	background-image:url(/_images/menuclose.png), none; top:18px; right:3px;
}


a .logoname {
	font-size: 1.4em;
	font-weight: 100;
    position: relative;
    left: 20px;
    top: -50px;
	white-space: nowrap;
    line-height: 7em;
}
#MenuLayer {
	position:fixed;
    width:100%;
    height:100%;
	opacity:0;
	visibility: hidden;
    top:0;
	left:0;
    overflow:auto;
    padding:7vh 0 0 0;
	box-sizing:border-box;
	text-align:right;
	z-index:10000;
    -webkit-transition:.3s ease-in-out;
    transition:.3s cubic-bezier(.5, 0, .5, 1);
}
#MenuLayer a {
	position:relative;
	display:inline-block;
    font-size:3em;
	font-weight:100;
    right:9vw;
	top:50px;
    height:8vh;
	min-height: 80px;
}
.text a:hover, .footernav a:hover, #MenuLayer a:hover, a .logoname strong:hover {
	text-decoration: underline;
}
#MenuLayer .menuheader a {
    font-size:22px;
    font-weight:300;
}


	
/* ____________ LOGO ____________ */

#logobig {
    position:relative;
	display:inline-block;
    margin:3vh 0 5vh 5vw;
	min-height: 120px;
    z-index:9998;
}
#logobig img {
    width:100%;
    max-width:153px;
}



/* ____________ TEXT ____________ */

h1 {
	font-weight:100;
	font-size:3em;
	line-height:.95em;
	max-width:500px;
	margin:-20px 0 30px;
}

h2 {
	font-weight:300;
	font-size:2em;
	line-height:1.1em;
	margin:120px 0 2vh;
}
h2 span {margin-left:-0.16em}

h3 {
    font-size:1.2em;
	margin:0;
    padding:1.3em 3px .3em 3px;
}
h4 {
    font-size:1.1em;
	font-weight:700;
	margin:0;
    padding:1.3em 3px .3em 3px;
}

.small {font-size: .9em}
.r {text-align:right}
sup {vertical-align:text-top}




/* ____________ LAYOUT ____________ */



.portfolio {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 5vw;
  justify-content: center;
  line-height: 10vh;
}
.portfolioitem {
    position: relative;
    left: 50%;
    top: -100px;
    transform: translate(-50%, 0);
    width: 89vw;
    max-width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portfolioitem img {
    max-width: 100%;
    max-height: 67vh;
    height: auto;
    margin-bottom: 2vh;
    object-fit: contain;
}


@media (min-width: 1100px) {
.pageautonoom .portfolio {grid-template-columns: repeat(4, auto);}
}

.portfolio img {
  width: 100%;
  height: auto;
  position: relative;
}

@media (max-width: 1100px) {
  .portfolio {
	grid-template-columns: repeat(4, auto);
	margin: 4vh auto 7vh;
	max-width: 89vw;
	padding: 0;
  }
}
@media (max-width: 900px) {
  .portfolio {
	grid-template-columns: repeat(3, auto);
  }
  .portfolioitem {top: 0}
  h1 {padding: 80px 0 0 0}
}
@media (max-width: 650px) {
  .portfolio {
    grid-template-columns: repeat(2, auto);
	line-height: normal;
  }
}

.text {
	position: relative;
	width: 89vw;
	max-width: 600px;
	margin: -1vh auto 5vh;
}
.text p {
	margin-bottom: .8em;
	line-height: 1.6em;
}
.anja {
	position: absolute;
	left: -280px;
	max-height: 300px;
}

@media (max-width: 1180px) {
  .anja {
	position: static;
	max-width: 89vw;
	margin: 0 auto 20px;
  }
}

.pic {
	max-width: 580px;
    width: 89%;
    margin-top: 3vh;
}



.caption {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
	width: 100%;
}

.caption h1 {
    margin: 0;
	padding: 0 5ch 0 0;
    font-weight: 700;
    font-size: 1.05em;
	line-height: 24px;
}

.rc {
    grid-column: 2;
    text-align: right;
	line-height: 24px;
    max-width: 50ch;
    justify-self: end;
	hyphens: manual;
}

.pagination {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 20px auto;
}
.pagination a {
	font-size: .9em;
	border-bottom: 2px solid #333;
	padding-bottom: 3px
}
.pagination a.hidden {visibility: hidden;}

.tel span {letter-spacing:.2em; display:inline-block}
.credit {color: #8b8751; font-size:.7em; padding-top: 70px}
.credit a {color: #8b8751; font-weight: 300;}

.footernav {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 1em;
  max-width: 950px;
  margin: 15vh auto 12vh 9vw;
  font-size: 1.3em;
  font-weight: 100;
}
.placeholder {visibility: hidden;}







/* ____________ DEVICES ____________ */






@media (max-width:850px),
	   (max-width:1000px) and (max-height:700px),
	   (max-height:340px) {

.footernav {font-size: 1em;}

body {padding:12px}

#logobig img {
    width:19vw;
    min-width:100px;
}
a .logoname {
	font-size: 1em;
    position: absolute;
    left: 0;
    top: 8vw;
}

p {font-size: .9em}
.caption {font-size: .9em}


h3 {font-size:1.14em}
h4 {font-size:1em}



}

@media (max-width:550px) {

h1 {font-size:44px}
.caption {display: block}
.caption h1 {margin-bottom: .5em}

h2 {font-size:1.5em}

.rc {text-align: left;margin: 3vh 0}

a .logoname {
	top: 80px;
    white-space: normal;
	line-height: normal;
}
.footernav {grid-template-columns: repeat(2, auto); margin-left: 5vw}

}

@media (max-height:570px) {
#MenuLayer a {font-size:6.4vh; min-height:2em;}
}

@media (max-width:550px) {
#MenuLayer a {font-size:9vw; min-height:1.6em;}
}


@media (max-height:570px) and (max-width:550px) {

#MenuLayer a {
    font-size:1.4em; min-height:2em;
}
}

@media (max-width:400px) {h1 {font-size:11vw}}