#event-map {
	position: relative;

	font-weight: bold;
	font-size: 10px;
}

#event-map img {
	width: 100%;
}
		
#event-map a {
	color: white;
}
		
#event-map .marker .area-title {
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
	white-space: nowrap;
	
	position: absolute;
	top: 3px;
}

#event-map .marker .area-title.left {
	right: calc(100% + 3px);
}


#event-map .marker .area-title.right {
	left: calc(100% + 3px);
}
		
#event-map .marker .area-title,
#event-map .marker .image {
	height: 20px;
	line-height: 20px;
	
	vertical-align: middle;
	
	display: inline-block;
}

#event-map .marker {
	position: absolute;

	z-index: 1;
}

#event-map .marker .image {
	border-radius: 100%;

	width: 20px;

	background-image: url('../images/map-point.png');
	background-size: contain;
	background-repeat: no-repeat;
}

#event-map .marker .image img {
	max-width: 100%;
}

#event-map .marker:hover .image {
	-webkit-box-shadow: 0px 0px 10px 0px #ffc600;
	-moz-box-shadow: 0px 0px 10px 0px #ffc600;
	box-shadow: 0px 0px 10px 0px #ffc600;
}