header {
  width:100%;
  background-color:black;
  aspect-ratio:1600 / 900;
  max-height:70vh;
  min-height:400px;
  border-radius:46px 0px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  margin:30px auto;
  align-items:flex-start;
  position:relative;
  overflow:hidden;
  z-index:1;
}
  header .overlay.top.right {
    width:190px;
    height:72px;
  }
  header h1 {
    padding:25px 50px;

  }

  header .bg {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
  }
    header .bg .bg-media {
      width:inherit;
      height:inherit;
      background-size:cover;
      background-position:center;
      object-fit:cover;
      object-position:center;
    }

@media (max-width:1399px) {
  header .overlay.top.right {
    width:183px;
  }
}
@media (max-width:1199px) {
  header .overlay.top.right {
    width:72px;
  }
}
@media (max-width:767px) {
  header {
    border-radius: 23px 0px;
  }
  header h1 {
    padding:25px;
  }
}
#projecten .scroll-container {
  height:2000px;
}
.scroll-container {
  z-index:1;
}
.scroll-container[data-status="ended"] {
  position:relative;
}
.scroll-container .container.scroll-sticky {
      margin:0 -15px !important;
      width:calc(100% + 30px);
}
.scroll-container[data-status="sticking"] .scroll-sticky {
  position:fixed;
  bottom:50vh;
  transform:translateY(50%);
}
.scroll-container[data-status="ended"] .scroll-sticky {
  position:absolute;
  bottom:0;
}


.scroll-slider {
  width:100%;
  height:100%;
  min-height:600px;
  max-height:80vh;
  display:block;
  position:relative;
  overflow:visible;

}

  .scroll-slider .scroll-rails {
    height:100%;
    width:auto;
    white-space:nowrap;
    position:absolute;
    overflow:visible;
    font-size:0;
    display: inline-flex;
    pointer-events:none;
    will-change: transform;
  	transform: translate3d(0,0,0);
  	backface-visibility: hidden;
  }
    .scroll-slider .proj {
      height:100%;
      aspect-ratio:.7;
      display:inline-block;
      position:relative;
      margin:0;
      padding:0;
      margin-left:50px;
      cursor:pointer;
      transition:.3s;
      pointer-events:auto;
      text-decoration:none;

    }
    @media (min-width:767px) {
      .scroll-slider .proj.hide {
        opacity:0;
        pointer-events:none;
      }
    }

      .scroll-slider .proj .card {
        width:100%;
        height:100%;
        border:0;

        margin:0;
        border-radius:23px;
        overflow:visible;
        display:flex;
        justify-content:flex-end;
        flex-direction:column;
        z-index:1;
        transition:.3s;
      }
      .scroll-slider .proj:hover .card {
        transform:translateY(-50px) rotate(5deg);
        transition:.3s;
      }




        .scroll-slider .proj .card .contents {
          color:var(--lightgray);
          padding:60px 30px 30px 30px;
          background: #000000;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
          opacity:0;
          transform:translateY(20px);
          transition:.5s;
        }
        .scroll-slider .proj:hover .card .contents {
          opacity:1;
          transform:translateY(0px);
        }
          .scroll-slider .proj .card .contents * {
            padding:0;
            margin:0;
          }

    .scroll-slider .proj .end-card {
      width:100%;
      height:100%;
      border:0;
      margin:0;
      border-radius:23px;
      overflow:hidden;
      display:flex;
      justify-content:center;
      align-items:center;
      z-index:1;
      transition:.3s;
      cursor:default;

    }

@media (max-width:1399px) {
  .scroll-slider {
    min-height:unset;
  }
}
@media (max-width:767px) {
  .scroll-container .scroll-sticky {
    height:calc(100vh - 80px);
    padding-top:50px;
  }
    .scroll-container .scroll-sticky > .row {
      height:100%;

    }
  .scroll-container .text-cont {
    height:210px;
  }
  .scroll-container .image-cont {
    height:calc(100% - 210px);
  }

  .scroll-container .scroll-slider .proj {
    aspect-ratio:unset;
    width:calc(100vw - 100px);
    margin-left:30px;
  }
    .scroll-container .scroll-slider .proj:first-child {
      margin-left:0;
    }
    .scroll-container .scroll-slider .proj .card .contents {
      opacity:1;
    }
}



    .gallery {
      width:100%;
      height:100%;
      position:relative;
      overflow:visible;
    }
      .gallery img {
        position:absolute;
        max-width:70%;
        max-height:70%;
        border-radius:15px;
        object-fit:cover;
        object-position:center;
          will-change: transform;
      }
      .gallery img:nth-of-type(1) { top:-10%; left:18%; width:25%;  }
      .gallery img:nth-of-type(2) { bottom:-6%; left:5%; width:60%; }
      .gallery img:nth-of-type(3) { top:5%; right:5%; }
      .gallery img:nth-of-type(4) { bottom:-10%; right:0; width:53%; }


