.nav-menu {
	&,
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	li {
		padding: 4px 22px;
		position: relative;

		&:not( .menu-item-mega ):not( .mega-sub-menu ){
			> ul.sub-menu{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				opacity: 0;
				pointer-events: none;
				position: absolute;
				min-width: 140px;
				top: 100%;
				left: 0;
				transform: translateY( 5px );
				background-color: $color__light;
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.16);
				border-radius: $border__radius-main;
				z-index: 9;
				transition: .25s;

				> li {
					&:first-child {
						padding-top: 17px;
					}

					&:last-child {
						padding-bottom: 17px;
					}
				}

				ul {
					top: 0;
					left: 100%;
				}

				li {
					width: 100%;

					&:hover {
						> ul {
							top: 0;
							left: 100%;
						}
					}
				}
			}

			&:hover {
				> ul {
					opacity: 1;
					visibility: visible;
					pointer-events: initial;
					transform: none;
					z-index: 999;
				}
			}
		}
	}

	a {
		@include font-size(14);
		display: inline-block;
		text-decoration: none;
		position: relative;

		&:hover {
			text-decoration: none;
		}
	}
}

.motta-primary-menu-overlay {
	background-color: $color__dark;
    bottom: 0;
    display: block;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity .6s ease-in-out .1s,visibility 0s .5s;
    visibility: hidden;
    z-index: -1;

	&.motta-hover {
		opacity: .2;
		transition: opacity .5s;
		visibility: visible;
	}
}