/* MAINNAVIGATION */
.mainnavigation {
	background:#226fb5;
	display:block;
	position:relative;
}

.mainnavigation ul {
	list-style-type:none;
	margin:0;
	padding:0;
	text-align:center;
}

.mainnavigation ul#navi li {
	display:inline-block;
	text-align:center;
}


.mainnavigation.fix {
	position:fixed;
	top:0;
	width:100%;
	z-index:20000;
}

.mainnavigation ul#navi li a {
	font-family: 'Bitter', serif;
	font-weight:400;
	font-size:11.5pt;
	line-height:60px;
	display:block;
	padding:0 8px;
	color:#baddfd;
}
.mainnavigation ul#navi li a.akt, .mainnavigation ul#navi li a:hover {
	color:#fff;
}

.mainnavigation .buttonBox {
	position:absolute;
	top:0;
	right:10px;
	z-index:300;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row nowrap;
}

.mainnavigation .buttonBox a {
	display:block;
	background-position:center;
	background-repeat:no-repeat;
	float:left;
	height:40px;
	padding:10px 8px 10px 8px;
}

.mainnavigation .buttonBox a#btnNavMap {
	width:38px;
	background-image:url('/page/_webpics/buttons/map-icon-procity.svg');
}
.mainnavigation .buttonBox a#btnNavGutschein {
	width:38px;
	background-image:url('/page/_webpics/buttons/gutschein-icon-procity.svg');
}
#resNavi {
	height:40px;
	text-align:left;
	padding-left:20px;
	display:none;
	width:40px;
}
#resNavi li {
	padding:0;
	height:40px;
	background-image:url('/page/_webpics/buttons/icon-menue-and-close.svg');
	background-position:-6px top;
	background-repeat:no-repeat;
	cursor:pointer;
}

#resNavi.akt li {
	background-position:-6px bottom;
}



@media  only screen and (max-width: 1200px) {
	#resNavi {display:block; position:absolute;right:0;}
	#navi {display:none;z-index:20000;}
	#navBreak {display:none;}
	.mainnavigation .innerBox {
		padding:0;
	}


	.mainnavigation .buttonBox {
		right:50px;
	}
	.mainnavigation .buttonBox a {
		display:block;
		background-position:center;
		background-repeat:no-repeat;
		float:left;
		height:40px;
		padding:0 4px 0 4px;
	}
	.mainnavigation .buttonBox a#btnNavMap {
		width:30px;
		background-size:22px;
	}
	.mainnavigation .buttonBox a#btnNavGutschein {
		width:30px;
		background-size:27px;
	}



	.mainnavigation ul {
		background-color:#226fb5;
		border-left:none;
		width:100%;
	}
	.mainnavigation {
		position:relative;
		background-color:#226fb5;
		width:100%;
		height:40px;
	}
	.mainnavigation ul {
		background-color:#226fb5;
		border-left:none;
		width:100%;
	}
	.mainnavigation ul#navi {
		position:absolute;
		width:190px;
		right:0;
		top:40px;
	}
	.mainnavigation ul#navi li {
		display:block;
		text-align:left;
		border-top:1px solid #fff;
		position:relative;
	}
	.mainnavigation ul#navi li a {
		padding-left:20px;
		line-height:32px;
		font-size:11pt;
	}

	.mainnavigation ul#navi li a:hover {
		background-color:#0053a1;
	}

}

@media  only screen and (min-width: 1201px) {
	#navi {display:block !important;}
}