/*@include breakpoint($desktop-s){
	#pageHeaderMobile{
		display: none;
	}

	#pageHeaderResponsive{
		display: block;
	}
}*/

#pageHeaderResponsive,
#pageHeader_inner,
.mainnav {
	float: left;
	width: 100%;
}


#pageHeaderResponsive{
	margin-bottom: 30px;

	.logo-container-azh,
  .logo-container-azh-sanivision {
		display: none;
	}

  .logo-container-azh-sanivision {
    height: 75px;
    max-width: 450px;
  }




	#metanavbar {
		@include box-sizing('border-box');
		float: right;
		margin-right: 16px;
	}

	.mainnav{
		margin-top: -32px;

		.quicksearch {
			display: none;
		}

		ul{
			@include inline-block-list();
			margin: 0;
			text-align: center;

			li{
				margin-right: 4px;
				margin-bottom: 0;

				&:before{
					content: normal;
				}
			}

			a{
				display: block;
				width: auto;
				text-align: center;
				line-height: 32px;
				font-size: 110%;
				color: #FFF;
				background: $grey3;
        padding-left: 18px;
        padding-right: 18px;
				@include transition-property(all);
				@include transition-duration(0.5s);
				@include box-shadow($std-box-shadow);

				span[class^="icon-"]{
					margin-right: 4px;
					font-size: 60%;
					line-height: 32px;
					vertical-align: middle;
				}

				&:hover{
					background: #000;
				}
			}
		}
	}

	.service-kundeNavpoint,
	.service-onlineCenter,
	#servicePhoneNavpoint{
		display: none;
	}

	ul{
		margin: 0;
	}

	li{
		padding: 0;

		&:before{
			content: normal;
		}
	}

	.topnav{
		display: inline-block;
		text-align: right;
		@include inline-block-list();
		overflow: visible;

		span{
			display: inline-block;

			&.icon-kunde-circle{
				color: $viola;
			}

			&[class^="icon-"]{
				margin-top: -4px;
			}
		}

		> li > a span[class^="icon-"]{
			margin-right: 4px;
			font-size: 180%;
			vertical-align: middle;
		}

		> li{
			&#onlineCenterNavpoint:hover {
				.subTopnav {
					display: block;
				}
			}

			margin-right: 4px;
			> a{
				position: relative;
				margin: 0 4px 6px 2px;
				padding: 10px 0;
				display: block;
				text-align: center;
				width: 180px;
				line-height: 1.2em;
				color: $grey4;
				@include box-shadow($std-box-shadow);
				@include transition-property(all);
				@include transition-duration(0.5s);

				&:hover{
					color: #000;
				}
			}

			&:before{
				content: normal;
			}
		}
	}

	.subTopnav{
		display: none;
		text-align: right;
		@include inline-block-list();
		overflow: visible;
		position: absolute;
		z-index: 100;

		span{
			display: inline-block;

			&.icon-kunde-circle{
				color: $viola;
			}

			&[class^="icon-"]{
				margin-top: -4px;
			}
		}

		> li > a span[class^="icon-"]{
			margin-right: 4px;
			font-size: 180%;
			vertical-align: middle;
		}

		> li{
			margin-right: 4px;
			margin-bottom: 0;
			display: block;

			> a{
				position: relative;
				margin: 0 4px 6px 2px;
				padding: 10px 0 10px 18px;
				display: block;
				text-align: left;
				width: 162px;
				line-height: 1.2em;
				color: $grey4;
				background-color: white;
				@include box-shadow($std-box-shadow);
				@include transition-property(all);
				@include transition-duration(0.5s);

				&:hover{
					color: $viola;
				}
			}

			&:before{
				content: normal;
			}
		}
	}
}

#pageHeaderResponsive #onlineCenterNavpoint > a{
	color: $grey3;
	cursor:auto;
	&:hover{
		color: $viola;
	}
}


