.#{$prefix}_banner {
	background-color:$bannerDarkBlue;
	height:4em;
}

.#{$prefix}_banner__inner {
	max-width:$banner-max-width;
	margin:auto;
	box-sizing:border-box;
	padding:0 2em;
}

.#{$prefix}_banner__logo {
	color:white;
	font-size:2.5em;
	float:left;
	margin:0;
	line-height:1.55em;
	font-weight:normal;

	a {
		color:white;
		text-decoration:none!important;
		&:hover {
			color:white;
		}
	}
}

.#{$prefix}_banner__name {
	display:none;
	float:left;
	color: #9faab2;
	font-size: 1em;
	width:11em;
	letter-spacing: 0.055em;
	word-spacing: 0.02em;
	padding-left:0.75em;
	margin:1em 0;
	font-weight: bold;
	font-style: normal;
	line-height:2em;

	&.#{$prefix}_banner__name--large {
		font-size:1.5em;
		line-height:1.2em;
		margin:0.6666em 0;
		color:white;
	}

	&.#{$prefix}_banner__name--collapse {
		line-height:1em;
	}

	&.#{$prefix}_banner__name--borderLeft {
		border-left: 2px solid #3f4760;
		padding-left:0.25em;
	}

	@media(min-width:34em) {
		display:block;
	}
	@media(min-width:38em) {
		&.#{$prefix}_banner__name--collapse {
			line-height:2em;
		}
		width:auto;
	}
}

.#{$prefix}_banner__buttons {
	display:none;
	float:right;
	height:2.3em;
	width:5.25em;
	margin:0.8em 0;
	position:relative;
	z-index:2;
	@media(min-width:23em) {
		display:block;
	}
}

.#{$prefix}_banner__button {
	display:block;
	color:white;
	background-color:$buttonBlue;
	text-decoration:none;
	width:2.3em;
	height:2.3em;
	text-align:center;
	vertical-align:top;

	span {
		font-size:1.5em;
		line-height:1.533em;
	}

	&:hover {
		color:white!important;
		text-decoration:none!important;
		span {
			color:white!important;
			text-decoration:none!important;
		}
	}
	&:visited {
		color:white!important;
		text-decoration:none!important;
		span {
			color:white!important;
			text-decoration:none!important;
		}
	}
	&:focus {
		color:white!important;
		text-decoration:none!important;
		span {
			color:white!important;
			text-decoration:none!important;
		}
	}
	&:active {
		color:white!important;
		text-decoration:none!important;
		span {
			color:white!important;
			text-decoration:none!important;
		}
	}
}

.#{$prefix}_banner__button--search {
	float:left;
}

.#{$prefix}_banner__button--az {
	float:right;
}

.#{$prefix}_banner__searchForm {
	position:absolute;
	z-index:-1;
	top:0;
	left:0;
	height:2.3em;
	transform:translateX(-100%);
	box-sizing:border-box;
	width:15em;
	transition:width 0.25s ease, opacity 0.25s ease-out,transform 0.25s ease;
	background-color:darken($buttonBlue, 15%);
	border:0.1em solid $buttonBlue;
	opacity:0;
	transform:translateX(-90%);


	&.active {
		outline:none;
		opacity:1;
		transform:translateX(-100%);
	}
}

.#{$prefix}_banner__searchBar {
	display:block;
	float:left;
	width:12.5em;
	height:100%;
	box-sizing:border-box;
	background:transparent;
	color:white;
	border:none;
	padding-left:0.5em;
	outline:none;
}

.#{$prefix}_banner__dropdownButton {
	width:2.3em;
	height:100%;
	float:right;
	background-color:darken($buttonBlue, 15%);
	position:relative;
	cursor:pointer;

	&:hover,
	&.active {
		background-color:darken($buttonBlue, 10%);
	}

	&.active {
		.#{$prefix}_banner__dropdownBody {
			opacity:1;
			transform:translateY(0);
			pointer-events:all;
		}
	}
}

.#{$prefix}_banner__dropdownButtonTriangle {
	position:absolute;
	top:50%;
	left:50%;
	width: 0; 
  height: 0; 
  margin:-0.2165em 0 0 -0.3em;
  border-left: 0.433em solid transparent;
  border-right: 0.433em solid transparent;
  border-top: 0.5em solid white;

}

.#{$prefix}_banner__dropdownBody {
	position:absolute;
	top:100%;
	right:0;
	z-index:-1;
	overflow-y:hidden;
	background-color:white;
	box-shadow:0 0 1em rgba(0,0,0,0.5);
	opacity:0;
	transform:translateY(0.5em);
	pointer-events:none;
	transition:transform 0.2s ease, opacity 0.2s ease;
}

.#{$prefix}_banner__dropdownElement {
	//width:10em;
	white-space:nowrap;
	line-height:1.5em;
	padding:0.2em 0.5em;
	text-align:center;
	&:hover {
		color:$textLightBlue;
	}
}

.#{$prefix}_banner__dropdownElement--selected {
	background-color:$lightBlue;
	color:white;

	&:hover {
		color:white;	
	}
}