#navbar {
	margin:				auto;
}

/* remove the bullets and the margins and padding from the list */
#navbar ul {
	width:					inherit;
	list-style-type:		none;
	padding:				0;
	margin:					15px auto;
	display: 				grid;
	grid-template-columns:	repeat(7, 1fr);
  	justify-content: 		center;
}

#navbar #nav1 {
	border-top-left-radius:			5px;
	border-bottom-left-radius:		5px;
}

#navbar #nav7 {
	border-top-right-radius:		5px;
	border-bottom-right-radius:		5px;
}

#navbar ul li {
	float:				left;
	margin:				0;
	font-size: 			16px;
	background-color: 	#b61929;
}

#navbar ul li a,
#navbar ul li p,
#navbar ul li .marginated-nav-element {
	color:				white;/*white, #231f20, #005ea9 */
	font-weight:		bold;
	text-align:			center;
	padding: 			0.2em;
	margin:				10px 5px;
}

#navbar ul li span {
	cursor:				default;
}

#navbar ul li a:hover {
	border:				none;
	font-size:			16px;
}

#navbar a {
	font-size:			16px;
}

.nav-click {
	top: 0;
    height: inherit;
    position: relative;
    cursor: pointer;
}

@media only screen and (min-width: 320px) and (max-width: 400px) {
	#navbar {
		width:				100%;
		margin:				auto;
		height:	40px;
	}
	
	.navigation-icon {
		height: 60%;
		position: absolute;
  		top: 0; bottom: 0; left: 0; right: 0;
 		margin: auto;
	}
	
	.nav-click {
		top: -10px;
	}
	
	#navbar ul li a, 
	#navbar ul li span,
	#navbar ul li p {
		cursor:				default;
		font-size: 0pt;
	}
	
	#nav1 {
		background-image: url(/mdtweb/images/poll-icon.png);
		background-size: 25px;
		background-repeat:no-repeat;
       	background-position:center;
       	height: 40px;
	}
	
	#nav2 {
		background-image: url(/mdtweb/images/road-map-icon.png);
		background-size: 25px;
		background-repeat:no-repeat;
       	background-position:center;
       	height: 40px;
	}
	
	#nav3 {
		background-image: url(/mdtweb/images/my-orders-icon.png);
		background-size: 25px;
		background-repeat:no-repeat;
       	background-position:center;
       	height: 40px;
	}
	
	#nav4 {
		background-image: url(/mdtweb/images/enrollment-icon.png);
		background-size: 25px;
		background-repeat:no-repeat;
       	background-position:center;
       	height: 40px;
	}
	
	#nav5 {
		background-image: url(/mdtweb/images/card-information-icon.png);
		background-size: 25px;
		background-repeat:no-repeat;
       	background-position:center;
       	height: 40px;
	}
	
	#nav6 {
		background-image: url(/mdtweb/images/description-icon.png);
		background-size: 25px;
		background-repeat:no-repeat;
       	background-position:center;
       	height: 40px;
	}
	
	#nav7 {
		background-image: url(/mdtweb/images/checkout-icon.png);
		background-size: 25px;
		background-repeat:no-repeat;
       	background-position:center;
       	height: 40px;
	}
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (min-width: 400px) and (max-width: 600px) {
	#navbar {
		width:				100%;
		margin:				auto;
		height:	60px;
	}
	
	.navigation-icon {
		height: 60%;
		position: absolute;
  		top: 0; bottom: 0; left: 0; right: 0;
 		margin: auto;
	}
	
	.nav-click {
		top: -10px;
	}
	
	#navbar ul li {
		height: 60px;
		position: relative;
	}
	
	#navbar ul li a, 
	#navbar ul li span,
	#navbar ul li p {
		cursor:				default;
		font-size: 0pt;
	}
	
	#nav1 {
		background-image: url(/mdtweb/images/poll-icon.png);
		background-size: 35px;
		background-repeat:no-repeat;
       	background-position:center;
	}
	
	#nav2 {
		background-image: url(/mdtweb/images/road-map-icon.png);
		background-size: 35px;
		background-repeat:no-repeat;
       	background-position:center;
	}
	
	#nav3 {
		background-image: url(/mdtweb/images/my-orders-icon.png);
		background-size: 35px;
		background-repeat:no-repeat;
       	background-position:center;
	}
	
	#nav4 {
		background-image: url(/mdtweb/images/enrollment-icon.png);
		background-size: 35px;
		background-repeat:no-repeat;
       	background-position:center;
	}
	
	#nav5 {
		background-image: url(/mdtweb/images/card-information-icon.png);
		background-size: 35px;
		background-repeat:no-repeat;
       	background-position:center;
	}
	
	#nav6 {
		background-image: url(/mdtweb/images/description-icon.png);
		background-size: 35px;
		background-repeat:no-repeat;
       	background-position:center;
	}
	
	#nav7 {
		background-image: url(/mdtweb/images/checkout-icon.png);
		background-size: 35px;
		background-repeat:no-repeat;
       	background-position:center;
	}
	
	#zahlungNavText {
		
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 780px) {
	#navbar {
		width:				100%;
		margin:				auto;
		height:	60px;
	}
	
	.nav-click {
		top: -10px;
	}
	
	.navigation-icon {
		height: 60%;
		position: absolute;
  		top: 0; bottom: 0; left: 0; right: 0;
 		margin: auto;
	}
	
	#navbar ul li {
		height: 60px;
		position: relative;
	}
	
	#navbar ul li a, 
	#navbar ul li span,
	#navbar ul li p {
		cursor:				default;
		font-size: 0pt;
	}
	
	#nav1 {
		background-image: url(/mdtweb/images/poll-icon.png);
		background-size: 35px;
		background-repeat:no-repeat;
       	background-position:center;
	}
	
	#nav2 {
		background-image: url(/mdtweb/images/road-map-icon.png);
		background-size: 35px;
		background-repeat:no-repeat;
       	background-position:center;
	}
	
	#nav3 {
		background-image: url(/mdtweb/images/my-orders-icon.png);
		background-size: 35px;
		background-repeat:no-repeat;
       	background-position:center;
	}
	
	#nav4 {
		background-image: url(/mdtweb/images/enrollment-icon.png);
		background-size: 35px;
		background-repeat:no-repeat;
       	background-position:center;
	}
	
	#nav5 {
		background-image: url(/mdtweb/images/card-information-icon.png);
		background-size: 35px;
		background-repeat:no-repeat;
       	background-position:center;
	}
	
	#nav6 {
		background-image: url(/mdtweb/images/description-icon.png);
		background-size: 35px;
		background-repeat:no-repeat;
       	background-position:center;
	}
	
	#nav7 {
		background-image: url(/mdtweb/images/checkout-icon.png);
		background-size: 35px;
		background-repeat:no-repeat;
       	background-position:center;
	}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}