:root {
  -webkit-font-smoothing: antialiased;   /* vooral Safari */
  -moz-osx-font-smoothing: grayscale;    /* Firefox/macOS */
  text-rendering: optimizeLegibility;
}



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

.stellar-logo_all:before {
  content: "\e900";
}
.stellar-logo_ste_ar:before {
  content: "\e901";
}
.stellar-logo_l:before {
  content: "\e902";
}
.stellar-arrow:before {
  content: "\e903";
}


@font-face {
    font-family: 'Beatrice Standard Regular';
    src: url('../fonts/BeatriceStandard-Regular.woff2') format('woff2'),
         url('../fonts/BeatriceStandard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Beatrice Standard Bold';
    src: url('../fonts/BeatriceStandard-SemiBold.woff2') format('woff2'),
         url('../fonts/BeatriceStandard-SemiBold.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}



@font-face {
    font-family: 'Beatrice Display Regular';
    src: url('../fonts/BeatriceDisplay-Regular.woff2') format('woff2'),
         url('../fonts/BeatriceDisplay-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;

}


.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: 'Beatrice Standard Regular', sans-serif;
  font-size: 1em;
  line-height: 1.15em;
  height: auto;
  font-weight: 400;
  margin:0; padding: 0; 
  width: 100%;
  color: #2DD2DC;
  background-color: #4B2D2D;
  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: underline; }
.noline a{text-decoration: none;}
i, cite, em, var, dfn {
    font-style:normal;
}
b, strong {font-family: inherit; font-weight: 400;  }

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{ font-size: 1.2em; line-height: 1.4em; margin-bottom: 1.4em; font-family:'Beatrice Standard Regular', sans-serif;  }
p strong{font-family:'Beatrice Standard Bold', sans-serif;}
.quote p strong{font-size: 1.3em;line-height: 1.25em; font-family:'Beatrice Standard Regular', sans-serif;}
p:last-child{margin-bottom: 0;}
p + ul{margin-top: -1.4rem;}
ul{font-size: 1.2em; line-height: 1.4em; margin-bottom: 1.4em; font-family:'Beatrice Standard Regular', sans-serif;}
ul li{line-height: 1.4em; padding-left: 0.7em; margin-bottom: 0.3em;}
ul li:after{position: absolute; left: 0; top: 0.1em; width: 1em; height: 1em; line-height: 1em; content:"•"; font-size: 1.1em;}

label{font-size: 1.2rem; line-height: 1.4em; margin-bottom: 3rem; font-family:'Beatrice Standard Regular', sans-serif; }
p a, article ul li a{display: inline-block; position: relative; text-decoration: underline;}
.smaller{font-size: 0.85em;}
article img{margin-bottom: 1.2rem;}
article img:last-child{margin-bottom: 0rem;}

/* basics */
h1, h2, h3, h4, h5, h6{font-weight:400;  line-height: 1.238em; font-family: 'Beatrice Standard Regular', sans-serif; letter-spacing: 0em;}
h1{ font-size:4em; line-height: 1.1238em; font-family: 'Beatrice Display Regular', sans-serif;  margin-bottom: 2.8rem; }
h2{ font-size:2.1em; line-height: 1.238em; margin-bottom: 1rem; letter-spacing:-0.02em; }
h3{ font-size:2em; line-height: 1.238em; margin-bottom: 2.4rem; }
h4{ font-size:1.75em; line-height: 1.238em; margin-bottom: 1rem; }
h5{ font-size:1.2em; line-height: 1.238em; margin-bottom: 1rem; }

blockquote{font-size: 2.9rem;line-height: 1.1em; letter-spacing: 0em;margin-bottom: 2rem; margin-top: 2rem; }
blockquote p{font-size: 1em;}

.floatr{float: right;}
.floatl{float: left;}

.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: 85em; } /* 130em voor imac, 96em voor 1920px scherm*/
.widthmedium{float: none; margin: 0 auto; width: 100%; max-width:57em;  }
.widthmediumsmall{float: none; margin: 0 auto; width: 100%; max-width:48em;  }
.widthsmall{float: none; margin: 0 auto; width: 100%; max-width: 46em; }
.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: 42rem;}
.maxw6{max-width: 58rem;}
.maxw7{max-width: 70rem;}
.maxw8{max-width: 80rem;}

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

.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;}
.flexmiddle{  display: flex;
  flex-direction: column;
  
}
.flexmiddle > * {margin-block: auto 0; margin-block: auto; overflow: visible;       /* als content hoger is → scrollen i.p.v. eroverheen */}
.outermain{min-height: 1vh;}

