*{padding: 0; margin: 0; box-sizing: border-box;}
html {
  scroll-behavior: smooth;
}
body{
    --color-cream: hsla(33, 58%, 96%, 1);
    --color-midnight: hsla(0, 0%, 17%, 1);
    --color-bronze: hsla(26, 56%, 67%, 1);
    --color-bronze0: hsla(26, 56%, 67%, 0);
    --color-white: hsla(0, 0%, 100%, 1);
    --color-black: hsla(0, 0%, 0%, 1);
    --color-black20: hsla(0, 0%, 0%, .2);

    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    background: var(--color-cream);
    color: var(--color-midnight);
    font-weight: 400;
    font-size: 0.875rem; /*14px*/
    line-height: 1.563rem; /*25px*/
    overflow-x: hidden;
    }

    body.scrolling {
  overflow-y: hidden;
  position: fixed;
  width: 100dvw;
  height: 100dvh;
}

    .uppercase{text-transform: uppercase;}
    .hidden{display:none;}
    h1{padding: 0; margin: 0; font-size: clamp(1.5rem, 1.125rem + 1.45vw, 1.875rem); font-weight: normal;}
    h2{text-transform: uppercase; font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem); font-weight: 400; letter-spacing:0.5em; line-height: 2.25rem; }
    hr{border: none; background: var(--color-bronze); height: 1px;}
    a[href^=tel] {
      text-decoration: none;
    }
    a.cta{text-transform: uppercase; letter-spacing: 0.4em; color: var(--color-midnight); border-bottom: 1px solid var(--color-bronze); text-decoration: none; transition: all .2s ease-in-out; padding-bottom: 5px;}
    a.cta:hover, a.cta:visited, a.cta:active{color: var(--color-bronze);}
    .arrow {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
    }
    
    .arrow-stem {
      width: 1.5px;
      height: 56.4px;
      background: var(--color-white);
      display: inline-block;
      transform-origin: bottom;
      animation: stretch-stem 1.5s ease-in-out infinite alternate;
    }
    
    .arrow-down {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-top: 1.5px solid var(--color-white);
      border-right: 1.5px solid var(--color-white);
      transform: rotate(135deg);
      margin-top: -7px;
    }
    
    @keyframes stretch-stem {
      0% {
        transform: scaleY(1);
      }
      100% {
        transform: scaleY(1.2);
      }
    }


    .container{width: 100%; max-width: 1400px; margin-inline: auto;     padding-inline: 2rem;}
    .container.d-flex{display: flex; gap: 3rem; flex-direction: column; }
  

    #intro{display: grid; width: 100dvw; height: 100dvh; overflow:hidden; place-items: center; position: absolute; top: 0; left: 0; z-index: 10 !important; background-color: var(--color-cream); opacity: 1;}
    
    .intro__img{position: absolute; top: 50%; left: 50%; height: auto; transform:translate(-50%, -50%); opacity: 0; aspect-ratio: 5 / 7; object-fit: cover;}
    .intro__img:nth-of-type(1){width: 20%;}
    .intro__img:nth-of-type(2){width: 40%;}
    .intro__img:nth-of-type(3){width: 60%;}
    .intro__img:nth-of-type(4){width: 80%;}
    .intro__img:last-of-type{height: 100%; width: 100%; object-fit: cover;}

    .intro__logo{width: 143px; height: auto;}
    .intro__title p{font-weight: 400; font-size: 0.875rem; text-transform: uppercase; letter-spacing: .4em; width: 100%; display: inline-flex; flex-direction: column; gap: 5rem; justify-content: space-between; align-items: center; margin: 0; padding: 0;}
    .intro__title{max-width: 918px; width: 100%; margin-inline: auto; display: flex; flex-direction: row;}
    .intro__title p span, .intro__title p img, .intro__img{opacity: 0;}
    .intro__title p span, .intro__logo{transform: translateY(50px);}

    header{width: 100dvw; height: 100dvh; position: relative; z-index: 1;}
    #header__top{display: flex; flex-direction: column-reverse; align-items: center; opacity: 1}
    header > .container{height: 100%; padding-top: 2rem; padding-bottom: 2rem; display: flex; flex-direction: column; /*gap:5.625rem;*/ justify-content: flex-start; align-items: center; position: relative;}

    
    #header__bottom{display: flex; flex-wrap: wrap; justify-content: center; position: relative; opacity: 1; margin-top: auto;}
    #header__bottom h1{color: var(--color-white); line-height: 2.125rem; letter-spacing: 0.4em; text-transform: uppercase; margin-bottom: 1.25rem; width: 100%}
    #header__bottom .arrow{margin-left: auto; margin-right: auto; order: 1; margin-top: 5px; position: absolute; bottom: 0;}
    #header__bottom img.vta_label{max-width: 68px; height: 68px; order: 2; margin-left: auto;}
    #header__bottom.hidden, #header__top.hidden{display: none;}
    header .mobilelogo{max-width: 125px; margin-top: 5.375rem;}
