.animatedFrame{
    pointer-events: none;
    position: absolute;
    top: 2%; left: 2%;
    width: 96%;
    margin: auto;
    height: 96%;
    background-color: orange;
}

.stepFrame1{
    position: absolute;
    top: 0;
    left: -40%;
    width: 60%;
    height: 30%;
}

.popUp{
    position: relative;
    background-color: black;
}

.p1, .p2, .p3{
    left: 0%;
    top: 30%;
    width: 50%;
    height: 15%;
}

.p2{
    left:25%;    
    left: 0;    
}

.p4, .p5, .p6, .p7, .p8{
    height: 20%;
    width: 50%;
}
.p4{
    left: 40%;
}
.p41{
    position: absolute;
    left: 50%;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: #00c500;
}

.p5{
    left: 30%;
}
.p6{
    left: 20%;
}
.p7{
    left: 10%;
}
.p8{
    left: 0%;
}

.stepFrame2{
    position: absolute;
    width: 10%;
    height: 15%;
    top: -10%;
    top: 15%;
    right: 17%;
    background-color: black;
}

.stepFrame3, .stepFrame4{
    position: absolute;
    left: 15%;
    top: 35%;
    width: 80%;
    height: 30%;
}

.stepFrame4{
    top: 33%;
    width: 83%;
    height: 33%;
    background-color: orange;
}