@font-face {
  font-family: "MediaSansCondensedWeb-Bold";
  src: url('../fonts/MediaSansCondensedWeb-Bold.woff2') format('woff2'), url('../fonts/MediaSansCondensedWeb-Bold.woff') format('woff');
}

@font-face {
  font-family: "RelativeBlack";
  src: url('../fonts/RelativeBlack/font.woff2') format('woff2'), url('../fonts/RelativeBlack/font.woff') format('woff');
}

@font-face {
  font-family: "RelativeMedium";
  src: url('../fonts/RelativeMedium/font.woff2') format('woff2'), url('../fonts/RelativeMedium/font.woff') format('woff');
}

@font-face {
  font-family: 'gj';
  src:  url('../fonts/gj.eot?dr4qda');
  src:  url('../fonts/gj.eot?dr4qda#iefix') format('embedded-opentype'),
    url('../fonts/gj.ttf?dr4qda') format('truetype'),
    url('../fonts/gj.woff?dr4qda') format('woff'),
    url('../fonts/gj.svg?dr4qda#gj') 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: 'gj' !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;
}

.gj-arrow_big:before {
  content: "\e900";
}
.gj-arrow_fat:before {
  content: "\e901";
}
.gj-arrow_l:before {
  content: "\e902";
}
.gj-arrow_r:before {
  content: "\e903";
}
.gj-facebook:before {
  content: "\e904";
}
.gj-g:before {
  content: "\e905";
}
.gj-instagram1:before {
  content: "\e906";
}
.gj-instagram:before {
  content: "\ea92";
}
.gj-linkedin2:before {
  content: "\eaca";
}

/*
.container{ opacity: 0; overflow:hidden; }
.animate .container{opacity: 1; transition:opacity 0.8s ease 1.3s;}
.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: 'RelativeMedium', sans-serif;
	font-size: 1em;
	line-height: 1.3em;
  height: auto;
	font-weight: 400;
	margin:0; padding: 0; 
	width: 100%;
	color: #231F20;
	background-color: #fff;
	min-height: 10em;
}


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

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

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; font-family:'RelativeBlack', sans-serif; }

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;
}

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.3em; font-size: 1em; line-height: 1.3em; font-family:'RelativeMedium', sans-serif; letter-spacing:0em; }
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;}

/* basics */
h1, h2, h3, h4, h5, h6{font-weight:400; letter-spacing:0; line-height: 1em; margin-bottom:0; font-family: 'RelativeBlack', sans-serif;}
h1{ font-size:9em; }
h2{ font-size:3.4em; font-family: 'RelativeMedium', sans-serif; }
h3{ font-size:1.75em; font-family: 'RelativeMedium', sans-serif; text-transform:uppercase; }
h4{ font-size:1em;  }
h5{ font-size:1em;  }

.grey{color: #898784;}

.para-big p{font-size: 1.75em; line-height: 1.03em;}

.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%;}

.viceversa .b50{float: right;}

.widthultralarge{float: none; margin: 0 auto; width: 100%; max-width: 130em; }
.widthlarge{float: none; margin: 0 auto; width: 100%; max-width: 100em; }
.widthmedium{float: none; margin: 0 auto; width: 100%; max-width:67em;  }
.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;  }

.paddingx05{ padding-left: 0.35rem; padding-right: 0.35rem;}
.paddingx1{ padding-left: 0.7rem; padding-right: 0.7rem;}
.paddingx15{ padding-left: 1.05rem; padding-right: 1.05rem;}
.paddingx2{ padding-left: 1.4rem; padding-right: 1.4rem;}
.paddingx3{ padding-left: 2.1rem; padding-right: 2.1rem;}
.paddingx4{ padding-left: 2.8rem; padding-right: 2.8rem;}
.paddingx5{ padding-left: 3.5rem; padding-right: 3.5rem;}

.paddingy05{ padding-bottom: 0.35rem; padding-top: 0.35rem;}
.paddingy1{ padding-bottom: 0.7rem; padding-top: 0.7rem;}
.paddingy15{ padding-bottom: 1.05rem; padding-top: 1.05rem;}
.paddingy2{ padding-bottom: 1.4rem; padding-top: 1.4rem;}
.paddingy3{ padding-bottom: 2.1rem; padding-top:2.1rem;}
.paddingy4{ padding-bottom: 2.8rem; padding-top: 2.8rem;}
.paddingy5{ padding-bottom: 3.5rem; padding-top: 3.5rem;}

