* {
  font-size: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.container {
  width: 100%;
}

.section-1, .section-2, .section-3 {
  width: 100%;
  position: relative;
}

.section-2, .section-3 {
  display: none;
}

.overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10;
}

.overlay > img {
  width: 40%;
  left:50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  cursor: pointer;
}

.background {
  width: 100%;
  z-index: 1;
}

.background-img {
  width: 100%;
}

.background-img > img {
  width: 100%;
}

#click-1 {
  width: 7%;
  top: 81%;
  left: 2%;
  z-index: 2;
}

#click-2 {
  top: 32.3%;
  width: 10vw;
  left: 10.6%;
  z-index: 3;
}

#click-3 {
  width: 13.7vw;
  top: 35.2%;
  left: 11.5%;
  z-index: 2;
}

#click-4 {
  width: 6vw;
  top: 37.4%;
  z-index: 2;
  left: 24%;
}

#click-5 {
  width: 5.4vw;
  top: 47.1%;
  z-index: 2;
  left: 24%;
}

#click-6 {
  width: 6.65vw;
  top: 52.6%;
  z-index: 2;
  left: 49.05%;
}

#click-7 {
  width: 6vw;
  top: 36%;
  z-index: 2;
  left: 57.8%;
}

#click-8 {
  width: 13vw;
  top: 35%;
  z-index: 2;
  left: 69.1%;
}

#click-9 {
  width: 5vw;
  top: 35.4%;
  z-index: 2;
  left: 81.25%;
}

#click-10 {
  width: 4.8vw;
  top: 47%;
  z-index: 2;
  left: 86.7%;
}

#click-11 {
  width: 4vw;
  top: 62.3%;
  z-index: 2;
  left: 82.4%;
}

#click-12 {
  width: 13vw;
  top: 34%;
  z-index: 2;
  left: 37%;
}

#click-13 {
  width: 9vw;
  top: 77.5%;
  z-index: 2;
  left: 82.4%;
}

#click-14 {
  width: 6vw;
  top: 43.5%;
  z-index: 2;
  left: 59.3%;
}

#fore-1 {
  width: 10vw;
  top: 71.7%;
  z-index: 2;
  left: 62%;
}

#fore-2 {
  width: 14vw;
  top: 57%;
  z-index: 2;
  left: 44.5%;
}

#fore-3 {
  width: 8vw;
  top: 59%;
  z-index: 3;
  left: 28.5%;
}

#click-2-1 {
  width: 9.5%;
  top: 77.2%;
  z-index: 1;
  left: 18.4%;
}

#click-2-2 {
  width: 12.5%;
  top: 36.8%;
  z-index: 1;
  left: 27%;
}

#click-2-3 {
  width: 14%;
  top: 36.5%;
  z-index: 4;
  left: 44.9%;
}

#click-2-4 {
  width: 16.5%;
  top: 36.5%;
  z-index: 1;
  left: 64%;
}

#click-2-5 {
  width: 11.5%;
  top: 36%;
  z-index: 1;
  left: 76%;
}

#click-2-6 {
  width: 11.5%;
  top: 60%;
  z-index: 1;
  left: 88.5%;
}

#click-2-7 {
  width: 17.6%;
  top: 70.5%;
  z-index: 1;
  left: 26.4%;
}

#click-2-8 {
  width: 10.95%;
  top: 20.6%;
  z-index: 1;
  left: 3.25%;
}

#fore-2-1 {
  width: 12.4%;
  top: 36.3%;
  z-index: 2;
  left: 18.2%;
}

#fore-2-2 {
  width: 20.4%;
  top: 36.5%;
  z-index: 2;
  left: 50.2%;
}

#click-3-1 {
  width: 9.25%;
  top: 49.6%;
  z-index: 1;
  left: 14.45%;
}

#click-3-2 {
  width: 9.25%;
  top: 24%;
  z-index: 1;
  left: 29%;
}

#click-3-3 {
  width: 9.25%;
  top: 35%;
  z-index: 1;
  left: 31%;
}

#click-3-4 {
  width: 28%;
  top: 27%;
  z-index: 1;
  left: 42%;
}

#click-3-5 {
  width: 9.5%;
  top: 12.6%;
  z-index: 1;
  left: 70.8%;
}

#click-3-6 {
  width: 9%;
  top: 33.8%;
  z-index: 1;
  left: 81.3%;
}

#click-3-7 {
  width: 8%;
  top: 53%;
  z-index: 1;
  left: 72.3%;
}

#click-3-8 {
  width: 18%;
  top: 14%;
  z-index: 1;
  left: 0.3%;
}

#click-3-9 {
  width: 18%;
  top: 72%;
  z-index: 1;
  left: 72.3%;
}

.left-arrow {
  width: 5%;
  top: 50%;
  z-index: 5;
  left: 38.3%;
  animation: left 1s linear infinite;
  cursor: pointer;
}

.right-arrow {
  width: 5%;
  top: 60%;
  z-index: 5;
  left: 61%;
  animation: right 1s linear infinite;
  cursor: pointer;
}

@keyframes left {
  0% {
    left: 38.3%;
  }
  50% {
    left: 35.3%;
  }
  100% {
    left: 38.3%;
  }
}

@keyframes right {
  0% {
    left: 60%;
  }
  50% {
    left: 63%;
  }
  100% {
    left: 60%;
  }
}

@keyframes expand {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

#back, #back-2 {
  font-size: 2vw;
  color: black;
  z-index: 5;
  top: 5%;
  left: 3%;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  animation: expand 0.8s linear infinite;
}