/**Top menu**/
#horizontal-multilevel-menu, #horizontal-multilevel-menu ul {
    margin:     0;
    padding:    0;
    background: #bc262c url(images/header_menu_bg.gif) repeat-x;
    min-height: 27px;
    width:      250px;
    list-style: none;
    font-size:  11px;
    float:      left;
    /*font-size:90%*/
}

#horizontal-multilevel-menu {

}

/*Links*/
#horizontal-multilevel-menu a {
    display:         block;
    padding:         5px 10px;
    /*padding:0.3em 0.8em;*/
    text-decoration: none;
    text-align:      center;
}

#horizontal-multilevel-menu li {
    float: left;
}

/*Root items*/
#horizontal-multilevel-menu li a.root-item {
    color:       #ffffff;
    font-weight: bold;
    padding:     7px 12px;
}

/*Root menu selected*/
#horizontal-multilevel-menu li a.root-item-selected {
    background:  #fc8d3d;
    color:       #ffffff;
    font-weight: bold;
    padding:     7px 12px;
}

/*Root items: hover*/
#horizontal-multilevel-menu li:hover a.root-item, #horizontal-multilevel-menu li.jshover a.root-item {
    background: #e26336;
    color:      #ffffff;
}

/*Item-parents*/
#horizontal-multilevel-menu a.parent {
    background: url(images/arrow.gif) center right no-repeat;
}

/*Denied items*/
#horizontal-multilevel-menu a.denied {
    background: url(images/lock.gif) center right no-repeat;
}

/*Child-items: hover*/
#horizontal-multilevel-menu li:hover, #horizontal-multilevel-menu li.jshover {
    background: #d6d6d6;
    color:      #ffffff;
}

/*Child-items selected*/
#horizontal-multilevel-menu li.item-selected {
    background: #d6d6d6;
    color:      #ffffff;
}

/*Sub-menu box*/
#horizontal-multilevel-menu li ul {
    position:   absolute;
    /*top:-999em;*/
    top:        auto;
    display:    none;
    z-index:    500;

    height:     auto;
    /*width:12em;*/
    width:      135px;
    background: #f5f5f5;
    border:     1px solid #c1c1c1;
}

/*Sub-menu item box*/
#horizontal-multilevel-menu li li {
    width:         100%;
    border-bottom: 1px solid #dedede;
}

/*Item link*/
#horizontal-multilevel-menu li ul a {
    text-align: left;
}

/*Items text color & size */
#horizontal-multilevel-menu li a,
#horizontal-multilevel-menu li:hover li a,
#horizontal-multilevel-menu li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li a {
    color:       #4f4f4f;
    font-weight: bold;
}

/*Items text color & size: hover*/
#horizontal-multilevel-menu li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover a,
#horizontal-multilevel-menu li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover a
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover a
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li.jshover a {
    color: #4f4f4f;
}

#horizontal-multilevel-menu li ul ul {
    margin: -27px 0 0 132px;
    /*margin:-1.93em 0 0 11.6em;*/
}

#horizontal-multilevel-menu li:hover ul ul,
#horizontal-multilevel-menu li.jshover ul ul,
#horizontal-multilevel-menu li:hover ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul,
#horizontal-multilevel-menu li:hover ul ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul ul,
#horizontal-multilevel-menu li:hover ul ul ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul ul ul {
    /*top:-999em;*/
    display: none;
}

#horizontal-multilevel-menu li:hover ul,
#horizontal-multilevel-menu li.jshover ul,
#horizontal-multilevel-menu li li:hover ul,
#horizontal-multilevel-menu li li.jshover ul,
#horizontal-multilevel-menu li li li:hover ul,
#horizontal-multilevel-menu li li li.jshover ul,
#horizontal-multilevel-menu li li li li:hover ul,
#horizontal-multilevel-menu li li li li.jshover ul,
#horizontal-multilevel-menu li li li li li:hover ul,
#horizontal-multilevel-menu li li li li li.jshover ul {
    /*z-index:1000;
    top:auto;*/
    display: block;
}