.paddingleft1{ padding-left: 0.7rem;}
.paddingright1{ padding-right: 0.7rem;}
.paddingleft2{ padding-left: 1.4rem;}
.paddingright2{ padding-right: 1.4rem;}

.paddingbottom1{ padding-bottom: 0.7rem;}
.paddingbottom15{ padding-bottom: 1.05rem;}
.paddingbottom2{ padding-bottom: 1.4rem;}
.paddingbottom3{ padding-bottom: 2.1rem;}
.paddingbottom4{ padding-bottom: 2.8rem;}
.paddingbottom5{ padding-bottom: 3.5rem;}
.paddingbottom6{ padding-bottom: 4.2rem;}
.paddingbottom7{ padding-bottom: 4.9rem;}
.paddingbottom8{ padding-bottom: 5.6rem;}
.paddingbottom9{ padding-bottom: 6.3rem;}
.paddingbottom10{ padding-bottom: 7.0rem;}
.paddingbottom11{ padding-bottom: 7.7rem;}
.paddingbottom12{ padding-bottom: 8.4rem;}

.paddingtop1{ padding-top: 0.7rem;}
.paddingtop15{ padding-top: 1.05rem;}
.paddingtop2{ padding-top: 1.4rem;}
.paddingtop3{ padding-top: 2.1rem;}
.paddingtop4{ padding-top: 2.8rem;}
.paddingtop5{ padding-top: 3.5rem;}
.paddingtop6{ padding-top: 4.2rem;}
.paddingtop7{ padding-top: 4.9rem;}
.paddingtop8{ padding-top: 5.6rem;}
.paddingtop9{ padding-top: 6.3rem;}
.paddingtop10{ padding-top: 7.0rem;}
.paddingtop11{ padding-top: 7.7rem;}
.paddingtop12{ padding-top: 8.4rem;}

.marginbottom05{margin-bottom: 0.35rem;}
.marginbottom1{margin-bottom: 0.7rem;}
.marginbottom15{margin-bottom: 1.05rem;}
.marginbottom2{margin-bottom: 1.4rem;}
.marginbottom3{margin-bottom: 2.1rem;}
.marginbottom4{margin-bottom: 2.8rem;}
.marginbottom5{margin-bottom: 3.5rem;}
.marginbottom6{margin-bottom: 4.2rem;}
.marginbottom7{margin-bottom: 4.9rem;}

.margintop05{margin-top: 0.35rem;}
.margintop1{margin-top: 0.7rem;}
.margintop15{margin-top: 1.05rem;}
.margintop2{margin-top: 1.4rem;}
.margintop3{margin-top: 2.1rem;}
.margintop4{margin-top: 2.8rem;}
.margintop5{margin-top: 3.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;}

.maxw30{max-width: 30em;}
.maxw36{max-width: 36em;}
.maxw50{max-width: 50em;}
.maxw55{max-width: 55em;}

