@media only screen and (min-width : @responsive-size-tablet){
    #main-menu{
        &::before{
            content          : '';
            position         : absolute;
            top              : 0;
            bottom           : 0;
            width            : 100vw;
            left             : 50%;
            right            : 50%;
            margin-left      : -50vw;
            margin-right     : -50vw;

            background-color : @nav-bg;
        }
        &.fixed{
            position : fixed !important;
            z-index  : 110;
            top      : 0;
            left     : 0;
            right    : 0;
        }
    }

    .main_menu when (@menu-main){
        position       : relative;
        z-index        : 10;
        .inline-block();
        text-transform : uppercase;
        font-family    : @font-family-headings;
        font-weight    : 700;
        & when not(@nav-bg = transparent){
            background : @nav-bg;
        }
        & when not(@nav-color = @link-color){
            color : @nav-color;
        }

        & > li{
            float    : left;
            position : relative;

            &:hover{
                & when not(@nav-bg = @nav-bg-li-hover){
                    background : @nav-bg-li-hover;
                }
                & when not(@nav-color = @nav-color-li-hover){
                    color : @nav-color-li-hover;
                }

                ul{
                    display : block;
                }
                .sub-menu-btn-desktop{
                    .rotate(90deg);
                }
            }
            // TODO Why we had this property for the tag 'a'?
            //& > a when (@responsive), (@adaptive){
            //    float : left;
            //}
        }

        a{
            display         : block;
            padding         : 2em 1.25em;
            text-decoration : none;
            & when not(@nav-color = @link-color){
                color : inherit;
            }

            &.current{
                & when (@nav-bg-li-hover = @nav-bg-li-current){
                    &:extend(.main_menu > li:hover);
                }

                & when not(@nav-bg-li-hover = @nav-bg-li-current){
                    background : @nav-bg-li-current;
                }
                & when not(@nav-color-li-hover = @nav-color-li-current){
                    color : @nav-color-li-current;
                }
            }
        }

        ul{
            position       : absolute;
            left           : 0;
            top            : 100%;
            z-index        : 0;
            display        : none;
            width          : 300px;
            text-transform : none;
            background     : @nav-drop-down-list-bg;
            & when not(@nav-drop-down-list-color = @nav-color){
                color : @nav-drop-down-list-color;
            }
            .box-shadow(0 3px 5px @gray-dark);

            & when (@mobile-menu){
                &.open{
                    display : block;
                }
            }

            li{
                float : none;

                &:hover{
                    & when not(@nav-drop-down-list-bg-hover = @nav-bg-li-hover)
                   and not(@nav-drop-down-list-bg-hover = @nav-drop-down-list-bg) {
                        background : @nav-drop-down-list-bg-hover;
                    }
                    & when not(@nav-drop-down-list-color-hover = @nav-drop-down-list-color)
                   and not(@nav-drop-down-list-color-hover = @nav-color-li-hover) {
                        color : @nav-drop-down-list-color-hover;
                    }
                }

                a{
                    padding : 1em;
                    &.current{
                        & when (@nav-drop-down-list-color-hover = @nav-drop-down-list-color-current){
                            &:extend(.main_menu ul li:hover);
                        }

                        & when not(@nav-drop-down-list-bg-current = @nav-drop-down-list-bg)
                       and not(@nav-drop-down-list-bg-current = @nav-drop-down-list-bg-hover) {
                            background : @nav-drop-down-list-bg-current;
                        }
                        & when not(@nav-drop-down-list-color-current = @nav-drop-down-list-color)
                       and not(@nav-drop-down-list-color-current = @nav-drop-down-list-color-hover) {
                            color : @nav-drop-down-list-color-current;
                        }
                    }
                }
            }
        }
        .sub-menu-btn-desktop{
            position         : absolute;
            bottom           : 15px;
            left             : 0;
            right            : 0;
            margin           : auto;
            width            : 4px;
            height           : 4px;
            .border-radius(50%);
            background-color : #bdbdbd;
            box-shadow       : -7px 0 0 0 #bdbdbd, 7px 0 0 0 #bdbdbd;
        }
    }
}

.main_menu{
    footer &{
        text-transform : none;
        font-family    : @font-family-text;
        font-weight    : 600;
        & > li{
            float         : none;
            display       : block;
            margin-bottom : 1em;
            color         : #808080;

            &:hover{
                background : transparent;
                color      : @brand-primary;

                ul{
                    display : block;
                }
            }
        }

        a{
            .inline-block();
            padding : 0;

            &.current{
                background-color : transparent;
            }
        }
    }
}