@media only screen and (min-width : (@responsive-size-tablet + 1)) {
	.main_menu when (@menu-main) {
		.inline-block-wrap();
		position     : relative;
		z-index      : 11;
		& when not(@nav-bg = transparent) {
			background : @nav-bg;
		}
		& when not(@nav-color = @link-color) {
			color : @nav-color;
		}

		& > li {
			position : relative;
			& > a {
				text-transform : uppercase;
			}

			&: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;
			text-decoration : none;
			padding         : 1.536rem;
			font-weight     : 600;
			font-size       : 1.142rem;
			& 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;
			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 !important;
				}
			}

			a {
				padding : 1rem 1.536rem;
			}

			li {
				text-align : left;
				float      : none;

				& + li {
					border-top : 1px solid #eee;
				}

				&:hover {
					background : @nav-drop-down-list-bg-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;
						}
					}
				}
			}
		}
	}
}