* {
  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: 49.6%;
}
/* 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.1vw;
  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: 74.5%;
  left: 2.8%;
  z-index: 100;
}

/* step 11 */
.overlay.step-11 .btn-next {
  display: block;
  width: 92.1vw;
  height: 16.8vw;
  position: absolute;
  top: 23%;
  left: 3.9%;
  z-index: 100;
}

/* step 12 */
.overlay.step-12 .btn-next {
  display: block;
  width: 84.2vw;
  height: 21.7vw;
  position: absolute;
  top: 16.5%;
  left: 4%;
  z-index: 100;
}
/* step 13 */
.overlay.step-13 .btn-next {
  display: block;
  width: 92.1vw;
  height: 8.5vw;
  position: absolute;
  top: 49%;
  left: 3.9%;
  z-index: 100;
}
/* step 14 */
.overlay.step-14 .btn-next {
  display: block;
  width: 19.6vw;
  height: 6.2vw;
  position: absolute;
  top: 62.5%;
  left: 21.5%;
  z-index: 100;
}
/* step 15 */
.overlay.step-15 .btn-next {
  display: block;
  width: 16vw;
  height: 4.8vw;
  position: absolute;
  top: 76%;
  left: 82.1%;
  z-index: 100;
}
/* step 16 */
.overlay.step-16 .btn-next {
  display: block;
  width: 6.9vw;
  height: 3vw;
  position: absolute;
  top: 4.5%;
  left: 21.7%;
  z-index: 100;
}
/* step 17 */
.overlay.step-17 .btn-next {
  display: block;
  width: 36.5vw;
  height: 20.7vw;
  position: absolute;
  top: 8%;
  left: 23%;
  z-index: 100;
}
/* step 18 */
.overlay.step-18 .btn-next {
  display: block;
  width: 34vw;
  height: 18vw;
  position: absolute;
  top: 40%;
  left: 25.2%;
  z-index: 100;
}
/* step 19 */
.overlay.step-19 .btn-next {
  display: block;
  width: 34.4vw;
  height: 8.2vw;
  position: absolute;
  top: 51%;
  left: 25%;
  z-index: 100;
}
/* step 20 */
.overlay.step-20 .btn-next {
  display: block;
  width: 36.6vw;
  height: 6.6vw;
  position: absolute;
  top: 51%;
  left: 59.3%;
  z-index: 100;
}
/* step 21 */
.overlay.step-21 .btn-next {
  display: block;
  width: 14.4vw;
  height: 5.2vw;
  position: absolute;
  top: 63.3%;
  left: 22.9%;
  z-index: 100;
}
/* step 22 */
.overlay.step-22 .btn-next {
  display: block;
  width: 4.2vw;
  height: 3.8vw;
  position: absolute;
  top: 67.6%;
  left: 58.9%;
  z-index: 100;
}
/* step 23 */
.overlay.step-23 .btn-next {
  display: block;
  width: 32.4vw;
  height: 4.3vw;
  position: absolute;
  top: 52.2%;
  left: 26%;
  z-index: 100;
}
/* step 24 */
.overlay.step-24 .btn-next {
  display: block;
  width: 33vw;
  height: 4.8vw;
  position: absolute;
  top: 56.6%;
  left: 33.4%;
  z-index: 100;
}

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

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

/* step 27 */
.overlay.step-27 .btn-next {
  display: block;
  width: 11.6vw;
  height: 4.9vw;
  position: absolute;
  top: 47.8%;
  left: 24.8%;
  z-index: 100;
}

/* step 28 */
.overlay.step-28 .btn-next {
  display: block;
  width: 11.8vw;
  height: 5.2vw;
  position: absolute;
  top: 47.3%;
  left: 58.7%;
  z-index: 100;
}

/* step 29 */
.overlay.step-29 .btn-next {
  display: block;
  width: 34.7vw;
  height: 17.2vw;
  position: absolute;
  top: 20.9%;
  left: 24.8%;
  z-index: 100;
}

/* step 30 */
.overlay.step-30 .btn-next {
  display: block;
  width: 34.4vw;
  height: 7vw;
  position: absolute;
  top: 47.4%;
  left: 25%;
  z-index: 100;
}

