:root {
  --font-size-intro: clamp(1.375rem, calc(1.25rem + 1.5vw), 5rem);
  --font-size-intro-1000: clamp(1.375rem, calc(1.25rem + 1vw), 5rem);
  --font-size-h1: clamp(2.4rem, calc(1.5rem + 17vw), 12.5rem);
  --font-size-h1--1000: clamp(2.4rem, calc(1.5rem + 11vw), 13.5rem);
  --font-size-p: clamp(1.2rem, calc(1rem + 1.25vw), 1.5rem);
   --font-size-menu: clamp(1.2rem, calc(0.75rem + 0.65vw), 2rem);
   --font-size-logo: clamp(1rem, calc(0.75rem + 0.7vw), 2rem);

  --font-size-h2: clamp(2rem, calc(1.75rem + 2.75vw), 3.6rem);
  --font-size-h2-span: clamp(2rem, calc(2.25rem + 3.25vw), 4.6rem);

  --font-size-h3: clamp(1.5rem, calc(0.55rem + 2.5vw), 3.6rem);

  --font-size-nav-mobile: clamp(2rem, calc(1.1rem + 4vw), 5rem);

  --fontsize-mobile-h3-spanVerschil: clamp(2.3rem, calc(1.8rem + 15vw), 9rem);
  --font-size-mobile-h4: clamp(1.7rem, calc(1.4rem + 3vw), 9rem);

  --font-size-mobile-instructies: clamp(1rem, calc(1rem + 1.55vw), 1.5rem);
  --font-size-mobile-button: clamp(1.2rem, calc(1rem + 2vw), 1.7rem);

  --color-black: #2c2c2c;
  --color-blue: #25255f;
  --color-white: #fcfcfd;
}

