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



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


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

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


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

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



.box_2_1{
    top: 82.5%;
    left: 14%;
}
.box_2_2{
    top: 33%;
    left: 10%;
}
.box_2_3{
    top: 82.5%;
    left: 75%;
}
.box_2_4{
    top: 25.5%;
    left: 91%;
}
.box_2_5{
    top: 67%;
    left: 40%;
}



.boxOpen_2_1{
    top: 82.5%;
    left: 14%;
}
.boxOpen_2_2{
    top: 33%;
    left: 10%;
}
.boxOpen_2_3{
    top: 82.5%;
    left: 75%;
}
.boxOpen_2_4{
    top: 25.5%;
    left: 91%;
}
.boxOpen_2_5{
    top: 67%;
    left: 40%;
}







.piople_1{
    position: absolute;
    bottom: 134%;
    left: 361%;
    width: 100%;
    height: 80%;
    background-image: url(../images/piople_1.png);
    background-size: 170% 115%;
    background-repeat: no-repeat;
    background-position: 51% 100%;
}
.piople_1.ok{
    background-image: url(../images/piople_2.png);
}







.paper2 {
    position: absolute;
    width: 5%;
    height: 7.5%;
    background-image:url(../images/phone.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin-top: -4.2%;
    margin-left: 0.5%;
    opacity: 0;
}
.paper2.open{
    opacity: 0;
    animation-name: example;
    animation-duration: 2s;
}

.paper_2_1{
    top: 82%;
    left: 14%;
}
.paper_2_2{
    top: 32%;
    left: 10%;
}
.paper_2_3{
    background-image:url(../images/ipad.png);
    top: 63%;
    left: 39.5%;
    width: 5%;
    height: 11%;
}
.paper_2_4{
    background-image:url(../images/ipad.png);
    top: 78.5%;
    left: 74.5%;
    width: 5%;
    height: 11%;
}

@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;
}

.step_2_3 .men, .step_2_6 .men, .step_2_7 .men, .step_2_8 .men, .step_2_9 .men, .step_2_12 .men{
    transform: scaleX(-1);
}

.step_2_1{
    left: 25%;
    transition: left 1.5s linear;
}


.step_2_2{
    left: 70%;
    transition: left 2s linear;
}


.step_2_3{
    left: 15%;
    transition: left 2.5s linear;
}


.step_2_4_1{
    left: 66%;
    transition: left 2s linear;
}

.step_2_4{
    left: 75%;
    top: 14%;
    transition: all 0.5s linear;
}
.step_2_5{
    left: 86%;
    top: 14%;
    transition: left 0.5s linear;
}
.step_2_6{
    left: 77%;
    top: 14%;
    transition: left 0.5s linear;
}



.step_2_7{
    left: 68%;
    top: 5%;
    transition: all 0.25s linear;
}
.step_2_8{
    left: 60%;
    top: 14%;
    transition: all 0.25s linear;
}


.step_2_9{
    left: 10%;
    top: 14%;
    transition: left 2s linear;
}


.step_2_10{
    left: 60%;
    top: 14%;
    transition: left 2s linear;
}
.step_2_11{
    left: 67%;
    transition: all 0.5s linear;
}

.step_2_12{
    left: 40%;
    transition: left 1s linear;
}
.step_2_13{
    left: 90%;
    transition: left 1.5s linear;
}
.step_2_14{
    left: 100%;
    transition: left 0.5s linear;
}