.menu li {
	letter-spacing: normal;
}

.navigation {
	width: 100%;
	display: flex;
	justify-content: space-between;

	.logo {
		img {
			margin: 10px 30px;
			max-height: 70px; // TODO: fit height of ul (used to be 50px)
		}
	}

	ul {
		display: flex;
		justify-content: flex-end;
		list-style: none;
		font-weight: 300;

		@media screen and (max-width: 1140px) {
			display: none;
		}

		li {
			margin-left: 30px;
			display: inline-flex;
			align-self: center;

			a {
				padding: 30px 10px;
				text-decoration: none;
				color: @text-color;
			}

			&.active > a {
				font-weight: bold;
				color: @primary-color;
			}

			a.contactmenuitem {
				background-color: @primary-color;
				color: white;
				padding: 5px 20px;
				margin: 30px 40px 32px 0; // 25px 40px 25px 0
				border-radius: 20px;
			}

			&.parent ul,  {
				display: flex;
				opacity: 0;
				position: absolute;
				top: 100px;
				right: 0;
				padding: 10px;
				background-color: white;
				flex-wrap: wrap;
				pointer-events: none;
				transition: opacity 0.3s linear;
			}

			&.parent ul li ul {
				top: 50px;
				font-size: 0.8em;
			}

			&.parent:hover > ul,
			ul.nav-child:hover {
				opacity: 1;
				pointer-events: all;
			}

			ul.nav-child, ul.mod-menu__sub {
				justify-content: flex-start;
				box-shadow: 5px 10px 8px #888888;

				li {
					margin-left: 10px;
					flex-basis: 30%;

					a {
						padding: 10px 20px 10px 12px;
						font-size: 0.8em;
						font-weight: normal;
					}
				}
			}

			&.deeper::after {
				color: @primary-color;
				font-size: 2em;
				margin-top: 23px;
				margin-left: -5px;
				transform-origin: 8px 16px;
				transition: transform 0.3s linear;
			}

			&.deeper:hover::after {
				transform: rotate(-180deg);
			}

			&.deeper .deeper > a::before {
				color: @primary-color;
				transform-origin: 4px 12px;
				transition: transform 0.3s linear;
			}

			&.deeper .deeper > a:hover::before {
				transform: rotate(90deg);
			}

			&.parent li a::before {
				font-size: 1.8em;
				padding-right: 8px;
				vertical-align: -0.25em;
			}

			&.parent li.active a::before {
				color: @primary-color;
			}

			ul.nav-child li:not(:nth-child(3n)) {
				border-right: solid 1px @primary-color;
			}

			ul.nav-child ul.nav-child li:not(:nth-child(3n)) {
				border-right: solid 1px silver;
			}

			ul.nav-child.unstyled li:last-child:nth-child(1),
			ul.nav-child.unstyled li:last-child:nth-child(2) {
				border-right: none;
			}
		}
	}
}