.thumb{border-radius:0; 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 .flex{display: flex; flex-flow: row-reverse wrap; align-items: stretch;}

.flexbottom{display: flex; flex-flow: row wrap; align-items: flex-end;}
.pusher{height: 11.35em; }
.outermain{min-height: 1vh;}
.viceversa .b50{float: right;}




.btn{position: relative; display: inline-block; line-height: 1em; margin:0 1em 0.4em 0; font-size: 1.25em; 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: 0.8em; top: 0.2em; margin-left: 0.2rem; white-space: nowrap; overflow: hidden; position: relative; display: inline-block; float: none; 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; width: 0.85em; transform: translateX(-100%); transition: transform 0.2s ease 0.1s;}
.btn i{position: relative; display: inline-block; line-height: inherit; font-size: 0.8em;}
.btn.inview .arrow{ transform: translateX(0em); opacity: 1;}
.btn:last-child{margin-right: 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;}


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

.bgwhite{background-color: #FFFFFF; color:#231F20;}
.bgbrokenwhite{background-color: #F5F5F5; color:#231F20;}
.bggreen{background-color: #859D79; color:#fff;}
.bgorange{background-color: #E97E45; color: #fff;}
.bgred{background-color: #B24747; color:#fff;}
.bgblue{background-color: #252A54; color: #fff;}
.bgbeige{background-color: #CCA06D; color: #fff;}


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

.slickie-next{position: absolute; right: 1em; width: 2em; height: 2em; top:50%; transform: translateY(-50%); cursor: pointer;}
.slickie-next::after{content: "\e903"; font-family: "gj"; font-size: 1.8em; line-height: 1em; color:#231F20; opacity:1; float:right; }
.slick-disabled{opacity: 0; transition: opacity 0.3s ease;}
.slickie-prev{position: absolute; left:1em; width: 2em; height: 2em; top:50%; transform: translateY(-50%);  cursor: pointer;}
.slickie-prev::after{position: relative; display: inline-block; content: "\e902"; font-family: "gj"; font-size:1.8em; line-height: 1em; color:#231F20; opacity:1; }
.slick-dots{text-align: center; margin-top: -1rem; position: relative;}
.slick-dots li{float: none; display: inline-block;}
.slick-dots li button::before{color: #231F20; opacity: 0.1;}
.slick-dots li.slick-active button::before{color: #231F20;}
/*/////////////// Header ///////////////*/


.logobeeldmerk{position: absolute: left:0; top: 0;}


.hamburgercontainer{position: fixed; top:0; left: 0; z-index: 92;}
.hamburger {
  position: absolute;
  top: 3em;
  right: 3em;
  width: 40px;       /* Increased from 34px */
  height: 30px;      /* Increased from 24px */
  cursor: pointer;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;          /* Increased from 6px for better spacing */
  transition: all 0.3s ease;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #000;
  border-radius: 0px;
  transition: transform 0.3s ease 0.4s, opacity 0.4s ease 0.4s, background 0.5s ease 0.2s;
  transform-origin: center;
  position: relative;
 
}
body.open .hamburger span{
  transition: transform 0.3s ease 0.3s, opacity 0.4s ease 0.3s, background 0.3s ease;
}
/* Morph to a perfect cross */
body.open .hamburger span:nth-child(1) {
  transform: translateY(12px) rotate(45deg);
}

body.open .hamburger span:nth-child(2) {
  opacity: 0;
}

body.open .hamburger span:nth-child(3) {
  transform: translateY(-12px) rotate(-45deg);
}

.logo-beeldmerk{position: absolute; left:2rem; z-index: 2; top: 1.6rem; font-size: 9em; font-family:'RelativeBlack'; line-height: 1em; opacity: 0; transform: scale(0.95); transition: transform 0s ease 1s, opacity 0.4s ease 0s;}
.open .logo-beeldmerk{opacity: 1; transform: translateY(0em); transition: opacity 1.2s ease 0.22s, transform 0.4s ease 0s; transform: scale(1.0);}
.navi{position: absolute; width: 100%; overflow: hidden; top:0; opacity: 0; color: #fff; transform: translateY(-100%); z-index: 92; transition: transform 0s ease 0.6s, opacity 0.5s ease 0.1s; pointer-events:none;  }
.navi .inner{position: relative; margin-top:0em; min-height: 36em; height: 100svh; padding-bottom:11em }
.navi .mainnav{top: 50%; margin-top: 4em; transform: translateY(-50%);}
.navi .mainnav a{position: relative; display: block; float: left; width: 100%; box-sizing: border-box; height:auto; overflow:hidden; text-transform:uppercase; }
.navi .mainnav a .inner2{padding-top: 0.7em; padding-bottom:0.7em;transition: all 0s ease 0s; }
.navi .mainnav a .inner2 span{line-height:1em; width: 100%; text-align: center; font-size:3.4em; opacity: 0; letter-spacing: 0; font-family:'RelativeBlack'; transform: translateY(0); float:left; clear:both;  transition: transform 0.3s ease 0s;}

.open .navi{opacity: 1; overflow: visible; pointer-events:auto; transform: translateY(0); transition: transform 0s ease, opacity 0.3s ease 0s; }

.open .hamburger span{background-color: #fff;}
.navi a{text-decoration:none;}
.navi .mainnav a{ opacity: 0; transform: translateY(0em); transition: transform 0s ease 0s, color 0s ease 0s;}
.animate .navi .mainnav a span{transition: transform 0s ease 0.4s, opacity 0.3s ease 0.4s;}
.open .navi .mainnav a{ opacity: 1; transition: opacity 0s ease 0s;}
.open .navi .mainnav a:nth-child(1) span{opacity: 1; transform: translateY(0em); transition: opacity 1.2s ease 0.22s, color 0.2s ease 0s;}
.open .navi .mainnav a:nth-child(2) span{opacity: 1; transform: translateY(0em); transition: opacity 1.2s ease 0.24s, color 0.2s ease 0s;}
.open .navi .mainnav a:nth-child(3) span{opacity: 1; transform: translateY(0em); transition: opacity 1.2s ease 0.26s, color 0.2s ease 0s;}
.open .navi .mainnav a:nth-child(4) span{opacity: 1; transform: translateY(0em); transition: opacity 1.2s ease 0.28s, color 0.2s ease 0s;}
.open .navi .mainnav a:nth-child(5) span{opacity: 1; transform: translateY(0em); transition: opacity 1.2s ease 0.3s, color 0.2s ease 0s;}
.open .navi .mainnav a:nth-child(6) span{opacity: 1; transform: translateY(0em); transition: opacity 1.2s ease 0.32s, color 0.2s ease 0s;}
.open .navi .mainnav a:nth-child(7) span{opacity: 1; transform: translateY(0em); transition: opacity 1.2s ease 0.34s, color 0.2s ease 0s;}
.open .navi .mainnav a:nth-child(8) span{opacity: 1; transform: translateY(0em); transition: opacity 1.2s ease 0.36, color 0.2s ease 0s;}

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

.bottominfo .inner4{padding-left: 2em;}
.bottominfo .inner4 .dagen{min-width: 4em; position: relative; display: inline-block;}
.open .navi .bottominfo{opacity:1; transform:translateY(0); transition: opacity 0.9s ease 0.32s;}

.bottominfo .socials{margin-top: -0.7em;}
.socials a{margin-right: 0.4em; font-size: 1.2em;}



/*/////////////// blocks ///////////////*/


.fullscreen{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center; /* verdeelt ruimte tussen én boven/onder elementen ---> space-evenly */
  align-items: center;
  flex: 1;
  gap: 0em; /* optioneel */
  padding: 0em 0;
}


.blockintro .titeltop {
  height: auto;
  padding: 1.5% 0;
}



.slider .slide {
  display: flex !important;
  flex-direction: column;
  min-height: 26em;
  height: calc(100svh - 20em);
  max-height: 40em;
  justify-content: center;

}

.slider .slide .inner {
  display: flex;
  flex-direction: row; /* Belangrijk voor b50 naast elkaar */
  justify-content: center;
  align-items: stretch;
  flex: 1;
  width: calc(100% - 30%);
   
  margin: 0 auto; /* Vervangt left:50%/translateX */
}

.slider .slide .b50 {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
}

.slider .slide .inner .textslide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 0em; /* of 0em als je écht compact wil */
  padding: 2.2em 2.4em;
}


.blockintro .titelbottom{display: flex !important; flex-direction: row; justify-content:center; gap: 0 3em; padding: 1.5% 0;}
.blockintro h1{font-size:11vw;}
.blockintro .titelbottom a { position: relative; float: left; display: block; font-size:3.4em; font-size:4vw; line-height: 1.3em; text-transform: uppercase; font-family:'RelativeBlack';}

.slider .optie1 p{font-size:2.5vw; text-wrap:balance; }
.slider .optie2 p{font-size:1.7vw; text-wrap:balance; }
.slider .optie3 p{font-size:1.7vw; text-wrap:balance; }
.slider .optie1 .inner2{padding:2em 2em;}




/* Animations */
.titelbottom{transform:translateY(-2em); transition: all 0.8s cubic-bezier(0.65, 0, 0.35, 1);}
.animate .titelbottom{transform:translateY(0); }
.slider{max-height: 0; opacity: 0; transition: max-height 0.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.8s ease 0.5s;}
.animate .slider{max-height: 40em; opacity: 1;}
.animate .slider2{max-height: 60em; opacity: 1;}

.slider2{max-height: 60em; opacity: 1;}



.typoflex{min-height: 100svh;}

.blocktypography .typo1{font-size: 19vh;  font-family: 'RelativeBlack'; text-transform: uppercase; color: #231F20; margin-top: 4.5svh; margin-bottom: 1svh;}
.blocktypography .typo2{font-size: 33vh; font-family: 'MediaSansCondensedWeb-Bold'; line-height: 93%; text-transform: uppercase; color: #fff;}

.blocktypography .typobtns{height: 10svh; margin-top: 0.5svh; margin-bottom: 3svh;}
.blocktypography .typobtns .btn{top:50%; transform: translateY(-50%); color: #231F20;}
.slider .optie3 .b50 .inner2{flex: none; align-self: flex-end}

.slider2 .slide{min-height: 35em;}

.blocktext h2{font-family:'RelativeMedium'; text-transform: uppercase; font-size: 1.25em; margin-bottom: 1.1rem;}
.blocktext p{font-size: 1.5em; line-height: 1.3em; text-wrap: balance;}

.slider .optie3 .textslide { display: flex; flex-direction: column; height: 100%; /* Belangrijk: zorgt dat er ruimte is om te verdelen */}
.slider .optie3 .inner3 { /* Geen speciale styling nodig als die gewoon bovenaan moet blijven */}
.slider .optie3 .inner2 { margin-top: auto; /* Duwt deze helemaal naar onder */}

.blockphoto .caption{position: absolute; left: 2em; bottom:2em; color: #fff;}

.blockfeatures .features{display: flex; flex-flow: row nowrap; justify-content: space-between;gap: 1em 2em;  margin-top: 2rem}
.blockfeatures .features .feature{border-top:1px solid #231F20; padding-top: 0em;}
.blockfeatures .features span{position: relative; display: inline-block; padding: 1.3em 1.3em; }


.blockfeaturesphoto .features{display: flex; flex-flow: row nowrap; justify-content: space-between;gap: 1em 2em;  margin-top: 2rem; margin-bottom: 2em}
.blockfeaturesphoto .features span{position: relative; display: inline-block; padding: 1.3em 0em; font-size:1em; text-transform: uppercase;}
.blockfeaturesphoto .features .title{margin-bottom: 0rem;}
.blockfeaturesphoto .features .feature .thumb{padding-bottom: 128%;}


.blockbrands .features{display: flex; flex-flow: row nowrap; justify-content: space-between; margin-top: 2rem; margin-bottom: 2em; width: calc(100% + 4em); left: -2em;}

.blockbrands .features .title{margin-bottom: 0rem;}
.blockbrands .features .feature{flex: 0 0 auto!important; padding: 0 2em;
  width: fit-content!important; /* Optional: ensures minimal width based on content */}
.blockbrands .features .feature .photo{height:4em;}
.blockbrands .features .feature .photo img{object-fit: contain; transform: scale(1); width: 100%; position: absolute; left: 0; top:50%; transform: translateY(-50%);}

.blockbrands h2 {
  font-family: 'RelativeMedium';
  text-transform: uppercase;
  font-size: 1.25em;
  margin-bottom: 1.4rem;
}

.blockbrands .titleblock{border-bottom: 1px solid;}

.blockbrands .slickie-next{position: absolute; top:-4.8rem; right: 1.2rem; font-size: 0.7em; text-align: right; transform: translateY(0%);}
.blockbrands .slickie-prev{position: absolute; top:-4.8rem; left: auto; right: 3.2rem; font-size: 0.7em; text-align: right; transform: translateY(0%);}

/*.slick-slide h2, .slick-slide h3, .slick-slide p {opacity: 0; transition: opacity 0.5s ease;}
.slick-slide.custom-active h2, .slick-slide.custom-active h3, .slick-slide.custom-active p{opacity: 1; transition: opacity 0.5s ease 0s;}*/

.viewport > div{opacity: 0; transition: opacity 0.5s ease 0.3s;}
.viewport.inview > div:nth-child(1){opacity: 1; transition: opacity 1s ease 0.3s; }
.viewport.inview > div:nth-child(2){opacity: 1; transition: opacity 1s ease 0.35s;}
.viewport.inview > div:nth-child(3){opacity: 1; transition: opacity 1s ease 0.4s;}
.viewport.inview > div:nth-child(4){opacity: 1; transition: opacity 1s ease 0.45s;}
.viewport.inview > div:nth-child(5){opacity: 1; transition: opacity 1s ease 0.5s;}
.viewport.inview > div:nth-child(6){opacity: 1; transition: opacity 1s ease 0.55s;}
.viewport.inview > div:nth-child(7){opacity: 1; transition: opacity 1s ease 0.6s;}
.viewport.inview > div:nth-child(8){opacity: 1; transition: opacity 1s ease 0.65s;}
.viewport.inview > div:nth-child(9){opacity: 1; transition: opacity 1s ease 0.7s;}
.viewport.inview > div:nth-child(10){opacity: 1; transition: opacity 1s ease 0.75s;}
.viewport.inview > div:nth-child(11){opacity: 1; transition: opacity 1s ease 0.8s;}
.viewport.inview > div:nth-child(12){opacity: 1; transition: opacity 1s ease 0.85s;}
.viewport.inview > div:nth-child(13){opacity: 1; transition: opacity 1s ease 0.9s;}
.viewport.inview > div:nth-child(14){opacity: 1; transition: opacity 1s ease 0.95s;}

.blockphototekst .inner{min-height: 48em;}
.blockphototekst .inner2{display: flex; flex-direction: column; justify-content: center; flex: 1; padding: 4em 4em;}
.blockphototekst p{font-size: 1.25em;}
.blockphototekst h2{font-size: 1.75em; text-transform: uppercase; margin-bottom: 1.1em;}
/*/////////////// footer ///////////////*/


footer{background-color: #fff; z-index: 4;  }
footer .footertitle{display: flex !important; flex-direction: row; justify-content:center; gap: 0 3em; padding: 1.5% 0;}
footer .footertitle a { position: relative; float: left; display: block; font-size:3.4em; font-size:4vw; line-height: 1.3em; text-transform: uppercase; font-family:'RelativeBlack';}
footer .flex{gap: 4em 0em;}
.footerinfo a{text-decoration: none;}


@media screen and (max-aspect-ratio: 1/1) {

   .blocktypography .typo1{font-size: 19vw;  margin-top: 4.5svw; margin-bottom: 1svw;}
  .blocktypography .typo2{font-size: 33vw;  line-height: 93%;}
  .blocktypography .typobtns{height: 10svw; margin-top: 0.5svw;}
  .blocktypography .typobtns .btn{top:50%; transform: translateY(-50%);}
  .typoflex{ display: flex !important; flex-direction: column; justify-content: center;}
  .blocktypography .typobtns{ margin-top:4svh;}
}

@media screen and (max-height:640px) {
  
  .navi .mainnav{ margin-top: 0em;}
  
}

/*/////////////// Media Queries ///////////////*/
@media screen and (min-width: 2600px) {

  .blockphoto{margin-top: calc((100svw - 130em)/4); margin-bottom: calc((100svw - 130em)/4);}

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

  .blockintro .titelbottom a { font-size:3.4em; }
  .blockintro h1{font-size:9em;}
  .slider .optie1 p{font-size:1.8em;}
  .slider .optie2 p{font-size:1.4em;}
  .slider .optie3 p{font-size:1.4em;}
  .widthmedium{max-width: 80em;}
}

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

 

}

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


}

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



}

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

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

  html{font-size: 17px;}
  .slider .slide .inner {width: calc(100% - 20%);}

}

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

  html{font-size: 16px;}
  
 
}

@media screen and (max-width: 1080px) {
  
  .slider .optie1 p{font-size:1.8em;}
  .slider .optie2 p{font-size:1.3em;}
  .slider .optie3 p{font-size:1.3em;}
 
  .slider3 .feature{padding: 0 1em;}
}

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

  html{font-size: 16px;}

}

@media screen and (max-width: 880px) {
 
  .slider .slide .inner {width: calc(100% - 2em);}
  .blockintro .titeltop{margin-bottom: 5%; margin-top: 1.25rem;}
  .blockintro .titelbottom{margin-top: 5%; margin-bottom: 2rem;}
  .blockfeatures .features{display: flex; flex-flow: column wrap; }
  .blockfeatures .features .feature{border-top: 0;}
  .blockfeatures .features .feature span{padding: 0.5em 0;}
  /* .blockfeatures .features .feature p{color:#B24747}*/
  /*.blockfeatures .features .feature p::before{position: relative; display: block; float: left; top:0.5em; margin-right: 0.6em; width:7px; height: 7px; border-radius: 50%; background-color: #E97E45; content: "";}
  */
  .blockfeatures .features .feature:nth-child(1)::before{display: none;}
  .blockbrands .features{font-size: 0.9em;}
}

@media screen and (max-width: 800px) {
    
  html{font-size: 15px;}
  .logo-beeldmerk{font-size: 5em; left: 1rem; top: 0.6rem;}
  .hamburger{right: 1.2em; top: 1.9em;}
  .bottominfo .b40, .bottominfo .b30{width: 50%;}
  .navi .inner{padding-bottom:19em; min-height: 40em; }
  .navi .inner4{padding-bottom: 3em;}
  .navi .bottominfo{height: 19em;}
  .navi .mainnav a .inner2 span{font-size: 2.4em;}
  .bottominfo .inner4{padding-left: 1rem;}
  .bottominfo .inner3 .socialcolumn p{display: none;}
  .bottominfo .inner3 .socialcolumn{width:100%; text-align: center;}
  .bottominfo .inner3 .socialcolumn .inner4{padding-left: 0;}
  .slider .optie1 p{font-size:1.4em;}
  .slider .optie2 p{font-size:1.1em;}
  .slider .optie3 p{font-size:1.1em;}
  .blocktext p{font-size:1.25em;}
  .blockphoto img{aspect-ratio: 3/2; object-fit: cover;}
  .blockbrands .slick-track, .blockbrands .slick-list{overflow: visible;}
  .blockphototekst .flex, .blockphototekst .inner2{min-height: auto; display: block;}
   .blockphototekst .b50{width: 100%;}
   .blockphototekst .thumb{padding-bottom: 80%; position: relative; float: left;}
   .blockfeatures p{font-size: 1.5em;}
   .slider .slide{max-height: 65em; min-height: 65em;}
}

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

  .slider .slide .optie2 {display: block;}
  .slider .slide .optie2 .b50{width: 100%;height: 50%;}
  .slider .slide .optie3 {display: block;}
  .slider .slide .optie3 .b50{width: 100%;height: 50%;}
  .slider .slide{max-height: auto;}
  .logo-beeldmerk{font-size: 3em; top:1.2rem; }
  .hamburger {width: 24px; height: 20px; gap: 6px;}
  .hamburger span { height: 2px;}
  body.open .hamburger span:nth-child(1) {transform: translateY(8px) rotate(45deg);}
  body.open .hamburger span:nth-child(3) {transform: translateY(-8px) rotate(-45deg);}
  .blockintro .slider .slide { min-height: 28em; height: calc(100svh - 18em);}
  h3{font-size: 1.5em;}

}

@media screen and (max-width: 560px) {
  
  .blockintro .titelbottom a { font-size:1.3em; } 
  .slider .optie1 p br{display: none;}
  .slider .optie2 p br{display: none;}
  .slider .optie3 p br{display: none;}
  .slider .slide{max-height: 50em; min-height: 48em;}
  .animate .slider{max-height: 48em;}
  .blockphoto img{aspect-ratio: 1/1; object-fit: cover;}
  .blockbrands .features .feature{padding: 0 1.5em; }
  .blockbrands .features{font-size: 0.9em; width: calc(100% + 3em); left: -1.5em;}
  .blockfeatures .features{margin-top: 1rem; margin-bottom: 2rem;}
  
  .blockbrands .paddingbottom12{padding-bottom:6.6em;}
}

@media screen and (max-width: 450px) {
  
  .slider.optie1 p{font-size:1.25em;}
  .slider .optie2 p{font-size:1.25em;}
  .slider .optie3 p{font-size:1.25em;}

}

@media screen and (max-width: 360px) {
  
  .bottominfo .b40, .bottominfo .b30{width: 100%;}
  html{font-size: 14px;}
  
}

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

   html{font-size: 13px;

}