.main_nav li.desktoplogo{display: none;}
.main_nav, .main_nav li{padding: 0; margin: 0; list-style-type: none;}
.main_nav{display: flex; flex-direction: column; align-items: center; row-gap: 3rem; margin-top: 3.5rem}
.main_nav::after{content:''; height: 1.5px; width: 33px; background: var(--color-bronze)}
.main_nav li a{font-size: 1.25rem; text-transform: uppercase; letter-spacing: .4em; color: var(--color-black); text-decoration: none;}
.main_nav li a:hover{color: var(--color-bronze)}
    
    ul.lang_select, ul.lang_select li{padding: 0; margin: 0; list-style: none;}
    ul.lang_select{display: flex; flex-direction: row; gap: 2rem; margin-top: 2.813rem;}
    ul.lang_select a{font-size: 0.75rem; text-decoration: none; transition: all .3s ease-in-out; color: var(--color-black); border: 1px solid var(--color-bronze0); border-radius: 2rem; padding: .5rem;}
    ul.lang_select a:hover, ul.lang_select a.active{color: var(--color-bronze); border: 1px solid var(--color-bronze); background: var(--color-black20);}



    .opened-menu {
  position: fixed;
  display: block;
  cursor: pointer;
  width: 2.5rem;
  height: 1.25rem;
  border: none;
  outline: none;
  opacity: 1;
  visibility: visible;
  background: none;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
  z-index: 999;
  padding: 0;
  margin: 0;
}

