html, body { height: 100%; margin: 0; padding: 0; font-family: sans-serif; font-size: 14px; }
#map { height: 100%; }
#menu { position: absolute; /*width: 150px; height: 50px;*/ font-variant: small-caps; top: 15px; right: 15px; border-radius: 10px; box-shadow: 3px 3px 5px 1px rgba(170, 170, 170, 0.5); z-index: 500; background-color: white; padding: 1em; }
.marker { width: 35px; height: 48px; cursor: pointer; background-repeat: no-repeat; }
.marker.gold { background-image: url('pin-gold.svg'); }
.marker.silver { background-image: url('pin-silver.svg'); }
.marker.bronze { background-image: url('pin-bronze.svg'); }
.marker.closed { opacity: 0.3; }
.mapboxgl-popup { max-width: 500px; }
.mapboxgl-popup-content { }
.loader {
	height: 100px;
	position: fixed;
	text-align: center;
	top: 45%;
	left: 50%;
	z-index: 9999;
}