/* Css */








/* Bio */



body {
  background-color: var(--secondary-background-color);


}





header {
   position: relative;
 
   display: flex;
   flex-direction: column;

   justify-content: center;
   align-items: center;
 
   width: 100vw;
   height: 90vh;
 } 

 /* ******** */
/*          */
/* ******** */

header nav {
  position: absolute;

  width: 100vw;
  height: 90vh;

}

header nav a {
  z-index: 98;

  position: absolute;

  font-family: 'Founders Grotesk';
  /* Veranderen op alles. */
  font-size: 19px;
  font-stretch: normal;
  font-style: normal;
  font-variant-caps: normal;
  font-weight: normal;

  color: #fff;

  mix-blend-mode: difference;

  text-decoration: none;

  cursor: none;
}
 
 header nav {
   padding: 0;
   margin: 0;
 }
 
 
 
 header h1 {
   z-index: 50;

   font-size: 15vw;
  text-align: center;

   align-self: center;
 }












  main {
   overflow-x:hidden;
  }



 .inleiding {
   width: 100vw;
   height: auto;
 }

 .inleiding .thumbnail {
   
 }


 .inleiding h1 {
  margin: 0;
  padding: 0;

   font-size: 40vw;
 }

 .inleiding .thumbnail img {
  margin: 0;
  padding: 0;

   width: 100vw;

   object-fit: cover;
 }




 .beschrijving {
  padding: 5rem 1.5rem;

  display: flex;
  flex-direction: column;
 }

.beschrijving h1 {
  margin: 0;
  padding: 0;

  font-size: 12rem;

  padding-bottom: 1rem;
}

.beschrijving article p {
  margin: 0;
  padding: 0;

  font-size: 3vw;


  max-width: 510px;
}

.beschrijving article p:first-of-type {
  margin-bottom: 1em;
}

















/* ✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳ */
/* ✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳       Case       ✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳ */
/* ✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳ */


.case article {
  margin: 0;
  padding: 0;

  overflow: hidden;
  position: relative;

  display: block;
}

.case article div {
  padding: 4rem 2rem;

  position: relative;
}

.case article div figure {
  margin: 0;
  padding: 0;

  display: block;

  width: 100%;
}

.case article div figure img {
  padding: 0;
  margin: 0;

  max-width: 100%;

  vertical-align: middle;
}





.case .gecentreerd div{
  overflow: hidden;
  position: relative;
}

.case .gecentreerd:nth-of-type(1) div{
  padding-top: 0;
}

.case .gecentreerd:nth-of-type(3) {
  background: url('../../images/case/sintjacob/achtergrond.png');

  background-size: cover;

  background-color: var(--black);
}

.case .gecentreerd:nth-of-type(3) div figure:nth-of-type(1) {
  padding-bottom: 4rem;
} 


.case .gecentreerd:nth-of-type(5) div {
  background: var(--black);
}

.case .gecentreerd:nth-of-type(6) div {
  padding: 0;
}


.case .gecentreerd:nth-of-type(9) div {
  background-color: var(--black);
}


.case .gecentreerd:nth-of-type(13) div {
  background-color: var(--black);
}












.case .dubbel div {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  grid-column-gap: 3rem;
  column-gap: 3rem;
  -moz-column-gap: 3rem;
}

.case .dubbel div {
}

.case .dubbel:nth-of-type(2) div {
  padding: 0;

  grid-column-gap: 0rem;
  column-gap: 0rem;
  -moz-column-gap: 0rem;
}

.case .dubbel:nth-of-type(4) div {
  padding-bottom: 0;

  background-color: var(--black);
}

.case .dubbel:nth-of-type(4) div figure:nth-of-type(2) {
  margin-top: 5rem;
}


.case .dubbel:nth-of-type(10) div {
  padding-left: 0;
  padding-right: 0;

  grid-column-gap: 0rem;
  column-gap: 0rem;
  -moz-column-gap: 0rem;
}

.case .dubbel:nth-of-type(11) div {
  padding: 0;

  grid-column-gap: 0rem;
  column-gap: 0rem;
  -moz-column-gap: 0rem;
}













