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: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
hr {
  margin-bottom: 3.5%;
}

html {

  --black: #000;
  --grey: #808080;
  --light: #fff;

  font-size: 20px;
  line-height: 1;
}

@font-face {
    font-family: 'Roobert-Regular';
    src: url('/assets/fonts/RoobertStandard-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
    font-style: normal;
    font-feature-settings: "ss03" 1, "ss07" 1;
}

@font-face {
    font-family: 'Roobert-Bold';
    src: url('/assets/fonts/Roobert-Bold.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
    font-style: normal;
    font-feature-settings: "ss03" 1;
}

body {
  background-color: var(--black);
  font-family: 'Roobert-Regular', sans-serif;
  font-feature-settings: "ss03" 1, "ss07" 1;
  line-height: 1.45;
  margin: 0;
  padding: 0;

  color: var(--light);
}

a {
  color: inherit;
}

strong {
  font-family: 'Roobert-Bold', sans-serif;
  font-feature-settings: "ss03" 1;
}

h1, h2, h3, h4 {
  font-family: 'Roobert-Bold', sans-serif;
  line-height: 1;
  font-feature-settings: "ss03" 1;
}

h1 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

p {
  font-family: 'Roobert-Regular', sans-serif;
  margin-bottom: 1rem;
  font-feature-settings: "ss03" 1, "ss07" 1;
}

ol, ul {
  list-style: none;
}

#wrapper {
  width: 100%;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* —————— MENU —————— */

.home #menu-wrapper {
  color: var(--black);
   border-bottom: 2px solid var(--black);
}

#menu-wrapper {
  position: absolute;
  width: 100vw;
  height: auto;
  left: 0;
  z-index: 1000;
  /*margin: 0 auto;*/
  padding: 0 2% 0 2%;
  font-family: 'Roobert-Bold', sans-serif;
  font-size: 4vw; /* 3rem */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: var(--light);
  border-bottom: 1px solid var(--light);
}

.home-nav {
  font-family: 'Roobert-Bold', sans-serif;
  font-size: 140%;
  line-height: 1;
  position: absolute;
  left: 0;
  -webkit-text-fill-color: rgba(0,0,0,0);
  -webkit-text-stroke-width: 1px;
  /*-webkit-text-stroke-color: var(--black);*/
}

.home #menu-wrapper .home-nav a:hover {
  -webkit-text-fill-color: var(--black) !important;
}

#menu-wrapper .home-nav a:hover {
  -webkit-text-fill-color: var(--light) !important;
}

#menu-wrapper a {
  text-decoration: none;
}

#menu-wrapper .menu {
  list-style: none;
  float: right;
}

#menu-wrapper .menu li {
  display: inline-block;
  margin-left: 1rem;
  /*line-height: 32px;*/
}

.home #menu-wrapper .menu li a:hover,
.home #menu-wrapper .menu li.current-menu-item {
  color: var(--black); 
  -webkit-text-stroke-color: var(--black);
}


#menu-wrapper .menu li a:hover,
#menu-wrapper .menu li.current-menu-item {
  color: var(--light); 
  -webkit-text-fill-color: rgba(0,0,0,0);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--light);
}

#menu-wrapper .menu li.current-menu-item a:hover {
  -webkit-text-fill-color: var(--light);
}

.home .menu-tin::after, .home .menu-outlined::after {
  font-size: 140%;
  line-height: 0;
  content: '↗';
  color: var(--black); 
  -webkit-text-fill-color: rgba(0,0,0,0);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--black);
}

.menu-tin::after, .menu-outlined::after {
  font-size: 140%;
  line-height: 0;
  content: '↗';
  color: var(--light); 
  -webkit-text-fill-color: rgba(0,0,0,0);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--light);
}

.home #menu-wrapper .menu li.menu-contact {
  color: var(--black); 
  -webkit-text-fill-color: var(--black); 
  -webkit-text-stroke-width: 0px !important;
  /*-webkit-text-stroke-color: var(--black);*/
}

