* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.screen {
  width: 100vw;
  height: 65vw;
  position: relative;
  overflow: hidden;
}
.btn-step {
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: center;
  margin-top: 3px;
}
.btn {
  width: 70px;
  height: 70px;
}

/* image-bg */
.image-bg img {
  width: 100%;
}
.image-bg {
  width: 100%;
  opacity: 0;
  transition: all 0.5s ease-in-out;
  position: absolute;
  top: 0;
  z-index: 5;
}
.image-bg.bottom {
  top: auto;
  bottom: 0;
}
.image-bg.active {
  opacity: 1;
}

/* overlay set up */
.overlay.step-1 ,
.overlay.step-2 ,
.overlay.step-3 ,
.overlay.step-4 ,
.overlay.step-5 ,
.overlay.step-6 ,
.overlay.step-7 ,
.overlay.step-8 ,
.overlay.step-9 ,
.overlay.step-10 ,
.overlay.step-11 ,
.overlay.step-12 ,
.overlay.step-13 ,
.overlay.step-14 ,
.overlay.step-15 ,
.overlay.step-16 ,
.overlay.step-17 ,
.overlay.step-18 ,
.overlay.step-19 ,
.overlay.step-20 ,
.overlay.step-21 ,
.overlay.step-22 ,
.overlay.step-23 ,
.overlay.step-24 ,
.overlay.step-25 ,
.overlay.step-26 ,
.overlay.step-27 ,
.overlay.step-28 ,
.overlay.step-29 ,
.overlay.step-30 ,
.overlay.step-31 ,
.overlay.step-32 ,
.overlay.step-33 ,
.overlay.step-34 ,
.overlay.step-35 ,
.overlay.step-36 ,
.overlay.step-37 ,
.overlay.step-38 ,
.overlay.step-39 ,
.overlay.step-40 ,
.overlay.step-41 ,
.overlay.step-42 ,
.overlay.step-43 ,
.overlay.step-44 ,
.overlay.step-45 ,
.overlay.step-46 ,
.overlay.step-47 ,
.overlay.step-48 ,
.overlay.step-49 ,
.overlay.step-50 ,
.overlay.step-51 ,
.overlay.step-52 ,
.overlay.step-53 ,
.overlay.step-54 ,
.overlay.step-55 ,
.overlay.step-56 ,
.overlay.step-57 ,
.overlay.step-58 ,
.overlay.step-59 ,
.overlay.step-60 ,
.overlay.step-61 ,
.overlay.step-62 ,
.overlay.step-63 ,
.overlay.step-64 ,
.overlay.step-65 ,
.overlay.step-66 ,
.overlay.step-67 ,
.overlay.step-68 ,
.overlay.step-69 ,
.overlay.step-70 ,
.overlay.step-71 ,
.overlay.step-72 ,
.overlay.step-73 ,
.overlay.step-74 ,
.overlay.step-75 ,
.overlay.step-76 ,
.overlay.step-77 ,
.overlay.step-78 ,
.overlay.step-79 ,
.overlay.step-80 ,
.overlay.step-81 ,
.overlay.step-82 ,
.overlay.step-83 ,
.overlay.step-84 ,
.overlay.step-85 ,
.overlay.step-86 ,
.overlay.step-87 ,
.overlay.step-88 ,
.overlay.step-89 ,
.overlay.step-90 ,
.overlay.step-91 ,
.overlay.step-92 ,
.overlay.step-93 ,
.overlay.step-94 ,
.overlay.step-95 ,
.overlay.step-96 ,
.overlay.step-97 ,
.overlay.step-98 ,
.overlay.step-99 ,
.overlay.step-100 ,
.overlay.step-101 ,
.overlay.step-102 ,
.overlay.step-103 ,
.overlay.step-104 ,
.overlay.step-105 ,
.overlay.step-106 ,
.overlay.step-107 ,
.overlay.step-108 ,
.overlay.step-109 ,
.overlay.step-110 ,
.overlay.step-111 ,
.overlay.step-112 ,
.overlay.step-113 ,
.overlay.step-114 ,
.overlay.step-115 ,
.overlay.step-116 ,
.overlay.step-117 ,
.overlay.step-118 ,
.overlay.step-119 ,
.overlay.step-120 ,
.overlay.step-121 ,
.overlay.step-122 ,
.overlay.step-123 ,
.overlay.step-124 ,
.overlay.step-125 ,
.overlay.step-126 ,
.overlay.step-127 ,
.overlay.step-128 ,
.overlay.step-129 ,
.overlay.step-130 ,
.overlay.step-131 ,
.overlay.step-132 
 {
    z-index: 6;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
}
.overlay img {
  width: 100%;
}
.next-step,
.btn-restart,
#back-step {
    cursor: pointer;
}
.overlay .btn-next {
  display: none;
}