.case .raster {
  display: flex;
  justify-content: center;
}

.case .raster div {
  padding: 6rem 2rem;
  padding-bottom: 0;

  display: grid;

  grid-template-columns: repeat(3,minmax(0,1fr));

  grid-column-gap: 2rem;
  column-gap: 2rem;
  -moz-column-gap: 2rem;
}

.case .raster:nth-of-type(7) div {

  display: flex;
  justify-content: center;
}






.case .achtergrond:nth-of-type(8) > div {
  padding: 5.5rem 2rem 2rem;

  max-width: 128.5rem;

  display: flex;
  flex-direction: column;

  align-items: flex-end;
  justify-content: center;
}


.case .achtergrond:nth-of-type(8) div .inhoud {
  padding-right: 0;
  padding-top: 0;
  margin: 0;

  max-width: 412px;
}


.case .achtergrond:nth-of-type(8) .inhoud h3 {
  font-family: 'Founders Grotesk';
  font-size: 2.5rem;

  margin-bottom: 1.5rem;
}


.case .achtergrond:nth-of-type(8) .inhoud p {
  font-size: 3vw;
}

.case .achtergrond:nth-of-type(8) .inhoud p:first-of-type {
  margin-bottom: 1em;
}






















  


  .afsluiten {
    padding-bottom: 8rem;
  }

  .afsluiten img {
    max-width: 100%;
  }





  .menu {

    width: 100vw;
    height: auto;
    
    display: flex;
    flex-direction: column;
    align-items: left;
  
  
    gap: 5rem;
  
    user-select: none;

    padding-left: 5rem;
  }
  
  .menu .menu-item {
  
    position: relative;
  
    align-self: flex-start;
  }
  
  .menu .menu-item:hover {
    cursor: none;
  }
  
  .menu .menu-item::before {
    position: absolute;
  
    left: -3.5rem;
  
    font-family: 'founders grotesk';
    font-size: 18px;
  
    color: var(--menu-counter-color);
  }
  
  .menu .menu-item:nth-of-type(1)::before {
    content:'002';
  }
  
  .menu .menu-item-text {
    pointer-events: none;
    display: block;
  
    line-height: 1;
  
    position: relative;
  }
  
  .menu span {
    font-family: 'Antiqua';
    font-size: 10vw;
  
    font-stretch: normal;
    font-style: normal;
    font-variant-caps: normal;
    font-weight: normal;
  
    text-transform: uppercase;
  
    line-height: 1em;
  
    color: var(--black);
  }
  
   .menu-item > div:nth-child(1) span {
    will-change: transform;
    transform-style: preserve-3d;
    transition: .8s;
    transition-delay: calc(0.05s * var(--index));
    transform-origin: bottom;
    display: inline-block;
  }
  
   .menu-item > div:nth-child(2) span {
    will-change: transform;
    transform-style: preserve-3d;
    transition: .8s;
    transition-delay: calc(0.05s * var(--index)); 
    transform-origin: top;
    display: inline-block;
    transform: translate3d(0, 100%, 0) rotateX(-90deg);
  }
  
   .menu-item:hover > div:nth-child(1) span {
    transform: translate3d(0, -100%, 0) rotateX(-90deg);
  }
  
   .menu-item:hover > div:nth-child(2) span {
    transform: translate3d(0, 0, 0) rotateX(0deg);
  } 











  



  footer {
    position: relative;
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100vw;
  
    padding-bottom: 2rem;
  }
  
  
  footer nav ul {
    padding: 0 1.4em 0 1.4em;
    margin: 0;
  
    font-family: 'Founders Grotesk';
    font-size: 1.2rem;
    font-stretch: normal;
    font-style: normal;
    font-variant-caps: normal;
    font-weight: normal;
    color: var(--black);
    list-style: none;
  }
  
  
  footer nav ul {
    display: flex;
    flex-direction: row;
  
    gap: 3em;
  }
  
  footer nav {
    padding-top: 3rem;
  }
  
  footer nav ul {
    display: flex;
    flex-direction: row;
  
    justify-content: space-between;
  }
  
  footer nav ul li {
    padding: 0;
    margin: 0;
  }
  
  footer nav ul li a {
    color: var(--black);
    text-decoration: none;
  
    cursor: none;
  }
  

  footer nav ul li a img {
    width: 16px;
  
    margin-left: 5px;
  }



