.roadmap {
        background-image: url('/local/templates/main/assets/images/roadmap.png');
        background-repeat: no-repeat;
        background-position: top center;

}

.stepMobile {
    display: none;
}

.online.online_page {
    flex-direction: column;
}

.online__video-wrap {
    z-index: 10;
}

.steps {
    height: 250px;
    width: 100%;
    max-width: 500px;
    /* background-color: red; */
}

.texts {
    display: flex;
    align-items: end;
}

.text {
    margin: 20px 0;
    font-weight: 500;
    width: 100%;
    background: #fffffff2;
    border-radius: 8px;
    z-index: 10;
    padding: 10px;
    position: relative;
}

@media(max-width: 991.98px) {

    .roadmap {
        background-position: left top;
        background-size: cover;
    }
}

@media(min-width: 798px) and (max-width: 1199px) {
    .online__video-wrap.player3 {
        margin-bottom: 340px !important;
    }
}

@media(min-width:992px) and (max-width:1300px) {
    .online__video-wrap.player3 {
        min-width: 250px !important;
        min-height: calc(250px*1.8) !important;
        margin-bottom: 100px;
        /*margin-top: -150px;*/
    }

    .online.online_page {
        flex-direction: column;
    }

    .online__video-wrap.player4 {
        /*margin-top: 0 !important;*/
    }
}

@media(min-width: 768px) and (max-width: 992px) {
    .online__video-wrap.player4 {
        margin-top: 0 !important;
        /*margin-top: 160px !important;*/
    }

    .online__video-wrap.player3 {
        margin-top: 80px;
    }

    .text {
        padding: 20px;
        width: 80% !important;
        max-width: 80% !important;

    }
}

@media(min-width: 768px) {
    .text {
        width: 40%;
    }

    .text3 {
        width: 100%;
    }
}

@media(min-width:992px) {


    .text4 {
        left: 60px;
        position: relative;
        top: 20px;
    }

    .text3 {
        left: 20px;
        position: relative;
        top: 20px;
    }


    .online.online_page {
        margin-bottom: 160px;
    }

    .steps.steps0 {
        max-width: 50%;
        height: 370px;
    }

    .steps.steps1 {
        margin: 0 auto;
        max-width: 800px;

    }

    .steps.steps3 {
        height: unset;
        margin: 0 auto;
        max-width: unset;
        height: 300px;
    }

    .steps.steps2 {
        height: 470px;
    }

    .steps.steps4 {
        height: 460px;
    }

    .online__video-wrap.player1 {
        max-width: 800px;
        max-height: calc(800px/1.8);
        margin: 0 auto;
    }

    .online__video-wrap.player2 {
        max-width: 700px;
        max-height: calc(700px/1.8);
    }

    .online__video-wrap.player3 {
        margin-left: auto;
        width: 430px;
        height: 520px;
        margin-right: 80px;
    }

    .online__video-wrap.player4 {
        max-width: 560px;
        max-height: calc(560px/1.8);
        margin-left: 40px;
        margin-top: -160px;
    }
}



@media(max-width:767.98px) {

    .text {
        margin: 30px 0;
    }

    .stepMobile {
        min-height: 100px;
        display: block;
        /* background-color: red; */
    }


    .steps,
    .text1,
    .text3 {
        display: none;
    }

    .online__btn>img {
        width: 80px;
        height: 80px;
        top: -20px;
        position: relative;
        right: 20px;
    }
}