@font-face {
    font-family:"puffin-display";
    src: url("/fonts/puffin-display-400.woff2") format("woff2");   
    font-display: auto;
    font-style: normal;
    font-weight:400;
}
@font-face {
    font-family:"puffin-display";
    src: url("/fonts/puffin-display-700.woff2") format("woff2");   
    font-display: auto;
    font-style: normal;
    font-weight:700;
}

/* lato-regular - latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url('/fonts/lato-v23-subset-regular.woff2') format('woff2');
}
  
/* lato-900 - latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    font-display: auto;
    src: url('/fonts/lato-v23-subset-900.woff2') format('woff2');
}
  
  

*, ::after, ::before {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: 20px; scroll-behavior: smooth; scroll-padding-top: 7rem; /* height of sticky header */}
body {font-family: 'puffin-display', sans-serif; line-height: 1.6; color: black; background: white; font-weight: 350;} 
img {display: block; max-width: 100%;}
img.inverted {filter: invert(1);}
h1, h2, h3 {font-size: 3.75rem; font-weight: 700; line-height: 1.15; margin-bottom: 2rem;}
h3 {font-size: 2rem;}
.container {max-width: 58rem; width: 100%; margin: 0 auto; padding: 0 2rem;}
#hasscrolledpixel {position: absolute; margin: 1rem; width: 1px; height: 1px; background: transparent; pointer-events: none;}

.content .patchwork p a:first-child:last-child,
button, .button, input[type="submit"] {
    background: black url(/img/iconen/arrow_short.svg) calc(100% - 1.9rem) center / auto 1.35rem no-repeat; 
    color: white; 
    border: 0;
    display: inline-block;
    padding: 1.2rem 4.75rem 1.4rem 1.75rem!important;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.45rem;
    line-height: normal;
    cursor: pointer;
    width: auto!important;
}
input[type="submit"] {padding: 1.1rem 4.75rem 1.3rem 1.75rem!important;}
#loadmoreposts {border: 0.2rem solid white; filter: invert(100%);}

/* HEADER */
.header {position: fixed; left: 0; top: 0; z-index: 4;}
.header a.logo {position: fixed; left: 2rem; top: 2rem; width: 12rem; transition: width 0.15s ease-in-out;}
.header a.logo::after {content: ""; position: absolute; left: 0.5rem; height: 1.5rem; background: white; width: 100%; top: 50%; transform: translateY(-50%); z-index: -1; filter: blur(0.3rem);}
.header a.logo img {height: 4.5rem; width: auto; max-width: none;}
body.regularpage.hasimage .header a.logo, 
body.projects.single .header a.logo, 
body.hasscrolled .header a.logo {width: 4.75rem; overflow: hidden;}
/* TODO: alleen op home */
body.menuopen .header a.logo::after,
body.regularpage .header a.logo::after,
body.searchopen .header a.logo::after,
body.regularpage.hasimage .header a.logo::after, 
body.projects.single .header a.logo::after, 
body.hasscrolled .header a.logo::after {content: none;}
body.searchopen .header a.logo,
body.menuopen .header a.logo {width: 12rem!important;}
.header div {display: flex; gap: 0.75rem; position: fixed; right: 2rem; top: 2.5rem;}
.header button {height: 3.4rem; width: 3.4rem!important; border: 0.8rem solid black; display: block; padding: 0!important;}
.header button.search {background: black url(/img/iconen/icon_search.svg) center center / contain no-repeat;}
.header button.menubutton {background: black url(/img/iconen/icon_menu.svg) center center / contain no-repeat;}
.header ul {
    display: none; 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100vh; 
    background: black; 
    z-index: -1;
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
    font-size: 3rem; 
    font-weight: 700;
    padding: 0 2rem;
}
.header ul li {position: relative; max-width: 30rem; width: 100%;}
.header ul li a {color: white; text-decoration: none; opacity: 0.35; display: block; transition: opacity 0.2s ease-in-out;}
.header ul li.active a {opacity: 1;}
.header ul li a:hover {opacity: 1; background: url(/img/iconen/arrow.svg) right center / auto 1.3rem no-repeat;}
body.menuopen .header ul {display: flex;}
body.searchopen .header img, 
body.menuopen .header img {filter: invert(1);}
body.menuopen .header button {box-shadow: 0px 0px 0px 1px rgba(255,255,255,0);}
body.menuopen .header button.menubutton {background-image: url(/img/iconen/icon_close.svg);}
body.searchopen .header button.search {background-image: url(/img/iconen/icon_close.svg);}
body.menuopen .header button.search, 
body.searchopen .header button.menubutton {display: none;}