.overlay.step-1 .btn-next {
  display: block;
  top: 63%;
  left: 39%;
  width: 22vw;
  height: 6vw;
}
/* defualt and second image */
.image-bg.default img:nth-child(2) {
  display: block;
}
.image-bg.default img:nth-child(1) {
  display: none;
}
.image-bg img:nth-child(1) {
  display: block;
}
.image-bg img:nth-child(2) {
  display: none;
}

/* .overlay.step-2 .btn-next {
    position: absolute;
    display: block;
    top: 51%;
    left: 18%;
    z-index: 100;
    width: 30vw;
    height: 9vw;
} */
.overlay.step-1 .btn-next {
  position: absolute;
  z-index: 100;
}

.block-layer {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
}

.overlay .container-step-2,
.overlay .container-step-3,
.overlay .container-step-4,
.overlay .container-step-5,
.overlay .container-step-6,
.overlay .container-step-7,
.overlay .container-step-8,
.overlay .container-step-9,
.overlay .container-step-10,
.overlay .container-step-11,
.overlay .container-step-12 {
  opacity: 0;
  position: absolute;
  transition: all 1s ease-in-out;
}
.overlay.step-1 .cursor,
.overlay.step-2 .container-step-2,
.overlay.step-3 .container-step-3,
.overlay.step-4 .container-step-4,
.overlay.step-5 .container-step-5,
.overlay.step-6 .container-step-6,
.overlay.step-7 .container-step-7,
.overlay.step-8 .container-step-8,
.overlay.step-9 .container-step-9,
.overlay.step-10 .container-step-10,
.overlay.step-11 .container-step-11,
.overlay.step-12 .container-step-12 {
  opacity: 1;
  z-index: 100;
}
.overlay .cursor {
  transition: all 0.5s ease-in;
  position: absolute;
  width: 6.3%;
  opacity: 0;
}
.border {
  border: 2px solid #e71618;
  border-radius: 10px;
  box-shadow: 0 0 4px 3px #ffffff52;
  position: relative;
  z-index: 0;
}

/*--------- step 1 ---------*/
.overlay.step-1 .cursor {
  opacity: 1;
  display: block;
}
.overlay .cursor {
  top: 64.6%;
  right: 38%;
}

/* step 2 */
.overlay.step-2 .btn-next {
  display: block;
  width: 7vw;
  height: 6.7vw;
  position: absolute;
  top: 0.5%;
  left: 18.9%;
  z-index: 100;
}
/* second */
.overlay.step-2 .btn-next.second {
  width: 6.9vw;
  height: 6.5vw;
  top: 0.8%;
  left: 26.5%;
}

/* step 3 */
.overlay.step-3 .btn-next {
  display: block;
  width: 6.9vw;
  height: 7vw;
  position: absolute;
  top: 0.3%;
  left: 19.1%;
  z-index: 100;
}
/* step 4 */
.overlay.step-4 .btn-next {
  display: block;
  width: 14.8vw;
  height: 4.7vw;
  position: absolute;
  top: 20.8%;
  left: 35.2%;
  z-index: 100;
}
/* second */
.overlay.step-4 .btn-next.second {
  width: 14.1vw;
  height: 3.2vw;
  top: 30.3%;
  left: 36%;
}
/* step 5 */
.overlay.step-5 .btn-next {
  display: block;
  width: 59.4vw;
  height: 5.1vw;
  position: absolute;
  top: 49.3%;
  left: 36.3%;
  z-index: 100;
}
/* step 6 */
.overlay.step-6 .btn-next {
  display: block;
  width: 6.9vw;
  height: 6.6vw;
  position: absolute;
  top: 0.7%;
  left: 26.5%;
  z-index: 100;
}
/* step 7 */
.overlay.step-7 .btn-next {
  display: block;
  width: 10.1vw;
  height: 2.8vw;
  position: absolute;
  top: 16.1%;
  left: 17.1%;
  z-index: 100;
}

/* step 8 */
.overlay.step-8 .btn-next {
  display: block;
  width: 15.4vw;
  height: 2.8vw;
  position: absolute;
  top: 16.2%;
  left: 51.1%;
  z-index: 100;
}
/* step 9 */
.overlay.step-9 .btn-next {
  display: block;
  width: 12.8vw;
  height: 4.5vw;
  position: absolute;
  top: 46%;
  left: 21.3%;
  z-index: 100;
}

