*{padding: 0; margin: 0; box-sizing: border-box;}
:root {
    --font-sans: "Overused Grotesk", sans-serif;
}

@font-face {
    font-family: "Overused Grotesk";
    src: url("../fonts/woff2/OverusedGrotesk-Book.woff2") format("woff2");
    font-weight: 350;
  }

  @font-face {
    font-family: "Overused Grotesk";
    src: url("../fonts/woff2/OverusedGrotesk-SemiBold.woff2") format("woff2");
    font-weight: 600;
  }

  @font-face {
    font-family: 'Butler';
    src: url('../fonts/woff2/Butler-UltraLight.woff2') format('woff2'),
        url('../fonts/woff/Butler-UltraLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
.bounce {
  animation: bounce 3s infinite ease-in-out;
}
.bounce-delayed {
  animation: bounce 3s infinite ease-in-out;
  animation-delay: 2s; /* Adjust the delay time as needed */
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-15px);
  }
  60% {
    transform: translateY(-10px);
  }
}

body{
    --color-primary: hsl(37, 15%, 83%);
    --color-primary40: hsla(37, 15%, 83%, 0.4);
    --color-primary80: hsla(37, 15%, 83%, 0.8);
    --color-primary10: hsla(37, 15%, 83%, 0.05);
    --color-secondary: hsl(0, 0%, 10%);
    --color-secondary10: hsla(0, 0%, 10%, 0.1);
    --color-secondary60: hsla(0, 0%, 10%, 0.6);
    --color-white:rgba(255, 255, 255, 1);
    background: var(--color-secondary);
    color: var(--color-secondary);
    font-family: var(--font-sans);
    font-weight: 350;
    font-size: 0.875rem; /*14px*/
    line-height: 1.5rem; /*24px*/
    }

  body.project{background: var(--color-primary);}

    main {
      min-height: 100vw;
      background: var(--color-primary);
      position: relative;
      z-index: 1;
    }

strong{font-weight: 600;}
h2, h1, #kl__project__detail h1{font-family: "Butler", sans-serif; font-weight: 250; font-size: 3.5rem; line-height: 3.75rem; margin: 0; padding: 0;}
#kl__project__detail h1{font-size: 2rem; line-height: 2.25rem;}
h3{font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.28em; font-family: var(--font-sans); line-height: 1rem;}
hr {
  border: none; height: 1px; background-color: var(--color-secondary10); margin: 3.75rem 0;
}
.uppercase{text-transform: uppercase;}
.hidden{display:none;}
section{height: 100dvh; background: var(--color-primary); z-index: 100;}
.container{padding: 2rem; width: 100%; max-width: 1920px; margin-inline: auto; background: var(--color-primary); z-index: 100;}
img.full-width {
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw;
	position: relative;
	right: 50%;
	width: 100vw;
  min-width: 100%;
  overflow: hidden;
}

footer{background: var(--color-secondary); color: var(--color-primary);}
/*body.project footer{position: relative;}*/
footer .container{background: none;}
footer #kl__logo__footer{fill: var(--color-primary);}
footer a, footer a:visited, footer a:link{color: var(--color-primary)}
.footer__top{display: flex; gap: 1rem; flex-direction: column;}
#kl__contactform{grid-column-start: 4; grid-row-start: 1; grid-row-end: 4; margin-bottom: 4rem; margin-top: 2rem}
.footer__bottom{font-size: 0.688rem; color: var(--color-primary40); letter-spacing: .2em; display: flex; flex-direction: column; gap: 1rem;}
footer.footer_light .footer__bottom{color: var(--color-secondary60)}
.footer__bottom a, .footer__bottom a:visited, .footer__bottom a:link{color: var(--color-primary40); transition: color .2s ease-in-out; text-decoration: none;}
.footer__bottom a:hover{color: var(--color-primary);}
footer.footer_light .footer__bottom a, footer.footer_light .footer__bottom a:visited, footer.footer_light .footer__bottom a:link{color: var(--color-secondary60)}
footer.footer_light .footer__bottom a:hover{color: var(--color-secondary);}
#footer__bottom__links{display: flex; justify-content: space-between; flex-direction: row;}
.social_links, .social_links li{padding: 0; margin: 0; list-style: none;}
.social_links{display: inline-flex; gap: 1rem; grid-column-start: 1; grid-row-start: 2; margin-left: -0.75rem;}
.social_links li a{border: 1px solid transparent; width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; border-radius: 100%; transition: all .2s ease-in-out;}
.social_links li a:hover{border-color: var(--color-primary40); transform: scale(1.25);}
.social_links li a img{display: block; height: 15px; width: auto; object-fit: cover; }