/* step 31 */
.overlay.step-31 .btn-next {
  display: block;
  position: absolute;
  width: 34.2vw;
  height: 14.2vw;
  top: 58%;
  left: 25%;
  z-index: 100;
}

/* step 32 */
.overlay.step-32 .btn-next {
  display: block;
  position: absolute;
  width: 36.5vw;
  height: 6.6vw;
  top: 58.2%;
  left: 59.2%;
  z-index: 100;
}

/* step 33 */
.overlay.step-33 .btn-next {
  display: block;
  position: absolute;
  width: 34.3vw;
  height: 8.5vw;
  top: 68%;
  left: 25%;
  z-index: 100;
}

/* step 34 */
.overlay.step-34 .btn-next {
  display: block;
  position: absolute;
  width: 34.4vw;
  height: 6.8vw;
  top: 15.9%;
  left: 24.9%;
  z-index: 100;
}

/* step 35 */
.overlay.step-35 .btn-next {
  display: block;
  position: absolute;
  width: 36.5vw;
  height: 7.2vw;
  top: 15.4%;
  left: 59.3%;
  z-index: 100;
}

/* step 36 */
.overlay.step-36 .btn-next {
  display: block;
  position: absolute;
  width: 73vw;
  height: 6.9vw;
  top: 43.4%;
  left: 23%;
  z-index: 100;
}

/* step 37 */
.overlay.step-37 .btn-next {
  display: block;
  position: absolute;
  width: 73vw;
  height: 17.4vw;
  top: 6.4%;
  left: 23%;
  z-index: 100;
}

/* step 38 */
.overlay.step-38 .btn-next {
  display: block;
  position: absolute;
  width: 73.8vw;
  height: 9.7vw;
  top: 37.5%;
  left: 22.1%;
  z-index: 100;
}

/* step 39 */
.overlay.step-39 .btn-next {
  display: block;
  position: absolute;
  width: 73.6vw;
  height: 8.5vw;
  top: 54.4%;
  left: 22.1%;
  z-index: 100;
}

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

/* step 41 */
.overlay.step-41 .btn-next {
  display: block;
  position: absolute;
  width: 32vw;
  height: 5.5vw;
  top: 82.6%;
  left: 0.5%;
  z-index: 100;
}

/* step 42 */
.overlay.step-42 .btn-next {
  display: block;
  position: absolute;
  width: 14.3vw;
  height: 4.7vw;
  top: 52.9%;
  left: 15.7%;
  z-index: 100;
}

/* step 43 */
.overlay.step-43 .btn-next {
  display: block;
  position: absolute;
  width: 33.1vw;
  height: 5.1vw;
  top: 56.3%;
  left: 33.3%;
  z-index: 100;
}

/* step 44 */
.overlay.step-44 .btn-next {
  display: block;
  position: absolute;
  width: 39.7vw;
  height: 6.3vw;
  top: 80.5%;
  left: 0.8%;
  z-index: 100;
}

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

/* step 46 */
.overlay.step-46 .btn-next {
  display: block;
  position: absolute;
  width: 36.6vw;
  height: 6vw;
  top: 10.6%;
  left: 1.8%;
  z-index: 100;
}

/* step 47 */
.overlay.step-47 .btn-next {
  display: block;
  position: absolute;
  width: 16.2vw;
  height: 4.8vw;
  top: 52.9%;
  left: 65.1%;
  z-index: 100;
}

/* step 48 */
.overlay.step-48 .btn-next {
  display: block;
  position: absolute;
  width: 7.9vw;
  height: 3.9vw;
  top: 25.9%;
  left: 85.5%;
  z-index: 100;
}

/* step 49 */
.overlay.step-49 .btn-next {
  display: block;
  position: absolute;
  width: 13.1vw;
  height: 3.9vw;
  top: 84%;
  left: 77.9%;
  z-index: 100;
}

/* step 50 */
.overlay.step-50 .btn-next {
  display: block;
  position: absolute;
  width: 16.3vw;
  height: 4.7vw;
  top: 53%;
  left: 81.8%;
  z-index: 100;
}

/* step 51 */
.overlay.step-51 .btn-next {
  display: block;
  position: absolute;
  width: 30.7vw;
  height: 5vw;
  top: 51.3%;
  left: 34.8%;
  z-index: 100;
}

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

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