/*//////////////////////////////////////////////////        320        ///////////////////////////////////////////////*/


@media screen and (min-width:320px) {
    .container {
        z-index: 1;
        width: 320px;
        margin: 0px auto;
        height: inherit;
        position: relative;
    }

    .row-1\@xs>* {width: 100%;}
    .row-1-2\@xs>* {width: 50%;}
    .row-1-3\@xs>* {width: 33.33%;}
    .row-1-4\@xs>* {width: 25%;}
    .row-1-5\@xs>* {width: 20%;}
    .row-1-6\@xs>* {width: 16.66%;}

    .col-1\@xs {width: 100%;}
    .col-1-2\@xs {width: 50%;}
    .col-1-3\@xs {width: 33.33%;}
    .col-1-4\@xs {width: 25%;}
    .col-1-5\@xs {width: 20%;}
    .col-1-6\@xs {width: 16.66%;}

    h1 {font-size: 68px;font-weight: 900;}
    h2 {font-size: 24px;}
    h3 {font-size: 16px;}
    h4 {font-size: 24px;}
    h5 {font-size: 16px;}

    .main_section h1 {
        margin-left: -3px;
        text-transform: uppercase;
    }

    .main_section .buttons {
        margin-top: 30px;
    }

    .main_section .bar {
        margin-top: 40px;
    }

    .main_section .bar a {
        color: #fff;
    }

    .secondTitle {
        color: #ffffff;
        font-weight: 300;
        font-size: 22px;
    }

    .imgWrapper.main {
        right: -250px;
    }

    .bottom_title p {
        font-size: 12px;
    }

    .section.top {
        height: fit-content;
    }

    .hidden_on_mob {
        display: none !important;
    }

    .c-pointer {
        cursor: pointer;
    }

    #popup .popupWrapper{
        height: inherit;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        flex-wrap: nowrap;
        position: relative;
        background-color: #07385C;
        padding: 9px 14px;
        align-items: center;
        font-size: 13px;
        font-weight: 600;
        background-color: #1581AF;
        line-height: 14px;
        color: #fff;
    }

    #popup.telegram img {
        margin: 20px;
        width: 40px;
        box-shadow: 0px 0px 7px #00000030;
        border-radius: 40px;
    }

    #popup.telegram img:hover {
        transform: scale(1.2);
    }

    .button {
        width: 320px;
    }

    .buttons {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        z-index: 50;
        max-width: 320px;
        position: relative;
    }

    .button.orange {
        margin: 0px 0px 10px;
        font-weight: 600;
        padding: 2px 60px 0px 60px;
    }

    .benefits .imgWrapper {
        height: 300px;
    }
    .benefits .listBlock {
        margin-top: 300px;
    }
    .tutorial .listBlock {
        margin-top: 300px;
    }
    .tutorial .imgWrapper {
        height: 300px;
    }
    .listBlock .liWrapper {
        margin: 0px 0px 10px 0px;
        line-height: 23px;
    }
    .remember {
        padding: 40px 0px 40px;
    }
    .remember .imgs img {
        width: 100%;
        z-index: 5;
    }
    .remember {
        background-color: #e68721;
        position: relative;
        height: 240px;
    }
    .opacityTitle {
        display: none;
    }
    .mirrors {
        padding-top: 80px;
    }
    .mirrors ul {
        height: 460px;
        width: 320px;
    }
    .mirrors li {
        margin: 0px 0px 4px 0px;
    }
    .listBlock {
        padding: 80px 0px 80px 0px;
    }
    .imgWave {
        top: auto;
    }
    .mobBgImg_wrapper {
        position: absolute;
        top: 90px;
        z-index: 0;
        right: -26px;
        height: 44%;
        opacity: 0.8;
        object-fit: cover;
    }
    .mobBgImg {
        height: 100%;
    }
    .main_title {
        margin-top: 120px;
    }

}

/*//////////////////////////////////////////////////        640        ///////////////////////////////////////////////*/

@media screen and (min-width:640px) {

    .container {width: 640px;}

    .row-1\@s>* {width: 100%;}
    .row-1-2\@s>* {width: 50%;}
    .row-1-3\@s>* {width: 33.33%;}
    .row-1-4\@s>* {width: 25%;}
    .row-1-5\@s>* {width: 20%;}
    .row-1-6\@s>* {width: 16.66%;}

    .col-1\@s {width: 100%;}
    .col-1-2\@s {width: 50%;}
    .col-1-3\@s {width: 33.33%;}
    .col-1-4\@s {width: 25%;}
    .col-1-5\@s {width: 20%;}
    .col-1-6\@s {width: 16.66%;}

    h1 {font-size: 37px;}
    h2 {font-size: 34px;z-index: 10;}
    h3 {font-size: 16px;}
    h4 {font-size: 24px;}
    h5 {font-size: 16px;}

    .main_section h1 {
        line-height: 58px;
    }
    .main_section h3 {
        line-height: 46px;
    }
    .benefits .imgWrapper {
        height: 300px;
    }
    .benefits .listBlock {
        margin-top: 300px;
    }
    .listBlock .liWrapper {
        margin: 0px 0px 16px 27px;
        line-height: 24px;
    }
    .tutorial .imgWrapper {
        height: 300px;
    }
    .remember {
        padding-top: 49px;
    }
    .remember .imgs img {
        width: 100%;
        margin-top: 0px;
    }
    .opacityTitle {
        display: none;
    }
    .mirrors ul {
        height: 460px;
        width: 320px;
    }
    .section.top {
        height: 250px;
    }
    .imgWave {
        top: 0px;
    }
    .mobBgImg {
        position: absolute;
        bottom: 0px !important;
        z-index: -2;
        right: 0px;
        height: 70%;
        opacity: 0.8;
        top: auto;
    }
    .hidden_on_mob {
        display: flex !important;
    }
    .hidden_on_desctop {
        display: none;
    }
    .imgWrapper.main {
        right: -90px;
    }
    .bar .nav {
        margin-left: 30px;
        cursor: pointer;
        text-transform: uppercase;
        font-weight: 600;
    }
    .bar .nav:hover {
        color: #e68722;
    }
    .main_title {
        margin-top: 0px;
    }

}

