.main-menu {
    display: table;
    background-color: #575859;
}
.main-menu A {
    text-decoration: none;
    }


.main-menu-item {
    display: inline-table;
    float: left;
    -outline: 1px solid green;
    -webkit-transition: background-color .4s ease;
-moz-transition: background-color .4s ease;
-ms-transition: background-color .4s ease;
-o-transition: background-color .4s ease;
transition: background-color .4s ease;
}
.main-menu-link {
    display: inline-table;
    -webkit-transition: padding .3s ease;
-moz-transition: padding .3s ease;
-ms-transition: padding .3s ease;
-o-transition: padding .3s ease;
transition: padding .3s ease;

}
.main-menu-link {
    padding: 9px 15px;
}

.main-menu-item.-active {
    background-color: #434445;
}
.main-menu-item:hover,
.main-menu-item.-has_sub .main-menu-link:hover {
    background-color: rgba(67,68,69,0.5);
}

.main-menu-text {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    -webkit-transition: font-size .3s ease;
-moz-transition: font-size .3s ease;
-ms-transition: font-size .3s ease;
-o-transition: font-size .3s ease;
transition: font-size .3s ease;
    white-space: nowrap;
}


.main-menu-sub .main-menu-item {
    display: block;
    float: none;
}
.main-menu-sub .main-menu-link {
    display: block;
}

@media (min-width: 811px) {
    .main-menu-item.-has_sub {
        position: relative;
        -outline: 2px solid red;
    }
    .main-menu-sub {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #575859;
        -webkit-transform-origin: top; -moz-transform-origin: top; -o-transform-origin: top; -ms-transform-origin: top; transform-origin: top;        -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -o-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0);        -webkit-transition: transform 400ms;
-moz-transition: transform 400ms;
-ms-transition: transform 400ms;
-o-transition: transform 400ms;
transition: transform 400ms;
    }

    .main-menu-item.-has_sub:hover .main-menu-sub {
        -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1);    }
}



@media (max-width: 1075px) and (min-width: 811px) {
    .main-menu-link.-top {
        padding-right: 8px;
        padding-left: 8px;
    }
    .main-menu-text {
        font-size: 13px;
    }
}

@media (max-width: 900px) and (min-width: 811px) {
    .main-menu-link.-top {
        padding-right: 5px;
        padding-left: 5px;
    }
    .main-menu-text {
        font-size: 12px;
    }
}



@media (max-width: 810px) {
        
    .main-menu {
        display: table;
        visibility: hidden;

        min-width: 170px;
        position: absolute;
        right: 0;
        top: 0;
        -webkit-transition: top .3s ease;
-moz-transition: top .3s ease;
-ms-transition: top .3s ease;
-o-transition: top .3s ease;
transition: top .3s ease;
    }
    .main-menu-item {
        display: block;
        float: none;
        text-align: right;

        position: relative; 
        
        overflow: hidden;
        -webkit-transition: height .3s ease, padding .3s ease;
-moz-transition: height .3s ease, padding .3s ease;
-ms-transition: height .3s ease, padding .3s ease;
-o-transition: height .3s ease, padding .3s ease;
transition: height .3s ease, padding .3s ease;
    }
            .main-menu-item.-has_sub .main-menu-link {
            display: block;
        }
        
    .main-menu-text {
        font-size: 14px;
    }

    .main-menu.-opened {
        top: 100%;
        visibility: visible;
    }
    
    .main-menu.-opened:before {
        content: '';
        display: block;
        position: absolute;
        top: 0; right: 0; height: 100%; width: 1000px;
        background-color: rgba(87,88,89,0.5);
    }

    .main-menu.-opened .main-menu-item {
        min-height: 20px;
        /*
            padding-top: 9px;
            padding-bottom: 10px;
        */
    }
    .main-menu-sub {
        display: block;
            }
}

@media
    (pointer:coarse) AND (max-width: 810px),
    (max-height: 500px) AND (max-width: 414px)
{
    .main-menu {
        width: 100%;
    }
    .main-menu-item {
        text-align: center;
    }
}

@media
    (pointer:coarse) AND (max-width: 414px),
    (max-height: 500px) AND (max-width: 414px)
{
    .main-menu.-opened {
        position: fixed;
        top: 40px;
        height: 100%;
    }
}