.main_menu when (@menu-main){
    position       : relative;
    z-index        : 11;
    font-family    : @font-family-menu;
    text-transform : uppercase;
    font-weight    : 700;
    font-size      : 14px;
    display        : table;
    width          : 100%;
    //& when not(@nav-bg = transparent){
    //    background : @nav-bg;
    //}
    & when not(@nav-color = @link-color){
        color : @nav-color;
    }

    & > li{
        //float        : left;
        display     : table-cell;
        //width       : 1000px;
        text-align  : center;
        white-space : nowrap;
        padding     : 0 10px;
        //margin-right : 20px;

        &: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;
            }

            [href*="products.html"] ~ ul, [href*="products.html"] ~ .sub-menu{
                display : block;
            }
        }
        // TODO Why we had this property for the tag 'a'?
        //& > a when (@responsive){
        //    float : left;
        //}

        &:hover{
            & > a{
                background : @nav-bg-li-hover;
            }
            & a:before, & a:after{
                visibility : visible;
            }
        }

        & > a{
            //overflow : hidden;
            position : relative;
            width    : 1000px;
            display  : table-cell;
            padding  : @padding-base-horizontal 0 (@padding-base-horizontal + 1);
            &:before, &:after{
                content      : "";
                border-width : 23px 10px;
                border-style : solid;
                display      : block;
                width        : 0;
                position     : absolute;
                top          : 0;
                visibility   : hidden;
            }
            &:before{
                border-color : transparent @nav-bg-li-hover @nav-bg-li-hover transparent;
                left         : -20px;
            }
            &:after{
                border-color : @nav-bg-li-hover transparent transparent @nav-bg-li-hover;
                right        : -20px;
            }
            &.current{
                background : @nav-bg-li-hover;
                &:before, &:after{
                    visibility : visible;
                }
            }
        }
    }

    a{
        display : block;
        padding : @padding-base-horizontal @padding-larger-horizontal (@padding-base-horizontal + 1);
        & 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;
            }
        }
    }

    .sub-menu{
        position    : absolute;
        left        : 0;
        right       : 0;
        top         : 100%;
        z-index     : 0;
        display     : none;
        padding     : 30px 20px;
        width       : 100%;
        white-space : normal;
        text-align  : left;
        background  : @nav-drop-down-list-bg;
        & when not(@nav-drop-down-list-color = @nav-color){
            color : @nav-drop-down-list-color;
        }

        &.open{
            display : block;
        }

        .box-shadow(0 2px 2px @gray-dark);
        .animation();

        //&:before{
        //    content         : "";
        //    height          : 250px;
        //    width           : 250px;
        //    background      : url("../images/submenu-icon-bg.png") no-repeat scroll 0 0 transparent;
        //    position        : absolute;
        //    background-size : cover;
        //    top             : 30px;
        //    left            : 30px;
        //}

        .page-teaser-image{
            background-size     : cover;
            background-position : center center;
            img{
                visibility : hidden;
            }
        }

        .img-space{
            position        : relative;
            background      : no-repeat scroll center center transparent;
            background-size : cover;
            & img{
                position : relative;
                z-index  : -1;
            }
            //&:after{
            //    content         : "";
            //    position        : absolute;
            //    top             : 0;
            //    left            : 0;
            //    right           : 0;
            //    bottom          : 0;
            //    z-index         : 1;
            //    background      : no-repeat scroll center center transparent;
            //    background-size : cover;
            //    //content : ".";
            //    //color   : @nav-drop-down-list-bg;
            //}
        }
        .categories-list{
            position : static;
            .inline-block-wrap;
            & > div{
                min-height     : 300px;
                vertical-align : top;
                width          : 32% !important;
                .grid-elements(4; @grid-margin-width; true);
                .grid-elements(1; 1; 1; 0; true);
                & + div{
                    border-left  : 1px solid darken(@gray-lighter, 5%);
                    padding-left : 10px;
                    position     : static;
                }
            }
        }
    }

    ul{
        //position   : absolute;
        //left       : 0;
        //top        : 100%;
        //z-index    : 0;
        //display    : none;
        //width      : 300px;
        //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);

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

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