.opened-menu span {
  display: block;
  position: absolute;
  width: 100%;
  height: 1.5px;
  right: 0;
  border: none;
  outline: none;
  opacity: 1;
  border-radius: 0;
  background: var(--color-cream);
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.opened-menu span:nth-child(1) {
  top: 0;
}

.opened-menu span:nth-child(2), .opened-menu span:nth-child(3) {
  top: 9px;
}

.opened-menu span:nth-child(4) {
  bottom: 0;
}


.opened-menu.close span{width: 100%; background: var(--color-black);}

.opened-menu.close span:nth-child(1){
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  top: 10px;
}
.opened-menu.close span:nth-child(2), .opened-menu.close span:nth-child(3){
  opacity: 0;
}
.opened-menu.close span:nth-child(4){
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
  top: 10px;
}


    main{width: 100dvw; text-align: center;}
    header h1{text-align: center;}
    #header__backdrop{background-color: var(--color-black); height: 100%; width: 100%; position: absolute; z-index: -1; top:0; transition: background-color .3s ease-in-out}
    #header__backdrop.active{background-color: var(--color-cream);}
    #header__backdrop img{width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.65; transition: opacity .3s ease-in-out}
    #header__backdrop.active img{opacity: 0;}

    main h2{letter-spacing: normal; text-transform: none; font-size: clamp(1.25rem, 1rem + 1.8vw, 1.25rem);} 
    main h2.uppercase{font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem); letter-spacing:0.5em; line-height: 2.25rem;}
    main h2.w-sm-narrow{max-width: 75%; margin-inline: auto;}
    main img{display: block; width: 100%; height: auto; object-fit: contain;}
    main img.full-width-image, #carousel{width: 100dvw; margin-left: calc(-50dvw + 50%); max-width: 100dvw;}

    main > .container{padding-top: 5rem;}
    main > .container:last-child{padding-bottom: 5rem;}
    main > .container.d-sm-flex{display: flex; gap: 3.125rem; flex-direction: column;}

    cite{font-weight: bold;}
    cite::before{content:'-'; margin-right: .5rem;}

    #carousel{
      counter-reset: card-counter;
    }
    #carousel .card{
      position: relative;
      display: block;
      margin: 0;
      counter-increment: card-counter;
    }

    #carousel .card img{
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 9/12;
      object-fit: cover;
    }
    #carousel .card::after{
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(1, 1, 1, 0.5);
      background: linear-gradient(0deg, rgba(1, 1, 1, 0.65), rgba(1, 1, 1, 0.0));
      pointer-events: none;
    }

    #carousel .card .card__text{
      position: absolute;
      max-width: 260px;
      width: 100%;
      bottom: 4.125rem;
      left: 50%;
      transform: translateX(-50%);
      color: var(--color-white);
      z-index: 99;
      text-align: left;
    }
    #carousel .card .card__text p{
      /*font-size: 0.719rem;*/
      font-size: 0.875rem;
      line-height: 1.284rem;
    }
    #carousel .card .card__text p:first-of-type{
      margin-top: 2.5rem;
    }
    #carousel .card .card__text h3{
      font-size: 1.25rem;
      padding-left: 3.625rem;
      position: relative;
      font-weight: 400;
    }
    #carousel .card .card__text h3::before{
      content: counter(card-counter);
      position: absolute;
      left: 0;
      top: 0;
    }
    #carousel .card .card__text h4{
      font-size: 0.813rem;
      position: relative;
      padding-left: 3.625rem;
      margin-top: .5rem;
    }
    #carousel .card .card__text h4::before{
      content: '';
      display: block;
      position: absolute; 
      left: 0;
      top: .75rem;
      width: 28px; height: 1px; background: var(--color-white);
    }

  .swiper_nav_wrapper{position: relative; margin-top: 3rem; display: flex; padding-inline: 3.5rem;}
  .swiper-prev, .swiper-next{width: 28px; height: 10px; display: inline-block; background: url(../img/arrow_bronze.svg) no-repeat center center;}
  .swiper-prev{transform: rotate(-180deg);}
  .swiper-prev.swiper-button-disabled{}
  .swiper-next{}
  .swiper-next.swiper-button-disabled{}
  .swiper-pagination{position: relative;}
.swiper-pagination-bullet{border-radius: 0; width: 10px; height: 3px; margin: 0 2.5px !important; transition: all .3s ease-in-out; background: var(--color-bronze); opacity: 0.3;}
.swiper-pagination-bullet-active{background: var(--color-bronze); color:var(--color-bronze); width: 20px; opacity: 1;}

    figure.gradient-overlay {
      position: relative;
      display: inline-block;
      margin: 0;
    }
    
    figure.gradient-overlay img {
      display: block;
      width: 100%;
      height: auto;
    }
    
    figure.gradient-overlay::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 81.32%, rgba(0, 0, 0, 0.6) 100%);
      pointer-events: none;
    }
    
    figure.gradient-overlay figcaption {
      position: absolute;
      font-style: italic;
      bottom: 1rem;
      right: 1.5rem;
      color: var(--color-white);
      font-size: 0.75rem;
      z-index: 99;
    }

    footer{background: var(--color-midnight); width: 100dvw; height: auto; color: var(--color-white); text-align: center; padding-top: 9.375rem; padding-bottom: 3.75rem; z-index: 5; margin-top: -11rem;}
    #footer__top .col{display: flex; flex-direction: column; gap: 2rem; align-items: center;}
    #footer__top .col:last-child{padding-top: 3rem; margin-top: 3rem; border-top: 1px solid var(--color-bronze);}

    footer .col hr{width: 40%}
    footer .logo{max-width: 130px; height: auto; display: inline-block;}
    footer a{color: var(--color-white);}
    footer a:hover{color: var(--color-bronze)}
    #footer__bottom{font-size: 0.75rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; border-top: 1px solid var(--color-bronze); padding-top: 4.688rem; margin-top: 1.688rem
      }
    #footer__bottom a{text-decoration: none; border-bottom: 1px solid rgba(75, 54, 54, 0) ;transition: all .2s ease-in-out; }
    #footer__bottom a:hover{border-bottom: 1px solid var(--color-bronze); color: var(--color-white)}

    ul.clean, ul.clean li{padding: 0; margin: 0; list-style-type: none;}
    ul.d-flex{display: flex; flex-direction: row; align-items: center; gap: 1rem; line-height: 1.2rem; flex-wrap: wrap; justify-content: center;}
    ul.b-right li{border-right: 1px solid var(--color-white); padding-right: 1rem;}
    ul.b-right li:last-child{border-right: none;}
    #footer__bottom ul.clean > li:first-child {flex: 0 0 100%; max-width: 100%; border-right: 0; margin-right: -0.5rem;}
    .locations > span:last-child:before{content:'& ';}

    .social_links, .social_links li{padding: 0; margin: 0; list-style: none;}