.navi-popup{
	display: none;
	position: absolute;
	top: 0;
	background: $grey1;
	text-align: center;
	z-index: 51;
	@include box-shadow($std-box-shadow);
	width: 600px;

	.close{
		position: absolute;
		top: 16px;
		right: 16px;
		color: $grey5;
		cursor: pointer;

		&:before{
			font-size: 100%;
		}
	}

	ul{
		@extend %clearfix;
	}

	li{
		float: left;
		width: 50%;

		@include breakpoint($mobile-l){
			width: 25%;
		}

		&:before{
			content: normal;
		}
	}

	#infoServiceNavpoint & a{
		display: block;
		color: $grey4;
		border-bottom: 1px solid $grey4;
		line-height: 21px;
		text-align: left;
		font-weight: bold;
		padding: 0 16px;
		margin-bottom: 16px;

		&:before{
			@extend [class^="icon-"];
			@extend .icon-arrow;
			display: inline-block;
			line-height: 21px;
			width: 21px;
			color: #FFF;
			background: $viola;
			text-align: center;
			margin-right: 8px;
		}
	}

	.popup-content{
		@extend %clearfix;
	}
}

.popup-header{
	color: $grey5;
	text-align: center;
	font-weight: bold;
	margin-bottom: 16px;

	span[class^="icon-"]{

		margin-right: 4px;
		font-size: 180%;
		line-height: 47px;
		vertical-align: middle;
	}
}


#toggle-nav{
	position: relative;
	height: 55px;
	z-index: 5;
	@include box-shadow($std-box-shadow);
}

#toggle-button {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	overflow: hidden;
	background: $aqua;
	margin: 0;
	padding: 0;
	width: 53px;
	height: 52px;
	font-size: 0;
	text-indent: -9999px;
	appearance: none;
	box-shadow: none;
	border-radius: 0;
	border: none;
	cursor: pointer;
	transition: background 0.3s;

	&:focus {
		outline: none;
	}

	span {
		display: block;
		position: absolute;
		top: 25px;
		left: 5px;
		right: 5px;
		height: 2px;
		background: white;

		&:before,
		&:after {
			position: absolute;
			display: block;
			top: 11px;
			left: 0;
			width: 100%;
			height: 2px;
			background-color: #fff;
			content: "";
			transition-duration: 0.3s, 0.3s;
			transition-delay: 0.3s, 0s;
			transition-property: bottom, transform;
		}

		&:before {
			top: -11px;
			transition-property: top, transform;
		}
	}

	.menuOpen & {
		background: $viola;

		span {
			background: none;

			&:before,
			&:after {
				transition-delay: 0s, 0.3s;
			}

			&:before {
				top: 0;
				transform: rotate(45deg);
			}

			&:after {
				top: 0;
				transform: rotate(-45deg);
			}
		}
	}
}

@media only screen and (min-width: 1024px) and (max-width: 1279px) {

}

@media only screen and (max-width: 1279px) {

	#pageHeaderResponsive {
		#toggle-button {
			display: block;
		}

		#pageHeader_inner {
			height: inherit;
		}

		.pageLogo{
			padding: 8px 14px 0 14px;
			margin-right: 20px;
			@media screen and (-ms-high-contrast: active){
				min-width: 150px;
			}

			img {
				width: 156px;
				height: auto;
			}
		}


		.quicksearch{
			span.icon-search-circle{
				position: relative;
				top: 2px;
				font-size: 220%;
			}

			input[type="text"]{
				width: 80%;
			}
		}

		.mainnav {
			display: none;
			position: absolute;
			left: inherit;
			right: 0;
			top: 86px;
			z-index: 1000;
			width: 100%;
			padding: 16px 0;
			background: #FFF;
			@include box-shadow();

			.quicksearch {
				display: block;
			}

			> ul{
				margin-bottom: 15px;

				@include breakpoint($mobile-m) {
					margin-bottom:0;

					width: 50%;
					float: left;
					margin-bottom: 0;
				}

				@include breakpoint($mobile-xl){
					width: auto;
					float: none;
				}
			}

			li {
				width: 90%;
				margin: 0 auto 16px auto;

				a{
					text-align: left;
					display: block;
					color: $grey5;
					font-size: 140%;
					line-height: 130%;
					font-weight: bold;
					background: none;
					box-shadow: none;
					width: 100%;

					span[class^="icon-"]{
						font-size: 130%;
					}

					&:hover {
						color: inherit;
					}
				}
			}
		}

		ul.topnav {
			display: inline-block;
			@include inline-block-list();
			overflow: visible;

			span{
				display: inline-block;

				&.icon-kunde-circle{
					color: $viola;
				}
			}

			> li > a span[class^="icon-"]{
				margin-right: 4px;
				font-size: 180%;
				line-height: 55px;
				vertical-align: middle;
			}

			> li{
				padding-left: 0;
				margin-right: 4px !important;
				margin-bottom: 0 !important;

				> a{
					position: relative;
					display: block;
					padding: 0 $content-padding;
					font-size: 140%;
					color: $grey4;
					border-right: 1px solid $grey4;
					box-shadow: none;
					width: auto;
					@include transition-property(all);
					@include transition-duration(0.5s);
					margin: 0;

					&:hover{
						color: #000;
					}
				}

				&:nth-child(4) > a{
					color: $aqua-light;

					&:hover{
						color: $aqua;
					}
				}
			}
		}

		#metanavbar{
			width: calc(100% - 244px);
			left: 180px;

			.quicksearch {
				display: none;
			}

			/*> ul{
				margin-bottom: 15px;

				@include breakpoint($mobile-m) {
					margin-bottom:0;

					width: 50%;
					float: left;
					margin-bottom: 0;
				}

				@include breakpoint($mobile-xl){
					width: auto;
					float: none;
				}
			}

			a{
				display: block;
				color: $grey5;
				font-size: 140%;
				line-height: 130%;
				font-weight: bold;
			}

			ul.topnav a{
				font-weight: normal;
			}

			li{
				margin: 0 auto 16px auto;
			}*/
		}

		.service-kundeNavpoint,
		.service-onlineCenter,
		#service-phone {
			position: relative;
			font-size: 140%;
			margin: 12px 0 5px 40px;

			.service-phone-link {
				color: #4c4c4c;
			}
		}

		.service-kundeNavpoint,
		.service-onlineCenter {
			a {
				color: #4c4c4c;
			}
		}
	}

}

