@media (max-width: 1150px) {

    .main-navigation {

        display:
            none;

    }


    .support-phone {

        display:
            none;

    }


    .mobile-menu-button {

        display:
            block;

    }


    .mobile-navigation {

        position:
            absolute;

        top:
            var(--header-height);

        left:
            0;

        right:
            0;

        display:
            flex;

        flex-direction:
            column;

        padding:
            14px 24px 24px;

        background:
            rgba(7,17,31,.98);

        border-bottom:
            1px solid
            var(--color-border);

        box-shadow:
            0 20px 40px
            rgba(0,0,0,.3);

        opacity:
            0;

        visibility:
            hidden;

        transform:
            translateY(-8px);

        transition:
            .2s;

    }


    .mobile-navigation-open {

        opacity:
            1;

        visibility:
            visible;

        transform:
            translateY(0);

    }


    .mobile-navigation > a {

        padding:
            13px 10px;

        color:
            var(--color-text);

        text-decoration:
            none;

        border-radius:
            8px;

    }


    .mobile-navigation > a:hover {

        background:
            rgba(255,255,255,.06);

    }


    .mobile-payment {

        margin-top:
            8px;

        background:
            var(--color-primary);

        text-align:
            center;

        font-weight:
            700;

    }


    .mobile-support {

        display:
            flex;

        flex-direction:
            column;

        padding:
            18px 10px 0;

        margin-top:
            10px;

        border-top:
            1px solid
            var(--color-border);

    }


    .mobile-support a {

        color:
            var(--color-text);

        text-decoration:
            none;

        font-weight:
            700;

    }


    .mobile-support span {

        color:
            var(--color-text-secondary);

        font-size:
            11px;

        margin-top:
            3px;

    }


    .footer-container {

        grid-template-columns:
            1fr 1fr;

    }

}


@media (max-width: 650px) {

    .header-container {

        width:
            calc(100% - 30px);

    }


    .header-right {

        margin-left:
            auto;

    }


    .payment-button {

        display:
            none;

    }


    .footer-container {

        grid-template-columns:
            1fr;

        padding:
            45px 0;

    }


    .footer-bottom-container {

        width:
            calc(100% - 30px);

        padding:
            15px 0;

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}