.social_links{display: inline-flex; gap: 1rem;}


.social_links li a{display: block; height: 15px; width: 15px;  transition: background-image 0.3s ease; background-position: center center; background-repeat: no-repeat;}
.social_links li a span{position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  white-space: nowrap;
  border: 0;}
.social_links li a.facebook{background-image: url(/img/icon_facebook.svg);}
.social_links li a.facebook:hover{background-image: url(/img/icon_facebook_bronze.svg);}
.social_links li a.instagram{background-image: url(/img/icon_instagram.svg);}
.social_links li a.instagram:hover{background-image: url(/img/icon_instagram_bronze.svg);}
.social_links li a.linkedin{background-image: url(/img/icon_linkedin.svg);}
.social_links li a.linkedin:hover{background-image: url(/img/icon_linkedin_bronze.svg);}
  


header .social_links li a.facebook{background-image: url(/img/icon_facebook_midnight.svg);}
header .social_links li a.instagram{background-image: url(/img/icon_instagram_midnight.svg);}
header .social_links li a.linkedin{background-image: url(/img/icon_linkedin_midnight.svg);}
header .social_links{margin-top: 20%; gap: 2rem;}

/* FORM STYLING */
.alert p:last-child{margin-bottom: 0; padding-bottom:0;}
.alert.success{display: flex; gap: 1rem;}

button{background: var(--color-bronze); color: var(--color-midnight); width: 100%; border: 0; border-radius: 0; line-height: 1rem; padding: 1rem 1.275rem; letter-spacing: 0.2rem; font-weight: 400; margin-top: 2rem; transition: all .2s ease-in-out;}
button:hover{cursor: pointer; color: var(--color-white)}
label.hidden{display: none;}
input[type="text"], input[type="email"], textarea{background: var(--color-midnight) !important; color: var(--color-white); width: 100%; border: 0; border: 1px solid var(--color-white); padding: 1rem; margin-bottom: 1rem; border-radius: 0; transition: padding .3s ease-in-out, background .3s ease-in-out; outline: 1px solid transparent}
input::placeholder, textarea::placeholder{color: var(--color-white)}
textarea{resize: none; line-height: 1.688rem;}
input[type="text"]:focus, 
input[type="text"]:focus-visible, 
input[type="email"]:focus, 
input[type="email"]:focus-visible, 
textarea:focus, 
textarea:focus-visible{
  outline: 1px solid var(--color-bronze); background: var(--color-midnight); border: 1px solid transparent; padding: 1rem; box-shadow: none; border-radius: 0; color: var(--color-white)
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px var(--color-midnight) inset;
    -webkit-text-fill-color: var(--color-white);
}

