@responsive-size-tablet-above : (@responsive-size-tablet + 1);
@media only screen and (min-width : @responsive-size-tablet-above){
    #main-menu {
        right: 100%;
        opacity: 0;
    }
}
.main_menu when (@menu-main){
    overflow: visible;
    position : relative;
    z-index  : 11;
    font-family: @font-family-headings;
    display: table;
    text-align: justify;
    width: 100%;
    font-size: 14px;
    & when not(@nav-bg = transparent){
        background : @nav-bg;
    }
    & when not(@nav-color = @link-color){
        color : @nav-color;
    }

    &>li{
        display: table-cell;
        position : relative;
        text-transform: uppercase;
        text-align: center;

        &: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;
            }
        }
        // TODO Why we had this property for the tag 'a'?
        //& > a when (@responsive), (@adaptive){
        //    float : left;
        //}
        
    }

    a{
        display         : block;
        padding         : @padding-base-vertical @padding-base-horizontal;
        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;
        right       : 0;
        top        : 100%;
        z-index    : 0;
        display    : none;
        width      : auto;
        min-width: 100%;
        .rgba(#000; 80);
        .border-radius(10px);
        white-space: nowrap;

        text-align: center;

        color : @nav-drop-down-list-color;


        & when (@mobile-menu){
            &.open:extend(.mobile-menu ul ul.open){ }
        }

        li{
            float : none;
            text-transform: none;

            &:hover{
                    color : @nav-drop-down-list-color-hover;

            }

            a{
                &.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;
                    }
                }
            }
        }
    }
}