:root {
        --header-height: 120px;
        --sticky-header-height: 70px;
        --sticky-header-back: #e3e3e3;
        --main-menu-height: 50px;
        --topline-hor-margin: 100px;
        --footer-height: 230px;
    }

    body header {
        width: 100%;
        z-index: 9999;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
        /* background-color: #2e2d2d; */
        /* padding-bottom: 50px; */
        /* overflow-x: hidden; */
        position: absolute;
        z-index: 50;
    }

    body header nav.main {
        z-index: 30;
        width: 100%;
        height: var(--main-menu-height);
    }

    body header nav.main div.inside {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 0px;
        width: 100%;
        height: 100%;
        /* border-bottom: #9f9f9f solid 1px; */
        /* border-width:0px 0px 1px 0px; */
        background: linear-gradient(131deg, black, #00336f);
        transition: .7s margin ease;
        z-index: 31;
    }

    body header nav.main a {
        color: #fff;
        font-size: 20px;
        height: 50px;
        border: unset;
        padding: 0px 25px 0px;
        display: flex;
        align-items: center;
    }

    body header nav.main a:first-child {
        padding-left: var(--margin-sides);
    }

    body header nav.main a:hover,
    body header nav.main a.act {
        color: #fff;
        background-color: var(--add-link-color);
    }

    body header nav.main.fixed div.inside {
        position: fixed;
        top: 1px;
        left: -325px;
        display: flex;
        flex-direction: column;
        padding: 120px 80px 30px 30px;
    }

    body header.menu-act nav.main.fixed div.inside {
        left: 1px;
    }

    body header nav.main.fixed a {
        color: #aeaeaf;
        font-size: 18px;
        margin-bottom: 15px;
        border: unset;
    }

    body header .topnav {
        display: flex;
        width: 100%;
        z-index: 100;
        height: 120px;
        max-width: 100vw;
        background-color: #fff;
    }

    body header .topnav-inside {
        position: relative;
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        padding: 0 calc(var(--margin-sides) + 5px);
    }

    body header .left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }


    body header #menu-bars {
        /* display: flex; */
        display: none;
        flex-wrap: wrap;
        width: 30px;
        height: 20px;
        /* margin-right: 20px; */
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    body header #menu-bars .bars-line {
        height: 2px;
        width: 100%;
        background: #000000;
        position: absolute;
        transition: .3s all ease;
    }

    body header #menu-bars:hover .bars-line {
        background: var(--main-link-color);
    }

    body header #menu-bars .line1 {}

    body header #menu-bars .line2 {
        left: 0;
        top: calc(50% - 1px);
    }

    body header #menu-bars .line3 {
        bottom: 0px;
    }

    body header.menu-act #menu-bars .line1 {
        top: 9.5px;
        transform: rotate(45deg);
    }

    body header.menu-act #menu-bars .line2 {
        left: -100%;
    }

    body header.menu-act #menu-bars .line3 {
        bottom: 10.5px;
        transform: rotate(-45deg);
    }

    body header .topnav .logo {
        background-image: url(/assets/template/img/logo-transparent.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 400px;
        height: 90px;
        border: unset;
        /* position: absolute; */
        /* left: calc(50% - 114px); */
        color: #000;
        /* cursor: default; */
        text-align: center;
        line-height: 48px;
        font-size: 0px;
        margin-top: 15px;
        transition: unset;
    }

    body header .topnav .right {
        display: flex;
        align-items: center;
        /* background-color: #fff; */
        /* padding: 5px 15px; */
        border-radius: 15px 0 0 15px;
        /* display: none; */
    }

    body header .topnav .right #user_cart {
        display: flex;
        align-items: flex-start;
        margin-left: var(--topline-hor-margin);
    }

    body header .topnav .right #user_cart a {
        display: flex;
        width: 35px;
        height: 35px;
        position: relative;
    }

    body header .topnav .right #user_cart a svg {
        width: 100%;
        height: 100%;
        /* margin-top: 5px; */
    }

    body header .topnav .right #user_cart a svg path {
        stroke: #000000;
        transition: .3s all ease;
    }

    body header .topnav .right #user_cart a:hover svg path {
        stroke: var(--main-link-color);
    }

    body header .topnav .right #user_cart span {
        position: absolute;
        /* display: none; */
        right: -4px;
        bottom: -4px;
        background-color: var(--main-link-color);
        color: #fff !important;
        border-radius: 30px;
        width: 20px;
        height: 20px;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        line-height: 20px;
    }

    body header .topnav .right #user_cart a:hover span {}

    .phones {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .phones a {
        border-bottom: unset;
    }

    body header .topnav .right a {
        border: unset;
        width: 30px;
        height: 30px;
    }

    a.telegram,
    a.whatsup {
        margin-right: 15px;
        width: 25px;
        height: 30px;
        opacity: 1;
    }

    body.sticky_prep header .topnav .right a.whatsup .watsup_back {
        fill: var(--sticky-header-back) !important;
    }

    a.telegram:hover,
    a.whatsup:hover {
        opacity: 1;
    }

    body header .topnav .right a.phone,
    a.phone {
        width: unset;
        color: #000;
        font-size: 26px;
        height: unset;
    }

    a.phone:hover {
        color: var(--main-link-color);
    }

    body header .topnav .right a.email {
        margin-left: var(--topline-hor-margin);
    }

    body header .topnav .right a.email,
    a.email {
        /* background-image: url(/images/mail.png); */
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: unset;
        height: unset;
        font-size: 24px;
        color: #000;
        border-bottom: unset;
        text-transform: lowercase;
    }

    a.email svg {
        width: 25px;
        height: 25px;
        margin-right: 15px;
        opacity: .5;
    }

    a.email svg path {
        stroke: #008109;
    }

    body header .topnav .right a.email span {
        margin-top: -3px;
    }

    a.email:hover {
        color: var(--main-link-color);
    }

    body.sticky_prep {}

    body.sticky_prep header {
        position: fixed;
        top: calc(var(--sticky-header-height) * -1);
        transition: .5s top ease;
    }

    body.sticky_prep header .topnav {
        height: var(--sticky-header-height);
        background-color: var(--sticky-header-back);
    }

    body.sticky_prep header #menu-bars {
        display: flex;
        /* margin-top: -3px; */
    }

    body.sticky_prep header .topnav .logo {
        background-image: url(/assets/template/img/logo_icon.png);
        width: 50px;
        height: 50px;
        margin-top: unset;
        margin-left: 30px;
    }

    body.sticky_prep header nav.main {
        /* display:none; */
        opacity: 0;
        margin-top: calc(var(--main-menu-height) * -1);
    }

    body.sticky header nav.main {
        transition: .5s opacity ease, .5s margin ease;
    }

    body.sticky header.menu-act nav.main {
        /* display:none; */
        opacity: 1;
        margin-top: 0;
    }

    body.sticky header {
        position: fixed;
        top: 0;
    }





    /***************************************************************************************************
****************************************************************************************************/

    @media (min-width: 1601px) and (max-width: 1900px) {}

    /***************************************************************************************************
****************************************************************************************************/

    @media (min-width: 1263px) and (max-width: 1600px) {
        :root {
            --topline-hor-margin: 60px;
        }

    }

    /***************************************************************************************************
****************************************************************************************************/

    @media (max-width: 1262px) {
        :root {
            --topline-hor-margin: 40px;
        }

        body:not(.main) header .topnav {
            /* background-color:#eee; */
        }

        body:not(.main) header .topnav .topnav-inside {}

        body header .topnav .right {
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            margin-right: calc(var(--margin-sides) + 50px);
        }

        body header .topnav .right .phones,
        body header .topnav .right a.email {
            margin-left: unset;
            width: 100%;
            justify-content: flex-end;
        }

        body.sticky_prep header .topnav .right .phones,
        body.sticky_prep header .topnav .right a.email {
            margin-left: var(--topline-hor-margin);
            width: unset;
        }

        body header .topnav .right a.phone,
        body header .topnav .right a.email {
            font-size: 20px;
        }

        body:not(.sticky_prep) header .topnav .right a.phone,
        body:not(.sticky_prep) header .topnav .right a.email {
            margin-top: 5px;
            margin-bottom: 5px;
        }

        body header .topnav .right #user_cart {
            position: absolute;
            right: var(--margin-sides);
        }

        body header nav.main a {
            padding: 0 15px 0;
            font-size: 18px;
        }

        body header nav.main a:first-child {
            padding-left: var(--margin-sides);
        }

        footer div.right a,
        footer a.copyright {
            /* font-size: 0.9rem; */
        }

        footer div.right a {
            /* margin-left: 30px; */
        }

        footer a.copyright {
            margin-left: 30px;
            margin-right: 30px;
        }
    }

    /***************************************************************************************************
****************************************************************************************************/

    @media (max-width: 991px) {
        :root {
            --main-menu-height: 0px;
        }

        body .header {}

        body:not(.main) header .topnav {
            background-color: #eee;
            height: 60px;
        }

        body header #menu-bars {
            display: flex;
        }

        body header .topnav .logo {
            width: 300px;
            margin-top: 39px;
            margin-left: 40px !important;
        }

        body header nav.main {
            height: unset;
            /* padding: 10px 0; */
            position: absolute;
            top: var(--header-height);
        }

        body.sticky_prep header nav.main {
            top: var(--sticky-header-height);
        }

        body header nav.main div.inside {
            flex-direction: column;
            padding: 10px 0;
            margin-top: -100%;
        }

        @media (max-width: 991px) {
            body header nav.main div.inside {
                margin-top: -620px;
            }
        }

        body header.menu-act nav.main div.inside {
            flex-direction: column;
            padding: 10px 0;
            margin-top: 0%;
        }

        body header nav.main div.inside a {

            /* padding-left: 10px; */
        }

        body header nav.main div.inside a:hover {
            background-color: transparent;

        }

        footer div.info {
            /* display: flex; */
            /* flex-direction:column; */
            /* align-items: flex-end; */
        }

        footer div.right {
            margin-bottom: 5px;
            margin-right: 30px;
        }

        footer div.right a,
        footer a.copyright {
            /* font-size: 0.9rem; */
        }

        footer div.right a {
            /* margin-left: 30px; */
        }

        footer a.copyright {
            margin-top: 5px;
        }
    }

    /***************************************************************************************************
****************************************************************************************************/

    @media (max-width: 768px) {
        :root {
            --topline-hor-margin: 30px;
            --main-menu-height: 0px;
        }

        body header {
            /* height: 80px; */
            /* padding-bottom: 10px; */
        }

        body header .topnav {
            /* position: fixed; */
            /* background-color: #1e1d20a1; */
        }

        footer div.inside {
            padding-right: 20px;
            padding-left: 20px;
        }

        body header #menu-bars {
            margin-top: -8px;
        }

        body.sticky_prep header #menu-bars {
            margin-top: -2px;
        }

        body header .topnav .logo {
            width: 250px;
            margin-top: 39px;
        }

        body:not(.sticky_prep) header .topnav .right a {
            transition: unset;
        }

        body:not(.sticky_prep) header .topnav .right a.phone {
            display: none;
        }

        body header .topnav .right a.phone,
        body header .topnav .right a.email {
            font-size: 18px;
        }

        body:not(.sticky_prep) header .topnav .right .phones,
        body:not(.sticky_prep) header .topnav .right a.email {
            width: unset;
        }

        body:not(.sticky_prep) header .topnav .right a.email span {
            display: none;
        }

        body.sticky_prep header .topnav svg:not(.svg_cart) {
            width: 22px !important;
        }

        body.sticky_prep header .topnav .right a.telegram,
        body.sticky_prep header .topnav .right a.whatsup {
            margin-right: 10px;
        }

        footer div.info h3 {
            text-align: center;
        }

        footer div.info .contacs,
        footer div.info nav {
            width: 100%;
            padding-right: 0px;
        }

        footer div.info .contacs > *,
        footer div.info nav a {
            text-align: center;
        }

        footer div.info .contacs a,
        footer div.info nav a {
            justify-content: center;
        }

        footer div.info .contacs .right {
            justify-content: center;
        }

        footer div.info .contacs a.phone {
            display: flex;
        }

        footer div.info {
            flex-direction: column;
        }

        footer div.info .contacs > *:last-child {
            margin-bottom: 40px;
        }
    }

    /***************************************************************************************************
****************************************************************************************************/

    @media (max-width: 610px) {

        body header .topnav-inside {
            /* padding: 0 20px; */
            height: auto;
        }

        body header #menu-bars {}

        body header #menu-bars .bars-line {}

        body header .topnav .logo {
            position: unset;
            width: 150px;
            margin-top: 12px;
            height: auto;
            text-align: center;
        }

        body header .topnav .right {
            margin-right: 40px;
        }

        body header .topnav .right a {
            /* margin-left: 20px; */
            width: 25px;
        }

        body header .topnav .right a.email {
            display: none;
        }

        footer {
            height: unset;
        }

        footer div.inside {
            /* flex-direction: column-reverse; */
        }

        footer div.socnet {
            height: 40px;
            width: 100%;
            /* align-items: center; */
            /* justify-content: center; */
        }

        footer div.socnet a {
            /* width: 25%; */
            /* font-size: 1.0rem; */
        }

        footer div.info {
            /* width: 100%; */
            /* align-items: center; */
            /* padding: 30px 0; */
        }
    }

    /***************************************************************************************************
****************************************************************************************************/

    @media (max-width: 480px) {

        body header nav.main {
            /* top:0; */
            /* right:0; */
            /* left:0; */
            /* bottom:0; */
        }


        body header #menu-bars {
            width: 25px;
        }

        body header.menu-act #menu-bars .line1 {
            top: 9px;
        }

        body header.menu-act #menu-bars .line3 {
            bottom: 9px;
        }

        body header nav.main div.inside {
            /* width: 200px; */
            /* left: -201px; */
            /* background-color: #000000a6; */
            /* border-width: 0 1px 1px 0; */
            /* padding-top: 100px; */
            /* padding-bottom: 20px; */
            /* min-width: 200px; */
        }

        body header.menu-act nav.main div.inside {
            /* left: 0px; */
            /* overflow-y: scroll; */
            /* padding-top: 100px; */
            /* padding-right: 20px; */
        }

        body header nav.main a {
            margin-bottom: 10px;
            /* padding-left: unset !important; */
            /* padding-right: unset !important; */
        }

        body header .topnav .logo {
            /* width: 220px; */
            /* background-size:100% auto; */
            /* background-position:50%; */
        }

        body:not(.sticky_prep) header .topnav .right .phones {
            display: none;
        }

        body.sticky_prep header .topnav .right a.telegram,
        body.sticky_prep header .topnav .right a.whatsup {
            margin-right: 0px;
        }

        body.sticky_prep header .topnav .right a.phone {
            display: none;
            /* font-size: 10px; */
        }

        body header .topnav .right #user_cart a {
            width: 30px;
            height: 30px;
            margin-left: unset;
            margin-right: -3px;
        }

        body header .topnav .right #user_cart span {
            right: -2px;
            width: 18px;
            height: 18px;
            font-size: 12px;
            line-height: 18px;
        }

        body header .topnav .right {
            /* display:none; */
        }

        body header .topnav .right a {
            width: 20px;
            margin-left: 15px;
        }

        footer div.inside {
            /* margin-top: 150px; */
            /* margin-bottom: 150px; */
        }
    }