@font-face {
  font-family: Satoshi;
  src: url(./fonts/Satoshi-Bold\ kopie.ttf);
}

/* Basis */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: gainsboro;
  overflow-x: hidden;
}
/* Container */
.container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Grote afbeelding */
.z1,
.z2,
.z3,
.s1,
.s2,
.s3,
.s4,
.s5 {
  position: absolute;
  display: block;
}

.z1 img,
.z2 img,
.z3 img,
.s1 img,
.s2 img,
.s3 img,
.s4 img,
.s5 img {
  width: 100%;
  height: auto;
  display: block;
}

.z1 {
  top: 10vh;
  left: 0vw;
  width: 38vw;
  z-index: 9999;
}

.z2 {
  top: 10vh;
  left: 38vw;
  width: 24vw;
  z-index: 9999;
}

.z3 {
  top: 10vh;
  left: 61.5vw;
  width: 38vw;
  z-index: 9999;
}

.s1 {
  top: 50vh;
  left: 2.5vw;
  width: 11vw;
  z-index: 9999;
  background-color: white;
}

.s2 {
  top: 50vh;
  left: 15.3vw;
  width: 22vw;
  z-index: 9999;
  background-color: white;
}

.s3 {
  top: 50vh;
  left: 39vw;
  width: 22vw;
  z-index: 9999;
  background-color: white;
}
.s4 {
  top: 50vh;
  left: 63vw;
  width: 22vw;
  z-index: 9999;
  background-color: white;
}

.s5 {
  top: 50vh;
  left: 87vw;
  width: 11vw;
  z-index: 9999;
  background-color: white;
}

/* Terug knop */
.terug-knop {
  position: fixed;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  opacity: 20%;
  cursor: pointer;
}

/* ------------------------------- */
/*          TABLET (1024px)        */
/* ------------------------------- */
@media screen and (max-width: 1024px) {
  .z1 {
    top: 0vh;
    left: 0vw;
    width: 60vw;
    z-index: 9999;
  }

  .z2 {
    top: 0vh;
    left: 60vw;
    width: 38vw;
    z-index: 9999;
  }

  .z3 {
    top: 31vh;
    left: 22.5vw;
    width: 60vw;
    z-index: 9999;
  }

  .s1 {
    top: 70vh;
    left: 2.5vw;
    width: 18vw;
    z-index: 9999;
    background-color: white;
  }

  .s2 {
    top: 70vh;
    left: 22.7vw;
    width: 36vw;
    z-index: 9999;
    background-color: white;
  }

  .s3 {
    top: 70vh;
    left: 61vw;
    width: 36vw;
    z-index: 9999;
    background-color: white;
  }
  .s4 {
    top: 101vh;
    left: 22.7vw;
    width: 36vw;
    z-index: 9999;
    background-color: white;
  }

  .s5 {
    top: 101vh;
    left: 61vw;
    width: 18vw;
    z-index: 9999;
    background-color: white;
  }
}

/* ------------------------------- */
/*           MOBIEL (768px)        */
/* ------------------------------- */
@media screen and (max-width: 768px) {
    html, body {
    overflow: auto !important;
    height: auto !important;
  }

  .cursor-dot {
    display: none !important;
  }

  .hover-image {
    display: none !important;
    opacity: 0 !important;
  }
  .container {
    min-height: 190vh;
  }
  .z1 {
    top: 0vh;
    left: 9vw;
    width: 80vw;
    z-index: 9999;
  }

  .z2 {
    top: 30vh;
    left: 30vw;
    width: 50vw;
    z-index: 9999;
  }

  .z3 {
    top: 60vh;
    left: 12vw;
    width: 80vw;
    z-index: 9999;
  }

  .s1 {
    top: 98vh;
    left: 15vw;
    width: 23vw;
    z-index: 9999;
    background-color: white;
  }

  .s2 {
    top: 98vh;
    left: 42vw;
    width: 46vw;
    z-index: 9999;
    background-color: white;
  }

  .s3 {
    top: 127vh;
    left: 30vw;
    width: 46vw;
    z-index: 9999;
    background-color: white;
  }
  .s4 {
    top: 156vh;
    left: 15vw;
    width: 46vw;
    z-index: 9999;
    background-color: white;
  }

  .s5 {
    top: 156vh;
    left: 65vw;
    width: 23vw;
    z-index: 9999;
    background-color: white;
  }

  .terug-knop {
    content: url("../assets/images/achtegrond\ mobile\ zilver.webp");
  }
}