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

	#pageHeader{
		display: block;
	}
}

#pageHeader{

	#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{
			margin-right: 4px;
			> a{
				position: relative;
				margin: 0 4px 6px 2px;
				padding: 10px 0;
				display: block;
				//padding: 19px 0;
				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;
			}
		}
	}
}

#pageHeader #onlineCenterNavpoint > a{
	color: $grey3;

	&:hover{
		color: $viola;
	}
}


.navi-popup{
	display: none;
	position: absolute;
	top: 0;
	background: $grey1;
	text-align: center;
	z-index: 51;
	//@include opacity(.5);
	@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: #243d51;
			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;
	}
}

#pageHeader{
	.mainnav{
		position: absolute;
		bottom: 0px;
		left: 50%;
		width: 100%;
		@include transform(translateX(-50%));

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

			a{
				display: block;
				width: 180px;
				text-align: center;
				line-height: 32px;
				font-size: 110%;
				color: #FFF;
				background: $grey3;
				@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;
				}
			}
		}

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

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