/* step 10 */
.overlay.step-10 .btn-next {
  display: block;
  width: 94.6vw;
  height: 4.1vw;
  position: absolute;
  top: 67.3%;
  left: 2.8%;
  z-index: 100;
}

/* step 11 */
.overlay.step-11 .btn-next {
  display: block;
  width: 89.5vw;
  height: 20.6vw;
  position: absolute;
  top: 23.7%;
  left: 5.2%;
  z-index: 100;
}

/* step 12 */
.overlay.step-12 .btn-next {
  display: block;
  width: 64.4vw;
  height: 21.1vw;
  position: absolute;
  top: 18.5%;
  left: 22.3%;
  z-index: 100;
}
/* step 13 */
.overlay.step-13 .btn-next {
  display: block;
  width: 88.4vw;
  height: 8.1vw;
  position: absolute;
  top: 50%;
  left: 5.9%;
  z-index: 100;
}
/* step 14 */
.overlay.step-14 .btn-next {
  display: block;
  width: 31.1vw;
  height: 2.8vw;
  position: absolute;
  top: 61.5%;
  left: 23.1%;
  z-index: 100;
}
/* step 15 */
.overlay.step-15 .btn-next {
  display: block;
  width: 36.2vw;
  height: 20.4vw;
  position: absolute;
  top: 8.7%;
  left: 23.5%;
  z-index: 100;
}
/* step 16 */
.overlay.step-16 .btn-next {
  display: block;
  width: 33.4vw;
  height: 17vw;
  position: absolute;
  top: 39.8%;
  left: 25.7%;
  z-index: 100;
}
/* step 17 */
.overlay.step-17 .btn-next {
  display: block;
  width: 33.3vw;
  height: 7.8vw;
  position: absolute;
  top: 50.4%;
  left: 25.7%;
  z-index: 100;
}
/* step 18 */
.overlay.step-18 .btn-next {
  display: block;
  width: 35.4vw;
  height: 6.2vw;
  position: absolute;
  top: 50.4%;
  left: 58.9%;
  z-index: 100;
}
/* step 19 */
.overlay.step-19 .btn-next {
  display: block;
  width: 13.4vw;
  height: 4.2vw;
  position: absolute;
  top: 62.7%;
  left: 24%;
  z-index: 100;
}
/* step 20 */
.overlay.step-20 .btn-next {
  display: block;
  width: 4.2vw;
  height: 4.1vw;
  position: absolute;
  top: 27.8%;
  left: 58.6%;
  z-index: 100;
}
/* step 21 */
.overlay.step-21 .btn-next {
  display: block;
  width: 31vw;
  height: 4.1vw;
  position: absolute;
  top: 39.1%;
  left: 26.9%;
  z-index: 100;
}
/* step 22 */
.overlay.step-22 .btn-next {
  display: block;
  width: 33vw;
  height: 4.8vw;
  position: absolute;
  top: 52.3%;
  left: 33.3%;
  z-index: 100;
}
/* step 23 */
.overlay.step-23 .btn-next {
  display: block;
  width: 9.2vw;
  height: 4.1vw;
  position: absolute;
  top: 40%;
  left: 25.6%;
  z-index: 100;
}
/* step 24 */
.overlay.step-24 .btn-next {
  display: block;
  width: 21.2vw;
  height: 4.8vw;
  position: absolute;
  top: 39.6%;
  left: 58.6%;
  z-index: 100;
}

/* step 25 */
.overlay.step-25 .btn-next {
  display: block;
  width: 11.1vw;
  height: 5vw;
  position: absolute;
  top: 46.2%;
  left: 25.7%;
  z-index: 100;
}

/* step 26 */
.overlay.step-26 .btn-next {
  display: block;
  width: 11.3vw;
  height: 5.1vw;
  position: absolute;
  top: 46.14%;
  left: 58.6%;
  z-index: 100;
}

/* step 27 */
.overlay.step-27 .btn-next {
  display: block;
  width: 33.3vw;
  height: 14.6vw;
  position: absolute;
  top: 23.1%;
  left: 25.8%;
  z-index: 100;
}

/* step 28 */
.overlay.step-28 .btn-next {
  display: block;
  width: 33.4vw;
  height: 6.5vw;
  position: absolute;
  top: 46.3%;
  left: 25.7%;
  z-index: 100;
}

/* step 29 */
.overlay.step-29 .btn-next {
  display: block;
  width: 33.2vw;
  height: 14vw;
  position: absolute;
  top: 56.4%;
  left: 25.8%;
  z-index: 100;
}

/* step 30 */
.overlay.step-30 .btn-next {
  display: block;
  width: 35.3vw;
  height: 6.4vw;
  position: absolute;
  top: 56.4%;
  left: 58.9%;
  z-index: 100;
}

