.top-menu .menu-button {
    box-sizing: border-box;
    display: none;
    position: absolute;
    left: 15px;
    top: 15px;
    width: 50px;
    min-height: 50px;
    padding: 10px 15px;
    background: #bd0a1d;
    color: #fff;
    font-size: 17px;
    -webkit-border-radius: 250px;
    -moz-border-radius: 250px;
    border-radius: 250px;
    margin-left: 10px;
    margin-top: 10px;
}
.top-menu ul{
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    -webkit-justify-content: inherit;
    -moz-justify-content: inherit;
    justify-content: inherit;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    align-items: flex-start;
}
.top-menu ul li{
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 0 1 auto;
    -moz-flex: 0 1 auto;
    flex: 0 1 auto;
    box-sizing: border-box;
    position: relative;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    flex-grow: 0;
    width: auto;
}
.top-menu ul li a{
    padding: 10px 0;
    margin: 0 0 0 20px;
    border: none;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    box-sizing: border-box;
    text-decoration: none;
    color: #fff;
    font-size: 19px;
    line-height: 1.1;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    width: auto;
    position: relative;
    font-family: Roboto Condensed, sans-serif;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    text-align: center;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    flex-grow: 1;
    left: 0;
    right: 0;
    font-weight: normal;
    align-self: auto;
    min-height: 60px;
    -webkit-box-shadow: 0 0 0 transparent;
    -moz-box-shadow: 0 0 0 transparent;
    box-shadow: 0 0 0 transparent;
    -webkit-border-radius: none;
    -moz-border-radius: none;
    border-radius: none;
}
.top-menu ul li a:hover{
    color: #bd0a1d;
    -webkit-box-shadow: inset 0px -2px 0px #bd0a1d;
    -moz-box-shadow: inset 0px -2px 0px #bd0a1d;
    box-shadow: inset 0px -2px 0px #bd0a1d;
}
@media (max-width: 960px){
    body.noscroll{
        overflow: hidden;
    }
    .main-menu.active{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
    }
    .main-menu .top-menu{
        box-sizing: border-box;
        position: fixed;
        bottom: 0;
        left: 0;
        top: 5px;
        bottom: 0;
        width: 265px;
        background: #fff;
        /*-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px;
        -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px;
        box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px;*/
        transform: translateX(-100%);
        transition: transform .4s ease;
        z-index: 9;
        height: 100%;
        padding-top: 15px;
    }
    .main-menu.active .top-menu{
        transform: translateX(0%);
    }
    .main-menu .top-menu .menu-button{
        left: 100%;
        border: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        -webkit-text-shadow: none;
        -moz-text-shadow: none;
        text-shadow: none;
        -webkit-border-radius: 250px;
        -moz-border-radius: 250px;
        border-radius: 250px;
        width: 50px;
        min-height: 50px;
        margin-left: 10px;
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap:3px;
        z-index: 1001;
    }
    @media (max-width: 480px){
        .main-menu .top-menu {
            top: 45px;
        }
    }
    @media (max-width: 420px){
        .main-menu .top-menu {
            top: 80px;
        }
    }
    .main-menu.active .top-menu .menu-button{
        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIiB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjE2IiBpZD0ic3ZnMiIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMTYiPjxkZWZzIGlkPSJkZWZzNCI+PC9kZWZzPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTEwMzYuMzYyMikiIGZpbGwtb3BhY2l0eT0iMSIgdHlwZT0ic29saWRDb2xvciIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0ibSAyLDEwNTAuMzYyMiAxMiwtMTIiIGlkPSJwYXRoMjk4NSIgc3R5bGU9InN0cm9rZS1saW5lY2FwOiBidXR0OyBzdHJva2UtbGluZWpvaW46IG1pdGVyOyBzdHJva2UtbWl0ZXJsaW1pdDogNDsgc3Ryb2tlLWRhc2hhcnJheTogbm9uZTsiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjEiIHN0cm9rZS13aWR0aD0iMiIgdHlwZT0ic29saWRDb2xvciIgZGF0YS1jaGFuZ2VkPSJ0cnVlIj48L3BhdGg+PHBhdGggZD0ibSAyLDEwMzguMzYyMiAxMiwxMiIgaWQ9InBhdGgyOTg1LTEiIHN0eWxlPSJzdHJva2UtbGluZWNhcDogYnV0dDsgc3Ryb2tlLWxpbmVqb2luOiBtaXRlcjsgc3Ryb2tlLW1pdGVybGltaXQ6IDQ7IHN0cm9rZS1kYXNoYXJyYXk6IG5vbmU7IiBmaWxsPSIjZmZmZmZmIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIxIiBzdHJva2Utd2lkdGg9IjIiIGZpbGwtb3BhY2l0eT0iMCIgdHlwZT0ic29saWRDb2xvciIgZGF0YS1jaGFuZ2VkPSJ0cnVlIj48L3BhdGg+PC9nPjwvc3ZnPg==) left 50% top 50% / auto auto no-repeat #bd0a1d;
    }
    .main-menu .top-menu .menu-button .menu-button-icon-line{
        box-sizing: border-box;
        display: block;
        min-height: 2px;
        border: none;
        width: 20px;
        margin-left: auto;
        margin-right: auto;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        -webkit-text-shadow: none;
        -moz-text-shadow: none;
        text-shadow: none;
        background: #fff;
        -webkit-border-radius: none;
        -moz-border-radius: none;
        border-radius: none;
    }
    .main-menu.active .top-menu .menu-button .menu-button-icon-line{
        display: none;
    }
    .main-menu .top-menu .menu{
        overflow-y: scroll;
        height: 100%;
    }
    .main-menu .top-menu ul{
        flex-direction: column;
    }
    .main-menu .top-menu .menu > ul{
        left: 0;
        position: relative;
        top: 0;
    }
    .main-menu .top-menu .menu > ul > li {
        position: static;
        display: block;
        width: 100%;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .main-menu .top-menu .menu > ul > li.menu-item{
        order: 1;
    }
    .main-menu .top-menu .menu > ul > li a{
        display: block;
        text-align: left;
        min-height: auto;
        padding: 20px;
        margin: 0;
        line-height: 1;
        color: #000;
    }
    .main-menu .top-menu .menu > ul > li > .arrow{
        /*position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -15px;*/
        display: block;
        flex: 0 0 30px;
        border-radius: 2px;
        width: 30px;
        height: 30px;
        background: #e4e4e4 url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20baseProfile%3D%22full%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Aev%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2Fxml-events%22%20xml%3Aspace%3D%22preserve%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%226px%22%20height%3D%229px%22%20%20viewBox%3D%220%200%206%209%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22geometricPrecision%22%3E%3Cpath%20fill%3D%22%23333%22%20transform%3D%22translate%28-730%20-788%29%22%20d%3D%22M734.1%20792.27l-3.2%203.19a.5.5%200%200%200%20.71.7l3.55-3.55c.1-.09.14-.21.14-.34a.49.49%200%200%200-.14-.35l-3.55-3.55a.5.5%200%200%200-.7.7z%22%2F%3E%3C%2Fsvg%3E) 50% 50% no-repeat;
    }
    .main-menu .top-menu .menu > ul > li > ul{
        display: none;
        position: absolute;
        left: 100%;
        top: 0;
    }
    .main-menu .top-menu .menu > ul > li > ul li.back{
        background-color: #f5f5f5;
        color: #333;
        font-weight: 700;
        font-size: 13px;
        padding: 16px 20px 17px;
    }
    .main-menu .top-menu .menu > ul.left-hidden{
        left: -100%;
    }
    .main-menu .top-menu .menu > ul > li > ul{
        transform: translateX(100%);
        transition: transform .4s ease;
        z-index: 9;
        height: 100vh;
    }
    .main-menu .top-menu .menu > ul.left-hidden{
        height: 100vh;
    }
    .main-menu .top-menu .menu > ul.left-hidden > li{
        height: 0;
    }
    .main-menu .top-menu .menu > ul.left-hidden > li.visible > ul{
        transform: translateX(0%);
        display: block;
    }
    .main-menu .top-menu .menu > ul > li > ul ul{
        display: none;
    }
}