#menu-wrapper .menu li.menu-contact {
  color: var(--light); 
  -webkit-text-fill-color: var(--light); 
  -webkit-text-stroke-width: 0px !important;
  /*-webkit-text-stroke-color: var(--black);*/
}

#menu-wrapper .menu li.menu-contact a:hover {
  -webkit-text-fill-color: rgba(0,0,0,0);
}

#mobile-menu-wrapper {
  display: none;
}

/* —————— HUE —————— */

#hue-wrapper {
  position: absolute;
  width: 100%;
  height: 100vh;
  z-index: 99;
  /*display: none;*/
  display: block;
}

#hue {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 99;
  background: linear-gradient(135deg, #ff5500, #ff005c);
}

#hue-gradient {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
  padding: 0;
  background: linear-gradient(135deg, #ff0000, #ff5500);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#hue-text {
  width: 100%;
  padding: 7.75vw 2% 0.75em 2%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /*-webkit-hyphens: auto;*/
}

#hue-text p {
  font-family: 'Roobert-Bold', sans-serif;
  font-feature-settings: "ss03" 1;
  font-size: 6.5vw;
  line-height: 95%;
  letter-spacing: -0.02em;
  margin-bottom: 0.75em;
  color: var(--black);
}

#hue-text a {
  text-decoration: none;
  color: var(--black);
  -webkit-text-fill-color: rgba(0,0,0,0);
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--black);
}

#hue-text a:hover {
  text-decoration: none;
  color: var(--black);
  -webkit-text-stroke-width: 0px;
  -webkit-text-fill-color: var(--black);
/*  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--black);*/
}


/* —————— GRID —————— */



#grid {
  position: relative;
  margin: 0 auto;
  /*padding: 2rem 0;*/
}
#grid:after {
  content: "";
  display: table;
  clear: both;
}

.grid-item {
  display: inline-block;
}
.grid-item:after {
  content: "";
  display: table;
  clear: both;
}
.grid-item h2 {
  font-size: 1rem;
  margin: 0;
  line-height: 1.2;
}
.grid-item a {
  text-decoration: none;
}
.grid-item .featured-image {
  height: auto;
}
.grid-item .featured-image img {
  width: 100%;
  height: auto;
  display: block;
}


#content {
  width: 100%;
  margin: 0 auto;
  padding: 8vw 2% 1% 2%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#content:after {
  content: "";
  display: table;
  clear: both;
}

#content img, #content .size-big, #content figure {
  max-width: 100%;
  height: auto;
  padding-bottom: 2%;
}
/* line 333, ../sass/screen.scss */
#content .project-nav {
  padding-top: 2rem;
  width: 100%;
}
/* line 336, ../sass/screen.scss */
#content .project-nav .prev {
  float: left;
}
/* line 10, ../sass/screen.scss */
#content .project-nav .prev:after {
  content: "";
  display: table;
  clear: both;
}
/* line 340, ../sass/screen.scss */
#content .project-nav .next {
  float: right;
}
/* line 10, ../sass/screen.scss */
#content .project-nav .next:after {
  content: "";
  display: table;
  clear: both;
}

.top-image-wrap {
  /*width: 100vw;*/
  /*margin-left: -2vw;*/
  /*margin-top: -2vw;*/
}