#kl__start{
  height: 70dvh;
  position: relative;
  z-index: 1;
  position: relative;
}
#kl__start .container, footer .container{
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
} 


#kl__logo__baseline img, #kl__logo{display: block; margin: 0; padding: 0; width: 100%; height: auto;}
#kl__project__detail__logo a{display: block; opacity: 0;}
#kl__baseline, #kl__project__detail .back{font-size: 1em; padding: 0; margin: 0; letter-spacing: 0.3rem; font-weight: 400; margin-top: 1rem; color: var(--color-secondary); text-decoration: none; display: inline-block;}
#kl__project__detail .back{ transition: gap .3s ease-in-out; display: inline-flex; gap: 2rem; align-items: center; opacity: 0;}
#kl__project__detail .back img{transition: transform .3s ease-in-out; height: 19px; width: auto;}
#kl__project__detail .back:hover{
gap: 1rem;
}
#kl__project__detail .back:hover img{
  transform: translateX(-0.25rem)
  }

#kl__intro{width: 100%; display: flex; flex-direction: column; gap: 2rem; justify-content: space-between; align-items: flex-start;}
#kl__intro__text{max-width: 583px;}
#kl__intro__text > p{ padding: 0; margin: 0;}
.kl__title{max-width: 580px;}
.kl__title > p{margin: 0; padding: 0; font-family: Overused Grotesk; letter-spacing: 0.28em;
  }

.scroll-down {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  height: 100%;
  width: 19px;
}

body.project .scroll-down{
  height: auto;
  opacity: 0;
}

.scroll-down span {
  transform: rotate(-90deg); /* Rotate the text */
  white-space: nowrap; /* Prevent text from wrapping */
  display: none;
  letter-spacing:5px;
  font-size: 1rem;
  margin-top: 1.5rem;
}
.scroll-down img{width: 100%; height: auto;}

#kl__slider {

  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--color-secondary);
  padding: 0;
  z-index: 999;
  position: relative;

}

.img-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Scale images proportionally to fit */
  opacity: 0; /* Start with all images hidden */
  pointer-events: none; /* Prevent interaction with hidden images */
}


#kl__projects{display: flex; flex-direction: column; justify-content: space-between;}
#kl__project .container{height: auto;}
#kl__carousel {
  --f-carousel-spacing: 2rem;
  --f-carousel-slide-width: 65%;
  width: 100%;
  overflow-x: hidden;
}

#kl__projects__carousel{display: flex; flex-direction: column;}
.carousel__navigation{align-self: end;  display: flex; justify-content: space-between; margin-bottom: 1rem; width: 100%; flex-direction: row; gap: 1rem; padding: 0 2rem;}

.f-carousel__slide img{width: 100%; height: auto; display: block; aspect-ratio: 412/541; object-fit: cover; transition: transform .3s ease-in-out;}
.f-carousel__slide img:hover{transform: scale(1.1);}
.f-carousel__slide{position: relative; overflow: hidden; transition: transform 0.3s ease, opacity 0.3s ease;}
.f-carousel__slide::before {
  content: '';
  z-index: 10;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
}

.f-carousel__slide.scaled-down {
  transform: scale(0.9); /* Scale down the slides slightly */
 /* opacity: 0.7; /* Optionally reduce opacity for a dimming effect */
}

.f-carousel__slide figcaption {
  position: absolute;
  bottom: 15%;
  left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
  color: #fff;
  font-size: 1rem;
  z-index: 99
}

.f-carousel__slide figcaption::after{
  content:'';
  background:url(../img/arrow_right_light.svg) no-repeat left center;
  width: 17px; height:100%;
  position: absolute;
  display: inline-block;
  margin-left: .5rem;

}

.carousel-control{
  background: none;
  border: 1px solid transparent;
  text-indent: -99999px;
  border-radius: 5rem;
  width: 34px;
  height: 34px;
  transition: border-color .3s ease-in-out;
}
.carousel-control:hover{
  border-color: rgba(0,0,0,.1);
  cursor: pointer;
}

.carousel-control.left{background: url(../img/arrow_left.svg) no-repeat center center;   background-size: 14px 10px;}
.carousel-control.right{background: url(../img/arrow_right.svg) no-repeat center center;   background-size: 14px 10px;}



#kl__process{overflow-y: hidden;}
#kl__process, #kl__about{height: auto;}
#kl__process .container{
  counter-reset: h3-counter;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#kl__process .kl__title{
  position: sticky;
  top: 0;
  z-index: 10; /* Zorg ervoor dat het boven andere elementen ligt */
  padding-top: 4rem;
}

#kl__process__steps{padding-top: 4rem;}

