.loader {
  float: none;
  position: fixed;
  left:50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: block;
  width:7em;
  height: 7em;
}

.loader span{position: absolute; background-color:#059BF1; border-radius:0.1em; }
.loader span.b1{width: 34%; height: 34%; animation: loaderb1 2.4s cubic-bezier(0.83, 0, 0.17, 1) 0s infinite; bottom:0; left:0 }
.loader span.b2{width: 66%; height: 66%; animation: loaderb2 2.4s cubic-bezier(0.83, 0, 0.17, 1) 0s infinite; right: 0; top:0;}


@keyframes loaderb1 {
    0%  { width: 34%; height: 34%; }
    20% { width: 66%; height: 66%; }
    33% { width: 66%; height: 66%; }
    53% { width: 66%; height: 34%; }
    66% { width: 66%; height: 34%; }
    86% { width: 34%; height: 34%; }
    100%{ width: 34%; height: 34%; }
}
@keyframes loaderb2 {
    0%  { width: 66%; height: 66%; }
    20% { width: 34%; height: 34%; }
    33% { width: 34%; height: 34%; }
    53% { width: 34%; height: 66%; }
    66% { width: 34%; height: 66%; }
    86% { width: 66%; height: 66%; }
    100%{ width: 66%; height: 66%; }
}

@keyframes l5 {
   0%   {background-position: 0    0,100% 0   ,100% 100%,0 100%}
   33%  {background-position: 0    0,100% 0   ,100% 100%,0 100%;width:60px;height: 60px}
   66%  {background-position: 100% 0,100% 100%,0    100%,0 0   ;width:60px;height: 60px}
   100% {background-position: 100% 0,100% 100%,0    100%,0 0   }
}




@font-face {
    font-family: 'TT Hoves Pro Regular';
    src: url('../fonts/TT_Hoves_Pro_Regular.woff2') format('woff2'),
         url('../fonts/TT_Hoves_Pro_Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'TT Hoves Pro Bold';
    src: url('../fonts/TT_Hoves_Pro_Bold.woff2') format('woff2'),
         url('../fonts/TT_Hoves_Pro_Bold.woff') format('woff');
    font-weight: 400;
    font-style: normal;

}


@font-face {
    font-family: 'TT Hoves Pro Expanded Regular';
    src: url('../fonts/TT_Hoves_Pro_Expanded_Regular.woff2') format('woff2'),
         url('../fonts/TT_Hoves_Pro_Expanded_Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
  font-family: 'ruimterealisten';
  src:  url('../fonts/ruimterealisten.eot?6uxr9x');
  src:  url('../fonts/ruimterealisten.eot?6uxr9x#iefix') format('embedded-opentype'),
    url('../fonts/ruimterealisten.ttf?6uxr9x') format('truetype'),
    url('../fonts/ruimterealisten.woff?6uxr9x') format('woff'),
    url('../fonts/ruimterealisten.svg?6uxr9x#ruimterealisten') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'ruimterealisten' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.rr-beeldmerk:before {
  content: "\e900";
}
.rr-logo:before {
  content: "\e901";
}
.rr-slogan1:before {
  content: "\e902";
}
.rr-slogan2:before {
  content: "\e903";
}
.rr-arrow_l:before {
  content: "\e904";
}
.rr-arrow_r:before {
  content: "\e905";
}
.rr-plus:before {
  content: "\e906";
}


.container{ opacity: 0; overflow:hidden;  }
.animate .container{opacity: 1; transition:opacity 0.8s ease 0.1s;}
.animate .loader{opacity: 0; transition:opacity 0.4s ease 0s;}


html { 
  -webkit-text-size-adjust: 100%; 
  position: relative; 
  float: left; 
  width: 100%; 
  font-size: 20px; 
  font-weight: 400; 
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: scroll; 
}

/*::-webkit-scrollbar {
    display: none;
}
*/
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, font, img, ins, kbd, q, s, samp, small, strike,  sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0px;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  vertical-align: baseline;
  list-style:none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	height: auto;

}

body{	
	position: relative;
	float: left; 
	display: block;
	font-family: 'TT Hoves Pro Regular', sans-serif;
	font-size: 1em;
	line-height: 1.15em;
  height: auto;
	font-weight: 400;
	margin:0; padding: 0; 
	width: 100%;
	color: #2D2D2D;
	background-color: #ffffff;
	min-height: 10em;
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* Optioneel: verwijder focus outlines voor muisklikken */
*:focus {
  outline: none;
}

.hidden{width: 0; height: 0; overflow: hidden;}


input, textarea{  font-size: 1em; border-radius: 0;}
input[type=text]:focus, textarea:focus {
  -webkit-box-shadow:none;
          box-shadow:none;
  outline: none;
}

a{color: inherit; text-decoration: none; }
.noline a{text-decoration: none;}
i, cite, em, var, dfn {
    font-style:normal;
}
b, strong {font-family: inherit; font-weight: 400; color:#059BF1; }

ul, li{position: relative;  display: inline-block;}

button {
  background: transparent;
    background-color: transparent;
  box-shadow: 0px 0px 0px transparent;
  border: 0px solid transparent;
  text-shadow: 0px 0px 0px transparent;
  cursor: pointer;
  font-size: 1em;
}
mark{all: unset;
  /* en daarna alleen instellen wat je wél wilt */
  background: none;
  color: inherit;
  font-size: 1.38em; line-height:1.07em; letter-spacing: -0.03em;
}

section, div, header, main, footer, nav, article, ol, ul, li, p, img, blockquote, form, button, input, label, h1, h2, h3, h4 ,h5, h6{position: relative; float: left; width: 100%; height: auto; display: block; -webkit-box-sizing:border-box; box-sizing:border-box; }
p{ margin-bottom: 1.2em; font-size: 1.3em; line-height: 1.2em; font-family:'TT Hoves Pro Regular', sans-serif;  }
p:last-child{margin-bottom: 0;}
p a, article ul li a{display: inline-block; position: relative; text-decoration: underline;}
.smaller{font-size: 0.85em;}
article img{margin-bottom: 1.3rem;}
article img:last-child{margin-bottom: 0rem;}

ul{margin-bottom: 1.2em;}
ul li{box-sizing: border-box; padding-left: 1.3rem; margin-bottom: 0.2em;  font-size: 1.3em; line-height: 1.2em; font-family:'TT Hoves Pro Regular', sans-serif; }
ul li::before{content: ""; position: absolute; width: 0.3em; height: 0.3em; left: 0; top:0.5em; line-height: 1.2em; font-size: inherit; border-radius:50%;  background-color: #2D2D2D; }
/* basics */
h1, h2, h3, h4, h5, h6{font-weight:400;  line-height: 1.15em; font-family: 'TT Hoves Pro Expanded Regular', sans-serif; letter-spacing: -0.05em;}
h1{ font-size:4em; line-height: 1em; margin-bottom: 0.9rem; }
h2{ font-size:2.5em; margin-bottom: 1.3rem; }
h3{ font-size:1.75em; margin-bottom: 2rem; }
h4{ font-size:1.75em; margin-bottom: 2rem; }
h5{ font-size:1.2em; margin-bottom: 2rem; }

blockquote{font-size: 2.9rem;line-height: 1.1em; letter-spacing: -0.03em;margin-bottom: 2rem; margin-top: 2rem;  color: #059BF1;}
blockquote p{font-size: 1em;}

.smalltitle{font-size: 1.5em; line-height: 1.15em; color: #059BF1; margin-bottom: 1.1rem;}

.floatr{position: relative; width:auto; float: right; display: block;}
.floatl{position: relative; width:auto; float: left; display: block;}

.noselect {
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/*/////////////// Basics ///////////////*/

.abso{position: absolute; top:0; left: 0; width:100%; height:100%;}
.middle{ position:absolute; left:50%; top: 50%; width: auto; -webkit-transform:translateY(-50%) translateX(-50%); -ms-transform:translateY(-50%) translateX(-50%); transform:translateY(-50%) translateX(-50%);}
.acenter{text-align: center;}
.aright{text-align: right;}

.b{}
.b15{width: 15%;}
.b20{width: 20%;}
.b25{width: 25%;}
.b75{width: 75%; }
.b30{width: 30%;}
.b70{width: 70%;}
.b60{width: 60%; }
.b35{width: 35%;}
.b40{width: 40%;}
.b41{width: 41.6666%;}
.b42{width: 42%;}
.b65{width: 65%; }
.b50{width: 50%;}
.b55{width: 55%;}
.b58{width: 58%;}
.b55{width: 55%;}
.b45{width: 45%;}
.b33{width: 33.33%;}
.b66{width: 66.66%;}
.b100{width: 100%;}



.widthlarge{float: none; margin: 0 auto; width: 100%; max-width: 116em; }
.widthmedium{float: none; margin: 0 auto; width: 100%; max-width:63em;  }
.widthmediumsmall{float: none; margin: 0 auto; width: 100%; max-width:48em;  }
.widthsmall{float: none; margin: 0 auto; width: 100%; max-width: 45.4em; }
.widthquitesmall{float: none; margin: 0 auto; width: 100%; max-width: 50em;  }
.widthextrasmall{float: none; margin: 0 auto; width: 100%; max-width: 40em;  }

.paddingr1{padding-right: 1em;}
.paddingr2{padding-right: 2em;}

.paddingx05{ padding-left: 0.5rem; padding-right: 0.5rem;}
.paddingx1{ padding-left: 1rem; padding-right: 1rem;}
.paddingx15{ padding-left: 1.5rem; padding-right: 1.5rem;}
.paddingx2{ padding-left: 2rem; padding-right: 2rem;}
.paddingx3{ padding-left: 3rem; padding-right: 3rem;}
.paddingx4{ padding-left: 4rem; padding-right: 4rem;}
.paddingx5{ padding-left: 5rem; padding-right: 5rem;}

.paddingy05{ padding-bottom: 0.5rem; padding-top: 0.5rem;}
.paddingy1{ padding-bottom: 1rem; padding-top: 1rem;}
.paddingy15{ padding-bottom: 1.5rem; padding-top: 1.5rem;}
.paddingy2{ padding-bottom: 2rem; padding-top: 2rem;}
.paddingy3{ padding-bottom: 3rem; padding-top:3rem;}
.paddingy4{ padding-bottom: 4rem; padding-top: 4rem;}
.paddingy5{ padding-bottom: 5rem; padding-top: 5rem;}

.paddingleft1{ padding-left: 1rem;}
.paddingright1{ padding-right: 1rem;}
.paddingleft2{ padding-left: 2rem;}
.paddingright2{ padding-right: 2rem;}

.paddingbottom1{ padding-bottom: 1rem;}
.paddingbottom15{ padding-bottom: 1.5rem;}
.paddingbottom2{ padding-bottom: 2rem;}
.paddingbottom3{ padding-bottom: 3rem;}
.paddingbottom4{ padding-bottom: 4rem;}
.paddingbottom5{ padding-bottom: 5rem;}
.paddingbottom6{ padding-bottom: 6rem;}
.paddingbottom7{ padding-bottom: 7rem;}
.paddingbottom8{ padding-bottom: 8rem;}

.paddingtop1{ padding-top: 1rem;}
.paddingtop15{ padding-top: 1.5rem;}
.paddingtop2{ padding-top: 2rem;}
.paddingtop3{ padding-top: 3rem;}
.paddingtop4{ padding-top: 4rem;}
.paddingtop5{ padding-top: 5rem;}
.paddingtop6{ padding-top: 6rem;}
.paddingtop7{ padding-top: 7rem;}
.paddingtop8{ padding-top: 8rem;}

.marginbottom05{margin-bottom: 0.5rem;}
.marginbottom1{margin-bottom: 1rem;}
.marginbottom15{margin-bottom: 1.5rem;}
.marginbottom2{margin-bottom: 2rem;}
.marginbottom3{margin-bottom: 3rem;}
.marginbottom4{margin-bottom: 4rem;}
.marginbottom5{margin-bottom: 5rem;}

.margintop05{margin-top: 0.5rem;}
.margintop1{margin-top: 1rem;}
.margintop15{margin-top: 1.5rem;}
.margintop2{margin-top: 2rem;}
.margintop3{margin-top: 3rem;}
.margintop4{margin-top: 4rem;}
.margintop5{margin-top: 5rem;}

.maxw1{max-width: 6rem;}
.maxw2{max-width: 18rem;}
.maxw3{max-width: 27rem;}
.maxw4{max-width: 32rem;}
.maxw5{max-width: 48rem;}
.maxw6{max-width: 58rem;}
.maxw7{max-width: 70rem;}
.maxw8{max-width: 80rem;}

.maxw20{max-width: 20em;}
.maxw30{max-width: 30em;}
.maxw36{max-width: 36em;}
.maxw50{max-width: 50em;}
.maxw55{max-width: 55em;}
.maxw60{max-width: 60em;}
.maxw65{max-width: 65em;}

.thumb{border-radius:0.3em; overflow: hidden;}
.thumb{border-radius:0em; overflow: hidden;}
.thumb img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}

.flex{display: flex; flex-flow: row wrap; align-items: stretch;}
.flex .slick-track{display: flex!important; flex-flow: row wrap; align-items: stretch;}
.flex .slick-slide
{
    height: inherit !important;
}
.flexreverse{display: flex; flex-flow: row-reverse wrap; align-items: stretch;}

.viceversa .b50{float: right;}
.viceversa.flex, .viceversa > .flex{display: flex; flex-flow: row-reverse wrap; align-items: stretch;}

.flexbottom{display: flex; flex-flow: row wrap; align-items: flex-end;}

.outermain{min-height: 1vh;}


.bigp p{font-size: 3rem; line-height: 1.07em; letter-spacing: -0.03em; text-wrap: pretty;}

.mediump p{font-size: 1.8rem; line-height: 1.07em; letter-spacing: -0.03em; text-wrap: pretty;}
.mediump + p{margin-top: 1.2em;}
.balance{text-wrap: pretty;}

.textbigger h2{font-size: 5rem;}

.btn{position: relative; display: inline-block; line-height: 1em; margin:0 1em 0.4em 0; font-size: 1.5em; color: #059BF1; font-family: 'TT Hoves Pro Expanded Regular', sans-serif; letter-spacing: -0.05em; text-decoration: none; transform: translateY(0.3em); opacity: 0; transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s; }

.btn.inview{ transform: translateY(0em); opacity: 1;}
.btn .arrow{ width:1em; top: 0.16em; margin-left: 0.1rem; white-space: nowrap; overflow: hidden; position: relative; line-height: 1em; display:inline-block; transform: translateX(-0.3em); opacity: 0; transition: opacity 0.4s ease 0.35s, transform 0.4s ease 0.35s;}
.btn .arrow span{position: relative; display:inline-block; line-height: 1em; transform: translateX(-100%); transition: transform 0.2s ease 0.1s;}
.btn.inview .arrow{ transform: translateX(0em); opacity: 1;}
.btn:last-child{margin-right: 0; margin-bottom:0; }
.btn .string{position: relative; display:inline-block; line-height: 1em;}

.no-touch .btn:hover .arrow span{ transform: translateX(0); transition: transform 0.2s ease 0.1s;}


.z-index{z-index: 98;}
.overflow{overflow: hidden;      /* maakt containing block voor fixed */}


.sticky{position:sticky; top:5em;}

.bgbeige{background-color: #F4F4F0;}

.bgblack{background-color: #2D2D2D; color: #fff;}
.bgwhite{background-color: #fff; }

.textblue{color: #059BF1;}

.borderradius{border-radius:0.3rem;}


/*/////////////// Slick ///////////////*/

.slickie-next{position: absolute; right: 1em; width: 2em; height: 2em; top:-2.8em; cursor: pointer;}
.slickie-next::after{content: "\e905"; font-family: "ruimterealisten"; font-size: 1.3em; line-height: 1em; color:inherit; opacity:1; float:right; }
.slick-disabled{opacity: 0.3; transition: opacity 0.3s ease;}
.slickie-prev{position: absolute; left:auto; right: 5.5em; width: 2em; height: 2em; top:-2.8em;  cursor: pointer;}
.slickie-prev::after{position: relative; display: inline-block; content: "\e904"; font-family: "ruimterealisten"; font-size: 1.3em; line-height: 1em; color:inherit; opacity:1; }


/*/////////////// Harmonica ///////////////*/

.harmonica{margin-top: 1rem; margin-bottom: 2.3rem;}
.harmonica:first-child{margin-top: 0;}
.harmonica:last-child{margin-bottom: 0;}
.harmonica-item{margin-bottom: 0.3rem; border-bottom: 1px solid #707070; padding-bottom: 1.2rem;}
.harmonica-title {cursor: pointer; font-size:3.45rem; font-family: 'TT Hoves Pro Expanded Regular', sans-serif; letter-spacing: -0.05em;  line-height: 1em; padding: 1.6rem 0 1rem 0; transition: color 0.5s ease 0.2s;  }
.harmonica-title::after{position: absolute; right: 0; margin-top: 0.1em; top: 50%; transform: translateY(-50%) rotate(0deg);  content: "\e906"; font-size: 0.6em; font-weight: 100; font-family: "ruimterealisten"; line-height: 1em; display: block;  width: 1em; height: 1em; transition: transform 0.2s ease 0.2s; transform-origin:50% 50%; }
.harmonica-title.active{color: #059BF1;transition: color 0.5s ease 0s}
.harmonica-title.active::after{ transform: translateY(-50%) rotate(-45deg); transition: transform 0.2s ease;}
.harmonica-content { display: none; padding: 1rem 0 2rem 0rem;}
.harmonica-content p{}


/*/////////////// Header ///////////////*/

.pusher{height: 12em; }
.pusher2{height: 25svh;}
header{position: fixed; top:0; z-index: 99; height: auto; background-color: #fff; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px);  user-select: none; opacity: 0; transition: opacity 0.3s ease, background 0.3s ease 0.5s, color 0.3s ease; }
.open header{ background: rgba(255, 255, 255, 0); color: #fff; transition: opacity 0.3s ease, background 0.3s ease 0s, color 0.3s ease 0.3s; }

.logo{position: relative; float: left; display: block; font-size: 2em; color: #059BF1; white-space: nowrap; vertical-align: middle; line-height:1em; width: auto; transition: color 0.3s ease, opacity 0.3s ease; transform-origin: top left;}
.logo .beeldmerk{ display:inline-block; float:none;  width:1.6em; height: 1.6em; margin-right:0.3em; top:0.2rem; }
/*.logo .beeldmerk::after{font-family: 'ruimterealisten'; content: "\e900"; font-size: 1.6em;line-height: 1em; display: none;}*/
.logo .beeldmerk .inner{position: absolute;width: 100%;height: 100%; left: 0; top: 0;}
.logo .beeldmerk span{position: absolute; background-color:#059BF1; border-radius:0.04em; }
.logo .beeldmerk span.b1{width: 34%; height: 34%; animation: beeldmerkb1 6s cubic-bezier(0.83, 0, 0.17, 1) 0s infinite; bottom:0; }
.logo .beeldmerk span.b2{width: 66%; height: 66%; animation: beeldmerkb2 6s cubic-bezier(0.83, 0, 0.17, 1) 0s infinite; right: 0;}
@keyframes beeldmerkb1 {
    0%  { width: 34%; height: 34%; }
    10% { width: 66%; height: 66%; }
    15% { width: 66%; height: 66%; }
    25% { width: 66%; height: 34%; }
    30% { width: 66%; height: 34%; }
    40% { width: 34%; height: 34%; }
    100%{ width: 34%; height: 34%; }
}
@keyframes beeldmerkb2 {
    0%  { width: 66%; height: 66%; }
    10% { width: 34%; height: 34%; }
    15% { width: 34%; height: 34%; }
    25% { width: 34%; height: 66%; }
    30% { width: 34%; height: 66%; }
    40% { width: 66%; height: 66%; }
    100%{ width: 66%; height: 66%; }
}

.logo .woordmerk{display:inline-block; float: none; }
.logo .woordmerk::after{font-family: 'ruimterealisten'; content: "\e901"; }
.logo .woordmerk span{position: relative; float: left; clear:both; opacity:0; transform:translateX(-3em); transition: all 0.5s ease; }
.open .logo{color: #fff; transition: color 0.3s ease 0.3s;}
.animate header{opacity: 1;}

.logo2{color: #059BF1!important; font-size: 3.6em;}
.oneliner{font-family: 'TT Hoves Pro Expanded Regular', sans-serif; letter-spacing: -0.04em; font-size: 2.3em; line-height: 0.86em; color: #059BF1!important; }
.oneliner2{font-size: 2.5em; color:#059BF1; margin-top: 0.98em;}
.oneliner2::after{font-family: 'ruimterealisten'; content: "\e902"; font-size: 1.6em;line-height: 1em;}
.oneliner3{font-size: 2.5em; color:#059BF1; margin-top: 0.98em; }
.oneliner3::after{font-family: 'ruimterealisten'; content: "\e903"; font-size: 1.6em;line-height: 1em;}
.hamburger{ position:absolute; cursor: pointer; color: inherit; font-size: 2.4em; height: 0.6em; width:1.3em; line-height:1em; user-select: auto; right:0; top:50%; transform: translateY(-50%); cursor:pointer; transition: opacity 0.3s ease; }
.hamburger:hover .streepjes{height: 60%;}
.hamburger .streepjes{position: absolute; width: 100%; height: 100%;  top:50%; transform: translateY(-50%); opacity: 1; transition: height 0.1s cubic-bezier(0.65, 0, 0.35, 1) 0s, opacity 0.3s ease;}
.hamburger .streepjes span{position: absolute; width: 100%; height: 4px; background-color: #049BF1; left: 0;}
.hamburger .streepjes span:first-child{top: 0;}
.hamburger .streepjes span:last-child{bottom: 0;}
.hamburger .sluit{position: absolute; right: 0.18em; top:-0.11em; width: auto; color: inherit; text-align: right; font-size: 1.5rem; line-height: 1em;opacity: 0; transition: opacity 0.3s ease;}
.open .hamburger .streepjes {opacity: 0;}
.open .hamburger .sluit {opacity: 1; transition: opacity 0.5s ease 0.4s;}

.navi{position: absolute; width: 100%; color: #fff;  overflow: hidden; top:0; opacity: 0; transform: translateY(-100%); z-index: 92; transition: transform 0s ease 0.6s, opacity 0.5s ease 0.1s; pointer-events:none;  }
.open .navi{opacity: 1; overflow: visible; pointer-events:auto; transform: translateY(0); transition: transform 0s ease, opacity 0.3s ease 0.2s; }
.navi .b50{max-width: 35em;}

.navi .inner{position: relative; margin-top:0em; min-height: 100svh; padding-bottom:12em }
.navi .mainnav a{position: relative; display: block; color: inherit; float: left; transform: translateX(-5em); opacity: 0; margin-bottom: 0.4em; width: 100%; box-sizing: border-box; line-height: 1.15em;  transition: transform 0.3s ease 0.4s, opacity 0.3s ease; }

.open .navi .mainnav a:nth-child(0){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.50s, transform 0.5s ease 0.50s;}
.open .navi .mainnav a:nth-child(1){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.55s, transform 0.5s ease 0.53s;}
.open .navi .mainnav a:nth-child(2){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.60s, transform 0.5s ease 0.56s;}
.open .navi .mainnav a:nth-child(3){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.65s, transform 0.5s ease 0.59s;}
.open .navi .mainnav a:nth-child(4){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.70s, transform 0.5s ease 0.62s;}
.open .navi .mainnav a:nth-child(5){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.75s, transform 0.5s ease 0.65s;}
.open .navi .mainnav a:nth-child(6){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.80s, transform 0.5s ease 0.68s;}
.open .navi .mainnav a:nth-child(7){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.85s, transform 0.5s ease 0.71s;}
.open .navi .mainnav a:nth-child(8){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.90s, transform 0.5s ease 0.74s;}
.open .navi .mainnav a:nth-child(9){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.95s, transform 0.5s ease 0.77s;}

.navi .subnav{pointer-events: none;}
.open2 .navi .subnav{pointer-events: auto;}
.navi .subnav a{position: relative; display: block; color: inherit; float: left; transform: translateX(-4em); opacity: 0; margin-bottom: 0.4em; width: 100%; box-sizing: border-box; line-height: 1.15em;  transition: transform 0.3s ease 0.4s, opacity 0.3s ease; }

.open2 .navi .subnav a:nth-child(0){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.0s, transform 0.5s ease 0.0s;}
.open2 .navi .subnav a:nth-child(1){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.05s, transform 0.5s ease 0.03s;}
.open2 .navi .subnav a:nth-child(2){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.10s, transform 0.5s ease 0.06s;}
.open2 .navi .subnav a:nth-child(3){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.09s;}
.open2 .navi .subnav a:nth-child(4){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.20s, transform 0.5s ease 0.12s;}
.open2 .navi .subnav a:nth-child(5){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.25s, transform 0.5s ease 0.15s;}
.open2 .navi .subnav a:nth-child(6){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.30s, transform 0.5s ease 0.18s;}
.open2 .navi .subnav a:nth-child(7){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.35s, transform 0.5s ease 0.21s;}
.open2 .navi .subnav a:nth-child(8){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.40s, transform 0.5s ease 0.24s;}
.open2 .navi .subnav a:nth-child(9){opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.45s, transform 0.5s ease 0.27s;}

.navi .mainnav a .inner2 span::after{font-size: 0.55em; line-height: 1em; font-family: 'ruimterealisten' !important; content: "\e905"; width: 1.8em; height: 1.2em;  position: absolute; right: -2.6em; top:50%; margin-top: 0.2em; transform: translate(-0.5em, -50%); display: block; margin-left:0.5rem; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }
.navi .mainnav a .inner2 span{line-height:1.15em; color: inherit; font-size: 3em; white-space: nowrap; font-family: 'TT Hoves Pro Expanded Regular', sans-serif; letter-spacing: -0.04em; transition: color 0.2s ease 0s; position: relative; display: inline-block;}
.no-touch .navi .mainnav a:hover .inner2 span, .open2 .navi .mainnav a.active .inner2 span{color:#059BF1;transition: color 0.3s ease 0s;}
.no-touch .navi .mainnav a:hover .inner2 span::after, .open2 .navi .mainnav a.active .inner2 span::after{opacity: 1; transform: translate(0, -50%);}

.navi .mainnav a.active2 .inner2 span{color:#059BF1;transition: color 0.3s ease 0s;}

.navi .subnav a .inner2 span::after{font-size: 0.55em; line-height: 1em; font-family: 'ruimterealisten' !important; content: "\e905"; width: 1.8em; height: 1.2em;  position: absolute; right: -2.6em; top:50%; margin-top: 0.2em; transform: translate(-0.5em, -50%); display: block; margin-left:0.5rem; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }
.navi .subnav a .inner2 span{line-height:1.15em; color: inherit; font-size: 3em;  white-space: nowrap; font-family: 'TT Hoves Pro Expanded Regular', sans-serif; letter-spacing: -0.04em; transition: color 0.2s ease 0s; position: relative; display: inline-block;}
.no-touch .navi .subnav a:hover .inner2 span{color:#059BF1;transition: color 0.3s ease 0s;}
.no-touch .navi .subnav a:hover .inner2 span::after{opacity: 1; transform: translate(0, -50%);}

.navi .bottominfo{
  position: absolute; /* Default relative positioning */
  bottom: 0em; /* Plaatst het element aan de onderkant */
  height: 12em;
  opacity:0;
  transform:translateY(100%);
  transition: all 0s ease 0.0s;
}

.navi .bottominfo .logo2{top: 2.9rem;}
.navi .bottominfo .oneliner{top: 5.1rem;}
.open .navi .bottominfo{opacity:1; transform:translateY(0); transition: all 0.4s ease 0.7s;}

/*/////////////// Video ///////////////*/

.video {
  position: relative;
  overflow: hidden;
   padding-bottom: 56.25%;
}

.video .videoWrapper {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
 
}

.video .videoWrapper iframe {
  position: absolute;
  top: 50%;
  left: 50%;
min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover; /* in case you switch to <video> later */
  transform: translate(-50%, -50%);
  pointer-events: none; /* Makes it unclickable unless controlled by overlay */
}

/* --- Custom play button overlay --- */
.video #playPauseOverlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  cursor: pointer;
}

.video .playButton {
  display: none;
}
.video .playButton {
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  z-index: 11;
  background-size: cover;
}

.video .playButton.hidden {
  display: none;
}

.video #playIcon {
  width: 0;
  height: 0;
  border-left: 2em solid transparent;
  border-right: 2em solid transparent;
  border-bottom: 3.2em solid #EFEFE7;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  box-shadow: 0px 6px 15px -15px rgba(0,0,0,0.20);
  cursor: pointer;
}

#vimeoPlayer {
  opacity: 0;
  transition: opacity 1.2s ease 0s;
}

#vimeoPlayer.visible {
  opacity: 1;
}


/*/////////////// Blocks ///////////////*/

.blockintrotext span{opacity: 0; position: relative; display: inline-block; transform: translateX(-1.8em); transition: opacity 0.5s ease, transform 0.5s ease; position: relative; float: left; clear: both;}
.animate .blockintrotext .inview span:nth-child(1){opacity:1; transform: translateX(0em); transition: opacity 1.2s ease 0.1s, transform 0.5s ease 0.1s; }
.animate .blockintrotext .inview span:nth-child(2){opacity:1; transform: translateX(0em); transition: opacity 1.2s ease 0.15s, transform 0.5s ease 0.13s; }

.kennisgebieden{width: calc(100% + 2em); left: -1em;}
.kennisgebieden .slick-track .slick-slide{ display: flex; align-items: stretch;}
.kennisgebieden .slick-track .slick-slide > div{ display: flex; align-items: stretch;}
.kennisgebieden .kennisitem{width: 33.33%; padding:0 1em 2em; display: flex; align-items: stretch;}
.kennisgebieden .kennisitem .arrow{position: absolute; right: 0; bottom: 0; width: 12%; height: 10.6%;transform: translateX(-2em);  opacity: 0; z-index: 2; transition: opacity 0.3s ease, transform 0.3s ease;}
.kennisgebieden .kennisitem .arrow::after{position: absolute; left:0; top:50%; transform: translateY(-50%); width: 100%; text-align: center; line-height:1em;  height: 1em; color: #fff; font-family: "ruimterealisten"; content: "\e905";}
.no-touch .kennisgebieden .kennisitem:hover .arrow{ opacity:1; transform: translateY(0); }
.kennisgebieden .kennisitem a{position: relative; float: left; width: 100%; display: block; min-height: 100%; display: flex; align-items: stretch; }
.kennisgebieden .kennisitem .inner{position: relative; float: left; width: 100%; display: block; min-height: 100%; display: flex; align-items: stretch; }
.kennisgebieden .kennisitem .inner2{position: relative; float: left; width: 100%; display: block; min-height: 100%; }

.kennisgebieden .kennisitem .category{font-size:1.1em; line-height: 1em; margin-bottom: 1.5rem;}
.kennisgebieden .kennisitem .title{font-size:2em; line-height: 1em; margin-bottom: 1.5rem; z-index: 2; text-wrap: balance;}
.kennisgebieden .kennisitem .title span{text-wrap: balance;}
.kennisgebieden .kennisitem .pusherspace{ padding-bottom: 60%; height: 0;}
.kennisgebieden .kennisitem .motionblocks{ position: absolute; padding-bottom: 60%; height: 0; bottom: 0;} /* padding-bottom: 110%; */
.kennisgebieden .kennisitem .motionblocks span{position: absolute; background-color:#059BF1; border-radius:0.23em }
.kennisgebieden .kennisitem .motionblocks span.b1{left:0; top:0; bottom: auto; right: auto; width: 50%; height: 50%;}
.kennisgebieden .kennisitem .motionblocks span.b2{left:auto; top:auto; bottom: 0; right: 0; width: 50%; height: 50%;}

.kennisgebieden .kennisitem #m1.motionblocks span.b1{width: 88%; height: 80%; animation: motion1b1 8s cubic-bezier(0.83, 0, 0.17, 1) 2.66s infinite;}
.kennisgebieden .kennisitem #m1.motionblocks span.b2{width: 12%; height: 20%; animation: motion1b2 8s cubic-bezier(0.83, 0, 0.17, 1) 2.66s infinite;}

.kennisgebieden .kennisitem #m2.motionblocks span.b1{width: 30%; height: 40%; animation: motion2b1 8s cubic-bezier(0.83, 0, 0.17, 1) 5.33s infinite;}
.kennisgebieden .kennisitem #m2.motionblocks span.b2{width: 70%; height: 60%; animation: motion2b2 8s cubic-bezier(0.83, 0, 0.17, 1) 5.33s infinite;}

.kennisgebieden .kennisitem #m3.motionblocks span.b1{width: 50%; height: 30%; animation: motion3b1 8s cubic-bezier(0.83, 0, 0.17, 1) 0s infinite; left: auto; right: 0;}
.kennisgebieden .kennisitem #m3.motionblocks span.b2{width: 50%; height: 70%; animation: motion3b2 8s cubic-bezier(0.83, 0, 0.17, 1) 0s infinite; left: 0; right: auto;}

.kennisgebieden .kennisitem #m6.motionblocks span.b1{width: 12%; height: 20%; animation: motion4b1 8s cubic-bezier(0.83, 0, 0.17, 1) 2.66s infinite;}
.kennisgebieden .kennisitem #m6.motionblocks span.b2{width: 88%; height: 80%; animation: motion4b2 8s cubic-bezier(0.83, 0, 0.17, 1) 2.66s infinite;}

.kennisgebieden .kennisitem #m4.motionblocks span.b1{width: 70%; height: 60%; animation: motion5b1 8s cubic-bezier(0.83, 0, 0.17, 1) 5.33s infinite; }
.kennisgebieden .kennisitem #m4.motionblocks span.b2{width: 30%; height: 40%; animation: motion5b2 8s cubic-bezier(0.83, 0, 0.17, 1) 5.33s infinite; }

.kennisgebieden .kennisitem #m5.motionblocks span.b1{width: 50%; height: 70%; animation: motion6b1 8s cubic-bezier(0.83, 0, 0.17, 1) 0s infinite; left: auto; right: 0;}
.kennisgebieden .kennisitem #m5.motionblocks span.b2{width: 50%; height: 30%; animation: motion6b2 8s cubic-bezier(0.83, 0, 0.17, 1) 0s infinite; left: 0; right: auto;}

.kennisgebieden .kennisitem #m8.motionblocks span.b1{width: 88%; height: 80%; animation: motion7b1 8s cubic-bezier(0.83, 0, 0.17, 1) 2.66s infinite; left: auto; right: 0;}
.kennisgebieden .kennisitem #m8.motionblocks span.b2{width: 12%; height: 20%; animation: motion7b2 8s cubic-bezier(0.83, 0, 0.17, 1) 2.66s infinite; left: 0; right: auto; }

.kennisgebieden .kennisitem #m7.motionblocks span.b1{width: 30%; height: 40%; animation: motion8b1 8s cubic-bezier(0.83, 0, 0.17, 1) 5.33s infinite; left: auto; right: 0;}
.kennisgebieden .kennisitem #m7.motionblocks span.b2{width: 70%; height: 60%; animation: motion8b2 8s cubic-bezier(0.83, 0, 0.17, 1) 5.33s infinite; left: 0; right: auto;}

.kennisgebieden .kennisitem #m9.motionblocks span.b1{width: 50%; height: 30%; animation: motion9b1 8s cubic-bezier(0.83, 0, 0.17, 1) 0s infinite; left: 0; right: auto;}
.kennisgebieden .kennisitem #m9.motionblocks span.b2{width: 50%; height: 70%; animation: motion9b2 8s cubic-bezier(0.83, 0, 0.17, 1) 0s infinite; left: auto; right: 0;}



@keyframes motion1b1 {
    0% { width: 88%; height: 80%; }
    10% { width: 12%; height: 20%; }
     50% { width: 12%; height: 20%; }
    60% { width: 88%; height: 80%; }
    100% { width: 88%; height: 80%; }
}
@keyframes motion1b2 {
    0% { width: 12%; height: 20%; }
    10% { width: 88%; height: 80%; }
    50% { width: 88%; height: 80%; }
    60% { width: 12%; height: 20%; }
    100% { width: 12%; height: 20%; }
}

@keyframes motion2b1 {
    0% { width: 30%; height: 40%; }
    10% { width: 70%; height: 40%; }
     50% { width: 70%; height: 40%; }
    60% { width: 30%; height: 40%; }
    100% { width: 30%; height: 40%; }
}
@keyframes motion2b2 {
    0% { width: 70%; height: 60%; }
    10% { width: 30%; height: 60%; }
    50% { width: 30%; height: 60%; }
    60% { width: 70%; height: 60%; }
    100% { width: 70%; height: 60%; }
}

@keyframes motion3b1 {
    0% { width: 50%; height: 30%; }
    10% { width: 50%; height: 70%; }
    50% { width: 50%; height: 70%; }
    60% { width: 50%; height: 30%; }
    100% { width: 50%; height: 30%; }
}
@keyframes motion3b2 {
    0% { width: 50%; height: 70%; }
    10% { width: 50%; height: 30%; }
    50% { width: 50%; height: 30%; }
    60% { width: 50%; height: 70%; }
    100% { width: 50%; height: 70%; }
}

@keyframes motion4b1 {
    0% { width: 12%; height: 20%; }
    10% { width: 88%; height: 80%; }
    50% { width: 88%; height: 80%; }
    60% { width: 12%; height: 20%; }
    100% { width: 12%; height: 20%; }
}
@keyframes motion4b2 {
    0% { width: 88%; height: 80%; }
    10% { width: 12%; height: 20%; }
     50% { width: 12%; height: 20%; }
    60% { width: 88%; height: 80%; }
    100% { width: 88%; height: 80%; }
}

@keyframes motion5b1 {
    0%   { width: 70%; height: 60%; }
    10%  { width: 30%; height: 60%; }
    50%  { width: 30%; height: 60%; }
    60%  { width: 70%; height: 60%; }
    100% { width: 70%; height: 60%; }
}

@keyframes motion5b2 {
    0%   { width: 30%; height: 40%; }
    10%  { width: 70%; height: 40%; }
    50%  { width: 70%; height: 40%; }
    60%  { width: 30%; height: 40%; }
    100% { width: 30%; height: 40%; }
}

@keyframes motion6b1 {
    0% { width: 50%; height: 70%; }
    10% { width: 50%; height: 30%; }
    50% { width: 50%; height: 30%; }
    60% { width: 50%; height: 70%; }
    100% { width: 50%; height: 70%; }
}

@keyframes motion6b2 {
    0% { width: 50%; height: 30%; }
    10% { width: 50%; height: 70%; }
    50% { width: 50%; height: 70%; }
    60% { width: 50%; height: 30%; }
    100% { width: 50%; height: 30%; }
}

@keyframes motion7b1 {
    0% { width: 88%; height: 80%; }
    10% { width: 12%; height: 20%; }
     50% { width: 12%; height: 20%; }
    60% { width: 88%; height: 80%; }
    100% { width: 88%; height: 80%; }
}
@keyframes motion7b2 {
    0% { width: 12%; height: 20%; }
    10% { width: 88%; height: 80%; }
    50% { width: 88%; height: 80%; }
    60% { width: 12%; height: 20%; }
    100% { width: 12%; height: 20%; }
}

@keyframes motion8b1 {
    0% { width: 30%; height: 40%; }
    10% { width: 70%; height: 40%; }
     50% { width: 70%; height: 40%; }
    60% { width: 30%; height: 40%; }
    100% { width: 30%; height: 40%; }
}
@keyframes motion8b2 {
    0% { width: 70%; height: 60%; }
    10% { width: 30%; height: 60%; }
    50% { width: 30%; height: 60%; }
    60% { width: 70%; height: 60%; }
    100% { width: 70%; height: 60%; }
}

@keyframes motion9b1 {
    0% { width: 50%; height: 30%; }
    10% { width: 50%; height: 70%; }
    50% { width: 50%; height: 70%; }
    60% { width: 50%; height: 30%; }
    100% { width: 50%; height: 30%; }
}
@keyframes motion9b2 {
    0% { width: 50%; height: 70%; }
    10% { width: 50%; height: 30%; }
    50% { width: 50%; height: 30%; }
    60% { width: 50%; height: 70%; }
    100% { width: 50%; height: 70%; }
}

.cases{width: calc(100% + 2em); left: -1em;}
.cases .caseitem{width: 20%; padding:0 1em 2em; display: flex; align-items: stretch; transition: width 0.5s ease;}
.cases .caseitem .thumb{padding-bottom: 100%; transition: padding 0.3s ease; z-index: 2; border-radius: 0.3em;}
.cases .caseitem .title{font-size: 2.4em; line-height: 1em; opacity: 0; margin-top: 1rem; transform: translateY(-1.4em); letter-spacing: -0.03em; transition: opacity 0s ease 0s, transform 0s ease 0.5s;}
.cases .caseitem .title span{text-wrap: pretty;}
.cases .slick-slide{ transition: width 0.3s ease, opacity 0.4s; opacity: 1;}
.cases .slick-current{width: 59em!important;}
.cases .slick-current .caseitem .thumb{padding-bottom: 70%; transition: padding 0.3s ease;}
.cases .slick-current .title{opacity: 1; transform: translateY(0);  transition: opacity 0.4s ease 0.52s, transform 0.4s ease 0.52s;}
.cases .lastcase{height: 0;}

.team{width: calc(100% + 2em); left: -1em;}
.team .slick-track .slick-slide{ display: flex; align-items: stretch;}
.team .slick-track .slick-slide > div{ display: flex; align-items: stretch;}
.team .teamitem{width: 25%; padding:0 1em 2em; display: flex; align-items: stretch; }
.team .teamitem .thumb{padding-bottom: 140%; transition: padding 0.3s ease; z-index: 2;}
.team .teamitem a{position: relative; float: left; width: 100%;}
.team .teamitem a .title{margin-top: 1.15em;}

.blockphototext .thumb{ aspect-ratio: 1/1;  max-height:38em; }
.blockphototext .flex .inner2{height: 100%;}
.blockphototext .flex article{height: 100%;}
.blockphototext .floatcontainer{
  padding-bottom: 3em; box-sizing: border-box;
}

.floatbottom {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3em; /* 👈 Match this with container’s padding-bottom */
}

.floatbottom p:last-child{margin-bottom: 0;}


.blockkennisgebieden nav a .inner2 span::after{font-size: 0.55em; line-height: 1em; font-family: 'ruimterealisten' !important; content: "\e905"; width: 1.8em; height: 1.2em;  position: absolute; right: -2.6em; top:50%; margin-top: 0.2em; transform: translate(-0.5em, -50%); display: block; margin-left:0.5rem; opacity: 1; transition: transform 0.3s ease, opacity 0.3s ease; }
.blockkennisgebieden nav a .inner2 span{line-height:1.15em; color: inherit; font-size: 5em; font-family: 'TT Hoves Pro Expanded Regular', sans-serif; letter-spacing: -0.04em; transition: color 0.2s ease 0s; position: relative; display: inline-block;}
.no-touch .blockkennisgebieden nav a:hover .inner2 span{color:#059BF1;transition: color 0.3s ease 0s;}
.no-touch .blockkennisgebieden nav a:hover .inner2 span::after{opacity: 1; transform: translate(0, -50%);}
.blockkennisgebieden nav a { position: relative; display: block; color: inherit; float: left; clear: both; margin-bottom: 0.4em;}

.blockopdrachtgevers .rijtje{width: 25%; min-width: 20em; margin-bottom: 2.2em}
.blockopdrachtgevers .rijtje a{text-decoration: none;}

.blockfeatures .feature .c1{width: 30em;}
.blockfeatures .feature .c2{width: calc(100% - 30em);}
.blockfeatures .feature .title{font-size: 1.5em; color: #059BF1;}
.blockfeatures .feature:last-child{margin-bottom: 0;}

.blockgerelateerd{}
.blockgerelateerd .gerelateerditem .c1{width: 20em; }
.blockgerelateerd .gerelateerditem .c2{width: calc(100% - 20em); }
.blockgerelateerd .gerelateerditem .thumb{padding-bottom: 100%; transition: padding 0.3s ease; z-index: 2; border-radius: 0.3em;}
.blockgerelateerd .gerelateerditem .text{padding-left: 2em;}
.blockgerelateerd .gerelateerditem .text .title{font-size: 3rem; line-height: 1.01em;}

.blockopsomming {  counter-reset: item; /* start teller */}
.blockopsomming .opsommingitem .nr::before {counter-increment: item; /* +1 per item */ content: counter(item, decimal-leading-zero); /* ← magisch! */ display: inline-block; font-size: 1.5rem; width: auto; height: 1em; line-height: 1em; text-align: left; font-family: 'TT Hoves Pro Expanded Regular', sans-serif; letter-spacing: -0.04em;  }

.blockopsomming .opsommingitem .title{font-size: 5rem; line-height: 0.9em;letter-spacing: -0.03em; margin-top: 0.7rem; margin-bottom: 1.6rem; text-wrap: balance;}

.blockcases .caseitem2 .info{margin-bottom: 1rem;}
.blockcases .caseitem2 .category span{position: relative; display: block; float: left; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.blockcases .caseitem2 .c1{width: 20em; }
.blockcases .caseitem2 .c2{width: calc(100% - 20em); }
.blockcases .caseitem2 .thumb{padding-bottom: 100%; transition: padding 0.3s ease; z-index: 2; border-radius: 0.3em;}
.blockcases .caseitem2 .text{padding-left: 2em;}
.blockcases .caseitem2 .text .title{font-size: 3rem; line-height: 1.01em; box-sizing: border-box; padding-right: 1rem;}

.black .pusher{background-color:#2D2D2D; }
.black header{ background:#2D2D2D; color: #fff; backdrop-filter: blur(0px); transition: opacity 0.5s ease 0.8s, background 0s ease 0s, color 0.3s ease 0s; }
.animate.black header{ }
.black header .logo{color: #fff;}
.black header .hamburger .streepjes span{background-color: #fff;}

.grey .pusher{background-color:#F4F4F0; }

.grey header{ background:#F4F4F0; color: #2D2D2D; backdrop-filter: blur(0px); transition: opacity 0.5s ease 0.8s, background 0s ease 0s, color 0.3s ease 0s; }
.animate.grey header{ }
.grey header .logo{color: #2D2D2D;}
.grey header .hamburger .streepjes span{background-color: #2D2D2D;}

.w1{width: 30em; }
.w2{width: calc(100% - 30em); }

.introsingle h1{margin-bottom: 0; font-size: 3em;}

.blocktwoface h2{font-size: 1.3rem;}
.blocktwoface h3{font-size: 1.3rem; margin-bottom: 0;}
.blockintrotext .intro .photo{position: absolute; min}

.introsingleteam .b50.photo{width: calc(50% - 2em); margin-top: -7.7em;}
.introsingleteam .b50.photo .inner{max-width:45em;}
.introsingleteam  .thumb{height: calc(100svh - 6em); min-height:40em;}
.introsingleteam .text{margin-top: 50em; transition: margin-top 0.6s ease;}

.infoteam a{text-decoration: none;}
.single-team h1{font-size: 5em;}

/*/////////////// footer ///////////////*/


footer{background-color: #2D2D2D; z-index: 2; color:#fff; min-height:5em; }
footer .logofooter{}
footer .column{width: 20rem;}
footer .oneliner2, footer .oneliner2{width: auto; }

footer a{position: relative; float: left; clear: both;  display: block; text-decoration: none;}
footer .b25{margin-bottom: 2em;}


/*/////////////// Animatie triggers ///////////////*/


.intro.viewport > h2{opacity: 0; transform: translateY(-5px); transition: opacity 1s ease 1s, transform 0.5s ease 1s;}
.intro.inview > h2{opacity: 1; transform: translateY(0); }
.intro.viewport p{opacity: 0; transform: translateY(-5px); transition: opacity 1s ease 0.5s, transform 0.5s ease 0.5s;}
.intro.inview p{opacity: 1; transform: translateY(0); }
.intro.viewport > nav{opacity: 0; transform: translateY(-5px); transition: opacity 1s ease 0.8s, transform 0.5s ease 0.8s;}
.intro.inview > nav{opacity: 1; transform: translateY(0); }

.team.viewport{opacity: 0; transform: translateY(-5px); transition: opacity 1s ease 0.8s, transform 0.5s ease 0.8s;}
.team.inview{opacity: 1; transform: translateY(0); }


.video.viewport{opacity: 0; transform: translateY(-5px); transition: opacity 1s ease 0.8s, transform 0.5s ease 0.8s;}
.video.inview{opacity: 1; transform: translateY(0); }

.slider.viewport > div{opacity: 0; transform: translateY(-5px); transition: opacity 1s ease 0.5s, transform 0.5s ease 0.5s;}
.slider.inview > div{opacity: 1; transform: translateY(0); }

.blockphototext .bigp.viewport{opacity: 0; transform: translateY(-5px); transition: opacity 1s ease 0.8s, transform 0.5s ease 0.8s;}
.blockphototext .bigp.inview{opacity: 1; transform: translateY(0); }

.blockopdrachtgevers .viewport p{opacity: 0; transform: translateY(-5px); transition: opacity 1s ease 0.8s, transform 0.5s ease 0.8s;}
.blockopdrachtgevers .inview p{opacity: 1; transform: translateY(0); }

.blockphototext .thumb.viewport{opacity: 0; transform: translateY(-5px); transition: opacity 1s ease 1.2s, transform 0.5s ease 1.2s;}
.blockphototext .thumb.inview{opacity: 1; transform: translateY(0); }

.blockfeatures .viewport > .c1{opacity: 0; transform: translateY(-5px); transition: opacity 1s ease 0.5s, transform 0.5s ease 0.5s;}
.blockfeatures .inview > .c1{opacity: 1; transform: translateY(0); }

.blockfeatures .viewport > .c2{opacity: 0; transform: translateY(-5px); transition: opacity 1s ease 0.8s, transform 0.8s ease 0.8s;}
.blockfeatures .inview > .c2{opacity: 1; transform: translateY(0); }

.blockintrotext .viewport

.gerelateerditem.viewport{opacity: 0; transform: translateY(-5px); transition: opacity 1s ease 0.8s, transform 0.5s ease 0.8s;}
.gerelateerditem.inview{opacity: 1; transform: translateY(0); }

.opsommingitem.viewport{opacity: 0; transform: translateY(-5px); transition: opacity 1s ease 0.8s, transform 0.5s ease 0.8s;}
.opsommingitem.inview{opacity: 1; transform: translateY(0); }

.blockfoto .viewport{opacity: 0; transform: translateY(-5px); transition: opacity 1s ease 0.8s, transform 0.5s ease 0.8s;}
.blockfoto .inview{opacity: 1; transform: translateY(0); }

.harmonica-item.viewport{opacity: 0; transform: translateY(-5px); transition: opacity 1s ease 0.8s, transform 0.5s ease 0.8s;}
.harmonica-item.inview{opacity: 1; transform: translateY(0); }

.caseitem2.viewport{opacity: 0; transform: translateY(-5px); transition: opacity 1s ease 1s, transform 0.5s ease 1s;}
.caseitem2.inview{opacity: 1; transform: translateY(0); }

footer.viewport > div{opacity: 0; transform: translateY(-5px); transition: opacity 1s ease 0.5s, transform 0.5s ease 0.5s;}
footer.inview > div{opacity: 1; transform: translateY(0); }

.w1.viewport{opacity: 0; transform: translateY(-5px); transition: opacity 1s ease 0.8s, transform 0.5s ease 0.8s;}
.w1.inview{opacity: 1; transform: translateY(0); }

.w2.viewport{opacity: 0; transform: translateY(-5px); transition: opacity 1s ease 1s, transform 0.5s ease 1s;}
.w2.inview{opacity: 1; transform: translateY(0); }

/*/////////////// Media Queries ///////////////*/



@media screen and (min-width: 1700px) {

  .kennisgebieden .kennisitem .title{font-size: 2.2em;}

}

@media screen and (min-width: 2300px) {

  .kennisgebieden .kennisitem .title{font-size: 2.4em;}
  
}

@media screen and (max-width: 2400px) {
  
   html{font-size: 19px;}

}

@media screen and (max-width: 2300px) {
  
  .kennisgebieden.slick-slider .slick-list{overflow: visible;}
  .cases.slick-slider .slick-list{overflow: visible;}
  .team.slick-slider .slick-list{overflow: visible;}

}

@media screen and (max-width: 2000px) {
  
   .pusher{height: 10em;}
   .introsingleteam .b50.photo{margin-top: -5.8em;}
   html{font-size: 18px;}

}

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

  html{font-size: 17px;}

}

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

  html{font-size: 16px;}

}

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

  .pusher{height: 8em;}
  .introsingleteam .b50.photo{margin-top: -3.8em;}
  .navi .mainnav a .inner2 span{line-height:1.15em; font-size: 2.8em;}
  .navi .subnav a .inner2 span{line-height:1.15em; font-size: 2.8em;}
  .cases .slick-current{width: 40em!important;}
}

@media screen and (max-width: 1480px) {
  
  h1{font-size:3.5em;}
  .single-team h1{font-size: 3.8em;}
  .bigp p{font-size:2.4em}
  .harmonica-title{font-size: 3.2em;}

}

@media screen and (max-width: 1300px) {
  
  .kennisgebieden .kennisitem .title{font-size: 1.6em;}
  .blockkennisgebieden nav a .inner2 span{font-size: 4em;}
  .team .teamitem{width: 25%; }
  .blockfeatures .feature .c1{width: 35%;}
  .blockfeatures .feature .c2{width: 65%;}
  .w1{width: 35%;}
  .w2{width: 65%;}

}

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

  .open2 .navi .mainnav{display: none;}
  .navi .mainnav a{transform: translateX(3em); }
  .navi .subnav a{transform: translateX(3em); }
  .navi .navigaties .b40, .navi .navigaties .b60{width: 100%;}
  .navi .navigaties .b60{height: 0;}
  .open2 .navi .navigaties .b60{}  
  .kennisgebieden .kennisitem .inner{padding-left: 1em; padding-right: 1em; padding-top: 1em; padding-bottom: 1em;}
  .navi .bottominfo{height: 10.7em;}

}

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

  h1{font-size:3em;}
  .single-team h1{font-size: 3em;}
  .introsingle h1{font-size: 2.8em;}
  footer .column{width: 16rem;}
  .logofooter{font-size: 0.9em;}
  .team .teamitem{width: 33%; }
  .textbigger h2{font-size: 3em;}
  .infoteam .floatr{width: 100%;}
  blockquote{font-size: 2.6em}
  .harmonica-title{font-size: 2.8em;}

}

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

  .navi .bottominfo .b60, .navi .bottominfo .b40{width: 50%;}
  .blockkennisgebieden nav a .inner2 span{font-size: 3em;} 
  .blockgerelateerd .gerelateerditem .text .title{font-size: 2.6em}
  .blockcases .caseitem2 .text .title{font-size: 2.6em}
  .w1{width: 100%; }
  .w2{width: 100%; }
  .introsingle .w1{ margin-bottom: 4rem}
  .introsingle .w2{ margin-bottom: 0rem;}
  .blockopsomming .opsommingitem .title{font-size: 4rem;}

}

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

  .blockphototext .b50{width: 100%;  margin-bottom: 2rem;}
  .floatbottom{position: relative; float: left; bottom: auto; height: auto; margin-top: 2rem;}
  footer .logofooter{font-size: 0.8em;}
  footer .b25:nth-child(1){width: 26%;}
  footer .b25:nth-child(3){width: 37%;}
  footer .b25:nth-child(4){width: 37%;}
  .kennisgebieden .kennisitem .title span br{display: none;}
  footer .column{width: 15rem;}
  .blockintrotext .intro .photo{position: relative; margin-bottom:3.6em; }
  .blockintrotext .intro .photo .paddingr2{padding-right: 0;}
  .blockintrotext .intro .b50{width: 100%;}
  .harmonica-title{font-size: 2.6em;}

}

@media screen and (max-width: 800px) {
    
  html{font-size: 15px;}
  h1{font-size:2.6em;}
  .single-team h1{font-size: 2.6em;}
   .introsingle h1{font-size: 2.6em;}
  .textbigger h2{font-size: 2.6em;}
  .slickie-next{top: auto; bottom: -1.5em;}
  .slickie-prev{top: auto; bottom: -1.5em;}
  .hamburger .streepjes{height: 60%;}
  .hamburger .streepjes span{height: 2px;}
  .blockfeatures .feature .c1{width: 100%;}
  .blockfeatures .feature .c2{width: 100%;}
  .blockgerelateerd .gerelateerditem .c1{width: 15em;}
  .blockgerelateerd .gerelateerditem .c2{width: calc(100% - 15em);}
  .blockcases .caseitem2 .c1{width: 15em;}
  .blockcases .caseitem2 .c2{width: calc(100% - 15em);}
  footer .floatr{width: 100%;}
  footer .column{width: 50%;}
  .logofooter .floatl{margin-top: 0rem; width:100%; }
  footer .logo2{font-size: 5em; margin-bottom: 1rem; width: 100%;}
  footer .logo2 .beeldmerk{width: calc(50% - 1.8rem);}
  footer  .logo .beeldmerk .inner{width: 1.6em;}
  blockquote{font-size: 2.4em}
  .harmonica-title{font-size: 2.4em;}
  .harmonica-title::after{font-size: 0.8em;}

}

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

  .kennisgebieden {width: calc(100% + 1em);left: -0.5em;}
  .kennisgebieden .kennisitem{padding: 0 0.5em 2em;}
  .team {width: calc(100% + 1em);left: -0.5em;}
  .team .teamitem{padding: 0 0.5em 2em;}
  .cases {width: calc(100% + 1em);left: -0.5em;}
  .cases .caseitem{padding: 0 0.5em 2em;}
  .cases .slick-current{width:32em!important;}  
  .navi .mainnav a .inner2 span{line-height:1.15em; font-size: 2.4em;}
  .navi .subnav a .inner2 span{line-height:1.15em; font-size: 2.4em;}
  .paddingx2{padding-left: 1em; padding-right: 1em;}
  .navi .subnav a .inner2 span{ white-space:normal;}
  .navi .bottominfo .b60{display: none;}
  .navi .bottominfo .oneliner{display: none;}
  footer .contactinfo{font-size: 0.9em;}
  footer .logofooter{font-size: 0.7em;}
  .blockfoto .paddingx2{padding-left: 0; padding-right: 0;}
  .blockvideo .paddingx2{padding-left: 0; padding-right: 0;}
  .blockkennisgebieden nav a .inner2 span{font-size: 2.4em;}
  .team .teamitem{width:50%; }
  .blockgerelateerd .gerelateerditem .text .title{font-size: 2.4em;}
  .blockgerelateerd .gerelateerditem .c1{width: 10em;}
  .blockgerelateerd .gerelateerditem .c2{width: calc(100% - 10em);}
  .blockgerelateerd .gerelateerditem .text{padding-left: 1em;}
  .blockcases .caseitem2 .text .title{font-size: 2.4em;}
  .blockcases .caseitem2 .c1{width: 10em;}
  .blockcases .caseitem2 .c2{width: calc(100% - 10em);}
  .blockcases .caseitem2 .text{padding-left: 1em;}
  .blockcases .caseitem2 .category{width: 100%!important;}
  .blockcases .caseitem2 .year{display: none;}
  .harmonica-title{font-size: 2.2em;}
  .blockopsomming .opsommingitem .title{font-size: 3.5em;}
}

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

  .cases .slick-current{width:28em!important;}
  .cases .caseitem .title{font-size: 1.8em;}
  .bigp p{font-size:2.1em}
  .blockgerelateerd .gerelateerditem .text .title{font-size: 2.1em;}
  .blockcases .caseitem2 .text .title{font-size: 2.1em;}

  .navi .logo2{font-size: 3em; top:4.5rem!important;}
  
  .slick-btn{font-size: 0.7em;}
  .blockgerelateerd .gerelateerditem .text .title{font-size: 2.1em;}
  .blockgerelateerd .gerelateerditem .c1{width: 7em;}
  .blockgerelateerd .gerelateerditem .c2{width: calc(100% - 7em);}
  .blockcases .caseitem2 .text .title{font-size: 2.1em;}
  .blockcases .caseitem2 .c1{width: 6em;}
  .blockcases .caseitem2 .c2{width: calc(100% - 6em);}
  .blockgerelateerd .btnitem .c1{display: none;}
  .blockgerelateerd .btnitem .c2{width: 100%;}
  blockquote{font-size: 2.1em}
  .harmonica-title::after{margin-top:0.2em;}
  .harmonica-title{font-size: 2em;}
  .blockopsomming .opsommingitem .title{font-size: 3em;}

}

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

  .navi .mainnav a .inner2 span{line-height:1.15em; font-size: 2.2em;}
  .navi .subnav a .inner2 span{line-height:1.15em; font-size: 2.2em;}
  .cases .slick-current{width:24em!important;}
  h1{font-size:2.2em;}
   .introsingle h1{font-size: 2.2em;}
   .textbigger h2{font-size: 2.1em;}
  .smalltitle{font-size: 1.4em; margin-bottom: 0.9em;}
  .bigp p {font-size: 1.9em;}
  footer .contactinfo{font-size: 0.8em;}
  .footerinfo{padding-bottom: 1em;}
  .blockkennisgebieden nav a .inner2 span{font-size: 2.2em;}
  .blockgerelateerd .gerelateerditem .text .title{font-size: 1.8em;}
  .blockgerelateerd .gerelateerditem .text .category{margin-bottom: 0.25rem;}
  .blockcases .caseitem2 .text .title{font-size: 1.6em;}
  .blockcases .caseitem2 .text .category{margin-bottom: 0.25rem;}
  .harmonica-title{font-size: 1.8em;}

}

@media screen and (max-width: 451px) {
  
  .paddingx2{padding-left: 1em; padding-right: 1em;}
  .cases .slick-current{width:22em!important;}

}

@media screen and (max-width: 360px) {
    
  html{font-size: 14px;}
  .blockopsomming .opsommingitem .title{font-size: 2.8em;}
  
}

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

 

}