body {
    background-image: url(../images/bg.png);
    background-repeat: repeat;
    background-size: 30px 30px;
    overflow: hidden;
}



.progress_bar{
    position: absolute;
    width: 47%;
    height: 5%;
    bottom: 2%;
    left: 27%;
}
.full{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 0%;
    height: 100%;
    overflow: hidden;
}

.full img {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}

.empty{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}

.empty img {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}

.progress_bar .text{
    position: absolute;
    top: -78%;
    left: 25%;
    width: 50%;
    height: 85%;
    background-image: url(../images/digitalization.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}


.progress_bar.full_1 .full{
    width: 11%;
}

.progress_bar.full_2 .full{
    width: 21%;
}

.progress_bar.full_3 .full{
    width: 31%;
}
.progress_bar.full_4 .full{
    width: 40.5%;
}
.progress_bar.full_5 .full{
    width: 50%;
}
.progress_bar.full_6 .full{
    width: 59.5%;
}
.progress_bar.full_7 .full{
    width: 70%;
}
.progress_bar.full_8 .full{
    width: 79%;
}
.progress_bar.full_9 .full{
    width: 88.5%;
}
.progress_bar.full_10 .full{
    width: 100%;
}


/* styles.css */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
   
  .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #cccccc;
    border-top-color: #1a1a1a;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
   
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }


#section{
    position: absolute;
    overflow: hidden;
    background: black;
}

.location{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

.location_1{
    background-image: url(../images/location_1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.location_2{
    background-image: url(../images/location_2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    opacity: 0;
}

.location_3{
    background-image: url(../images/location_3.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    opacity: 0;
}
.location_4{
    opacity: 0;
}
audio{
    visibility: hidden;
}

#play{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}




#play img{
    position: absolute;
    top: 17%;
    left: 15%;
    width: 70%;
    cursor: pointer;
}

.level_1{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 7, 64, 0.6);
    opacity: 0;
}

.level_1 img{
    position: absolute;
    top: 27%;
    left: 25%;
    width: 50%;
}


.level_1_end_1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 7, 64, 0.6);
    opacity: 0;
}
.level_1_end_1 img{
    position: absolute;
    top: 27%;
    left: 15%;
    width: 70%;
}

.level_1_next {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 7, 64, 0.6);
    opacity: 0;
}
.level_1_next img{
    position: absolute;
    top: 23%;
    left: 15%;
    width: 70%;
}





@keyframes example {
    0% {opacity: 0;}
    20% {opacity: 1;}
    40% {opacity: 0;}
    60% {opacity: 1;}
    80% {opacity: 0;}
    100% {opacity: 1;}
  }

.boxParent{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.boxParent.open {
    opacity: 1;
    animation-name: example;
    animation-duration: 1s;
}


.box {
    position: absolute;
    width: 6%;
    height: 6%;
    background-image:url(../images/box.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.box.open{
    opacity: 0;
}


.box_1{
    top: 83%;
    left: 1%;
}
.box_2{
    top: 43%;
    left: 9%;
}
.box_3{
    top: 83%;
    left: 85%;
}
.box_4{
    top: 43%;
    left: 93%;
}
.box_5{
    top: 68%;
    left: 60%;
}

.boxOpen {
    position: absolute;
    width: 8.5%;
    height: 7.5%;
    background-image:url(../images/box_1.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin-top: -0.4%;
    margin-left: -1.3%;
    opacity: 0;
}
.boxOpen.open{
    opacity: 1;
    
}

.boxOpen_1{
    top: 83%;
    left: 1%;
}
.boxOpen_2{
    top: 43%;
    left: 9%;
}
.boxOpen_3{
    top: 83%;
    left: 85%;
}
.boxOpen_4{
    top: 43%;
    left: 93%;
}
.boxOpen_5{
    top: 68%;
    left: 60%;
}



.paper {
    position: absolute;
    width: 5%;
    height: 7.5%;
    background-image:url(../images/paper.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin-top: -4.2%;
    margin-left: 0.5%;
    opacity: 0;
}

.paper_1{
    top: 83%;
    left: 85%;
}
.paper_2{
    top: 43%;
    left: 9%;
}
.paper_3{
    top: 68%;
    left: 60%;
}

@keyframes example2 {
    0% {opacity: 1;}
    20% {opacity: 0;}
    40% {opacity: 1;}
    60% {opacity: 0;}
    80% {opacity: 1;}
    100% {opacity: 0;}
  }

.paper.open{
    opacity: 0;
    animation-name: example;
    animation-duration: 2s;
}


.object{
    position: absolute;
    top: 57%;
    left: -10%;
    width: 10%;
    height: 32%;
}

.men{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 80%;
    background-image: url(../images/men.png);
    background-size: 1600% 100%;
    background-repeat: no-repeat;
    background-position: 86.6% 0%;
    
}
@keyframes run {
    0% {background-position: -0.7% 0%;}
    14% {background-position: 10.4% 0%;}
    28% {background-position: 21.4% 0%;}
    42% {background-position: 32.4% 0%;}
    56% {background-position: 43.4% 0%;}
    71% {background-position: 54.4% 0%;}
    86% {background-position: 65.4% 0%;}
    100% {background-position: 76.4% 0%;}
  }

.men.run{
    animation-name: run;
    animation-duration: 1s;
    animation-timing-function: steps(1, jump-start);
    animation-iteration-count: infinite;
}

.men.jump{
    background-position: 97% 0%;
}
.point{
    position: absolute;
    top: 0px;
    left: 0%;
    width: 100%;
    height: 20%;
    background-image: url(../images/pion.png);
    background-size: 80%;
    background-position: center bottom;
    background-repeat: no-repeat;
    background: none;
}
.zzz{
    z-index: 100;
    cursor: pointer;
}

.step_1{
    left: 45%;
    transition: left 3s linear;
}

.step_2{
    left: 57%;
    transition: left 1s linear;
}

.step_3{
    left: 27%;
    transition: left 1.5s linear;
}

.step_3 .men, .step_4 .men, .step_5 .men, .step_11 .men, .step_12 .men, .step_13 .men{
    transform: scaleX(-1);
}
.step_4{
    left: 20%;
    top: 17%;
    transition: all 0.5s linear;
}
.step_5{
    left: 10%;
    top: 17%;
    transition: left 0.5s linear;
}

.step_6{
    left: 23%;
    top: 17%;
    transition: left 0.5s linear;
}

.step_7{
    left: 30%;
    transition: all 0.5s linear;
}

.step_8{
    left: 64%;
    transition: left 2s linear;
}

.step_9{
    left: 72%;
    top: 17%;
    transition: all 0.5s linear;
}

.step_10{
    left: 88%;
    top: 17%;
    transition: left 1s linear;
}
.step_11{
    left: 68%;
    top: 17%;
    transition: left 1s linear;
}

.step_12{
    left: 60%;
    transition: all 0.5s linear;
}
.step_13{
    left: 2%;
    transition: all 2.5s linear;
}

.step_14{
    left: 79%;
    transition: left 3s linear;
}


.step_15{
    left: 90%;
    transition: left 0.5s linear;
}
.step_16{
    left: 100%;
    transition: left 0.5s linear;
}