#over-ons .alinea {
  padding:100px 30px 100px 15px;
}
@media screen and (max-width:991px) {
  .gallery {
    aspect-ratio:1.56;
  }

  #over-ons .alinea {
    padding:30px 30px 0px 30px;
  }
  #over-ons .overlay.bottom.right {
    background:transparent;
    padding:0px 30px 60px 30px;
    width:100%;
    text-align:left;
  }
}


  .ruimtes {

    width:100%;
    height:100%;
    position:relative;
    overflow:visible;
    display:flex;
    flex-direction:row-reverse;
    gap:20px;

  }
    .ruimtes .ruimte {
      background:black;
      width:260px;
      border-radius:23px;
      transition:.5s;
      z-index:1;
      position:relative;
      overflow:hidden;
      will-change: transform;
      *transform:translate3d(0,0,0);
    }
    .ruimtes .ruimte:last-of-type {
      width:100%;
    }

      .ruimtes .ruimte:hover {
        width:100%;
      }

      .ruimte:not(:last-of-type) .zoom-bg,
      .ruimte:hover ~ .ruimte .zoom-bg {
        filter:grayscale(1) contrast(1.2) brightness(1.2);
      }

        .ruimte:hover .zoom-bg {
          filter:grayscale(0);
        }

@media (min-width:991px) {
  .ruimtes .ruimte:hover ~ .ruimte {
    width:260px;
  }

  .ruimte:not(:hover, :last-of-type):after,
  .ruimte:hover ~ .ruimte:after {
    opacity:0;
  }
}



      .ruimte .title {
        background:var(--lightgray);
        color:var(--orange);
        padding:0 20px;
        height:60px;
        line-height:60px;
        position:absolute;
        bottom:80px;
        left:50%;
        transform:scale(0) translateX(-50%);
        text-transform:uppercase;
        font-weight:800;
        font-size:30px;
        border-radius:100px;
        font-family:rubik;
        text-align:center;
        white-space:nowrap;
        opacity:0;
        transition:.3s;

      }
      .ruimte .title:hover {
        background-color:black;
        text-decoration:none;
      }

        .ruimtes .ruimte:hover ~ .ruimte .title {
          opacity:0;
          transform:scale(0) translateX(-50%);
        }
          .ruimte:hover .title,
          .ruimte:last-of-type .title {
            opacity:1;
            transform:scale(1) translateX(-50%);
          }

      .ruimte .arrow-left {
        width:60px;
        aspect-ratio:1;
        background:var(--lightgray);
        border-radius:60px;
        bottom:80px;
        position:absolute;
        left:calc(50% - 30px);
        z-index:2;
        display:flex;
        align-items:center;
        justify-content:center;
        transition:.3s;
      }
      .ruimte:hover .arrow-left,
      .ruimte:last-of-type .arrow-left {
        transform:scale(0);
      }
      .ruimte:hover ~ .ruimte .arrow-left {
        transform:scale(1);
      }
        .ruimte .arrow-left:after {
          content:" ";
          width:30px;
          height:30px;
          background:var(--orange);
          display:block;
          mask-image:url('../../img/arrow_left.png');
          mask-size:100%;
          mask-position:center;
          mask-repeat:no-repeat;
        }


@media (max-width:991px) {
  .ruimtes {
    flex-direction:column-reverse;
  }
    .ruimtes .ruimte {
      aspect-ratio:1.56;
      width:100%;

    }
      .ruimtes .ruimte .zoom-bg {
        filter:none;
      }
      .ruimtes .ruimte .title {
        opacity:1;
        transform:scale(1) translateX( -50%);
        bottom:20px;
        font-size:18px;
        padding:10px 20px;
        height:auto;
        line-height:1;
      }

      .ruimtes .ruimte .arrow-left {
        display:none;
      }
}