@keyframes spark {
	0% { box-shadow: rgba(174,207,109, 0); }
	25% { box-shadow: rgba(174,207,109, 1); }
	50% { box-shadow: rgba(174,207,109, 0); }
	75% { box-shadow: rgba(174,207,109, 1); }
	100% { box-shadow: rgba(174,207,109, 0); }
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
	font-family: 'Roboto', sans-serif;
}
#map {
	width: 100%;
	height: 100%;
	background: url(bg_map.jpg) no-repeat center center;
	background-size: cover;
}
#map>svg {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 2;
}
#map>#map-info {
	position: absolute;
	z-index: 3;
}
#nison{fill:#0E4CA1;}
#ditiki{fill:#0A32A0;}
#notios{fill:#333399;}
#ditikos{fill:#10104A;}
#peiraias{fill:#1E50DA;}
#kentrikos{fill:#1F3F80;}
#anatolikis{fill:#0C2363;}
#vorios{fill:#172487;}
#map .area {
	transition: all 1s;
	cursor: pointer;
	transform-origin: 50% 50%;
	stroke: #999;
	stroke-width: 1px;
	stroke-linejoin: round;
	filter:url(#dropshadow2);
}
#map .area.hover{/*transform: scale(1.1);fill:#ffffff*/;filter:url(#dropshadow)}
/*#map #anatolikis.hover {fill: #2a377a;}
#map #nison.hover {fill: #4e76d0;}*/
#map .area image {
	animation: spark 2s ease-out infinite;
}
#nison .label, #ditiki .label, #notios .label, #ditikos .label, #peiraias .label, #kentrikos .label, #anatolikis .label, #vorios .label { visibility: hidden; }
#nison .label.show, #ditiki .label.show, #notios .label.show, #ditikos .label.show, #peiraias .label.show, #kentrikos .label.show, #anatolikis .label.show, #vorios .label.show { visibility: visible; }
#map-info { display: none; padding:1em; overflow: auto; }
#map-info h2 { color: #fff; font-weight: bold; }
#map-info li { list-style: none; margin-top: 1em; font-weight: bold; }
#map-info.inline li {
	display: inline;
}
#map-info.inline li:not(:first-child):before {
	content: ", ";
}