#kl__process h3:not(:last-of-type) {
  counter-increment: h3-counter; 
  position: relative; 
}

#kl__process h3:not(:last-of-type)::before {
  content: counter(h3-counter, decimal-leading-zero); 
  margin-right: 1rem; 

}

#kl__process h3 {
  counter-increment: h3-counter; 
  position: relative; 
  margin-bottom: 2rem;
}

#kl__process p{line-height: 1.875rem;}

#kl__process img{object-fit: cover; height: auto;}
#kl__process img.m-tb{margin-top: 3.75rem; margin-bottom: 3.75rem;}


#kl__about{ background: var(--color-primary);}
#kl__about .container{
  display: flex;
  flex-direction: column; 
  gap: 1rem;
  margin-bottom: 0;
}


#kl__about__immersive{
  width:100%;  position: relative; display: grid; 
}
.kl__about__immersive__content{grid-row-start:1}

#kl__about__immersive .scroll-down{height: auto; grid-row-start: 3;}
#kl__about__immersive .scroll-down img{margin-top: 3rem}
#kl__about__immersive h3{margin: 2rem 0;}
#kl__about__immersive img{width: 100%; height: auto; object-fit: cover; margin-top: -2.25rem;}

#kl__about__kevinlaenen{grid-column-start: 1; grid-row-start: 2; margin-top: 3.75rem;}
#kl__about__kevinlaenen img{height: auto; object-fit:cover}
#kl__about__kevinlaenen .signature_wrapper{position: relative; margin-bottom: 2rem; margin-top: 2rem;}
#kl__about__kevinlaenen .signature_wrapper .signature{position: absolute; max-width: 262px; top: 0;}
#kl__about__kevinlaenen .kl__about__content{width: 100%; margin: 4rem 0;}


#kl__project__detail{
  min-height: 80vh;
  height: 80vh;
  background: var(--color-primary);
  position: relative; 
  z-index: 1;
}
#kl__project__detail .container{height: 100%; display: flex; flex-direction: column; justify-content: space-between;}
#kl__project__detail .scroll-down{align-self: flex-end;}
#kl__project__detail__content > div img{
  width: 100%; height: auto; object-fit:cover;
}

#kl__project__detail__content p{margin-bottom: 1.5rem;}
.kl__project__detail__titlewrapper p{letter-spacing: 0.28rem; opacity: 0;}
.kl__project__detail__titlewrapper{display: flex; flex-direction: column-reverse; text-align: center; align-items: center; gap: 1rem; margin: auto 0;}
.kl__project__detail__titlewrapper h1{width: 100%; max-width: 850px; opacity: 0;}
.kl__project__detail__description{width: 100%; max-width: 705px; margin: 0 auto; text-align: center; padding-top: 5rem; padding-bottom: 5rem;}

#kl__project__images{height: auto;}

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

button{background: var(--color-primary80); color: var(--color-secondary); border: 0; border-radius: 0; line-height: 1rem; padding: 1rem 1.275rem; letter-spacing: 0.2rem; font-weight: 500; margin-top: 2rem; transition: all .2s ease-in-out;}
button:hover{cursor: pointer; background: var(--color-primary)}
label.hidden{display: none;}
input[type="text"], input[type="email"], textarea{background: none; color: var(--color-primary); width: 100%; border: 0; border-bottom: 1px solid var(--color-primary); padding: 1rem 0; 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-primary)}
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-primary); background: var(--color-primary10); border-bottom: 1px solid transparent; padding: 1rem; box-shadow: none; border-radius: 0;
}


.styled-checkbox {
  position: absolute;
  opacity: 0;
}
.styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  display: block;
}
.styled-checkbox + label:before {
  content: "";
  margin-right: 1rem;
  margin-top: 3px;
  display: inline-block;
  vertical-align: text-top;
  width: 15px;
  height: 15px;
  background: none;
  border: 1px solid var(--color-primary);
  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-primary);
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 var(--color-primary), 4px 0 0 var(--color-primary), 4px -2px 0 var(--color-primary), 4px -4px 0 var(--color-primary), 4px -6px 0 var(--color-primary), 4px -8px 0 var(--color-primary);
  transform: rotate(45deg);
}


#kl__project__detail__content{padding: 2rem;}
.kl__project__detail__images a{position: relative; overflow: hidden; display: block; opacity: 0;}
.kl__project__detail__images figure{margin:0;}
.kl__project__detail__images img{width: 100%; height: auto; display: block; object-fit: cover; transition: transform .3s ease-in-out;}
.kl__project__detail__images img:hover{transform: scale(1.1); cursor: pointer;}

