#map-wrapper {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:100%;
	min-height:200px;
	background-image:url(../../img/loading.gif);
	background-repeat:no-repeat;
	background-position:center center;	
}

#map-wrapper img {
	width:100%;
	height:auto;
}

#map-overlay {
	position:absolute;
	top:0px;
	width:100%;
	z-index: 99;
	height:100%;

}


#group-map-image {
	opacity:0.0;
}

.city {
	background-color:#fff;
	width:auto;
	height:auto;
	position:absolute;
	z-index:9;
	font-size:15px;
	line-height:17px;
	padding:4px;
}

.city  .city-headline {
	font-family: 'Gotham-Bold';
	color:#0055AD;
}

#map-wrapper .city img {
	width:auto;
	height:auto;
	margin-top:4px;
}

.point  {
	background-color:#004F9F;
	width:10px;
	height:10px;
	position:absolute;
	
	display:inline-block;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%;   
	border-radius:50%; 	
	z-index: 2;
	
	border:2px solid transparent;
	
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;	
}


.point-set {
	pointer-events: none;
	opacity: 0.0;
}

.point-set .point, .point-set .city {
	pointer-events: auto;
}

.point-set .point:hover {
	border:2px solid #fff;
}


.point-set:hover .point {
	border:2px solid #fff;
}


.yellow {
	background-color:#ffed00;
}

.blue {
	background-color:#004F9F;
}

.line {
	position:absolute;
	width:100%;
	height: 100%;
	overflow:visible;
}
.line line {
	stroke:#004F9F;
	z-index: 1;
	
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;	
}

.point-set:hover .line line {
	stroke:#000;
}

.left .city {
	text-align:right;
	min-width:75px;
} 


.right .line {
	width:100%!important;
}

.right .city {
	text-align:left;
	min-width:108px;
} 

legend {
	width:auto;
	position:absolute;
	bottom: 0px;
	right: 0px;
	font-size:12px;
	line-height:15px;	
}

legend .legend-item {
	padding-left:18px;
	margin-bottom:18px;
	position:relative;
}
legend .legend-item .point {
	left:0px;
	top:2px;
}


/*#city-MERKENDORF {
	right:auto!important;
	left:40%!important;
}
*/
.first .city {

}



#city-GERMANY {
	margin-left:60px!important;
}





@media (max-width: 600px) {

	#map-wrapper .city img {
		width:auto;
		height:auto;
		max-height:20px;
	}	

	.city {
		font-size:12px;
		line-height:13px;
		padding:2px;
	}

	.left .city {
		min-width:60px;
	} 


	.right .city {
		min-width:80px;
	} 

	#city-GERMANY {
		margin-left:45px!important;
	}
	
}