.template-project .top-image-wrap img, .template-about .top-image-wrap img {
  /*position: absolute;*/
  width: 100%;
  /*left: 0;*/
  height: auto;
  /*padding-bottom: 2rem !important;*/
}
/* line 355, ../sass/screen.scss */
.template-project h1, .template-about h1 {
  width: 50%;
  line-height: 1.1;
}
/* line 359, ../sass/screen.scss */
.template-project p, .template-about p {
  width: 50%;
}
/* line 362, ../sass/screen.scss */
.template-project img, .template-about img {
  width: 100%;
}
/* line 365, ../sass/screen.scss */
.template-project .kwart-right, .template-about .kwart-right {
  width: 25%;
  padding-left: 2rem;
  float: right;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 10, ../sass/screen.scss */
.template-project .kwart-right:after, .template-about .kwart-right:after {
  content: "";
  display: table;
  clear: both;
}
/* line 371, ../sass/screen.scss */
.template-project .kwart-right p, .template-about .kwart-right p {
  width: 25% !important;
}
/* line 375, ../sass/screen.scss */
.template-project .half-left, .template-about .half-left {
  width: 50%;
  padding-right: 1%;
  float: left;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 10, ../sass/screen.scss */
.template-project .half-left:after, .template-about .half-left:after {
  content: "";
  display: table;
  clear: both;
}
/* line 381, ../sass/screen.scss */
.template-project .half-left p, .template-about .half-left p {
  width: 100% !important;
}
/* line 385, ../sass/screen.scss */
.template-project .half-right, .template-about .half-right {
  width: 50%;
  padding-left: 1%;
  float: right;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 10, ../sass/screen.scss */
.template-project .half-right:after, .template-about .half-right:after {
  content: "";
  display: table;
  clear: both;
}
/* line 391, ../sass/screen.scss */
.template-project .half-right p, .template-about .half-right p {
  width: 100% !important;
}
/* line 395, ../sass/screen.scss */
.template-project .half-center, .template-about .half-center {
  width: 50%;
  padding-left: 25%;
  padding-right: 25%;
}
/* line 399, ../sass/screen.scss */
.template-project .half-center p, .template-about .half-center p {
  width: 50% !important;
}
/* line 403, ../sass/screen.scss */
.template-project .driekwart-left, .template-about .driekwart-left {
  width: 75%;
  padding-right: 2rem;
  float: left;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 10, ../sass/screen.scss */
.template-project .driekwart-left:after, .template-about .driekwart-left:after {
  content: "";
  display: table;
  clear: both;
}
/* line 409, ../sass/screen.scss */
.template-project .driekwart-left p, .template-about .driekwart-left p {
  width: 75% !important;
}
/* line 413, ../sass/screen.scss */
.template-project .driekwart-right, .template-about .driekwart-right {
  width: 75%;
  padding-left: 2rem;
  float: right;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 10, ../sass/screen.scss */
.template-project .driekwart-right:after, .template-about .driekwart-right:after {
  content: "";
  display: table;
  clear: both;
}
/* line 419, ../sass/screen.scss */
.template-project .driekwart-right p, .template-about .driekwart-right p {
  width: 75% !important;
}
/* line 423, ../sass/screen.scss */
.template-project .driekwart-center, .template-about .driekwart-center {
  width: 75%;
  padding-left: 12.5%;
  padding-right: 12.5%;
}
/* line 427, ../sass/screen.scss */
.template-project .driekwart-center p, .template-about .driekwart-center p {
  width: 75% !important;
}
.template-project .full-width, .template-about .full-width {
  width: 100% !important;
}
.template-project .full-width:after, .template-about .full-width:after {
  content: "";
  display: table;
  clear: both;
}
.template-project .full-width p, .template-about .full-width p {
  width: 100% !important;
}
/* line 431, ../sass/screen.scss */
.template-project .full, .template-about .full {
  width: 100%;
  display: inline-block;
}
/* line 435, ../sass/screen.scss */
.template-project .more-info, .template-about .more-info {
  width: 50%;
  padding-left: 1rem;
  float: right;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 10, ../sass/screen.scss */
.template-project .more-info:after, .template-about .more-info:after {
  content: "";
  display: table;
  clear: both;
}
/* line 441, ../sass/screen.scss */
.template-project .more-info p, .template-about .more-info p {
  width: 100% !important;
}
/* line 445, ../sass/screen.scss */
.template-project .half-wrapper, .template-about .half-wrapper {
  width: 100%;
  height: auto;
  display: inline-block;
}

.twoCol {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  -moz-column-fill: auto;
  column-fill: auto;
}

#footer {
  position: absolute;
  width: 100%;
  left: 0;
  margin: 0 auto;
  padding-top: 1rem;
  border-top: 1px solid var(--light);
}

#hue #footer {
  color: var(--black);
  border-top: 2px solid var(--black);
}

#footer p.vrm {
  float: left;
  padding-left: 2%;
  padding-right: 1rem;
}

#footer p.vrm:after {
  content: "";
  display: table;
  clear: both;
}

#footer p.contact {
  float: right;
  padding-right: 2%;
}

#footer p.contact:after {
  content: "";
  display: table;
  clear: both;
}