.body__works {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.header{
  z-index: 1000;
}

a {
  cursor: pointer;
}

/*.header--projecten {
    position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    max-width: 100vw;
    overflow: hidden;
    height: auto;
    display: block;
} */

.header--projecten {
  max-width: 100vw;
  overflow: hidden;
  height: auto;
  display: block;
}

.header--projecten {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;

  display: block;
}

.center {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
  height: auto;
  width: 100vw;
  align-items: center;
}

.gallery {
  padding: 15.5vh 0 0;
  max-width: 100vw;
  
  /*overflow-y: hidden;*/
  overflow: hidden;
  height: auto;
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  justify-self: center;
}

.scroll {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.scroll > svg {
  height: 80vh;
  width: auto;
  grid-row: 1;
  grid-column: 1;
  z-index: 1;
  stroke-dasharray: 20000px;
  stroke-dashoffset: 20000px;
  animation: line-appear 5.5s ease-in-out forwards;
}

@keyframes line-appear {
  0% {
    stroke-dashoffset: 20000px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}

.card {
  display: flex;
  width: auto;
  z-index: 60;
}

.filler {
  z-index: 5;
  margin-left: -1.5vw;
}

.filler--1 {
  width: 20vw;
  height: auto;
  justify-self: end;
  align-self: flex-end;
  margin-bottom: 2vw;
  margin-right: -2.8vw;
  animation: appear--filler1 3.5s ease-in-out forwards;
  transform: translateY(550%);
}

@keyframes appear--filler1 {
  0% {
    visibility: hidden;
    transform: translateY(150%);
    opacity: 0;
  }

  25% {
    visibility: hidden;
    transform: translateY(150%);
    opacity: 0;
  }
  80% {
    transform: translateY(-10%);
    opacity: 1;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
.filler--2 {
  margin-right: -0.65vw;
  margin-bottom: 2.5vw;
  width: 20vw;
  height: auto;
  justify-self: end;
  align-self: end;
  z-index: 2;
  animation: appear--filler2 3.65s ease-in-out forwards;
}

@keyframes appear--filler2 {
  0% {
    visibility: hidden;
    transform: translateY(150%);
  }

  30% {
    visibility: visible;
    transform: translateY(150%);
    opacity: 0;
  }
  85% {
    transform: translateY(-11%);
    opacity: 1;
  }
  100% {
    transform: translateY(0%);
  }
}
.filler--3 {
  margin-right: -1.2vw;
  margin-bottom: 3.5vw;
  width: 20vw;
  height: auto;
  justify-self: end;
  align-self: end;
}

.filler--4 {
  margin-right: -0.5vw;
  margin-bottom: 5.5vw;
  width: 20vw;
  height: auto;
  justify-self: end;
  align-self: end;
}

.filler--5 {
  margin-right: -1.95vw;
  margin-bottom: 3.5vw;
  width: 20vw;
  height: auto;
  justify-self: end;
  align-self: end;
}

.filler--6 {
  margin-right: -0.15vw;
  margin-bottom: 1.5vw;
  width: 20vw;
  height: auto;
  justify-self: end;
  align-self: end;
}

.filler--7 {
  margin-right: -0.5vw;
  margin-bottom: 4.5vw;
  width: 20vw;
  height: auto;
  justify-self: end;
  align-self: end;
}

.cards {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 55vw 0 5vw;
  justify-self: start;
  z-index: 500;
}

.work--1 {
  animation: appear--card1 6s ease-in-out forwards;
}

@keyframes appear--card1 {
  0% {
    visibility: hidden;
    transform:translate(0%, 150%);
    opacity: 0;
  }

  15% {
    visibility: visible;
    transform: translate(0%, 150%);
    width: 33vw;
    opacity: 0;
  }
  50% {
    transform: translate(0%, -6.5%);
    width: 33vw;
    opacity: 1;
  }

  60% {
    transform: translate(0%, 0%);
    width: 33vw;
  }
  77.5% {

  }
}

.work__text--mobile--1{
  animation: appear--work1--text--mobile 3.75s ease-in-out forwards;
}

@keyframes  appear--work1--text--mobile{
  0%{
    opacity: 0;
    transform: translateY(100%);
  }

  50%{
    opacity: 0;
    transform: translateY(100%);
  }

   80%{
    opacity: 1;
    transform: translateY(-10%);
  }

  100%{
    opacity: 1;
    transform: translateY(0%);
  }
}

.work--1__text{
  animation: appear--work1--text 5.5s ease-in-out forwards;
}

@keyframes  appear--work1--text{
  0%{
    opacity: 0;
  }

  80%{
    opacity: 0;
  }

  100%{
    opacity: 1;
  }
}



.work--2 {
  animation: appear--card2 4.5s ease-in-out;
}

@keyframes appear--card2 {
  0% {
    visibility: hidden;
    transform: translateY(150%);
  }

  30% {
    visibility: visible;
    transform: translateY(150%);
    opacity: 0;
  }
  70% {
    transform: translateY(-7.5%);
    opacity: 1;
  }
  85%{
    transform: translateY(0%);
    opacity: 1;
  }
  
}

.cards > .card:last-child > .work {
  margin-right: 40vw;
}

.work__image {
  z-index: 50;
  width: 33vw;
  height: auto;
}

.work__text {
  display: block;
  width: 25vw;
  height: auto;
  padding: 0 4vw 0 2vw;
  align-self: flex-end;
  margin-bottom: 10vh;
  background-color: #fcfcfdb6;
}

.work__text > p {
  display: block;
  width: 25vw;
  height: auto;
  font-size: calc(var(--font-size-p) * 0.9);
}

.work__text > p:first-of-type {
  font-size: var(--font-size-logo);
}

.work {
  display: flex;
  text-decoration: none;
  width: auto;
  overflow-x: visible;
}

.flex {
  display: none;
}

.work__titel > h2 {
  padding: -1vw;
  font-weight: 600;
  color: #000;
  background: var(--color-white);
  mix-blend-mode: lighten;
  margin: 0 0 1vh;
}

.work__titel {
  display: block;
  width: auto;
  background-image: url("../assets/projecten/backgroundTitel.png");
  background-repeat: repeat;
  background-size: cover;
}


.text--mobile{
  display: none;
}

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


.center {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
  height: auto;
  width: 100vw;
  align-items: center;
}

.gallery {
  padding: 15vh 0 0;
  max-width: 100vw;
  height: 90vh;
  overflow: hidden;
  overflow-x: scroll;
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  justify-self: center;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50vh 40vh;
}

.scroll {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 600vw;
  overflow-x: hidden;
}

.scroll > svg {
  height: 50vh;
  grid-row: 1;
  grid-column: 1;
  z-index: 1;
  stroke-dasharray: 20000px;
  stroke-dashoffset: 20000px;
  animation: line-appear 5.5s ease-in-out forwards;
  margin-left: -20vw;
}

@keyframes line-appear {
  0% {
    stroke-dashoffset: 20000px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}

.card {
  display: flex;
  width: auto;
  z-index: 60;
}

.filler {
  z-index: 5;
  margin-left: -1.5vw;
}

.filler--1 {
  width: 40vw;
  margin-bottom: 2vw;
  margin-right: -5.75vw;
  animation: appear--filler1 3.25s ease-in-out forwards;
}

@keyframes appear--filler1 {
  0% {
    visibility: hidden;
    transform: translateY(150%);
  }

  20% {
    visibility: visible;
    transform: translateY(150%);
    opacity: 0;
  }
  75% {
    transform: translateY(-10%);
    opacity: 1;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
.filler--2 {
  margin-right: -0.65vw;
  margin-left: -1.85vw;
  margin-bottom: 2.5vw;
  width: 40vw;
  z-index: 2;
  animation: appear--filler2 3.5s ease-in-out forwards;
} 

@keyframes appear--filler2 {
  0% {
    visibility: hidden;
    transform: translateY(150%);
  }

  25% {
    visibility: visible;
    transform: translateY(150%);
    opacity: 0;
  }
  80% {
    transform: translateY(-11%);
    opacity: 1;
  }
  100% {
    transform: translateY(0%);
  }
}
.filler--3 {
  margin-right: -1.2vw;
  margin-left: -3vw;
  margin-bottom: 3.5vw;
  width: 40vw;
}

.filler--4 {
  margin-right: -0.5vw;
  margin-left: -2vw;
  margin-bottom: 5.5vw;
  width: 40vw;
  height: auto;
}

.filler--5 {
  margin-right: -4vw;
  margin-left: -3vw;
  margin-bottom: 3.5vw;
  width: 40vw;
}

.filler--6 {
  margin-right: -0vw;
  margin-left: -0.75vw;
  margin-bottom: 1.5vw;
  width: 35vw;
}

.work__image--6{
  margin-top: 5.5vh;
}

.filler--7 {
  margin-right: -0.5vw;
  margin-bottom: 4.5vw;
  width: 40vw;
  height: auto;
}

.cards {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 55vw 0 0vw;
  margin-left: -15vw;
  justify-self: start;
  z-index: 500;
}

.work--1 {
  animation: appear--card1 5.5s ease-in-out forwards;
}

@keyframes appear--card1 {
  0% {
    visibility: hidden;
    transform:translate(0%, 150%);
    opacity: 0;
  }

  10% {
    visibility: visible;
    transform: translate(0%, 150%);
    opacity: 0;
  }
  47% {
    transform: translate(0%, -6.5%);
    opacity: 1;
  }

  62% {
    transform: translate(0%, 0%);
  }
  70% {

  }
}

.work--1__text{
  animation: appear--work1--text 5.5s ease-in-out forwards;
}

@keyframes  appear--work1--text{
  0%{
    opacity: 0;
  }

  75%{
    opacity: 0;
  }

  95%{
    opacity: 1;
  }
}

.work--2 {
  animation: appear--card2 4.25s ease-in-out;
}

@keyframes appear--card2 {
  0% {
    visibility: hidden;
    transform: translateY(150%);
  }

  25% {
    visibility: visible;
    transform: translateY(150%);
    opacity: 0;
  }
  68% {
    transform: translateY(-7.5%);
    opacity: 1;
  }
  85%{
    transform: translateY(0%);
    opacity: 1;
  }
}

.cards > .card:last-child > .work {
  margin-right: 40vw;
}

.work__image {
  z-index: 50;
  width: 65vw;
  height: auto;
}

.work__text {
  display: none
}

.work__text > p {
  display: block;
  width: 25vw;
  height: auto;
  font-size: calc(var(--font-size-p) * 0.9);
}

.work__text > p:first-of-type {
  font-size: var(--font-size-logo);
}

.work {
  display: flex;
  text-decoration: none;
  width: auto;
  overflow-x: visible;
}

.flex {
  display: none;
}

.work__titel--mobile > h2 {
    font-size: calc(var(--font-size-h2-span) * 1) !important;
    text-transform: uppercase;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    font-style: normal;
    text-align: right;
    color: #000;
    background: var(--color-white);
    mix-blend-mode: lighten;
    padding: 1vh 0;
    margin: 0;
}

.work__titel--mobile {
  display: block;
  width: auto;
  background-image: url("../assets/projecten/backgroundTitel.png");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.text--mobile{
  display: flex;
  flex-direction: row;
  align-items: end;
  width: 600vw;
  height: 25vh;
  grid-row: 2;
  grid-column: 1;
}

.work__text--mobile{
  width: 85vw;
  display: flex;
  flex-direction: column;
  align-items: right;
  text-align: right;
   padding: 0 7.5vw;
}



.work__text--mobile > p:first-of-type{
  font-size: calc(var(--font-size-p)*1.25);
}

.work__text--mobile > p{
  font-size: calc(var(--font-size-p)*1);
}

}