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

body, html { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }
body { background: var(--backgrijs); color: #010101; overscroll-behavior-y: none; }
body.wit { background: #fff; }
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_mobile, #logo_top, #logo_menumobile, #menu_mobile_burger, .footer-mobile { 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: 2.4rem; line-height: 1.15; color: var(--frensblauw); margin: 0; padding: 0;  }

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

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

h4 { font-family: 'Surt', sans-serif; font-size:1.5rem; 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.midgroen { color: var(--midgroen); }
p.grijs, .blok-txt-grijs p { color: var(--grijs); }
p.frensblauw { color: var(--frensblauw); }

a, a:hover { color: var(--frensblauw); }


.slashbox { position: relative; width: 9.4rem; height: 9.4rem; }
.slashbox-mb {margin-bottom: 1.5rem; }
.slashbox-mt {margin-top: 1.5rem; }
.slashbox-mt-xl {margin-top: 3rem; }

.slash, .backslash {  width: calc(1.414 * 9.4rem); border-top: 5px 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: 5px solid var(--donkergroen); }
.slash-zalm { border-top: 5px solid var(--zalm); }

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

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

#logo { position: absolute; top: 1.25rem; left: 1.25rem; width: 9.5vw; min-width: 70px; max-width: 125px; z-index: 99;}
#logo-fixed { position: fixed; margin-top: 1.25rem; margin-left: 1.25rem;  width: 9.5vw; min-width: 70px; max-width: 125px;  z-index: 98; }
#logo img, #logo-fixed img { width: 100%; height: auto; }
#menu { position: absolute; top: 1.2rem; right: .7rem; width: calc(50% - .7rem); }
#menu ul { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; justify-content: space-between; }
#menu ul li a { display: block; padding: 0 .45rem 2px .45rem; font-family: 'Surt', sans-serif; font-size: .9rem; text-decoration: none; text-transform: uppercase; color: var(--donkergroen); }
#menu ul li a.active, #menu ul li a:hover { border-bottom: 2px solid var(--zalm); }

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

.suplogo { z-index: 100; }


/* **********************************
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, .fullwidth-img-link { height: 32rem; overflow: hidden;  }
.fullwidth-img-link { display: flex; width: 100%; max-width: 1500px; margin: 0px auto; padding: 0 3.75rem; align-items: center; }

.container { position: relative; width: 100%; max-width: 1500px; margin: 0px auto; background-color: #fff; }
.container-pb { padding-bottom: 2.5rem; }
.equal-height-rows { display: grid; grid-auto-rows: 1fr; }

.twocol { position: relative; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0px; }


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

.fullwidth-img-link-kop { display: block; width: 70%; font-family: 'LibreBaskerville', serif; color: #fff; font-size: 2.4rem; line-height: 1.15; margin-bottom: 2.5rem; padding-left: 5rem; }
.fullwidth-img-link-lv { font-family: 'Surt', sans-serif; color: #fff; font-size:.9rem; line-height: 1; padding-left: 5rem;  }
.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%; max-width: 1500px; margin: 0px auto; padding: 2.4rem 9rem 5rem 9rem; }
.lead-home { padding: 5rem 9rem 6rem 9rem; }

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

.brood-padding-xl { padding: 5rem 18rem 2.5rem 9rem; }
.brood-col-1 { padding-left: 9rem; padding-right: .5rem; }
.brood-col-2 { padding-left: 1.5rem; padding-right: 5.5rem; }

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

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

.blok-img { width: 100%; padding-bottom: 64.5%; overflow: hidden; }
.blok-anim div { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.blok-anim div img { width: 100%; height: auto; }

.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: 9% 10.8%; }
.blok-txt-inner { display: flex; flex-direction: column; }
.blok-txt-kop { margin-bottom: 1.2rem;  }
.blok-txt-tekst { flex-grow: 1; }

.project { padding: 0 11.9rem 6rem 14rem; }
div.project { padding: 0 11.9rem 2rem 14rem; }
.last-project { padding-bottom: 0; }
.projectcredits { padding-bottom: 1.25rem; }

.enco { padding: 0 12rem 2.7rem 14rem; }
.twocol-enco { grid-template-columns: 63.5% 36.5%;  }
.twocol-enco .slashbox-mb {margin-bottom: .8rem; }
.enco-col-1 { padding: 0 9rem 4.55rem 14rem; }
.enco-col-2 { padding: 0 5rem 5rem 0; }
.enco-crosslink { padding: 0 0 .2rem 14rem; }
.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; }

@media screen and (min-width:1501px) {
	.blok-grijs { background: #fff; }
}


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

.lead p { font-family: 'LibreBaskerville', serif; color: var(--donkergroen); font-size: 1.3rem; 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.5; }

.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 1.7rem 0; }
.project p { font-family: 'LibreBaskerville', serif; color: var(--midgroen); font-size: .95rem; line-height: 1.5; }

.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: .95rem; line-height: 1.5; }
.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: -4rem; }

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

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

.contactform { margin-left: 14rem; padding-bottom: 6.5rem; width: 59%; max-width: 40rem;  }
.naw, .formkop { font-family: 'LibreBaskerville', serif; color: var(--donkergroen); font-size: 1.35rem; line-height: 1.2; }
.naw { margin-bottom: 6.4rem; }

.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.2rem; border: 0; background-color: #f4f4f4; 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 0;  }
.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.5rem; line-height: 1; color: var(--frensblauw); padding-bottom: .9rem;  }
.mw-txt-spacer {  height: 4rem; 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-inner { display: grid; grid-template-columns: 50% 10rem 1fr; gap: 0px; height: 15.5rem;  }
.footer-payoff { padding-left: 1.5rem; }
.footer-payoff-kop { font-family: 'Surt', sans-serif; font-size:1.45rem; 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.2; color: var(--frensblauw);  }
.footer-main { padding-top: 1.45rem ; }
.footer-midcol { padding-left: .75rem; }
.footer-main ul { display: inline-block; list-style: none; padding: 0; margin: 0; }
.footer-main ul li { margin: 0; padding: 0; }
.footer-main ul li a { display: block; font-family: 'Surt', sans-serif; font-size:1.2rem; line-height: 1; color: var(--donkergroen); text-transform: uppercase; margin-bottom: .475rem; text-decoration: none;  }
.footer-main ul li a.tk { color: var(--grijs); }

.footer-legal { display: grid; grid-template-columns: 50% 10rem 1fr; gap: 0px; height: 1.9rem; font-family: 'Surt', sans-serif; font-size:.6rem; line-height: 1; color: #959595;  }
.footer-copyright { padding-left: 1.5rem; }
.footer-legal ul { display: inline-block; list-style: none; padding: 0; margin: 0; }
.footer-legal ul li a { font-size:.6rem; line-height: 1; color: #959595; text-decoration: none; text-transform: none; }






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


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

#home_header { height: 56.25vw; max-height: 769px; overflow: hidden; background-color:var(--donkergroen);  }
#project_header { height: 32rem; 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.65rem; line-height: 1.2; 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: 1fr 1fr; gap: 0; z-index: 99; }
.slider-caption, .slider-title { position: relative; height: 100%; }
.slider-caption div { 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: 90%;  }
.slider-title div { font-family: 'LibreBaskerville', serif; font-size: 2.25rem; line-height: 1.5; color: #fff; margin-left: -2rem; opacity: 0; transition: .5s all;  }
.slider-title div.from-right { margin-left: 2rem;  }

.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: 9.75rem 6rem 0 9rem; color: var(--frensblauw); }
#fa_kop_chapeau h4 { margin-bottom: 1.25rem; }
#fa_kop_chapeau p { font-family: 'LibreBaskerville', serif; font-size: 1.25rem; line-height: 1.5;   }

#fa_img { padding-left: 10px; margin-top: -1.6rem; width: 100%; max-height: 32rem; }
#fa_img img { width: 75%; max-width: 496px; height: auto; }

#fa_cv .brood-col-1 {  }

.slashbox-fa { margin-top: 2rem; margin-left: 100%; }
.slashbox-right { margin-left: calc(100% - 13.15rem); }
.quote-padding-fa { padding: 4.9rem 9rem 5.1rem 9rem; }


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


@media screen and (max-width:1500px) {
	#footer.noborder { border-top: none; }
}

@media screen and (max-width:1349px) {
	#menu { width: calc(60% - .7rem); }
	.slider-inner { grid-template-columns: 2fr 3fr; }
}

@media screen and (max-width:1200px) {
	.slider-title div { font-size: 1.8rem; }
	.lead-home h1 { font-size: 1.5rem; max-width: 50.8rem; }
	.fullwidth-img-link-kop { font-size: 2rem; }
	
	h1 { font-size: 2.25rem; }
	h2 { font-size: 2.5rem; }
	h3 { font-size: 1.5rem; }

	.brood-padding-xl { padding: 5rem 10rem 2.5rem 9rem; }
	.project { padding: 0 10rem 6rem 9rem; }
	.enco { padding: 0 10rem 2.7rem 10rem; }
	.twocol-enco { grid-template-columns: 62% 38%;  }
	.enco-col-1 { padding: 0 7.8rem 4.55rem 10rem; }

	.lead p { font-size: 1.15rem; line-height: 1.3; }
	.blok-txt-tekst p { font-family: 'LibreBaskerville', serif; font-size:.85rem; line-height: 1.35; margin-bottom:1rem; }
	
	.naw, .formkop { font-size: 1.2rem; line-height: 1.25; }
	.naw { margin-bottom: 5rem; }

}

@media screen and (max-width:1079px) {
	#project_header, .fullwidth-img, .fullwidth-img-link { height: 28rem;  }

	.brood-padding-xl { padding: 5rem 5rem 2.5rem 9rem; }
	.project { padding: 0 5rem 6rem 9rem; }
	.enco { padding: 0 5rem 2.7rem 9rem; }
	.twocol-enco { grid-template-columns: 62% 38%;  }
	.enco-col-1 { padding: 0 7.8rem 4.55rem 9rem; }

	
	.mw-txt-tekst { max-width: 15.5rem; }
	.mw-txt-spacer { height: 2.9rem; }
	.mw-nodisp-sm { display: none; }
	
	#fa_kop_chapeau { padding: 0rem 0 0 9rem;  }
	#fa_kop_chapeau h4 { font-size: 1.35rem; line-height: 1.1;   }
	#fa_kop_chapeau p { font-size: .9rem; line-height: 1.45;   }

	
	.contactform { margin-left: 10rem;  }

}

@media screen and (max-width:991px) {
	h1 { font-size: 1.75rem; }
	h2 { font-size: 2.25rem; }
	h3 { font-size: 1.25rem; }
	.brood p { font-size: .9rem;  }
	.lead p { font-size: 1.05rem; line-height: 1.4; }
	
	.twocol-enco { grid-template-columns: 61% 39%;  }
	.enco-col-1 { padding: 0 5rem 4.55rem 9rem; }
	
	.contactform { margin-left: 9rem;  }
}

@media screen and (max-width:899px) {
	#menu { width: auto; }
	#menu ul li a { white-space: nowrap; margin-left:.2rem; }
	.slider-inner { grid-template-columns: 1fr 2fr; }
	.slider-title div { font-size: 1.5rem; }

	#project_header, .fullwidth-img, .fullwidth-img-link { height: 24rem;  }
	.fullwidth-img-link-kop { font-size: 1.7rem; }

	h1 { font-size: 1.5rem;  line-height: 1.4; }
	
	.lead { padding: 2rem 4rem 4rem 6rem; }
	.lead p { font-size: 1rem; line-height: 1.4; }
	.lead-home { padding: 3.5rem 4rem 4.5rem 3.75rem; }
	.lead-home h1 { font-size: 1.2rem; line-height: 1.35;  }

	.brood-padding-xl { padding: 3.5rem 9rem 1.5rem 6rem; }
	.quote { padding: 1.5rem 9rem 0 6rem; }

}


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

}