@media only screen and (min-width: 768px) and (max-width: 1023px) {

}

@media only screen and (max-width: 1023px) {

	#pageHeaderResponsive {
		#metanavbar {
			.topnav {
				#onlineCenterNavpoint {
					display: none;
				}
			}
		}

		.mainnav {
			.service-onlineCenter {
				display: block;
			}

			.subTopnav {
				margin-top: 10px;
			}
		}

		.subTopnav {
			display: block;
			position: relative;

			li {
				a {
					margin: 0 4px 0 2px;
					padding: 5px 0;
					font-size: 100%;
					line-height: 100%;
					font-weight: normal;
				}
			}
		}
	}

	.navi-popup {
		width: 100%;
		position: fixed;
	}
}

@media only screen and (max-width: 767px) {

	#pageHeaderResponsive {
		#metanavbar {
			width: calc(100% - 220px);

			.topnav {
				#kundeNavpoint {
					display: none;
				}
			}
		}

		.mainnav {
			#service-kundeNavpoint {
				display: block;
			}
		}
	}
  #pageHeaderResponsive .pageLogo img.logo-container-azh-sanivision {

  }
}
@media only screen and (max-width: 1024px) and (min-width: 768px){
  #pageHeaderResponsive .pageLogo img {
    width: 180px;
    height: auto;
    margin-top: 5px;
  }
  #pageHeaderResponsive .pageLogo img.logo-container-azh {
    width: 179px;
    height: auto;
    margin-top: -2px;
  }
  #pageHeaderResponsive .pageLogo img.logo-container-azh-sanivision {
    width: 180px;
  }
}

@media only screen and (max-width: 599px) {

  .logo-container-azh-sanivision {
    display: none;
  }
	#pageHeaderResponsive {
		.pageLogo{
			padding: 14px 14px;
			margin-right: 0;
			@media screen and (-ms-high-contrast: active){
				min-width: 103px;
			}

			img {
				width: 103px;
				height: auto;
			}
		}

		#metanavbar {
			width: calc(100% - 148px);
		}

		.mainnav {
			.service-kundeNavpoint,
			.service-onlineCenter,
			#service-phone {
				margin: 12px 0 5px 10px;
				padding: 0 16px;
			}
		}

	}
  #pageHeaderResponsive .pageLogo img.logo-container-azh-sanivision {
    margin-top: 3px;
    width: 100px;
  }
}

@media only screen and (max-width: 360px) {

	#pageHeaderResponsive {
		.pageLogo{
			padding: 19px 14px;
			margin-right: 0;
			@media screen and (-ms-high-contrast: active){
				min-width: 48px;
			}

			img {
				width: 48px;
				height: auto;
			}
		}

		#metanavbar {
			width: calc(100% - 92px);
		}

	}
}

#pageHeaderResponsive ul.topnav li .subTopnav > li {
	display: block !important;
}
.logo-container-default img{
  max-width: 470px;
}