/*//////////////////////////////////////////////////        960        ///////////////////////////////////////////////*/

@media screen and (min-width:960px) {

    .container {width: 960px;}

    .row-1\@m>* {width: 100%;}
    .row-1-2\@m>* {width: 50%;}
    .row-1-3\@m>* {width: 33.33%;}
    .row-1-4\@m>* {width: 25%;}
    .row-1-5\@m>* {width: 20%;}
    .row-1-6\@m>* {width: 16.66%;}
    .row-1-7\@m>* {width: 14.28%;}

    .col-1\@m {width: 100%;}
    .col-1-2\@m {width: 50%;}
    .col-1-3\@m {width: 33.33%;}
    .col-1-4\@m {width: 25%;}
    .col-3-4\@m {width: 75%;}
    .col-1-5\@m {width: 20%;}
    .col-1-6\@m {width: 16.66%;}

    .col-2-3\@m {width: 66%;}

    h1 {font-size: 98px;}
    h2 {font-size: 34px;}
    h3 {font-size: 16px;}
    h4 {font-size: 24px;}
    h5 {font-size: 16px;}

    .main_section h1 {
        font-size: 117px;
        font-weight: 900;
        text-transform: uppercase;
        margin: 0px 0px 20px -7px;
    }
    .main_section h3 {
        font-weight: 100;
        text-transform: uppercase;
        font-size: 24px;
        letter-spacing: 3px;
    }
    .main_section .bar {
        margin-top: 0px;
    }
    .secondTitle {
        color: #adadad;
        font-weight: 300;
        font-size: 21px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .imgWrapper.main {
        right: 0px;
    }
    
    .hidden_on_mob {
        display: flex !IMPORTANT;
    }

    .hidden_on_desctop {
        display: none;
    }

    .list ul {
        padding-left: 22px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .buttons {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: flex-start;
    }
    .button a {
        text-decoration: none !important;
    }

    .button {
        width: max-content;
    }

    .button.orange {
        margin: 0px 20px 0px 0px;
        position: relative;
        padding-top: 3px;
        font-weight: 600;
    } 
    .benefits .imgWrapper {
        height: 100%;
    }
    .benefits .listBlock {
        margin-top: 0px;
    }
    .listBlock .liWrapper {
        margin: 0px 0px 16px 27px;
        line-height: 24px;
    }
    .tutorial .listBlock {
        margin-top: 0px;
    }
    .tutorial .imgWrapper {
        height: 100%;
    }
    .remember {
        padding: 60px 0px;
    }

    .remember .imgs img {
        width: 100%;
        margin-top: 70px;
        z-index: 10;
    }
    .remember {
        background-color: #e68721;
        position: relative;
        height: 180px;
        /* margin-bottom: 400px; */
    }

    .mirrors {
        /* background-color: #000001; */
        padding-top: 350px;
    }
    .mirrors ul {
        height: 460px;
        width: 100%;
    }
    .mirrors li {
        margin: 0px 0px 16px 27px;
    }
    .listBlock {
        padding: 80px 40px 80px 0px;
    }
    .section.top {
        height: 250px;
    }
    .imgWave {
        top: 0px;
    }
    .mobBgImg {
        position: absolute;
        top: 30px;
        z-index: -2;
        right: -40px;
        height: 50%;
        opacity: 0.8;
    }
    .imgWrapper.main {
        right: 0px;
    }
    
}

/*//////////////////////////////////////////////////        1280        ///////////////////////////////////////////////*/

@media screen and (min-width:1280px) {

    .container {
        width: 1280px;
    }
       
    .row-1\@l>* {width: 100%;}
    .row-1-2\@l>* {width: 50%;}
    .row-1-3\@l>* {width: 33.33%;}
    .row-1-4\@l>* {width: 25%;}
    .row-1-5\@l>* {width: 20%;}
    .row-1-6\@l>* {width: 16.66%;}
    .row-1-7\@l>* {width: 14.28%;}

    .col-1\@l {width: 100%;}
    .col-1-2\@l {width: 50%;}
    .col-1-3\@l {width: 33.33%;}
    .col-1-4\@l {width: 25%;}
    .col-1-5\@l {width: 20%;}
    .col-1-6\@l {width: 16.66%;}

    h1 {font-size: 42px;}
    h2 {font-size: 34px;}
    h3 {font-size: 20px;}
    h4 {font-size: 24px;}
    h5 {font-size: 16px;}

    .opacityTitle {
        transition: all 5s ease-in-out;
    }
    .opacityTitle.active {
        padding-right: 0px;
    }
    
    .opacityTitle {
        font-size: 129px;
        font-weight: 900;
        position: absolute;
        top: 230px;
        transform: translateX(50%);
        right: 50%;
        z-index: 0;
        opacity: 0.1;
        text-transform: uppercase;
        color: #818080;
    }

    .mirrors {
        padding-top: 430px;
    }
        
}