/* step 31 */
.overlay.step-31 .btn-next {
  display: block;
  position: absolute;
  width: 33vw;
  height: 8.3vw;
  top: 66%;
  left: 25.7%;
  z-index: 100;
}

/* step 32 */
.overlay.step-32 .btn-next {
  display: block;
  position: absolute;
  width: 33.3vw;
  height: 6.4vw;
  top: 11.2%;
  left: 25.7%;
  z-index: 100;
}

/* step 33 */
.overlay.step-33 .btn-next {
  display: block;
  position: absolute;
  width: 35.3vw;
  height: 6vw;
  top: 11.6%;
  left: 59%;
  z-index: 100;
}

/* step 34 */
.overlay.step-34 .btn-next {
  display: block;
  position: absolute;
  width: 70.9vw;
  height: 6.6vw;
  top: 37.6%;
  left: 23.7%;
  z-index: 100;
}

/* step 35 */
.overlay.step-35 .btn-next {
  display: block;
  position: absolute;
  width: 70.2vw;
  height: 16vw;
  top: 7.9%;
  left: 24%;
  z-index: 100;
}

/* step 36 */
.overlay.step-36 .btn-next {
  display: block;
  position: absolute;
  width: 70.9vw;
  height: 9.8vw;
  top: 36.6%;
  left: 23.3%;
  z-index: 100;
}

/* step 37 */
.overlay.step-37 .btn-next {
  display: block;
  position: absolute;
  width: 70.9vw;
  height: 8.2vw;
  top: 53.4%;
  left: 23.3%;
  z-index: 100;
}

/* step 38 */
.overlay.step-38 .btn-next {
  display: block;
  position: absolute;
  width: 13.5vw;
  height: 4.7vw;
  top: 54.3%;
  left: 3.5%;
  z-index: 100;
}

/* step 39 */
.overlay.step-39 .btn-next {
  display: block;
  position: absolute;
  width: 32.1vw;
  height: 5.3vw;
  top: 82.8%;
  left: 0.5%;
  z-index: 100;
}

/* step 40 */
.overlay.step-40 .btn-next {
  display: block;
  position: absolute;
  width: 13.9vw;
  height: 4.6vw;
  top: 54.3%;
  left: 16.9%;
  z-index: 100;
}

/* step 41 */
.overlay.step-41 .btn-next {
  display: block;
  position: absolute;
  width: 32.9vw;
  height: 4.8vw;
  top: 52.4%;
  left: 33.4%;
  z-index: 100;
}

/* step 42 */
.overlay.step-42 .btn-next {
  display: block;
  position: absolute;
  width: 34.3vw;
  height: 5.4vw;
  top: 81.8%;
  left: 0.7%;
  z-index: 100;
}

/* step 43 */
.overlay.step-43 .btn-next {
  display: block;
  position: absolute;
  width: 16.2vw;
  height: 4.7vw;
  top: 54.3%;
  left: 64.3%;
  z-index: 100;
}

/* step 44 */
.overlay.step-44 .btn-next {
  display: block;
  position: absolute;
  width: 7.4vw;
  height: 3.5vw;
  top: 26.2%;
  left: 85.6%;
  z-index: 100;
}

/* step 45 */
.overlay.step-45 .btn-next {
  display: block;
  position: absolute;
  width: 13.2vw;
  height: 4vw;
  top: 83.8%;
  left: 76.2%;
  z-index: 100;
}

/* step 46 */
.overlay.step-46 .btn-next {
  display: block;
  position: absolute;
  width: 16.1vw;
  height: 4.8vw;
  top: 54.3%;
  left: 80.4%;
  z-index: 100;
}

/* step 47 */
.overlay.step-47 .btn-next {
  display: block;
  position: absolute;
  width: 30vw;
  height: 6.2vw;
  top: 36.9%;
  left: 35.1%;
  z-index: 100;
}

/* step 48 */
.overlay.step-48 .btn-next {
  display: block;
  position: absolute;
  width: 32.3vw;
  height: 4.9vw;
  top: 59.5%;
  left: 33.9%;
  z-index: 100;
}

/* step 49 */
.overlay.step-49 .btn-next {
  display: block;
  position: absolute;
  width: 45.3vw;
  height: 10.5vw;
  top: 29%;
  left: 4.1%;
  z-index: 100;
}

/* step 50 */
.overlay.step-50 #restart-step2 {
  display: block;
  position: absolute;
  width: 27.5vw;
  height: 5.5vw;
  top: 53.2%;
  left: 36.2%;
  z-index: 100;
}