@media screen and (min-width: 107rem) {
    .header a.logo {left: 50%; margin-left: -41rem;}
    .header div {right: 50%; margin-right: -41rem;}
}

/* BANNER */

.banner {height: 60vh; position: relative; background: #eee; display: none;}
.banner.active {display: block;}
body.home .banner, body.projects .banner {height: 90vh;}
.banner > div:first-child {width: 100%; height: 100%; position: absolute; background: #eee url() center center / cover no-repeat;}
body.home .banner > div:first-child {background: white url() center center / cover no-repeat;}
.banner .container {position: relative; height: 90vh;}
.banner .container > div img {display: block; margin: 2rem 0 0.25rem;}
.banner .container > div {
    background: #c4337f; 
    color: white; 
    position: absolute; 
    right: 2rem; 
    bottom: 3.5rem;
    width: 17rem;
}
.banner .container > div > a {
    display: block; 
    padding: 2rem 1.65rem;
    text-decoration: none;
    color: white;
}
.banner .container > div .title {
    font-size: 2.2rem; 
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2rem;
}
.banner .container > div p {
    line-height: 1.4;
    font-size: 1.2rem;
    margin: 0;
}


/* CONTENT */

.content {background: white; position: relative; z-index: 3; font-size: 1.2rem; line-height: 2.2; padding: 10rem 0 2rem;}
.content p a:not(.button) {color: black;}
.content p, .content ul, .content ol {margin-bottom: 2em;}
.content .patchwork {display: flex; gap: 4rem;}
.content .patchwork > * {min-width: calc(50% - 2rem);}
.content .patchwork.reversed {flex-direction: row-reverse; }
.content .patchwork.reversed::before {content: ""; position: absolute; right: 0; width: 35rem; height: 43rem; margin-top: -10rem; background: url(/img/illustraties/illustratie_3.jpg) right center / contain no-repeat; z-index: -1;}
.content .patchwork.reversed h2 {padding-right: 0; padding-left: 2rem;}
.content .container > .summary {background: #c4337f; color: white; padding: 3rem; display: flex; gap: 3rem; margin-top: -5rem;}
.content .container > .summary h1 {flex-grow: 1;}
.content .container > .summary .details {min-width: 14rem;}
.content .container > .summary .details > div > div:nth-child(1) {font-weight: 700;}
.content .container > div {margin-bottom: 4rem;}
.content .imagegallery {display: flex; gap: 2rem; align-items: stretch;}
.content .imagegallery + .projectcontent {padding-top: 1rem;}
.content .imagegallery > div {position: relative; flex-grow: 1; height: 25rem;}
.content .imagegallery > div img {object-fit: cover; height: 100%; width: 100%;}
.content .imagegallery.twothird > div:nth-child(1) {width: 60%;}
.content .imagegallery.twothird > div:nth-child(2) {width: 30%;}
.content .imagegallery.half > div {height: 20rem;}
.content .imagegallery.half > div:nth-child(1) {width: 50%;}
.content .imagegallery.half > div:nth-child(2) {width: 50%;}
.content .projectcontent  + .projects {padding-top: 2rem;}
.content .projectcontent h2 {font-size: 1.9rem; margin-bottom: 0.9rem;}
@media screen and (max-width: 65rem) {
    .content .container > .summary {flex-direction: column;}
    .content .patchwork.reversed::before {content: none;}
}
@media screen and (max-width: 42rem) {
    .content .container > .summary h1 {font-size: 11vw;}
}

/*
body.regularpage .banner + .content {padding-top: 5rem; padding-bottom: 5rem;}
body.regularpage .content h1 {font-size: 2.5rem; margin-bottom: 1.2rem;}
*/



/* PROJECTS */

div.projects {margin: 5rem 0 7rem!important;}
div.projects > h1, div.projects > h2 {font-size: 2.8rem; margin: 0 0 3.25rem; text-align: center;}
div.projects ul {display: flex; gap: 2rem; align-items: stretch; margin-bottom: 3.25rem; flex-wrap: wrap;}
div.projects ul li {list-style: none; width: calc(33.33% - 1.34rem); min-width: calc(33.33% - 1.34rem); position: relative;}
div.projects ul li a {display: block; color: white; text-decoration: none; height: 100%;}
div.projects ul li a > img {object-fit: cover; width: 100%; height: 100%; position: absolute; z-index: -1;}
div.projects ul li a > div {min-height: 29rem; opacity: 0; transition: opacity 0.25s ease-in-out; padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; height: 100%;}
div.projects ul li a > div h2 {line-height: 1.1; font-size: 2.2rem; font-weight: 700; margin-bottom: 2rem;}
div.projects ul li a > div p {line-height: 1.8; font-size: 0.9rem; margin: 0;}
div.projects ul li a > div p img {display: block; margin: 2rem 0 0.25rem;}
div.projects ul li:nth-child(6n+1) a > div {background: #c4337f;}
div.projects ul li:nth-child(6n+2) a > div {background: #1875b9;}
div.projects ul li:nth-child(6n+3) a > div {background: #df3b2d;}
div.projects ul li:nth-child(6n+4) a > div {background: #df3b2d;}
div.projects ul li:nth-child(6n+5) a > div {background: #1875b9;}
div.projects ul li:nth-child(6n+6) a > div {background: #c4337f;}
div.projects ul li a:hover > div {opacity: 1;}
div.projects ul.filter {margin:-1.5rem 0 3rem; justify-content: center;}
div.projects ul.filter li {min-width: 0; width: auto;}
div.projects ul.filter li a {color: silver; text-transform: lowercase;}
div.projects ul.filter li.active a {color: black;}


/* HIGHLIGHT */

div.highlight {background: black; padding: 4rem 6rem 4rem 4rem; color: white; font-size: 1.55rem; line-height: 2; position: relative; margin: 6rem 0 8rem!important;}
div.highlight h2 {font-size: 2.5rem; margin-bottom: 1.75rem;}
div.highlight p:last-child {margin: 0;}
div.highlight::before, div.highlight::after {content: ""; position: absolute; right: 3.7rem; top: 0; width: 3.7rem; height: 3.7rem; background: #c4337f;}
div.highlight::after {background: #1875b9; height: 7.4rem; right: 0;}


/* PEOPLE */

ul.people li {list-style: none; display: flex; align-items: center; gap: 9rem; padding: 3rem 0; font-size: 1.05rem;}
ul.people li h2 {font-size: 2.5rem; margin-bottom: 1.2rem;}
ul.people li p:last-child {margin: 0;}
ul.people li:nth-child(odd) {flex-direction: row-reverse;}
ul.people li > div:nth-child(1) {min-width: 20rem;}
ul.people li > div:nth-child(1) img {min-width: 100%;}
@media screen and (max-width: 65rem) {
    ul.people li:nth-child(odd),
    ul.people li {flex-direction: column; gap: 2.5rem; align-items: flex-start;}
}

/* COLUMNS */
.columns {display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); grid-gap: 2.5rem; font-size: 1.05rem; padding: 3rem 0 0;}
.columns h2 {font-size: 1.9rem; margin-bottom: 1rem;}


/* POSTS */

div.posts {margin: 5rem 0 7rem!important;}
div.posts > h1 {font-size: 2.8rem; margin: 0 0 3.25rem; text-align: center;}
div.posts ul.items {margin-bottom: 3.25rem;}
div.posts ul.items li {display: flex; list-style: none; position: relative; align-items: flex-start; margin-bottom: 4.75rem;}
div.posts ul.items li > img {width: 50%; min-width: 50%;}
div.posts ul.items li > div {padding: 0 0 0 3rem; font-size: 1.1rem; display: flex; flex-direction: column;}
div.posts ul.items li > div > div.date {color: silver; line-height: 1; margin-bottom: 1.25rem;}
div.posts ul.items li > div > h2 {line-height: 1.25; font-size: 2rem; font-weight: 700; margin-bottom: 1rem;}
div.posts ul.items li > div > div.summary {margin-bottom: 1.5rem;}
div.posts ul.items li > div p:last-child {margin: 0;}
div.posts ul.items li.hidden {display: none!important;}
div.posts .filter {display: flex; justify-content: space-between; margin-bottom: 4rem;}
div.posts .filter > div {display: flex; gap: 1.25rem;}
div.posts .filter > div ul.tags {margin: 0; gap: 1rem; display: flex;}
div.posts .filter > div ul.tags li {
    display: block; 
    color: #999;
    padding: 0 2.75rem 0 1.1rem;
    cursor: pointer;
    background: #e5e5e5 url(/img/close.svg) calc(100% - 1rem) center / auto 0.8rem no-repeat;
    user-select: none;
}
div.posts .filter select {
    background: transparent; 
    border: 0;
    font-family: 'puffin-display', sans-serif;
    line-height: 2;
    font-size: 1.2rem;
    color: black;
    font-weight: 350;
}
div.posts .filter > div:nth-child(1) select {color: silver;}
@media screen and (max-width: 65rem) {
    div.posts > h1 {margin-top: 4rem;}
    div.posts ul.items li {flex-direction: column;}
    div.posts ul.items li img {width: 100%;}
    div.posts ul.items li > div {padding: 1.75rem 0 3rem 0;}
    div.posts .filter {margin-bottom: 2rem;}
}

body.posts .content > .container > img + .date + h1 {margin: 0 0 1.5rem; font-size: 3rem;}
body.posts .content > .container > h2 {font-size: 2rem; margin: 5rem 0 1rem;}
body.posts .content > .container > .date {
    color: silver;
    line-height: 1;
    font-size: 1.1rem;
    margin: 2.5rem 0 1.25rem;
}
body.posts .posts h2 {font-size: 3rem;}


@media screen and (max-width: 65rem) {
    .content {padding: 7rem 0;}
    .content .patchwork {display: block;}
    .content .patchwork h2 {line-height: 1;}
    .content .patchwork.reversed h2 {padding-left: 0;}
    body:not(.home) div.projects {padding: 4rem 0 0!important; margin: 5rem 0 0!important;}
    div.projects ul:not(.filter) {flex-direction: column;}
    div.projects ul:not(.filter) li {width: 100%;}
    div.projects ul li a > img {position: relative;}
    div.projects ul li a > div {opacity: 1; min-height: 0; padding-top: 2.25rem;}
    div.highlight {padding-left: 9vw; padding-right: 9vw; margin-left: -1rem; margin-right: -1rem; margin-bottom: 0!important;}
}

/* CONTACTFORM */

.contactform {background: #c4337f; color: white; min-height: 30rem; padding: 11rem 0 5rem;}
.content + .contactform {padding-top: 5rem;}
.contactform h2 {font-size: 2.75rem!important; margin-bottom: 4rem!important;}
.contactform .container > div {display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); grid-gap: 3rem;}
.contactform .container > div > div:nth-child(2) {font-size: 1.55rem;}
.contactform .container form {display: flex; flex-direction: column; gap: 1rem;}
.contactform .container form input {padding: 1rem; border: 0;}
.contactform .container form div {display: flex; flex-direction: column; gap: 1rem;}
.contactform .container form div.twoup {display: flex; flex-direction: row;}
.contactform .container form label {position: absolute; color: silver; pointer-events: none; padding: 1rem;}
.contactform .container form input, .contactform .container form label {font-family: 'puffin-display', sans-serif; font-size: 1.5rem; line-height: 1.2; width: 100%;}
.contactform .container form label {width: auto;}
.contactform .container form input + label, .contactform .container form input.empty:focus + label {opacity: 0;}
.contactform .container form input.empty + label {opacity: 1;}

/* PREFOOTER */

.prefooter {height: 20.5rem; position: relative; overflow: hidden;}
.prefooter img {height: 100%; width: auto; max-width: none; position: absolute; mix-blend-mode: multiply;}
.prefooter img:nth-child(1) {left: 0;}
.prefooter img:nth-child(2) {right: 0;}

@media screen and (max-width: 85rem) {
    .prefooter img:nth-child(2) {display: none;}
}
@media screen and (max-width: 45rem) {
    .prefooter img:nth-child(1) {left: 50%; transform: translateX(-50%);}
}

/* FOOTER */

.footer {background: black; color: white; padding: 3.5rem 0 0;}
.footer a {color: white; text-decoration: none;}
.footer > .container {display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); grid-gap: 3rem; line-height: 1.9;}
.footer .container img {height: 4.5rem;}
.footer h3 {text-transform: lowercase; font-weight: 700; font-size: 1.1rem; margin: 0 0 0.5rem;}
.footer ul li {list-style: none;}
.footer ul li a {text-transform: lowercase;}
.footer .afterfooter {padding: 3rem 0 2rem; opacity: 0.35; font-size: 0.9rem;}

/* AMPERSAND */

span.ampersand {font-family: 'Lato', sans-serif;}
h1 span.ampersand,
h2 span.ampersand,
h3 span.ampersand {font-weight: bold;}


/* SEARCH */

#search_overlay {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000;
    z-index: 3;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
}
body.searchopen #search_overlay {
    opacity: 1;
    pointer-events: all;
}
#search_overlay form {display: flex; justify-content: center; flex-direction: column; position: relative; width: 100%; max-width: 70rem; position: relative; padding: 0 2rem;}
#search_overlay form label {display: block; position: absolute; margin-top: -3rem; top: 0; color: white; font-size: 2rem;}
#search_overlay form input {border: 0; background: transparent; color: white; border-bottom: 1px solid white; font-size: 5rem; font-family: 'puffin-display', sans-serif; outline: 0; width: 100%;}
#search_overlay .close {position: absolute; top: 1rem; right: 1rem; width: 0; height: 0; overflow: hidden; padding: 4rem 0 0 4rem; cursor: pointer;}
#search_overlay .close::before,
#search_overlay .close::after {
    content: "";
    height: 0.3rem;
    width: 3rem;
    display: block;
    position: absolute;
    top: calc(50% - 0.15rem);
    left: 0.5rem;
    transform: scale(0.1) rotate(45deg);
    background: white;
    border-radius: 0.2rem;
}
#search_overlay.active .close::before,
#search_overlay.active .close::after {transition: all 0.2s ease-in-out;}
#search_overlay .close::before {transform: scale(0.1) rotate(-45deg);}
#search_overlay.active .close::after {transform: scale(1) rotate(45deg);}
#search_overlay.active .close::before {transform: scale(1) rotate(-45deg);}
#search_overlay.active .close:hover::after {transform: scale(1) rotate(225deg);}
#search_overlay.active .close:hover::before {transform: scale(1) rotate(135deg);}

@media screen and (max-width: 33rem) {
    html {font-size: 3.9vw;}
    .container {padding: 0 1rem;}
    .header a.logo {left: 1rem;}
    .header div {right: 1rem;}
    #search_overlay form, div.highlight {padding-left: 1rem; padding-right: 1rem;}
}

.social_icons {display: flex; margin: 1rem 0; gap: 0.75rem;}
.social_icons a {display: block; border-radius: 100%; height: 2rem!important; width: 2rem; background: white; display: flex; transition: background 0.15s ease-in-out;}
.social_icons a:hover {background: #fff;}
.social_icons a img {height: 1rem!important; width: 1rem; margin: auto;}