div.menu-clear-left {
    clear: left;
}

.site-nav-wrap {
    display:         flex;
    width:           100%;
    justify-content: center;
}

.site-header .site-nav:not(.site-nav-visible) span:first-child {
    /*padding-right: 10px;
    padding: 15px 30px 15px 20px;*/
}

.site-nav span.open a {
    color: #ffffff;
}

.site-nav:not(.site-nav-visible) span.open i.icon-right-arrow-submenu, .site-header .active a i.icon-right-arrow-submenu {
    background-image: url(/local/templates/capybara/components/bitrix/menu/vertical_multilevel/images/arrow-right-nav-white.svg);
}

header .site-nav div.subnav {
    position: absolute;
    z-index:  2;
    display:  none;
    /*margin-top: 9px;
    margin-left: -20px;*/
}

@media (max-width: 768px) {
    i.icon-right-arrow-submenu {
        display: none;
    }

    .site-nav:not(.site-nav-visible) i.icon-right-arrow-submenu {
        display: none;
    }

    .site-nav-wrap .site-nav .subnav {
        display: none !important;
    }

    .site-header .site-nav:not(.site-nav-visible) span:first-child {
        padding: 0;
    }

}

@media (min-width: 769px) {
    .site-header .site-nav span.open i.icon-right-arrow-submenu {
        margin-left: 15px;
        margin-top:  2px;
        transform:   rotate(90deg);
    }

    .site-nav span.open {
        background-color:    #3b9ccf;
        transition:          .5s ease;
        transition-property: background;
    }

    /*.site-nav.stickytop {
        padding-top: 0!important;
        margin-left: -67px;
        margin-top: -20px;
    }*/
    .site-nav.stickytop {
        position:    fixed;
        /*background-color: #3b9ccf; */
        background:  linear-gradient(to right, #ecf4fa 0%, #3b9ccf 30%, #3b9ccf);
        top:         0;
        z-index:     4;
        padding-top: 0 !important;
        width:       100%;
    }

    .site-nav.stickytop span:first-child {
        padding-right: 10px;
        padding:       25px 30px 25px 20px;
    }

    .site-nav.stickytop a {
        color: #ffffff;
    }

    header .site-nav.stickytop div.subnav {
        margin-top: 19px;
    }

    /*.site-nav.stickytop span {
        position: fixed;
        padding: 15px 30px 15px 20px;
        background-color: #3b9ccf;
        z-index: 4;
        transition: .5s ease;
        transition-property: background;
    }*/
    .site-nav.stickytop span:first-child a {
        color: #ffffff;
    }

    .site-nav.stickytop i.icon-right-arrow-submenu {
        background-image: url(/local/templates/capybara/components/bitrix/menu/vertical_multilevel/images/arrow-right-nav-white.svg);
    }

    .site-nav:not(.site-nav-visible) i.icon-right-arrow-submenu {
        background:      url(/local/templates/capybara/components/bitrix/menu/vertical_multilevel/images/arrow-right-nav-blue.svg) center no-repeat;
        background-size: 10px;
        top:             6px;
        right:           -16px;
        width:           10px;
        height:          10px;
        display:         block;
        /*position: absolute;*/
        transition:      transform .3s ease;
        margin-left:     15px;
        margin-top:      2px;
    }

    .site-header .site-nav span:first-child a {
        position:    relative;
        float:       left;
        display:     flex;
        align-items: center;
        padding:     15px 20px 15px 20px;
        border:      none;
    }

    .site-header a.firstItem {
        text-decoration: none !important;
    }

    .site-nav:hover i.icon-right-arrow-submenu {
        transform: rotate(90deg);
    }
}

@media (min-width: 769px) and (max-width: 1084px) {
    .site-nav.stickytop {
        float: none;
    }
}