.pretty{text-wrap: pretty;}

.btn2{text-decoration: none;}

.btn{color: #fff; border: 2px solid; padding: 0em 1.2em 0.15em; border-radius: 1.6em; position: relative; display: inline-block; line-height: 2.6em; margin:0 1em 0.4em 0; font-size: 1em;  font-family: 'Beatrice Standard Regular', sans-serif; letter-spacing: 0em; text-decoration: none; transform: translateY(0.3em); opacity: 0; transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s; }
.bgblue .btn{color: #4B2D2D;}

.btn.inview{ transform: translateY(0em); opacity: 1;}

.no-touch .btn:hover { }


.bgwhite .btn{color: #2DD2DC;}

.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: #4B2D2D; color: #2DD2DC;}
.bgwhite{background-color: #fff; color:#4B2D2D; }

.bgblue{background-color: #2DD2DC; color: #4B2D2D;}
.bgblue .oneliner{color: #fff;}

.borderradius{border-radius:1.5rem;}


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

.slickie-next{position: absolute; right: 1em; width: 2em; height: 2em; top:-2.8em; cursor: pointer;}
.slickie-next::after{content: "\e905"; font-family: "stellar"; 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: "stellar"; font-size: 1.3em; line-height: 1em; color:inherit; opacity:1; }
.slick-dots{text-align: center; margin-top: -1rem; position: relative;}
.slick-dots li{float: none; display: inline-block; margin: 0 1px;}
.slick-dots li::after{content: "";}
.slick-dots li button::before{color: #4B2D2D; opacity: 0.5;}
.slick-dots li.slick-active button::before{color: #4B2D2D;}


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

.pusher{height:4em; }

.blocklogoshow {}
.blocklogoshow .inner{overflow: hidden;/*min-height: 50em;*/}
.oneliner{width: auto; position: absolute; right: 0; top:0; font-size: 1.2em; z-index: 2; letter-spacing: -0.02em;}
.logosmall{width: auto; position: absolute; opacity: 1; left: 0; top:0; font-size: 1.2em; z-index: 2; letter-spacing: -0.02em; text-decoration: none;}

.logo .inner2{ display: block; width:100%; height:auto; padding-bottom: 31.32%; opacity:1; }
.logo .logo-ste-ar{position: absolute; left:0; top:0; width:100%; height:100%; background: url('../img/icons/logo_ste_ar.svg') left center / auto 100% no-repeat; }
.logo .logo-l1{transition: left 1s ease 0s; position: absolute; left:53.9%; top:0; width:100%; height:100%; background: url('../img/icons/logo_l.svg') left center / auto 100% no-repeat; }
.logo .logo-l2{transition: left 1s ease 0s; position: absolute; left:58.5%; top:0; width:100%; height:100%; background: url('../img/icons/logo_l.svg') left center / auto 100% no-repeat; }
.logo .bg{position: absolute; top:0; left:0; width: 100%; height: 100%; overflow:hidden; }
.logo .bg span{transition: transform 1s ease 0s; position: absolute; display: block; width: 100%; left:0; top:-2%; height: 104%; background-color: #4B2D2D; box-shadow: 0px 0px 87px 32px rgba(75, 45, 45, 0.8); }
.logo .bg2{position: absolute; top:0; left:0; width: 100%; height: 100%; overflow:hidden; }
.logo .bg2 span{transition: transform 1s ease 0s; transform: translateY(120%); position: absolute; display: block; width: 100%; left:0; top:-2%; height: 104%; background-color: #4B2D2D; box-shadow: 0px 0px 87px 32px rgba(75, 45, 45, 0.8); }

.logo1{position: absolute; left:0; top:0rem; width: 20.75em; height: auto;z-index:1; }
.logo2{position: relative; float: left; display:block; margin-top:0em; width:100%; height: auto; opacity:1; }
.logo3{position: relative;  float: left; display:block; width:100%; height: auto; opacity:1; }
.logo4{position: relative; float: left; display:block; width:100%; height: auto; opacity:1; }
.logo5{position: relative;  float: left; display:block; width:100%; height: auto; opacity:1; }

.introtext p{font-size: 1.6em; text-wrap: balance;}
.introtext { position: absolute; top:50%; opacity: 0; z-index: 4;}

.introtext2 { opacity: 0; z-index: 4;}


.logo .logo-ste-ar{ width:100%; height:100%; background: url('../img/icons/logo_ste_ar.svg') left center / auto 100% no-repeat; }

/*/////////////// animations logos ///////////////*/

.inview .logosmall{transition: opacity 0.2s ease 2.5s; opacity: 0;}

.logo1{opacity: 0;}
.inview .logo1{opacity:1; transition: opacity 0.3s ease 2.4s;}

.logo1 .logo-l1{left:-50rem;}
.logo1 .logo-l2{left:calc(100% + 50rem);}
.inview .logo1 .logo-l1{left:53.9%;transition: left 1.2s cubic-bezier(0.83, 0, 0.17, 1) 2s;}
.inview .logo1 .logo-l2{left:58.5%;transition: left 1.2s cubic-bezier(0.83, 0, 0.17, 1) 2s;}

.logo1 .bg span{  transform: translateY(0%);  }
.inview .logo1 .bg span{transition: transform 1.1s ease 3s; transform: translateY(-150%);}


.inview .logo2 .logo-l1{left:calc(-2rem - 3.85%); transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.9s}
.inview .logo2 .logo-l2{left:calc(100% + 2em); transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.9s}

.logo2 .bg span{  transform: translateY(150%);  }
.inview .logo2 .bg span{transition: transform 1.1s ease 0.5s; transform: translateY(0);}


.logo3 .logo-l1{left:-2rem;}
.logo3 .logo-l2{left:calc(100% - 3.85% + 2rem);}
.inview .logo3 .logo-l1{left:53.9%;transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.5s;}
.inview .logo3 .logo-l2{left:58.5%;transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.5s;}

.logo3 .bg span{  transform: translateY(0%);  }
.inview .logo3 .bg span{transition: transform 1.1s ease 1.1s; transform: translateY(-150%);}


.inview2 .logo3 .logo-l1{left:-2rem;transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.4s;}
.inview2 .logo3 .logo-l2{left:calc(100% - 3.85% + 2rem);transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.4s;}

.inview2 .logo3 .bg2 span{transition: transform 1.1s ease 0s; transform: translateY(0%);}

.inview2 .introtext{opacity: 1; transition: opacity 0.3s ease 0.8s;}
.inview .introtext2{opacity: 1; transition: opacity 0.3s ease 1.2s;}


.logo4 .logo-l1{}
.logo4 .logo-l2{}
.inview .logo4 .logo-l1{left:calc(-2rem  ); transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.9s}
.inview .logo4 .logo-l2{left:calc(100% - 3.85% + 2em);transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.9s}

.logo4 .bg span{  transform: translateY(150%);  }
.inview .logo4 .bg span{transition: transform 1.1s ease 0.5s; transform: translateY(0);}


.logo5 .logo-l1{left:-2rem;}
.logo5 .logo-l2{left:calc(100% - 3.85% + 2rem);}
.inview .logo5 .logo-l1{left:53.9%;transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.5s;}
.inview .logo5 .logo-l2{left:58.5%;transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.5s;}

.logo5 .bg span{  transform: translateY(0%);  }
.inview .logo5 .bg span{transition: transform 1.1s ease 1.1s; transform: translateY(-150%);}


/*/////////////// lamellen ///////////////*/

.lamellen{position: absolute; top:0; width: 100%; height: 100%; pointer-events: none; }
.set{position: relative; width: 100%; }
.set .logo-l1{transition: left 1s ease 0s; opacity: 1; position: absolute; left:46.35%; top:0; width:100%; height:100%; background: url('../img/icons/logo_l.svg') left center / auto 100% no-repeat; }
.set .logo-l2{transition: left 1s ease 0s; opacity: 1; position: absolute; left:46.35%; top:0; width:100%; height:100%; background: url('../img/icons/logo_l.svg') left center / auto 100% no-repeat; }
.inview.set.s1 .logo-l1{left:calc(3.85% - 2em); opacity: 1; transition: opacity 0.4s ease, left 1s cubic-bezier(0.83, 0, 0.17, 1) 0s}
.inview.set.s1 .logo-l2{left:calc(100% - 7.7% + 2em); opacity: 1; transition: opacity 0.4s ease, left 1s cubic-bezier(0.83, 0, 0.17, 1) 0s}
.inview.set.s2 .logo-l1{left:-2em; opacity: 1; transition: opacity 0.4s ease, left 1s cubic-bezier(0.83, 0, 0.17, 1) 0s}
.inview.set.s2 .logo-l2{left:calc(100% - 3.85% + 2rem); opacity: 1; transition: opacity 0.2s ease, left 1s cubic-bezier(0.83, 0, 0.17, 1) 0s}

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

.blockphoto .thumb{height: 20em; opacity: 0;}

.blockphoto2 .thumb{height: 20em; opacity: 0; display:block; padding-left: 63.2%; width: 0;}
.blockphoto2 .title{font-size: 4.8em; width:100%;  line-height: 0.896em; font-family: 'Beatrice Display Regular', sans-serif;  }
.blockphoto2 .titleouter{top:50%; margin-top:-0.3em; opacity: 0;}
.blocktext h2{font-size: 4em; font-family: 'Beatrice Display Regular', sans-serif;line-height: 1.1238em; margin-bottom: 2.8rem;}
.blocktext article{z-index: 2; opacity: 0;}

.blockovernames article{z-index: 2; opacity: 0;}
.blockovernames .overnamesslider{margin-top: 0em; opacity: 0; padding: 0 0.3em;}
.blockovernames .overnamesslider .overnameitem{width: 33.33%; padding: 0 0.8em; cursor: pointer;}
.no-touch .blockovernames .overnamesslider .overnameitem:hover .inner2{border: 2px solid #2DD2DC; }
.blockovernames .overnamesslider .overnameitem .inner2{border: 2px solid #222; padding: 1.6em 1.6em; box-sizing:border-box; }
.blockovernames .overnamesslider .overnameitem label{margin-bottom: -0.2em; margin-top: -0.1em; cursor: pointer;}
.blockovernames .overnamesslider .overnameitem .logo{margin: 1em 0; float:left; width: 100%; padding-bottom: 40%;}
.blockovernames .overnamesslider .overnameitem .logo img{position: absolute; top:0; left: 0; width:100%; height:100%; object-fit: contain;}
.blockovernames .overnamesslider .overnameitem .tussenzin{font-size: 0.8em;}

.benjamintext article{margin-top: -10em;}
.benjamintext h2{display: none;}

#cases{padding-top: 0!important; margin-top: -8rem;}

/*/////////////// animations blocks ///////////////*/

.inview .thumb{opacity: 1; transition: opacity 0.8s ease 0.9s;}
.inview .titleouter{opacity: 1; transition: opacity 0.8s ease 1.2s;}
.inview article{opacity: 1; transition: opacity 0.8s ease 0.9s;}
article.inview{opacity: 1!important; transition: opacity 0.8s ease 0.9s;}
.blockovernames .inview article{opacity: 1; transition: opacity 0.8s ease 0.9s;}
.inview.overnamesslider{opacity: 1!important; transition: opacity 0.8s ease 1.2s;}

.blockdefault .logo1{position: relative; float:left; color: #fff;  top:0rem; width: 20.75em; height: auto;z-index:1; background:none;}
.blockdefault2 .logo1{position: relative; float:left; color: #fff;  top:0rem; width: 20.75em; height: auto;z-index:1; background:none;}
.blockdefault .logo1 .logo-ste-ar{background: url('../img/icons/logo_ste_ar2.svg') left center / auto 100% no-repeat; }
.blockdefault .logo1 .logo-l1{background: url('../img/icons/logo_l2.svg') left center / auto 100% no-repeat; }
.blockdefault .logo1 .logo-l2{background: url('../img/icons/logo_l2.svg') left center / auto 100% no-repeat; }
.blockdefault.bgblue .logo1 .bg span{background-color:#2DD2DC; box-shadow: 0em 0em 4.35em 1.6em rgba(45, 210, 220, 0.8); }
.blockdefault2.bgwhite .logo1 .bg span{background-color:#FFF; box-shadow: 0em 0em 4.35em 1.6em rgba(256, 256, 256, 0.8); }

.blockdefault.inview .logo1{opacity:1; transition: opacity 0.3s ease 0.8s;}
.blockdefault.inview .logo1 .logo-l1{left:53.9%;transition: left 1.2s cubic-bezier(0.83, 0, 0.17, 1) 0.4s;}
.blockdefault.inview .logo1 .logo-l2{left:58.5%;transition: left 1.2s cubic-bezier(0.83, 0, 0.17, 1) 0.4s;}
.blockdefault.inview .logo1 .bg span{transition: transform 1.1s ease 1.2s; transform: translateY(-150%);}

.blockdefault2.inview .logo1{opacity:1; transition: opacity 0.3s ease 0.8s;}
.blockdefault2.inview .logo1 .logo-l1{left:53.9%;transition: left 1.2s cubic-bezier(0.83, 0, 0.17, 1) 0.4s;}
.blockdefault2.inview .logo1 .logo-l2{left:58.5%;transition: left 1.2s cubic-bezier(0.83, 0, 0.17, 1) 0.4s;}
.blockdefault2.inview .logo1 .bg span{transition: transform 1.1s ease 1.2s; transform: translateY(-150%);}
.blockdefault2 .oneliner{color:#2DD2DC; }
.quoteslider{color: #fff;}
.quoteslider .slick-list{overflow: hidden;}

.quoteslider .slick-dots{bottom:0;}
.quoteslider .slick-dots li.slick-active button::before{color: #fff;}
.quoteslider .slick-dots li button::before{color: #fff; }

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


footer{min-height:5em; margin-top:2rem; }
.single-overname footer{margin-top: 0;}
.single-overname footer .logo{margin-bottom: 2rem;}
.single-landing footer{margin-top: 0;}
.single-landing footer .logo{margin-bottom: 2rem;}
.single-case footer{margin-top: 0;}
footer .rij1{min-height: 20rem;}
footer .todo{width: calc(100% - 14em); padding-right: 4rem; box-sizing: border-box;}
footer .solo{width: 14em; }
footer .solo p{font-size: 0.95em;}
footer .rij2 span{position: relative; display: inline-block; margin: 0 1em;}



.mobilelogos{display: none; position: fixed; left: 0; width: 100svw; top: 0; height: 100svh; z-index: 5; background-color: #4B2D2D; pointer-events:none;}

.mobilelogos .logo{width: 173%;}

.inview.mobilelogos{opacity:0; transition: opacity 0.3s ease 3.2s;}


.logomobile1{float: left;}
.inview .logomobile1{opacity:1; transition: opacity 0.3s ease 2.4s;}

.inview .logomobile1 .logo-l1{left:calc(0rem ); transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.9s}
.inview .logomobile1 .logo-l2{left:calc(50%); transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.9s}

.logomobile1 .bg span{  transform: translateY(150%);  }
.inview .logomobile1 .bg span{transition: transform 1.1s ease 0.5s; transform: translateY(0);}

.inview2 .logomobile1 .logo-l1{left:calc(-2rem - 3.85%);transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.2s;}
.inview2 .logomobile1 .logo-l2{left:calc(100% - 3.85% + 2rem);transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.2s;}


.logomobile2{float: left;}
.logomobile2 .logo-l1{left:calc(0rem );}
.logomobile2 .logo-l2{left:calc(50%);}
.inview .logomobile2 .logo-l1{left:53.9%;transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.5s;}
.inview .logomobile2 .logo-l2{left:calc(-2rem - 3.85%);transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.5s;}

.logomobile2 .bg span{  transform: translateY(0%);  }
.inview .logomobile2 .bg span{transition: transform 1.1s ease 1.1s; transform: translateY(-150%);}

.inview2 .logomobile2 .logo-l1{left:-2rem;transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.2s;}
.inview2 .logomobile2 .logo-l2{left:calc(-2rem - 3.85%);transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.2s;}
.inview2 .logomobile2 .bg2 span{transition: transform 1.1s ease 0s; transform: translateY(0%);}



.logomobile3{float: right;}
.inview .logomobile3 .logo-l1{left:calc(100% - 4em); transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.4s}
.inview .logomobile3 .logo-l2{left:calc(62.3%); transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.4s}

.logomobile3 .bg span{  transform: translateY(150%);  }
.inview .logomobile3 .bg span{transition: transform 1.1s ease 0.0s; transform: translateY(0);}

.inview2 .logomobile3 .logo-l1{left:-2rem;transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.2s;}
.inview2 .logomobile3 .logo-l2{left:calc(100% - 3.85% + 2rem);transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.2s;}


.logomobile4{float: right;}
.logomobile4 .logo-l1{left:42%;}
.logomobile4 .logo-l2{left:calc(100% - 2em);}

.inview .logomobile4 .logo-l1{left:53.9%; transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.4s}
.inview .logomobile4 .logo-l2{left:58.5%; transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.4s}

.logomobile4 .bg span{  transform: translateY(0%);  }
.inview .logomobile4 .bg span{transition: transform 1.1s ease 1.1s; transform: translateY(-150%);}

.inview2 .logomobile4 .logo-l1{left:calc(100% - 3.85% + 2rem);transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.4s;}
.inview2 .logomobile4 .logo-l2{left:-2rem;transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.4s;}

.inview2 .logomobile4 .bg2 span{transition: transform 1.1s ease 0s; transform: translateY(0%);}



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



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


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

   html{font-size: 21px;}

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

   html{font-size: 22px;}

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

   html{font-size: 23px;}

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

   html{font-size: 24px;}

}
*/
@media screen and (max-width: 2400px) {
  
}

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

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

}

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

}

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

}

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

}

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

  html{font-size: 19px;}
  .introtext p{font-size: 1.4em;}

}

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

  html{font-size: 18px;}
  .blockovernames .omhulsel{padding-left: 2em; padding-right: 2em;}

}

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

  html{font-size: 17px;}
  .introtext p{font-size: 1.3em;}

}

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

  html{font-size: 16px;}
  .introtext p{font-size: 1.2em;}

}

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

  html{font-size: 15px;}
  h1{font-size: 3.6em;text-wrap: pretty;}
  .blocktext h2{font-size: 3.6em;}
}

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

  html{font-size: 14px;}
  footer .paddingx4{padding-left: 2em; padding-right: 2em;}
  footer .todo{width: calc(100% - 12em); padding-right: 2rem;}
  footer .solo{width: 12em;}
  .blockovernames .overnamesslider{ margin-top: -1em;}
  #cases{margin-top: -2rem;}
}

@media screen and (max-width: 800px) {
  
  h1{font-size: 2.8em;text-wrap: pretty;}
  .blocktext h2{font-size: 2.8em;text-wrap: pretty;}
  h2{font-size: 1.7em;}
  h3{font-size: 1.7em;}
  .lamellen{display: none;}
  .blockovernames .omhulsel, .blockovernames .omhulsel .inner2{padding-left: 0em; padding-right: 0em;}
  .flexmiddle{display: block;}
  .varheight05, .varheight10, .varheight15, .varheight20, .varheight25, .varheight30{height: auto!important;}
  .blockphoto2 .thumb{padding-bottom: 70%; margin-top: 2em;}
  .blockphoto2 .title{font-size: 3em;}
  .introtext{position: relative; float: left;}
  .page-home .logo1{display: none;}
  .blockdefault .logo1{width: 100%;}
  .blockdefault2 .logo1{width: 100%;}
  .oneliner{display: none;}
  .logosmall{display: none;}
  .inview2 .logo2 .logo-l1{left:53.9%; transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.4s;}
  .inview2 .logo2 .logo-l2{left:58.5%; transition: left 1s cubic-bezier(0.83, 0, 0.17, 1) 0.4s;}
  .inview2 .logo2 .bg span{transition: transform 1.1s ease 0.9s; transform: translateY(150%);}
  .blocktext .inner.paddingx2{padding-left: 0; padding-right: 0;}
  .blocklogosbottom .inner2.paddingx2, .blocklogoshow .inner2.paddingx2{padding-left: 0; padding-right: 0;}
  .blockphoto .thumb{padding-bottom: 115%;}
  .blockphoto .thumb::after{content: ""; position: absolute; height: 100%; top:0; right: 0; background-image:url('../img/icons/graph1.svg'); width: 100%; background-repeat: no-repeat; background-position: top right -1px; background-size: auto 100%;}
  .logo .bg span{box-shadow: 0px 0px 10px 12px rgba(75, 45, 45, 0.3); }
  .logo .bg2 span{box-shadow: 0px 0px 10px 12px rgba(75, 45, 45, 0.3); }
  .introtext p{font-size: 1.5em;}
  label{font-size: 1.3em; margin-bottom: 1.3em;}
  p, ul{font-size: 1.4em;}
  .introtext{margin-bottom: 3em;}
  #space1::after{content: ""; opacity: 0; transform: translateY(3em); position: relative; float: left; width: 100%; padding-bottom: 159.79%; height: 0; top:0; right: 0; background-image:url('../img/icons/graph2.svg');background-repeat: no-repeat; background-position: top center; background-size: 100% auto;}
  .slick-list, .slick-track{overflow: visible;}
  .blockovernames .overnamesslider .overnameitem{padding: 0 1em;}
 
  .blockovernames .overnamesslider .slick-slide{ }
  .blockovernames .overnamesslider{width: calc(100% ); left: calc(-20% - 1em); margin-bottom: 6em;}
  .benjamintext article{margin-top: 0;}
  .btn{font-size: 1.1em;}
  /*space1.inview::after{opacity: 1; transform: translateY(0em); transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s;} */
#space1{display: none;}
h1, h2{overflow-wrap: break-word;}
  .mobilelogos{display: block;}
   .logo3{opacity: 0!important;}
   .blockphoto2 .thumb::after{content: ""; position: absolute; height: 100%; top:0; right: 0; background-image:url('../img/icons/graph3.svg'); width: 100%; background-repeat: no-repeat; background-position: top right -1px; background-size: auto 100%;}
   #cases { margin-top: 3rem }
}

@media screen and (max-width: 680px) {
  
  footer .todo{width: 100%; margin-bottom: 2em; padding-right: 0;}
  footer .solo{width: 100%;}
  footer .solo p{font-size: 1.2em;}
  footer .todo p{font-size: 1.2em;}
  footer .rij2 span{width: 100%; margin: 0; opacity: 0;}
  footer .rij2 .solo{margin-top: 2em;}
  footer .rij2 .solo p{text-align: right;}
  footer .rij1 .solo{margin-bottom: 3.6em;}
  .benjamintext h2{display: block;}
  .blockphoto2 .title{display: none!important;}
  .blockphoto2 .thumb{padding-left: 0; padding-bottom: 76.66%;position: relative; float: left; width: 100%; margin-top: 0;}

  #spacebenajamin{display: none;}
  .blocktext h2{margin-bottom: 2rem;}
  h1{margin-bottom: 1.6rem;}
  .paddingx2{padding-left: 1.5em; padding-right: 1.5em;}
  .blockovernames .overnamesslider .overnameitem .inner2{padding-left: 1em; padding-right: 1em;}
  .blockovernames .overnamesslider .overnameitem{padding-left: 0.75em; padding-right: 0.75em;}
  .quote p strong{font-size: 1em;}
}

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

}

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

  .blockovernames .overnamesslider{width: calc(100% ); left: calc(-7% - 1em); margin-bottom: 6em;}

}

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

}

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

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

}