.map--section {
	background-position: center top;
	background-size: cover;
}

.map--container {
	padding: 0;
	max-width: none;
}

/* Background option: olive fill + green-lines pattern, framing the map. */
.map--section.olive-pattern-mod {
	background-color: var(--color-footer-green);
	background-image: url(../../images/green-lines-pattern.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.map--section.olive-pattern-mod .map--container {
	padding: 50px var(--theme-content-padding);
}

@media (min-width: 992px) {
	.map--section.olive-pattern-mod .map--container {
		padding: 100px var(--theme-content-padding);
		max-width: var(--theme-content-width);
		margin: 0 auto;
	}
}

.map--map {
	border: 2px solid var(--theme-dk-brown);
	height: 400px;
}

.with-poi-mod .map--map {
	margin-top: -140px;
}

@media (min-width: 992px) {
	.map--map {
		height: 45vw;
	}
}

.main-marker-pin {
	display: block;
	width: 50px;
	height: auto;
	/* SVG has only a viewBox (no width/height); size it here so the marker is visible.
	   Pin points right, so anchor the right-middle tip at the location
	   (AdvancedMarkerElement anchors content bottom-center by default). */
	transform: translate(-50%, 50%);
}

.map--controls {
	border-top: 1px solid var(--theme-orange);
	border-bottom: 1px solid var(--theme-orange);
	margin-bottom: 100px;
}

.map--controls-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
}

.map--controls-item {
	padding: 15px;
}

.map--controls-item:last-child {
	border-right: none;
}

.map--controls-item.active {
	color: var(--theme-orange);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.29' height='10.09' viewBox='0 0 14.29 10.09'%3E%3Cline x1='.83' y1='.56' x2='.83' y2='9.53' style='fill: none; stroke: %23e75301; stroke-miterlimit: 10; stroke-width: 1.67px;'/%3E%3Cline x1='.83' y1='5.04' x2='13.17' y2='5.04' style='fill: none; stroke: %23e75301; stroke-miterlimit: 10; stroke-width: 1.37px;'/%3E%3Cpolyline points='8.68 .56 13.17 5.04 8.68 9.53' style='fill: none; stroke: %23e75301; stroke-miterlimit: 10; stroke-width: 1.58px;'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left center;
}

@media (min-width: 1120px) {
	.map--controls-item {
		padding: 12px 30px 10px;
		border-right: 1px solid var(--theme-orange);
	}
	
	.map--controls-item.active {
		background-position: 12px center;
	}
	
	.map--controls-item:last-child {
		border-right: none;
	}
}