@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather&family=Roboto&display=swap');
@font-face {
    font-family: 'Montserrat';
    src: local('Montserrat Hairline'), local('Montserrat-Hairline'), url('../fonts/montserrathairline.woff2') format('woff2'), url('../fonts/montserrathairline.woff') format('woff'), url('../fonts/montserrathairline.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: local('Montserrat Light'), local('Montserrat-Light'), url('../fonts/montserratlight.woff2') format('woff2'), url('../fonts/montserratlight.woff') format('woff'), url('../fonts/montserratlight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: local('Montserrat'), local('Montserrat-Regular'), url('../fonts/montserrat.woff2') format('woff2'), url('../fonts/montserrat.woff') format('woff'), url('../fonts/montserrat.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: local('Montserrat Bold'), local('Montserrat-Bold'), url('../fonts/montserratbold.woff2') format('woff2'), url('../fonts/montserratbold.woff') format('woff'), url('../fonts/montserratbold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: local('Montserrat Black'), local('Montserrat-Black'), url('../fonts/montserratblack.woff2') format('woff2'), url('../fonts/montserratblack.woff') format('woff'), url('../fonts/montserratblack.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

/*@font-face {*/
/*    font-family: 'Merriweather';*/
/*    src: local('Merriweather-Bold'), url('../fonts/Merriweather-Bold.ttf') format('truetype');*/
/*    font-weight: 700;*/
/*    font-style: normal;*/
/*}*/

html, body {
    /*background-color: #d8d8d8;*/
    color: #ffffff;
    /*font-family: 'PT Sans', sans-narrow;*/
    /*font-family: "Montserrat",Arial,sans-serif;*/
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    line-height: 1.2;
    margin: 0;
    overflow-x: hidden;
}
@media screen and (max-width: 505px) {
    /*body {*/
    /*    width: 96%;*/
    /*}*/
}

header{
    width: 100%;
    background: #ffffff;;
    height: 70px;
    margin-bottom: 20px;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.23);
    /*position: fixed;*/
    overflow: visible;
    z-index: 3;
}
header a{
    text-decoration: none;
    color: #676763;
    font-weight: bold;
}

.header-wrapper{
    width: 1220px;
    margin: 0 auto;
    padding-right: 85px;
}

.menu {
    margin: 0; /* Обнуляем значение отступов */
    display: -webkit-flex;
    display: flex;
    justify-content: flex-end;
    padding: 0 10px;
}

.menu li{
    display: inline; /* Отображать как строчный элемент */
}

.category-name {
    padding: 0 10px 0 10px;
    font-size: 14px;
    line-height: 70px;
    font-weight: 700;
    text-transform: uppercase;
    transition: .2s;
    position: relative;
}
.category-name:hover a{
    /*background: #0d52a0;*/
    color: #F15145;
}
/*.category-name:hover a{*/
/*    color: white;*/
/*}*/
.category-name.active a{
    /*background-color: #0d52a0;*/
    color: #F15145;
}
/*.category-name.active a{*/
/*    color: white;*/
/*}*/
.category-name.active {
    border-bottom: #F15145;
    max-height: 70px;
}
.category-name a {
    display: block;
}
.category-name:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    right: 0;
    margin-top: -1px;
    z-index: 1;
    height: 2px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s,visibility .3s;
    background-color: #F15145;
}
.category-name.active:before {
    opacity: 1;
    visibility: visible;
}

.logo{
    display: flex;
    float: left;
    padding: 0 70px 0 10px;
    font-size: 25px;
    line-height: 70px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: .2s;
}
.logo img{
    max-height: 50px;
    margin: auto;
}
.logo a{
    margin: auto;
    color: black;
}
.logo:hover a{
    color: #0d52a0;
}

@media screen and (max-width: 1219px){
    .header-wrapper {
        width: 984px;
        padding-right: 65px;
    }
}

@media (min-width: 1000px) and (max-width: 1219px) {
    .category-name {
        padding: 0 7px 0 7px;
        font-size: 13px;
    }
}

@media screen and (max-width: 1000px){
    .header-wrapper {
        width: 728px;
    }

    /***************************************************/
    input {display: none;}
    label {cursor: pointer;}

    .nav {user-select: none;}

    .nav__showmenu {
        position: relative;
        float: right;
        z-index: 3;
        display: inline-block;
        margin-left: -10px;
        padding: 5px 10px 10px;
        top: 15px;
        font-size: 23px;
        color: black;
    }

    /*.nav__back {*/
    /*    position: fixed;*/
    /*    top: 0;*/
    /*    right: 0;*/
    /*    bottom: 0;*/
    /*    left: 0;*/
    /*    transition: background-color .3s;*/
    /*}*/

    .menu__submenu{
        list-style: none;
        padding: 0;
        color: #fcfcfc;
        overflow: hidden;
    }

    .ham_menu {
        display: -webkit-flex;
        display: flex;
        flex-wrap: wrap;
        position: absolute;
        align-items: center;
        justify-content: center;
        /*top: -15px;*/
        /*bottom: 0;*/
        /*right: 116px;*/
        width: 716px;
        height: 70px;
        margin: 0;
        /*padding: 17px 0;*/
        text-transform: uppercase;
        line-height: 2em;
        background-color: white;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateY(-200%);
        transition: transform .3s;
        will-change: transform;
        backface-visibility: hidden;
        z-index: 2;
    }
    .ham_menu li{
        display: inline;
        text-overflow: clip;
        overflow: hidden;
    }
    .menu__item {
        display: block;
        width: 150px;
        text-decoration: none;
        color: #fff;
        margin-left: 10px;
    }
    .menu__item a{
        color: #676763;
    }
    .menu__item.active a{
        color: #0d52a0;
    }
    .menu__submenu .menu__item {color: #000;}

    .nav__check:checked~.nav__back {
        background-color: rgba(0,0,0,.2);
        bottom: 0;
    }

    .menu__item:hover,.nav__showmenu:hover,.menu__showsub:hover {opacity: 0.7;}
    .ham_menu::-webkit-scrollbar {display: none;}
    .nav__check:checked+.nav__showmenu {color:black;}
    .menu__check:checked~.menu__submenu {max-height: 100vh;}
    .menu__check:checked+.menu__showsub {transform: rotate(180deg);}
    .nav__check:checked~.ham_menu {transform: translateY(0);}
}

@media screen and (max-width: 727px){
    header{
        height: 40px;
    }
    .logo{
        line-height: 40px;
    }
    .nav__showmenu{
        top:0;
    }
    .header-wrapper {
        width: 100%;
        max-width: 480px;
        padding-right: 30px;
    }

    .ham_menu {
        /*width: 71%;*/
        width: 76%;
        height: 135px;
        padding-top: 0;
        padding-left: 100px;
        padding-right: 200px;
        left: 0;
        box-shadow: 0 6px 6px rgba(0, 0, 0, 0.5);
    }
    .menu__item {
        width: 160px;
    }
}

@media screen and (max-width: 480px){

    .ham_menu {
        padding-left: 60px;
        height: 273px;
    }
    .nav__showmenu {
        padding: 5px 25px 10px;
    }
}