#footer a {
  text-decoration: none;
}
#footer a:hover {
  text-decoration: underline;
}



/*NEW BREAKPOINT*/
@media screen and (max-width: 640px) {

  hr {
  margin-bottom: 6.5%;
}

  .home #mobile-menu-wrapper {
    color: var(--black);
    /*border-bottom: 2px solid var(--black);*/
  }

/*.menu-hoofdmenu-container*/
#mobile-menu-wrapper {
  position: absolute;
  width: 100vw;
  /*height: 98px;*/
  left: 0;
  z-index: 1000;
  /*margin: 0 auto;*/
  padding: 0 2% 0 2%;
  font-family: 'Roobert-Bold', sans-serif;
  font-size: 3rem;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: var(--light);
  /*border-bottom: 2px solid var(--light);*/
}

.home #mobile-menu-bg {
  background: linear-gradient(135deg, #ff0000, #ff5500);

}

  #mobile-menu-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: var(--black);
  }

  #mobile-menu-wrapper {
    display: inline-block;
    overflow: hidden;
  }

  #menu-wrapper {
    display: none;
  }

  #mobile-menu-btn {
    position: absolute;
    top: 10px;
    right: 2%;
    font-size: 8vw; 
    line-height: 0.75;
  }

  .home-nav {
    display: none !important;
  }

  .home #mobile-home-nav {
    border-bottom: 2px solid var(--black);
  }

  #mobile-home-nav {
    /*font-size: 140%;*/
    font-size: 10vw;
    line-height: 1;
    -webkit-text-fill-color: rgba(0,0,0,0);
    -webkit-text-stroke-width: 1px;

    width: 100vw;
    margin-left: -2vw;
    padding: 0 2vw 2vw 2vw;
    border-bottom: 1px solid var(--light);
  }

  #mobile-main-menu {
    display: none;
  }

  #hue-text {
    padding: 14.5vw 2% 0.25em 2% !important;
  }

  p {
    margin-bottom: 0;
  }

  #mobile-menu-wrapper a {
  text-decoration: none;
}

#content {
  padding: 15vw 3% 1% 3%;
}

}




