#mapcontainer {
	max-width: 1340px;
	max-height: 640px;
	
	height: 640px;
	position: relative;
	clear: both;
	margin: 0 auto;
}
#mapcontainer .map {
	width: 100%;
	height: 100%;
	background: url(wbg_karte.png) no-repeat;
	background-size: contain;
}
#mapcontainer .map .circle {
	position: absolute;
}
#mapcontainer .map .circle.outer {
	border-radius: 50%;
	-moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    overflow: hidden;
}
#mapcontainer .map .circle.inner {
	position: absolute;
	border-radius: 50%;
	-moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
	width: 90%;
	height: 90%;
	top: 5%;
	left: 5%;
	cursor: pointer;
}
#mapcontainer .map .circle.inner p {
	display: none;
	text-transform: uppercase;
	text-align: center;
	color: #FFFFFF;
	font-weight: bold;
	margin: 0;
	position: absolute;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}


.circle.outer.s {
	width: 4.6875%;
	height: 9.375%;
}
.circle.outer.m {
	width: 7.03125%;
	height: 14.0625%;
}
.circle.outer.l {
	width: 9.375%;
	height: 18.75%;
}
.circle.outer.xl {
	width: 12.5%;
	height: 25%;
}
.circle.outer.xxl{
	width: 14.0625%;
	height: 28.125%;
}


.circle.outer.s p {
	font-size: 10px;
	font-weight: normal !important;
}
.circle.outer.m p {
	font-size: 14px;
}
.circle.outer.l p {
	font-size: 18px;
}
.circle.outer.xl p {
	font-size: 20px;
}
.circle.outer.xxl p {
	font-size: 20px;
}


.circle.outer {
	opacity: 0.8;
	filter: Alpha(Opacity=80);
}


.circle.outer.aqua {
	border: 2px dotted #17BDF4;
}
.circle.inner.aqua {
	background-color: #17BDF4;
}


.circle.outer.yellow {
	border: 2px dotted #FF9900;
}
.circle.inner.yellow {
	background-color: #FF9900;
}


.circle.outer.green {
	border: 2px dotted #4FB45A;
}
.circle.inner.green {
	background-color: #4FB45A;
}


.circle.outer.red {
	border: 2px dotted #DC0A2E;
}
.circle.inner.red {
	background-color: #DC0A2E;
}


.circle.outer.gray {
	border: 2px dotted #919AA9;
}
.circle.inner.gray {
	background-color: #919AA9;
}


.circle.outer.brown {
	border: 2px dotted #8B6628;
}
.circle.inner.brown {
	background-color: #8B6628;
}


.circle.inner:nth-child(n) {
    filter: none;
}
/*** DESKTOP 1 ***/
@media screen and (max-width: 1599px) {
	#mapcontainer {
		width: 1200px;
		height: 573px;
	}
}
/*** DESKTOP 2 ***/
@media screen and (max-width: 1349px) {
	#mapcontainer {
		width: 1080px;
		height: 516px;
	}
}
/*** DESKTOP 3 ***/
@media screen and (max-width: 1279px) {
	#mapcontainer {
		width: 880px;
		height: 421px;
	}
}
/*** TABLETS ***/
@media screen and (max-width: 1023px) {
	#mapcontainer {
		width: unset !important;
		height: 40vw;
	}
	.circle.outer.s p {
		font-size: 8px;
		font-weight: normal !important;
		hyphens: auto;
		line-height: 1;
	}
	.circle.outer.m p {
		font-size: 10px;
		hyphens: auto;
		line-height: 1;
	}
	.circle.outer.l p {
		font-size: 14px;
		hyphens: auto;
		line-height: 1;
	}
	.circle.outer.xl p {
		font-size: 18px;
		hyphens: auto;
		line-height: 1;
	}
	.circle.outer.xxl p {
		font-size: 20px;
		hyphens: auto;
		line-height: 1;
	}
}

/*** SMARTPHONE ***/
@media screen and (max-width: 767px){
	#mapcontainer {
		height: 44vw;
	}
}
@media screen and (max-width: 710px){
	#mapcontainer {
		height: 90vw;
	}
	#mapcontainer .map{
		background: url(wbg_karte_old.jpg) no-repeat;
		background-size: cover;
	}
	.circle.outer.s {
		width: 9.375%;
		height: 9.375%;
	}
	.circle.outer.m {
		width: 14.0625%;
		height: 14.0625%;
	}
	.circle.outer.l {
		width: 18.75%;
		height: 18.75%;
	}
	.circle.outer.xl {
		width: 25%;
		height: 25%;
	}
	.circle.outer.xxl{
		width: 28.125%;
		height: 28.125%;
	}
	.circle.outer.gray.l{
		left: 4.90625% !important;
	}
	.circle.outer.green.m {
		left: 80.25% !important;
	}
	.circle.outer.gray.xl{
		left: 3.90625% !important;
	}
	.circle.outer.red.m{
		left: 22.885% !important;
	}
	.circle.outer.brown.m{
		left: 27.5% !important;
	}
	.circle.outer.brown.l{
		left: 39.625% !important;
	}
	.circle.outer.brown.xl{
		left: 58.375% !important;
	}

}