.styled-checkbox {
  position: absolute;
  opacity: 0;
}
.styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  display: block;
  text-align: left;
  font-size: 12px;
}
.styled-checkbox + label:before {
  content: "";
  margin-right: .75rem;
  margin-top: 1px;
  display: inline-block;
  vertical-align: text-top;
  width: 15px;
  height: 15px;
  background: none;
  border: 1px solid var(--color-white);
  transition: background .1s ease-in-out;
}
.styled-checkbox:hover + label:before {
  background: var(--color-primary10);
}
.styled-checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before {
  background: var(--color-secondary);
}
.styled-checkbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.styled-checkbox:disabled + label:before {
  box-shadow: none;
  background: #ddd;
}
.styled-checkbox:checked + label:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 13px;
  background: var(--color-white);
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 var(--color-white), 4px 0 0 var(--color-white), 4px -2px 0 var(--color-white), 4px -4px 0 var(--color-white), 4px -6px 0 var(--color-white), 4px -8px 0 var(--color-white);
  transform: rotate(45deg);
}

#wsc__about__photo3{display: none;}
#wsc__about__content2{display: flex; flex-direction: column; row-gap: 4rem;}
#wsc__concept__text1, #wsc__concept__text2, #wsc__werkwijze .text, #wsc__about__quote, #wsc__about__content1{display: flex; flex-direction: column; row-gap: 2rem;}
#wsc__about__photo4{margin-bottom: 3rem;}
#wsc__followus__text{display: flex; flex-direction: column; row-gap: 2rem; align-items: center;}
 #wsc__followus__images{display: flex; flex-direction: row; column-gap: 20px; flex-wrap: nowrap; z-index: 10; overflow-x:hidden;}
  #wsc__followus__images img{max-width: calc(50% - 1rem);}

  #about{scroll-margin-top: 3rem;}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container{padding-inline: 4rem;}
 main > .container.d-grid{display: grid; row-gap: 7.063rem; column-gap: 0; grid-template-columns: 1fr 1fr; column-gap: 6rem;}
 main{width: 100dvw; text-align: left;}
 main h2{max-width: 275px;}
 #header__bottom h1{line-height: 3.5rem;}

  #wsc__concept__maintitle{grid-row-start: 1; grid-column-start: 1;}
  #wsc__concept__maintext, #wsc__concept__cta{grid-row-start: 1; grid-column-start: 2;}
  #wsc__concept__cta{margin-top: auto; margin-bottom: 0;}

  #wsc__concept__photo1 {grid-row-start: 1; grid-column-start: 1; margin-top: 8rem;}
  #wsc__concept__photo2 {grid-row-start: 2; grid-column: 1 / -1;}
  #wsc__concept__quote{grid-row-start: 3; grid-column: 1 / -1; text-align: center; max-width: 315px; margin-inline: auto;}
  #wsc__concept__quote span{display: block;}
  #wsc__concept__photo3 {grid-row-start: 4; grid-column: 1 / -1;}
  #wsc__concept__text1, #wsc__concept__text2{grid-row-start: 5;}
  #wsc__concept hr{grid-row-start: 6; grid-column: 1 / -1;}

  #wsc__werkwijze .text{grid-row-start: 1; grid-column: 1 / -1; display: flex; flex-direction: column; row-gap: 2rem;}
  main h2.w-sm-narrow{max-width: 100%; margin-inline: 0;}
  #wsc__werkwijze #carousel{grid-row-start: 2; grid-column: 1 / -1;}
  
  #wsc__about__photo1{grid-row-start: 1; grid-column: 1 / -1;}
  #wsc__about__content1{grid-row-start: 2; grid-column: 1 / -1}
  #wsc__about__content1 img, #wsc__about__photo4{display: none;}
  #wsc__about__content2{grid-row-start: 3; grid-column: 1 / -1}
  #wsc__about__photo4{grid-row-start: 4; grid-column: 1 / -1; max-width: 56%; display: inline-block; margin-inline: auto;}
  #wsc__about hr{grid-row: 5; grid-column: 1 / -1; width: 100%; max-width: 56%; margin-inline: auto; display: inline-block}
  #wsc__about__quote{text-align: center; max-width: 56%; margin-inline: auto;  margin-top: 6.875rem; display: flex; flex-direction: column; row-gap: 3.625rem;}

  #wsc__followus__text{grid-row-start: 1; grid-column: 1 / -1;}
  #wsc__followus__images{grid-row-start: 2; grid-column: 1 / -1; overflow: hidden; width: 100%;}
  #wsc__followus__images img{  width: calc((100% - 40px) / 3); /* account for 2 gaps of 20px */
  height: auto;
  flex-shrink: 0;}

  .swiper-wrapper{height: auto;}
  .card.swiper-slide{max-width: 450px; aspect-ratio: 3 / 4; height: auto;}
  #carousel .card img{aspect-ratio: 3 / 4; width: 100%; height: auto;}
  #carousel{width: 100%; margin-left: 0; overflow: visible;}
  #carousel .card .card__text{max-width: 65%}
  
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {



      @keyframes stretch-stem {
      0% {
        transform: scaleY(1);
      }
      100% {
        transform: scaleY(1.4);
      }
    }

    .intro__title p{font-weight: 400; font-size: 0.875rem; text-transform: uppercase; letter-spacing: .4em; width: 100%; display: inline-flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 0; padding: 0;}
    .intro__title{max-width: 918px; width: 100%; margin-inline: auto; display: flex; flex-direction: row;}
    .intro__title p span, .intro__title p img, .intro__img{opacity: 0;}
    .intro__title p span, .intro__logo{transform: translateY(50px);}
    .intro__img{aspect-ratio: 7 / 5;}

main > .container.d-grid{display: grid; row-gap: 3rem; column-gap: 0; grid-template-columns: 365px 1fr 365px; column-gap: 0;}
  .d-l-none{display: none; height: 0;}
  .container{padding-inline: 1.5rem; max-width: 900px;}
  header{color: var(--color-white); padding-bottom: 5rem; padding-top: 2.5rem}
  header h1{text-align: left; letter-spacing: 0.5em; text-transform: uppercase; line-height: 3.375rem;}
  header h1 span{display: block;}
  .main_nav{
    list-style: none;
    padding: 0; 
    margin: 0;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-basis: 100%;
  }
  main{text-align: left;}
  .main_nav li a{text-transform: uppercase; font-size:0.938rem; letter-spacing: 0.5em;text-decoration: none; color: var(--color-white); border-bottom: 2px solid var(--color-bronze0); text-decoration: none; transition: all .2s ease-in-out; padding-bottom: 5px;}
  .main_nav li a:hover{border-bottom: 2px solid var(--color-bronze)}
  .main_nav li a span{margin-right: -0.5em; display: inline-block;}
  .main_nav li img.logo{max-width: 130px; height: auto; display: inline-block;}
  .main_nav li.desktoplogo{display: inline-block;}
  .main_nav::after{display: none;}
  .lang_select li a{color: var(--color-white);}

  header .container{display: flex; flex-direction: column; justify-content: space-between; height: 100%; position: relative; z-index: 10; padding-top: 0; padding-bottom: 0;}
  #header__top.hidden{display: flex;}
  #header__top{display: flex; row-gap: 0.438rem; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%;}
  #header__bottom{display: flex; flex-direction: row; gap: 0; align-items: flex-end; position: relative; flex-wrap: nowrap; width: 100%;}
  #header__bottom h1{letter-spacing: .5em; line-height: 3.125rem; margin-bottom: 0;}
  #header__bottom .arrow{margin-bottom: 1rem; margin-inline: 0; margin-right: 2rem; margin-left: 1rem; position: relative;}
  #header__bottom img.vta_label{margin-left: auto; max-width: 94px; width: 94px; height: 94px;}

header .social_links li a.facebook{background-image: url(/img/icon_facebook.svg);}
header .social_links li a.instagram{background-image: url(/img/icon_instagram.svg);}
header .social_links li a.linkedin{background-image: url(/img/icon_linkedin.svg);}
header .social_links, ul.lang_select{margin-top: 0;}
ul.lang_select{gap: 1rem;}
ul.lang_select li a{font-size: 0.813rem;}

  #carousel{margin-left: 0; width: 100%; max-width: 100%; overflow-x:hidden;}
  #carousel .cards { will-change: transform; display: flex; flex-wrap: nowrap; column-gap: 5rem; margin-top: 8.75rem; }
  #carousel .card{flex: 0 0 auto; display: inline-flex; flex-direction: row-reverse; justify-content: space-between; column-gap: 10rem; width: 100%; max-width: 1000px;}
  #carousel .card img{
    display: block;
    width: 100%;
    max-width: 365px;
    height: auto;
    aspect-ratio: initial;
    object-fit: cover;
  }
  #carousel .card::after{
    background: none;
  }

  #carousel .card .card__text{
    position: relative;
    max-width: unset;
    bottom: unset; left: unset;
    transform: unset;
    width: 100%;
    max-width: 22.875rem;
    color: var(--color-black)
  }
  #carousel .card .card__text::before{
    content: '';
    position: absolute; 
      left: -80px;
      top: .75rem;
      width: 60px; height: 1px; background: var(--color-bronze);

  }

  #carousel .card .card__text p{
    font-size: 0.875rem;
    line-height: 1.563rem;

  }
  #carousel .card .card__text p:first-of-type{
    margin-top: 2.5rem;
  }
  #carousel .card .card__text h3{
    font-size: 1.5rem;
    padding-left: 0rem;
    position: relative;
  }
  #carousel .card .card__text h3::before{
    content: counter(card-counter);
    position: absolute;
    left: -110px;
    top: 0;
  }
  #carousel .card .card__text h4{
    font-size: 1rem;
    position: relative;
    padding-left: 0rem;
    margin-top: 1rem;
    font-weight: normal;
  }
  #carousel .card .card__text h4::before{
    display: none;
  }

      .card.swiper-slide{aspect-ratio: unset;}

  .swiper_nav_wrapper{display: none;}


  #wsc__concept__maintitle{grid-row-start: 1; grid-column-start: 1;}
  #wsc__concept__maintext{grid-row-start: 1; grid-column-start: 3;}
  #wsc__concept__photo1{grid-row-start: 2; grid-column-start: 1; margin-top: 0;}
  #wsc__concept__cta{grid-row-start: 2; grid-column-start: 3; margin-top: 0; margin-bottom: auto;}
  #wsc__concept__photo2{grid-row-start: 2; grid-column-start: 3; width: 621px; margin-top: 169px;}
  #wsc__concept__photo3{grid-row-start: 3; grid-column: 1 / -1; margin-top: 3.625rem;}
  #wsc__concept__quote{grid-row-start: 2; grid-column-start: 1; grid-column-end: 1; margin-top: auto; font-size: 1.125rem; max-width: 100%; margin-inline: 0; text-align: left;}
  #wsc__concept__quote span, #wsc__concept__maintitle span{display: block;}
  #wsc__concept__text1{grid-row-start: 4; grid-column-start: 1;}
  #wsc__concept__text2{grid-row-start: 4; grid-column-start: 3;}
  #wsc__concept__text1 h2, #wsc__concept__text2 h2, #wsc__about h2{margin-bottom: 3.375rem}
  #wsc__concept hr{grid-row-start: 5; grid-column: 1 / -1;}
  #wsc__concept{row-gap: 4.75rem;}
  main img.full-width-image{margin-left: 0; width: 100%; display: block;}

  #wsc__werkwijze h2{grid-row-start: 1; grid-column: 1 / 3; margin-inline: 0; max-width: 100%;}
  #wsc__werkwijze__text{grid-row-start: 2; grid-column: 1 / 3;}
  #wsc__werkwijze__cta{grid-row-start: 3; grid-column-start: 1;}
  #wsc__werkwijze #carousel{grid-row-start: 4; grid-column: 1 / -1;}
  #wsc__werkwijze .text{display: flex; row-gap: 2.5rem; flex-direction: column; max-width: 85%;}

  #wsc__about__photo1{grid-row-start:1; grid-column: 1 / -1; /*margin-top: -10rem;*/}
  #wsc__about__quote{max-width: 100%; margin: 0; text-align: left; row-gap: 3.125rem;}
  #wsc__about__content1{grid-row-start: 2; grid-column-start: 3;}
  #wsc__about__content1 p:first-of-type{margin-bottom: 3.125rem;}
  #wsc__about__content1 p:last-of-type{margin-bottom: 5.75rem;}
  #wsc__about__content1 img{display: inline-block;}
  #wsc__about__content2{grid-row-start: 2; grid-column: 1 / 1;}
  #wsc__about__photo2{margin-left: -256px}
  #wsc__about__content1, #wsc__about__content2{display: flex; flex-direction: column; justify-content: space-between;}
  #wsc__about hr{grid-row-start: 3; grid-column: 1 / -1;}
  #wsc__about{padding-top: 0; row-gap: 10.625rem;}
  #wsc__about hr{display: inline-block; max-width: 100%;}
  #wsc__about__photo4{display: none;}

  #wsc__followus{grid-template-columns: 365px 1fr 494px; padding-top: 10.313rem; padding-bottom: 10.313rem;}
  #wsc__followus__text{grid-row-start: 1; grid-column: 1; display: flex; flex-direction: column; align-items: flex-start; row-gap: 0;}
  #wsc__followus__text .cta{margin-top: auto;}
  #wsc__followus h2{margin-bottom: 2.625rem;}
  #wsc__followus__images{grid-column-start: 3; grid-row-start: 1; display: flex; flex-direction: row; column-gap: 20px; flex-wrap: nowrap; overflow: visible;}
  #wsc__followus__images img{max-width: 280px; width: auto;}

  footer{margin-top: 0;}

  
  .scroll-buffer {
  width: 120px; /* of hoeveel extra je wil */
  flex-shrink: 0;
}
  }