@media screen and (max-width: 530px) {

  #get-in-touch h2 {
    /*padding: 0 0 0 0.5rem !important;*/
    overflow: scroll;
    /*overflow: hidden;*/
  }

  #footer {
    padding-bottom: 1rem;
  }

  #footer p.contact {
    float: left;
  }
  #footer p.vrm {
    float: none;
  }
  #footer p.contact {
    padding-left: 2%;
  }
}
@media screen and (max-width: 640px) {
  h1, h2 {
    font-size: 1.5rem;
  }

  #get-in-touch h2 {
    font-size: 1.25rem;
  }

  .menu-hoofdmenu-container {
    font-size: 1.5rem;
  }

  #hue-text a {
  -webkit-text-stroke-width: 1px;
}


  /* line 544, ../sass/screen.scss */
  .back-home, .back-to-top {
    visibility: hidden;
    bottom: -100px;
  }

  /* line 549, ../sass/screen.scss */
  #content img, #content .size-big, #content figure {
    /*padding-bottom: 2rem;*/
  }

  /* line 553, ../sass/screen.scss */
  .grid-sizer {
    width: 100%;
  }

  /* line 556, ../sass/screen.scss */
  .gutter-sizer {
    width: 0%;
  }

  /* line 559, ../sass/screen.scss */
  .grid-item {
    margin-bottom: 1rem;
  }
}
@media screen and (max-width: 768px) {
  /* line 566, ../sass/screen.scss */
  .grid-item h2 {
    /*font-size: 0.75rem;*/
  }

  /* line 571, ../sass/screen.scss */
  .template-project h1, .template-project p {
    width: 100% !important;
  }

  /* line 576, ../sass/screen.scss */
  .kwart-right, .half-left, .half-right, .half-center, .driekwart-left, .driekwart-right, .driekwart-center, .more-info {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* line 586, ../sass/screen.scss */
  .grid-item h2 {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 1024px) {
  /* line 594, ../sass/screen.scss */
  .template-about h1, .template-about p {
    width: 100% !important;
  }
  /* line 597, ../sass/screen.scss */
  .template-about .kwart-right, .template-about .half-left, .template-about .half-right, .template-about .half-center, .template-about .driekwart-left, .template-about .driekwart-right, .template-about .driekwart-center, .template-about .more-info {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* line 604, ../sass/screen.scss */
  .twoCol {
    -webkit-columns: 1;
    -moz-columns: 1;
    columns: 1;
    -moz-column-fill: auto;
    column-fill: auto;
  }

  /* line 611, ../sass/screen.scss */
  #outro-container {
    flex-direction: column-reverse;
  }

  #get-in-touch {
    width: 100%;
    padding: 1% 0 0 0;
  }
  /* line 617, ../sass/screen.scss */
  #get-in-touch h2 {
    /*padding: 0 0 0 1rem;*/
  }
}
@media screen and (min-width: 641px) and (max-width: 1279px) {
  /* line 650, ../sass/screen.scss */
  .grid-sizer {
    width: 31.3%;
  }

  /* line 653, ../sass/screen.scss */
  .gutter-sizer {
    width: 3%;
  }

  /* line 656, ../sass/screen.scss */
  .one {
    width: 31.3%;
  }

  /* line 659, ../sass/screen.scss */
  .two {
    width: 65.6%;
  }

  /* line 662, ../sass/screen.scss */
  .about-two {
    width: 66%;
  }

  /* line 665, ../sass/screen.scss */
  .about-one {
    width: 32%;
  }
}
@media screen and (min-width: 1280px) {
  /* line 671, ../sass/screen.scss */
  .grid-item,
  .grid-sizer {
    width: 23.3%;
  }

  /* line 675, ../sass/screen.scss */
  .gutter-sizer {
    width: 2.25%;
  }

  /* line 678, ../sass/screen.scss */
  .one {
    width: 23.3%;
  }

  /* line 681, ../sass/screen.scss */
  .two {
    width: 48.85%;
  }

  /* line 684, ../sass/screen.scss */
  .about-two {
    width: 64%;
  }

  /* line 687, ../sass/screen.scss */
  .about-one {
    width: 32%;
  }
}



/* —————— STATIC REBUILD —————— */
/* Replaces what jQuery/WordPress plugins did before */

/* Grid title spacing, formerly set in px by main.js on resize:
   height = gridItemOne * 55 / 350, gridItemOne = 0.96vw * (0.96 - columnGrid) */
.grid-project-title {
  height: 14.4823vw;
}

@media screen and (min-width: 641px) and (max-width: 1279px) {
  .grid-project-title {
    height: 4.752vw; /* columnGrid 0.645 */
  }
}

@media screen and (min-width: 1280px) {
  .grid-project-title {
    height: 3.5904vw; /* columnGrid 0.722 */
  }
}

/* Masonry: main.js sets left/top; without JS the items stay inline-block */
#grid.is-laid-out .grid-item {
  position: absolute;
}

/* Videos */
#content video {
  width: 100%;
  height: auto;
}

/* Vimeo embed, formerly the Fluid Video Embeds plugin */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 10;
  margin: 0.5em 0;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Mobile menu, formerly inline styles from main.js */
#mobile-menu-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-feature-settings: inherit;
  cursor: pointer;
}

#mobile-menu-bg {
  display: none;
}

#mobile-main-menu {
  display: none;
}

@media screen and (max-width: 640px) {
  #mobile-menu-wrapper.is-open {
    position: fixed;
  }

  #mobile-menu-wrapper.is-open #mobile-main-menu,
  #mobile-menu-wrapper.is-open #mobile-menu-bg {
    display: block;
  }
}