#kl__project__heroImage{width: 100%; height: 100dvh; overflow: hidden; z-index: 999; background: var(--color-primary); padding: 0; position: relative;}
#kl__project__heroImage img{width: 100%; height: 100%; object-fit: cover; background: var(--color-primary);}

.masonry-item {
  width: 100%;
  margin-bottom: 3rem;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

  #kl__start{height: 80dvh;}
footer{z-index: 0;  position: sticky; left: 0; bottom:0;}
  #footer__bottom__links{display: flex; justify-content: space-between; flex-direction: row;  align-items: center;}
  .footer__top{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; row-gap: 3rem;}
  .footer__top p:first-child{grid-column-start: 1;}
  .footer__top p:last-child{grid-column-start: 2;}
  .footer__top .social_links{grid-column-start: 3; grid-row-start: 1; justify-content: flex-end; margin-left: 0;}
  #kl__contactform{grid-row-start: 2; grid-column-start: 1; grid-column-end: 4;}

  #kl__carousel {
    --f-carousel-spacing: 2rem;
    --f-carousel-slide-width: 28%;
    width: 100%;
    overflow-x: hidden;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  body{
    font-size: 1.063rem; /*17px*/
    line-height: 1.688rem; /*27px*/
  }

  footer{height: 100dvh;}
  .footer__top{display: grid; grid-template-columns: 1fr 1fr 1fr 585px; gap: 1rem; row-gap: 3rem;}
  .footer__bottom{gap: 2rem;}
  #kl__contactform{grid-row-start: 1; grid-column-start: 4; grid-column-end: 4; margin-top: 0;}
  .footer__top .social_links{grid-row-start: 2; grid-column-start: 1; justify-content: flex-start;}

  img.full-width {
    left: auto;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    position: relative;
    right: auto;
    width: 100%;
    min-width: 100%;
    overflow: hidden;
  }
  #kl__baseline, #kl__project__detail .back{margin-top: 1.5rem;}

  #kl__intro{width: 100%; display: flex; flex-direction: row; gap: 0; justify-content: space-between; align-items: flex-end;}

  #kl__carousel {
    --f-carousel-spacing: 3rem;
    --f-carousel-slide-width: 20.5%;
    width: 100%;
    overflow-x: hidden;
  }

  .carousel__navigation{align-self: end; margin-bottom: 1rem; margin-right: 1rem; display: flex;  flex-direction: row; gap: 1rem; width: auto; padding: 0;}
  .carousel-control{
    background: none;
    border: 1px solid transparent;
    text-indent: -99999px;
    border-radius: 5rem;
    width: 54px;
    height: 54px;
    background-size: 25px 18px;
    transition: border-color .3s ease-in-out;
  }
  .carousel-control.left, .carousel-control.right{background-size: 25px 18px;}


  #kl__process .container{
    counter-reset: h3-counter;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 585px;
  }
  #kl__process img{width: 100%;}
  #kl__about .container{
    display: grid; 
    gap: 1rem;
    grid-template-columns: 220px 1fr 585px;
    margin-bottom: 8rem
  }

  #kl__about__immersive{
    width:100%; max-width: 220px; grid-column-start: 1; margin-top: -1600px; position: relative; display: flex; flex-direction: column; justify-content: space-between;
  }
  #kl__about .container{margin-bottom: 1.5rem;}
  #kl__about__kevinlaenen{grid-column-start: 3; margin-top: -5rem;}
  #kl__about__kevinlaenen .signature_wrapper{position: relative; margin-bottom: 10rem; margin-top: 2rem;}
  #kl__about__kevinlaenen .kl__about__content{width: 100%; max-width: 340px; margin: 0;}
  .scroll-down {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 70px;
    height: auto;
    width: 24px;
    grid-row-start: 2;
  }
  .scroll-down span{display: inline-block}
  #kl__about__kevinlaenen img{width: 100%; height: auto; object-fit:cover}


 /* .kl__project__detail__images a{margin-bottom: 5rem;}*/
 #kl__project__detail__content{ max-width: 1024px; margin-inline: auto;}
  #kl__project__detail .back img{height: 24px;}
  .kl__project__detail__images{
    /*columns: 2;
    column-gap: 9.375rem;*/
    width: 100%;
    padding-bottom: 10rem;
  }

  #kl__project__detail h1{font-size: 3.5rem; line-height: 3.75rem;}
  .kl__project__detail__description{padding: 10rem 0;}

  .masonry-grid {
    width: 100%;
}

.masonry-item {
    width: calc(50% - 2.5rem); /* Zorgt voor 2 kolommen */
    margin-bottom: 5rem;
}


}


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

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