:root {
--backgrijs: #ededed;
--donkergroen: #184229;
--midgroen: #505854;
--grijs: #717473;
--lichtgrijs: #f4f4f4;
--zalm: #e1a38c;
--frensblauw: #1C48B7;
}

body, html { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }
body { background: var(--backgrijs); color: var(--midgroen); overscroll-behavior-y: none; }
html { box-sizing: border-box; font-size: 20px; -webkit-text-size-adjust: 100%;  -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body.mmactive { overflow: hidden; }
*, *:before, *:after { box-sizing: inherit; }

#menu, #logo, #logo-fixed, .footer-main { display: none;  }


/* *********************************
TYPOGRAPHY GENERAL
********************************** */

@font-face {
  font-family: "SurtO";
  src: url("fonts/ATSurtRegularOblique.otf"); 
  url("fonts/ATSurtRegularOblique.otf");
}

@font-face {
  font-family: "Surt";
  src: url("fonts/ATSurtRegular.otf"); 
  url("fonts/ATSurtRegular.otf");
}

@font-face {
  font-family: "LibreBaskerville";
  src: url("fonts/LibreBaskerville-Regular.ttf"); 
  url("fonts/LibreBaskerville-Regular.ttf");
}


h1 { font-family: 'LibreBaskerville', serif;  font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: var(--frensblauw); margin: 0; padding: 0;  }

h2 { font-family: 'Surt', sans-serif; font-size:1.6rem; font-weight: 100; line-height: 1; color: var(--frensblauw); }

h3 { font-family: 'LibreBaskerville', serif;  font-weight: 400; font-size: 1.2rem; line-height: 1.2; color: var(--frensblauw); margin: 0; padding: 0;  }

h4 { font-family: 'Surt', sans-serif; font-size:1.2rem; font-weight: 400; line-height: 1.1; margin: 0;  }
h4.tussenkop_footerpag { font-family: 'Surt', sans-serif; font-size:1.3rem; font-weight: 400; line-height: 1.1; margin: 4rem 0 2rem 0;  }

p { margin: 0; }
p + p { margin-top: 1rem; }

p.donkergroen { color: var(--donkergroen); }
p.grijs, .blok-txt-grijs p { color: var(--grijs); }
p.frensblauw { color: var(--frensblauw); }


.slashbox { position: relative; width: 7.5rem; height: 7.5rem; }
.slashbox-mb, .slashbox-mb-mob {margin-bottom: 1.5rem; }
.slashbox-mt {margin-top: 1.5rem; }
.slashbox-mt-xl {margin-top: 1.5rem; }

.slash, .backslash {  width: calc(1.414 * 7.5rem); border-top: 6px solid #000; position: absolute; bottom: -2px; }
.slash { transform: rotate(-45deg); transform-origin: bottom left; }
.backslash { transform: rotate(45deg); transform-origin: bottom right; }

.slash-groen { border-top: 6px solid var(--donkergroen); }
.slash-zalm { border-top: 6px solid var(--zalm); }

/* **********************************
HEADER, MAIN MENU 
********************************** */

header { display: block; position: relative; width: 100%; height: 7rem; background-color:#fff;  }

#logo_top, #logo_menumobile { position: absolute; top: 1.1rem; left: 1.1rem; width: 9.5vw; min-width: 95px; max-width: 125px; z-index: 10000;}
#logo_menumobile { display: none; }
#logo_menumobile.active { display: block; }
#logo_top img, #logo_menumobile img { width: 100%; height: auto; }


header.transparent { background-color:transparent;  }
header.transparent #menu ul li a { color:#fff;  }


#menu_mobile { position: absolute; top: 0; left: 0; width: 100vw; height: 0px !important; overflow: hidden; background-color:var(--frensblauw); z-index: 9999; opacity: 0; transition: opacity .3s; }
#menu_mobile.active { height: 100vh !important; opacity: 1; }
#menu_mobile_burger { position: absolute; top: 1.25rem; right:20px; width: 44px; height: 40px; color: #fff; z-index: 10000; }

#menu_mobile ul { display: inline-block; list-style: none; padding: 0; margin: 8.25rem 0 0 1.1rem; }
#menu_mobile ul li { margin: 0; padding: 0; }
#menu_mobile ul li a { display: block; font-family: 'Surt', sans-serif; font-size:2.25rem; line-height: 1.55; color: var(--lichtgrijs); text-transform: uppercase; margin-bottom: .475rem; text-decoration: none;  }

.menu_mobile-payoff { position: absolute; left: 1rem; bottom: 1.2rem; display: block; width: 90%; font-family: 'LibreBaskerville', serif; color: var(--lichtgrijs); font-size: .9rem; line-height: 1.2;  }

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
 
 .hamburger{font:inherit;display:inline-block;overflow:visible;margin:0;padding:0;cursor:pointer;transition-timing-function:linear;transition-duration:.15s;transition-property:opacity,filter;text-transform:none;color:inherit;border:0;background-color:transparent}
.hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner:after,.hamburger.is-active .hamburger-inner:before{background-color:var(--zalm);}
.hamburger-box{position:relative;display:inline-block;width:44px;height:24px}
.hamburger-inner{top:50%;display:block;margin-top:-2px}
.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute;width:44px;height:3px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform;background-color:var(--donkergroen)}
.hamburger-inner:after,.hamburger-inner:before{display:block;content:""}
.hamburger-inner:before{top:-12px}
.hamburger-inner:after{bottom:-12px}

#menu_mobile_burger.wit .hamburger-inner,#menu_mobile_burger.wit .hamburger-inner:after,#menu_mobile_burger.wit .hamburger-inner:before{background-color:var(--lichtgrijs)}


.hamburger--squeeze .hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:75ms}
.hamburger--squeeze .hamburger-inner:before{transition:top 75ms ease .12s,opacity 75ms ease}
.hamburger--squeeze .hamburger-inner:after{transition:bottom 75ms ease .12s,transform 75ms cubic-bezier(.55,.055,.675,.19)}
.hamburger--squeeze.is-active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(45deg)}
.hamburger--squeeze.is-active .hamburger-inner:before{top:0;transition:top 75ms ease,opacity 75ms ease .12s;opacity:0}
.hamburger--squeeze.is-active .hamburger-inner:after{bottom:0;transition:bottom 75ms ease,transform 75ms cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(-90deg)}


