@media screen and (min-width: 768px) {
	.nav-mobile {
		display: none !important;
	}
}

.navbar-alv {
	border-bottom: none;
}

.navbar-alv > .container {
	display: block;
	padding: 0;
}

header {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;

	position: relative;

	> .alv-header {
		position: static;
	}

	.mod-logo {

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

		@media screen and (min-width: 768px) {
			order: 0;
			position: absolute;
			top: 1px;
			left: ($grid-gutter-width / 2);
			z-index: $logo-zIndex+10;

			height: $logo-height;
			width: $logo-width;

			font-weight: 300;

			background: $white;
			color: $black;
			display: inline-block;

			@include alv-border-radius($alv-box-radius);

			padding: 0 $alv-box-padding;

			box-shadow: $whiteframe-shadow-1dp;

			h2 {
				display: none;
			}

			img {
				height: 100%;
				width: 100%;
			}
		}
	}

	.mod-searchfield {
		order: 1;

		/* comment */
		padding-top: $navbar-padding-y;
		padding-bottom: $navbar-padding-y;

		padding-right: 1em !important;
		padding-left: 1em !important;
		margin-right: .5rem;
		margin-left: .5rem;

		form {
			margin: 0.4em 0;

			.search-field {
				position: relative;
				width: 150px;
				height: 1.75em;
				transition: width 0.4s;
				&:focus {
					padding-right: 30px;
					width: 250px;
				}
			}
		}
	}

	.clearfix {
		margin-left: .5rem;

		order: 9;
	}
}

.nav-main {
	@include make-container();
	@include make-container-max-widths();
}

.mod-mainnavigation {

	@media screen and (min-width: 768px) {
		&> .nav-main.navbar > .navbar-nav > li:last-of-type > a {
			/*background: $main-accent-color;
			color: $white !important;

			&:hover {
				background: $main-accent-color-hover;
			}*/
		}
	}

	@media screen and (max-width: 767px) {
		flex-grow: 2;
	}

	@media screen and (min-width: 768px) {
		order: 2;

		li:first-child {
			.dropdown-toggle:before {
				font: normal normal normal 14px/1 FontAwesome;
				font-size: inherit;
				text-rendering: auto;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;

				content: '\F0C9';

				margin-right: .25em;
			}
		}

		.dropdown-toggle:after {
			display: none;
		}

		.nav-link {
			&.icon {
				text-decoration: none;
			}
		}
	}
}

.nav-main {
	height: 100%;

	&.navbar {
		border-bottom: none;
		padding: 0;
	}

	& > .navbar-nav {
		margin-left: auto !important;

		flex-direction: row;
		height: 100%;

		> li {
			padding-top: $navbar-padding-y;
			padding-bottom: $navbar-padding-y;

			> a {
				display: block;

				padding: .5rem 1em !important;

				margin-right: .5rem;
				margin-left: .5rem;

				color: $body-color !important;

				&:hover {
					background: $body-bg;
					text-decoration: none;
				}
			}
		}
	}
}

.nav-lang {
	/* comment */
	padding-top: $navbar-padding-y;
	padding-bottom: $navbar-padding-y;

	> ul {
		list-style: none;
		display: flex;
		flex-direction: row;
		height: 100%;
		margin: 0;
		padding: 0;

		> li {
			font-size: $small-font-size;
			padding: 0;

			> a {
				display: block;

				padding-top: 0.75em;
				padding-bottom: 0.75em;

				padding-right: .5rem !important;
				padding-left: .5rem !important;

				margin-right: 0;
				margin-left: 0;

				color: $body-color !important;

				&.active {
					font-weight: 700;
					background-color: transparent;
				}

				&:hover {
					background: $body-bg;
				}

				&.disabled {
					color: $nav-link-disabled-color !important;
					&:hover {
						background: transparent;
					}
				}
			}
		}
	}
}

.nav-mobile {
	width: 100%;

	.table-row {
		display: flex;
		padding: 0 $navbar-padding-x/2;

		.table-cell,
		.nav-mobile-header {
			position: static;
		}

		.dropdown {
			font-size: 20px;

			a {
				color: $body-color;

				&:link,
				&:hover,
				&:focus,
				&:visited {
					text-decoration: none;
				}
			}

			.dropdown-toggle:after {
				border: none;
			}
		}

		.dropdown:first-child {
			order: 0;
		}

		.dropdown:last-child {
			order: 2;
		}
	}

	.nav-mobile-header {
		order: 1;
		flex-grow: 2;

		.nav-mobile-logo {
			display: none;
		}

		h2 {
			display: table-cell;
			letter-spacing: inherit;

			a {
				font-size: 1.25rem;
				font-weight: 400;
				line-height: inherit;
				text-transform: lowercase;

				color: $main-accent-color;
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.mod-mainnavigation > .nav-main > .nav,
	.mod-searchfield {
		display: none;
	}

	.mod-mainnavigation {
		background-color: rgba($main-color-gray-100, 1);

		.nav-item {
			padding-top: $navbar-padding-y/2;
			padding-bottom: $navbar-padding-y/2;
		}
	}

	.nav-lang {
		> ul {
			> li {
				> a {
					padding: .25rem !important;
				}
			}
		}
	}

	.mod-mainnavigation .nav-mobile .table-cell > a {
		display: table-cell;
	}

	.nav-mobile .dropdown-menu form .icon,
	.nav-mobile .dropdown-menu form a[data-toggle=collapse] {
		position: absolute;
		top: 7px;
		left: 10px;
	}
	.nav-mobile .dropdown-menu form input {
		padding-left: 30px;
	}

	.nav-mobile .mod-searchfield {
		margin: $margin-x-narrow;

		form {
			position: relative;
		}
	}
}

// SEARCH FIELD
.form-search {
	display: inline-block;
	position: relative;

	button {
		background: transparent;
		border: none;
	}
	.icon {
		display: inline-block;
		position: absolute;
		top: -1px;
		z-index: 999;
		&:hover {
			cursor: pointer;
		}
	}
	.icon--search {
		left: 3px;
	}
	span.icon--search {
		display: none;
	}
	.icon--close {
		color: $white;
		transition: all 0.3s;
		right: 10px;
		top: 4px;
		visibility: hidden;
	}

	.search-field {
		padding-left: 30px;
	}
}

.search-field:focus + .icon--close:after {
	color: $black;
	visibility: visible;
}

// Toolbar additional stuff

.toolbar {
	margin-right: ($grid-gutter-width / -2);
	margin-left: ($grid-gutter-width / -2);
}


@media screen and (min-width: 480px) and (max-width: 1024px){
	header {
		.clearfix {
			margin-left: 0;
		}

		.mod-searchfield {
			padding-right: .5rem !important;
			padding-left: .5rem !important;

			margin: 0;

			form .search-field {
				width: 100px;

				&:focus {
					width: 150px;
				}
			}
		}
	}

	.nav-main > .navbar-nav > li > a {
		padding-right: .5rem !important;
		padding-left: .5rem !important;

		margin-right: 1px;
		margin-left: 1px;
	}

	.nav-lang > ul > li > a {
		padding-right: .25rem !important;
		padding-left: .25rem !important;
	}
}