.interactive-map-container { position: relative; overflow: visible; width: 100%; margin: 0 auto; }
.interactive-map { width: 100%; height: auto; display: block; }
.interactive-map svg { width: 100%; height: auto; display: block; }

.interactive-map { color: #CEE9F5; }

@media (min-width: 1024px) {
  .interactive-map { margin-top: -7em; }
}

.interactive-map .country, .interactive-map .country * { fill: currentColor !important; transition: fill 150ms ease, opacity 150ms ease; }

.interactive-map .country.office-country { fill: url(#regionGradientB) !important; opacity: 0.5;}
.interactive-map .country.partner-country { fill: url(#regionGradientG) !important; opacity: 0.5; }
.interactive-map .country.office-country *,
.interactive-map .country.partner-country * { fill: inherit !important; }

.interactive-map .hovered { opacity: 0.9; }
.interactive-map .active { stroke: #1d4ed8; stroke-width: 1.5; }

.interactive-map .country.office-country.active { stroke: #0a9fea; stroke-width: 1.5; }
.interactive-map .country.partner-country.active { stroke: #3addb7; stroke-width: 1.5; }

.map-marker { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; opacity: 0; transition: opacity 150ms ease; z-index: 12; }
.map-marker svg { display: block; }
.map-marker.visible { opacity: 1; }

.location-card { position: absolute; transform: translate(-50%, 8px); color: #111; border-radius: 6px; box-shadow: none; padding: 10px 14px; min-width: 140px; display: none; text-align: center; z-index: 13; overflow: visible;

  border: 2px solid transparent;
  border-top-color: #00abec;
  background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(to bottom, #00abec, #0085d2);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}
.location-card.active { display: block; }
.location-card-title { font-weight: 600; font-size: 16px; }

.location-card-arrow { position: absolute; top: 0; left: 0; transform: translate(-50%, -100%); width: 20px; height: 12px; display: none; pointer-events: none; z-index: 14; }
.location-card-arrow.active { display: block; }
.location-card-arrow svg { display: block; }