/* **********************************
LAY-OUT GRID ELEMENTS 
********************************** */

.fullwidth { position: relative; width: 100%; background-color: #fff; }
.fw-gradient { top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.15) 75%, rgba(0,0,0,.3)); z-index: 1; }

.fullwidth-img { height: 12rem; overflow: hidden; }
.fullwidth-img-link { height: 16.75rem; overflow: hidden; }
.fullwidth-img-link { display: flex; width: 100%; max-width: 1500px; margin: 0px auto; padding: 0 1.1rem; align-items: center; }

.container { position: relative; width: 100%; max-width: 1500px; margin: 0px auto; background-color: #fff; }
.container-pb { padding-bottom: 2.5rem; }

.twocol { position: relative; width: 100%; display: grid; grid-template-rows: 1fr; gap: 0px;  }
.twocol-mob-rev { grid-row: 2; }

#project_header { height: 12rem; overflow: hidden;  }


/* *********************************
TYPOGRAPHY GRID ELEMENTS
********************************** */

.fullwidth-img-link-kop { display: block; width: 90%; font-family: 'LibreBaskerville', serif; color: #fff; font-size: 1.1rem; line-height: 1.15; margin-bottom: 1.5rem; }
.fullwidth-img-link-lv { font-family: 'Surt', sans-serif; color: #fff; font-size:.75rem; line-height: 1;  }
.fullwidth-img-link-lv a { color: #fff; text-decoration: none; }
.fullwidth-img-link-lv a:hover { color: #fff; border-bottom: 2px solid #fff; }






/* **********************************
LAY-OUT BLOCK/ARTICLE ELEMENTS 
********************************** */


.lead { position: relative; width: 100%;  margin: 0px auto; padding: 2rem 1.1rem 3rem 1.1rem; }
.lead-home { padding: 2rem 1.1rem 2.5rem 1.1rem; }

.brood { position: relative; width: 100%;  }
.brood h4 { margin-bottom: .9rem; color: var(--donkergroen); }
.brood p { font-family: 'LibreBaskerville', serif; font-size: .9rem; line-height: 1.5; color: var(--midgroen); }

.brood-padding-xl { padding: 3.7rem 1.1rem 1.4rem 1.1rem; }
.brood-padding-last { padding: 3.7rem 1.1rem 0 1.1rem; }
.brood-col-1 { padding-left: 9rem; padding-right: .5rem; }
.brood-col-2 { padding-left: 1.1rem; padding-right: 1.1rem; }

.quote { position: relative; width: 100%; max-width: 1500px; margin: 0px auto; padding: 2.5rem 1.1rem 0 1.1rem; }

.blok { position: relative; width: 100%;  display: flex; background: #fff; }
.blok-groen { background: var(--donkergroen); }
.blok-zalm { background: var(--zalm); }
.blok-grijs { background: var(--backgrijs); }

.blok-img { width: 100%; padding-bottom: 66.66%; max-height: 12.4rem; overflow: hidden; }
.blok-anim div { display: flex; width: 100%; max-height: 12.4rem; align-items: center; justify-content: center; padding: 12px 0; }
.blok-anim div img { max-width: 80%; max-height: 95%;  }

.blok-img-caption > div { position: absolute; left: 10.8%; bottom: 13%; font-family: 'Surt', sans-serif; font-size:1.5rem; color: #fff; }

.blok-txt { height: 100%; padding: 3rem 1.1rem 2.45rem 1.1rem; }
.blok-txt-inner { display: flex; flex-direction: column; }
.blok-txt-kop { margin-bottom: .7rem;  }
.blok-txt-tekst { flex-grow: 1; }

.project { padding: 1rem 1.1rem 3.1rem 1.1rem; }
.last-project { padding-bottom: 0; }
.projectcredits { padding-bottom: 1.25rem; }

.enco { padding: 0 1.1rem 2.7rem 1.1rem; }
.twocol-enco { grid-template-rows: 1fr;  }
.twocol-enco .slashbox-mb {margin-bottom: .8rem; }
.enco-col-1, .enco-col-2 { padding: 0 1.1rem 2rem 1.1rem; }
.enco-crosslink { padding: 0 0 .2rem 1.1rem; }
.enco-crosslink a { font-family: 'Surt', sans-serif; font-size:1.8rem; line-height: 2; color: var(--frensblauw); text-transform: uppercase; text-decoration: none; }
.enco-crosslink a span { display: inline-block; height: 30px;  }
.enco-crosslink a span img { height: 30px; width: auto; }



/* *********************************
TYPOGRAPHY BLOCK/ARTICLE ELEMENTS
********************************** */

.lead p { font-family: 'LibreBaskerville', serif; color: var(--donkergroen); font-size: .95rem; line-height: 1.25; }

h4.blok-txt-kop { color: var(--frensblauw); }

.blok-txt-tekst p { font-family: 'LibreBaskerville', serif; font-size:.9rem; line-height: 1.55; margin-bottom: 1.35rem; }

.blok-txt-lv a { font-family: 'Surt', sans-serif; font-size:.9rem; line-height: 2; color: var(--frensblauw); text-decoration: none;  }
.blok-txt-lv a:hover { border-bottom: 2px solid var(--zalm); }

.project h2 { margin: 0; padding: 1.5rem 0 .8rem 0; line-height: 1.25;  }
.project h3 { font-size: 1rem; line-height: 1.25; }
.project p { font-family: 'LibreBaskerville', serif; color: var(--grijs); font-size: .9rem; line-height: 1.6; }

.enco h2 { margin: 0; padding: 1.5rem 0 2.8rem 0; }
.enco h3 { margin-bottom: 1.5rem; }
.enco-col-1 h4, .enco-col-2 h4 { color: var(--donkergroen); }
.enco p { font-family: 'LibreBaskerville', serif; color: var(--midgroen); font-size: .9rem; line-height: 1.55; }
.enco-col-1 p, .enco-col-2 p { font-family: 'LibreBaskerville', serif; font-size: .9rem; line-height: 1.5; color: var(--grijs); }
.enco-intro p { color: var(--donkergroen); margin: 1rem 0; }

.enco-col-2 .backslash { margin-left: -1rem; }

.enco-img { width: 9.4rem; height: 9.4rem; overflow: hidden; margin-bottom: 1.5rem; }
.enco-img img { width: 100%; height: auto; }

/* **********************************
CONTACT-FORM 
********************************** */

.contactform { padding: 1rem 1.1rem 4rem 1.1rem; width: 100%; max-width: 40rem;  }
.naw, .formkop { font-family: 'LibreBaskerville', serif; color: var(--donkergroen); font-size: 1.3rem; line-height: 1.2; }
.naw { margin-bottom: 5rem; }

.formrow { margin-top: 2rem; }

label { display: block; width: 100%; font-family: 'Surt', sans-serif; font-size:.9rem; line-height: 1; color: var(--donkergroen); margin-bottom: .5rem;   }

input[type="text"], textarea { display: block; width: 100%; padding:.9rem 1.1rem; border: 0; background-color: var(--lichtgrijs); font-family: 'Surt', sans-serif; font-size:.9rem; outline: none; }
textarea { height: 10rem; }
input[type="text"].error, textarea.error { border: 2px solid #c00; }

input::placeholder, textarea::placeholder {
  color: #989898;
}
input.error::placeholder, textarea.error::placeholder {
  color: #a00;
}
input[type="text"]:focus, textarea:focus {
  border: 1px solid var(--frensblauw); background-color: #fff;
}
input:focus::placeholder, textarea:focus::placeholder {
  color: transparent;
}

input[type="submit"] { position: relative; display: flex; width: 10rem; height: 3rem; align-items: center; justify-content: center; border: 1px solid var(--frensblauw); background-color: #fff; font-family: 'Surt', sans-serif; font-size:.75rem; color: var(--donkergroen); text-transform: uppercase; cursor: pointer; }



/* **********************************
FOOTER, CONTACT-SECTION 
********************************** */


.meerweten { width: 100%; height: 16rem; padding: 3.6rem 0 3.15rem 1.1rem;  }
.mw { height: 9.25rem; display: grid; grid-template-columns: 7.5rem 1fr; gap: 0; }
.mw-img { height: 9.25rem;  }
.mw-img img { height:100%; width: auto;  }
.mw-txt { height:100%; display: flex; flex-direction: column; }
.mw-txt-kop { font-family: 'Surt', sans-serif; font-size:1.2rem; line-height: 1; color: var(--frensblauw); padding-bottom: .9rem;  }
.mw-txt-spacer {  height: 3.2rem; width: 1.1rem; border-right: 2px solid var(--frensblauw); flex-grow: 1;  }
.mw-txt-tekst, .mw-txt-tekst a { font-family: 'Surt', sans-serif; font-size:.9rem; line-height: 1.2; color: var(--frensblauw); text-decoration: none;  line-height: 1.2;  padding-top: .9rem;}


#footer { display: block; position: relative; width: 100%; border-top: 1px solid #707070; background-color: #fff; }
#footer.noborder { border-top: none; }


.footer-payoff, .footer-menu, .footer-legal { display: grid; grid-template-columns: 50% 50%; gap: 0px; padding-top: 1.2rem; padding-left: 1.1rem; }

.footer-payoff { padding-bottom: 2.3rem; }
.footer-payoff-kop { font-family: 'Surt', sans-serif; font-size:1rem; line-height: 1.4; color: var(--frensblauw); text-transform: uppercase; padding-bottom: .4rem;  }
.footer-payoff-txt { font-family: 'LibreBaskerville', serif; font-size:.9rem; line-height: 1.3; padding-right: 1.1rem; color: var(--frensblauw);  }

.footer-menu { padding-bottom: .2rem; }
.footer-menu ul, .footer-legal ul { display: inline-block; list-style: none; padding: 0; margin: 0; }
.footer-menu ul li, .footer-legal ul li { margin: 0; padding: 0; }
.footer-menu ul li a { display: block; font-family: 'Surt', sans-serif; font-size:1rem; line-height: 1; color: var(--donkergroen); text-transform: uppercase; margin-bottom: .475rem; text-decoration: none;  }
.footer-menu ul li a.tk { color: var(--grijs); }

.footer-legal { padding-left: 1.1rem; padding-bottom:1rem; font-family: 'Surt', sans-serif; font-size:.6rem; line-height: 1.5; color: #959595; }
.footer-legal ul li a { color: #959595;  text-decoration: none; }






/* **********************************
HOMEPAGE ADJUSTMENTS, SLIDER
********************************** */


.homemenu, .projectmenu { position: relative;  width: 100%; max-width: 1500px; height: 12rem; margin: 0px auto; z-index: 99; }

#home_header { height: 58.6vh; max-height: 640px; overflow: hidden; background-color:var(--donkergroen);  }
#home_header #menu ul li a, #project_header #menu ul li a { color: #fff; }

.lead-home h1 { display: block; position: relative; font-size: 1.05rem; line-height: 1.25; max-width: 50.8rem; }

h4.blok-txt-kop-groen { color: var(--donkergroen); }

.homeslider, .projectslider { position: absolute; top: 0; width: 100%; height: 100%; z-index: 1; }
.homeslider > div, .homeslider > div > div, .homeslider > div > div > div, .projectslider > div, .projectslider > div > div, .projectslider > div > div > div { height: 100%; }
.slider-inner { height: 100%; width: 100%; max-width: 1500px; margin: 0px auto; display: grid; grid-template-columns: 1.1rem 1fr; gap: 0; z-index: 99; }
.slider-caption, .slider-title { position: relative; height: 100%; }
.slider-caption div { display: none; position: absolute; left: 1.25em; bottom: 2.5rem; font-family: 'Surt', sans-serif; font-size: .8rem; line-height: 1.2; color: #fff; opacity: 0; transition: .5s all;  }

.slider-title { display: flex; align-items: center; width: calc(100% - 2rem);   }
.slider-title div { font-family: 'LibreBaskerville', serif; font-size: 1.3rem; line-height: 1.4; color: #fff; margin-left: 0; opacity: 0; transition: .5s all;  }
.slider-title div.from-right { margin-left: 0;  }

.slider-inview .slider-caption div { bottom: 1rem; opacity: 1; }
.slider-inview .slider-title div { margin-left: 0; opacity: 1; }


/* **********************************
'FRANS' ADJUSTMENTS
********************************** */

#fa_kop_chapeau { padding: 1.7rem 1.1rem 0 1.1rem; color: var(--frensblauw); }
#fa_kop_chapeau h4 { font-size: 1.5rem; margin-bottom: 1.25rem; }
#fa_kop_chapeau p { font-family: 'LibreBaskerville', serif; font-size: .95rem; line-height: 1.4; }

#fa_img { margin: 1.5rem 0 1.5rem 50%; width: calc(50% - 1.5rem); max-width: 18rem; }
#fa_img img { width: 100%; height: auto; }

#fa_cv .brood-col-1 { padding-left: 1.1rem; }

.slashbox-right { margin-left: calc(100% - 13.15rem); }
.quote-padding-fa { padding: 4rem 1.1rem 4.4rem 1.1rem; }


/* **********************************
RESPONSIVE 
********************************** */

.nodisp_xs { display: inline-block; }
.disp_xs { display: none; }


@media screen and (max-height:649px) {
	#menu_mobile ul li a { font-size:1.5rem;  }
}




@media screen and (max-width:644px) {
	.nodisp_xs { display: none; }
	.disp_xs { display: inline-block; }
}

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