img {
  margin: 0;
  padding: 0;

   width: 100vw;

   object-fit: cover;
}





































  @media (min-width: 770px) {


    .beschrijving {
      padding: 10vw 1.5rem;
    
      display: flex;
      flex-direction: row;
      align-items: flex-start;
     }
    
    .beschrijving h1 {
      margin: 0;
      padding: 0;
    
      font-size: 15vw;
    
      padding-bottom: 1rem;
    }

    .beschrijving article {
      padding-left: 35vw;
    }
    
    .beschrijving article p {
      margin: 0;
      padding: 0;
    
      font-size: 16px;
    }
    
    .beschrijving article p:first-of-type {
      margin-bottom: 1em;
    }









    /* ✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳ */
    /* ✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳       Case       ✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳ */
    /* ✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳✳ */


    .case article {
      margin: 0;
      padding: 0;

      overflow: hidden;
      position: relative;

      display: block;
    }

    .case article div {
      padding: 10vw 15vw;

      position: relative;
    }

    .case article div figure {
      margin: 0;
      padding: 0;

      display: block;

      width: 100%;
    }

    .case article div figure img {
      padding: 0;
      margin: 0;

      max-width: 100%;

      vertical-align: middle;
    }





    .case .gecentreerd div{
      overflow: hidden;
      position: relative;
    }

    .case .gecentreerd:nth-of-type(3) {
      
      background: url('../../images/case/sintjacob/achtergrond.png');
      background-color: var(--black);


    background-size: cover;
    }

    .case .gecentreerd:nth-of-type(3) div {
      padding: 15vw 10vw 15vw;
    }

    .case .gecentreerd:nth-of-type(3) div figure:nth-of-type(1) {
      padding-right: 20vw;
      padding-bottom: 7.5vw;
    } 

    .case .gecentreerd:nth-of-type(3) div figure:nth-of-type(2) { 
      padding-left: 30vw;
    }

    .case .gecentreerd:nth-of-type(5) div {
      background: var(--black);
    }

    .case .gecentreerd:nth-of-type(6) div {
      padding: 0;

      background-color: blue;
    }


    .case .gecentreerd:nth-of-type(9) div {
      background-color: var(--black);
    }


    .case .gecentreerd:nth-of-type(13) div {
      padding: 10vw 10vw;

      background-color: var(--black);
    }












    .case .dubbel div {
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr));

      grid-column-gap: 3rem;
      column-gap: 3rem;
      -moz-column-gap: 3rem;
    }

    .case .dubbel div {
    }

    .case .dubbel:nth-of-type(2) div {
      padding: 0;

      grid-column-gap: 0rem;
      column-gap: 0rem;
      -moz-column-gap: 0rem;
    }

    .case .dubbel:nth-of-type(4) div {
      padding: 15vw 2.5vw;
      padding-bottom: 0;

      column-gap: 12.5vw;

      background-color: var(--black);
    }

    .case .dubbel:nth-of-type(4) div figure:nth-of-type(2) {
      margin-top: 5rem;
    }


    .case .dubbel:nth-of-type(10) div {
      padding-left: 0;
      padding-right: 0;

      grid-column-gap: 0rem;
      column-gap: 0rem;
      -moz-column-gap: 0rem;
    }

    .case .dubbel:nth-of-type(11) div {
      padding: 0;

      grid-column-gap: 0rem;
      column-gap: 0rem;
      -moz-column-gap: 0rem;
    }

    .case .dubbel:nth-of-type(12) div {
      padding: 10vw 5.5vw;
    }










    .case .raster {
      display: flex;
      justify-content: center;
    }

    .case .raster div {
      padding: 6rem 2rem;

      display: grid;

      grid-template-columns: repeat(3,minmax(0,1fr));

      grid-column-gap: 2rem;
      column-gap: 2rem;
      -moz-column-gap: 2rem;
    }

    .case .raster:nth-of-type(7) div {
      padding: 7.5vw 2rem;
      padding-bottom: 0;

      display: flex;
      justify-content: center;
    }







    .case .achtergrond:nth-of-type(8) {
      display: flex;
      justify-content: center;

      align-items: center;

      padding: 2.5rem 4vw 5rem 4vw;

      padding-bottom: 7.5vw;
      padding-left: 2rem;
      padding-right: 2rem;
    }
   
    .case .achtergrond:nth-of-type(8) > div {
      margin: 0;
      padding: 0;


      display: flex;
      flex-direction: row;

      flex-wrap: nowrap;

      align-items: flex-end;
      justify-content: center;
    }


    .case .achtergrond:nth-of-type(8) div .inhoud {
      padding: 0;
      margin: 0;

      width: 500px;
    }

    .case .achtergrond:nth-of-type(8) > div figure {
      padding-left: 5rem;
    }


    .case .achtergrond:nth-of-type(8) .inhoud h3 {
      font-family: 'Founders Grotesk';
      font-size: 25px;

      margin-bottom: 1.5rem;
    }


    .case .achtergrond:nth-of-type(8) .inhoud p {
      font-size: 16px;
    }

    .case .achtergrond:nth-of-type(8) .inhoud p:first-of-type{
      margin-bottom: 1em;
    }














    
  
  
    .afsluiten {
      padding-bottom: 8rem;
    }
  
    .afsluiten img {
      max-width: 100%;
    }
  
  


















    .menu {

      width: 100vw;
      height: auto;
      
      display: flex;
      flex-direction: column;
      align-items: left;
    
    
      /* tussenruimte */
      gap: 14vw;
    
      user-select: none;
    }
    
    .menu .menu-item::before {
      position: absolute;
    
      left: -3.5rem;
    
      font-family: 'founders grotesk';
      font-size: 18px;
    
      color: var(--menu-counter-color);
    }
    

  
  }

  
  




  @media (max-width: 480px) {

    header {
      width: 100vw;
      height: 80vh;
    }

    header nav {
      height: 80vh;
    }

    header nav a {
      font-size: 18px;
    }


    footer {
      position: relative;
    
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100vw;
    
      padding-bottom: 2rem;
    }
    
    
    footer nav ul {
      padding: 0 1.4em 0 1.4em;
      margin: 0;
    
      font-family: 'Founders Grotesk';
      font-size: 1.2rem;
      font-stretch: normal;
      font-style: normal;
      font-variant-caps: normal;
      font-weight: normal;
      color: var(--black);
      list-style: none;
    }
    
    
    footer nav ul {
      display: flex;
      flex-direction: row;
    
      gap: 3em;
    }
    
    footer nav {
      padding-top: 3rem;
    }
    
    footer nav ul {
      display: flex;
      flex-direction: row;
    
      justify-content: space-between;

      pointer-events: all;
    }
    
    footer nav ul li {
      padding: 0;
      margin: 0;

      font-size: 18px;

      pointer-events: all;
    }
    
    footer nav ul li a {
      color: var(--black);
      text-decoration: none;
    
      cursor: none;
    }
    
  }










  
  .img-1 {
    transform: scale(1);
    background: url(../../images/case/sintjacob/reveal/img-1.jpg) 50% 50% no-repeat;
    background-size: cover;
  }
  
  .img-2 {
    transform: scale(1.4);
    background: url(../../images/case/sintjacob/reveal/img-2.jpg) 50% 50% no-repeat;
    background-size: cover;
  }
  
  .img-3 {
    transform: scale(1.2);
    background: url(../../images/case/sintjacob/reveal/img-3.jpg) 50% 50% no-repeat;
    background-size: cover;
  }
  
  .img-4 {
    transform: scale(0.9);
    background: url(../../images/case/sintjacob/reveal/img-4.jpg) 50% 50% no-repeat;
    background-size: cover;
  }
  
  .img-5 {
    transform: scale(1.2);
    background: url(../../images/case/sintjacob/reveal/img-5.jpg) 50% 50% no-repeat;
    background-size: cover;
  }