/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container{max-width: 1000px; padding-inline: 0;}
  main h2{font-size: 1.5rem; max-width: 100%;}
  

  footer{text-align: left; height: auto;}
  footer .col hr{width: 60%}
  #footer__top{display: flex; justify-content: space-between;}
  #footer__top .col:last-child{padding-top: 0; margin-top: 0; border-top: 0; max-width: 495px;}
  #footer__top .col{align-items: flex-start;}
  footer button{width: auto;}
  footer .logo{margin-bottom: 2rem;}
  #footer__bottom ul.clean > li:first-child {flex: initial; max-width: none; border-right: 1px solid var(--color-white); margin-right: 0rem;}
  #footer__bottom{flex-direction: row; padding-top: 3rem; margin-top: 5rem;}
  
  .styled-checkbox + label:before{margin-top: 0;}
  .locations > span:before, .locations > span:last-child:before{content:'\2022'; margin-right: .75rem;}
  .locations > span:last-child{display: block;}
  .locations > span{margin-bottom: 2rem; display: inline-block;}
  .locations span > span:last-child{display: block; margin-left: 1.1rem;}

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1440px) {

  body{font-size: 1.125rem; line-height: 2.125rem; min-height: 400vh;}
  #carousel .card .card__text p{font-size: 1.125rem; line-height: 2.125rem;}
  #carousel .card .card__text h4{font-size: 1.125rem;}
  .container{max-width: 1400px}

  #carousel .card {max-width: 1400px;}
  #carousel .card img{max-width: 465px;}
  #carousel .card .card__text{max-width: 550px;}
  #wsc__followus{grid-template-columns: 565px 1fr 800px;}
  main > .container.d-grid {
        display: grid
;
        row-gap: 3rem;
        column-gap: 0;
        grid-template-columns: 565px 1fr 565px;
        column-gap: 0;
    }

    #wsc__concept__photo2{margin-top: 450px;}
    #wsc__followus__text p{max-width: 330px;}

    .container p{max-width: 475px;}
    #wsc__concept__quote{max-width: 435px;}
    #wsc__concept__text1 p, #wsc__concept__text2 p{max-width: 475px;}
    #wsc__concept__text1 h2, #wsc__concept__text2 h2{margin-bottom: 0;}
    #carousel .card p{max-width: 500px;}
    #wsc__werkwijze__text{max-width: 875px}
    p.locations{max-width: 255px;}
    footer .col hr{width: 100%;}
    #wsc__concept__photo3{margin-top: 8rem;}
    
}