.presence-regions {
display: grid;
flex-wrap: wrap;
width: 100%;
grid-template-columns: repeat(6, 1fr);
}
.presence-region {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: "Gotham";
padding: 8px 12px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: transparent;
color: #fff;
font: inherit;
font-size: 13px;
cursor: pointer;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease;
}
.presence-region:hover,
.presence-region.is-active {
background: #ff0024;
border-color: #ff0024;
color: #fff;
} .presence-countries {
margin-top: 12px;
}
.presence-country-group {
display: none;
}
.presence-country-group.is-active {
display: grid;
grid-template-columns: repeat(5, 1fr);
column-gap: 20px;
row-gap: 3px;
}
.presence-country {
padding: 0;
border: 0;
background: transparent;
color: #fff;
font: inherit;
font-size: 12px;
line-height: 1.25;
cursor: pointer;
transition: color 0.2s ease;
font-family: "Gotham";
}
.presence-country:hover,
.presence-country.is-active {
color: #ff0024;
} #presence-map {
position: relative;
width: 100%;
overflow: hidden;
} .region-map {
display: none;
width: 100%;
} .region-map.is-active {
display: block;
} .region-map svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
} .region-map [data-country] {
fill: #bababa;
stroke: #231f20;
stroke-width: 0.75;
vector-effect: non-scaling-stroke;
transition:
fill 0.2s ease,
opacity 0.2s ease;
} .region-map [data-country].is-active-country {
fill: #a9a9a9;
} .presence-map-dot {
fill: #ff0024;
stroke: rgba(255, 0, 36, 0.22);
vector-effect: non-scaling-stroke;
pointer-events: none;
animation: presence-dot-in 0.2s ease;
}
@keyframes presence-dot-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
} @media (max-width: 767px) {
.presence-region {
padding: 7px 9px;
font-size: 11px;
}
.presence-country-group.is-active {
column-gap: 14px;
row-gap: 5px;
grid-template-columns: repeat(4, 1fr);
}
.presence-country {
font-size: 11px;
}
} .presence-country-group[data-region="caribbean"].is-active {
display: grid;
grid-template-columns: repeat(3, max-content);
column-gap: 20px;
row-gap: 3px;
} .presence-country-group[data-region="oceania"].is-active {
display: grid;
grid-template-columns: repeat(2, max-content);
column-gap: 20px;
row-gap: 3px;
}
.presence-country-group[data-region="caribbean"] .presence-country,
.presence-country-group[data-region="oceania"] .presence-country {
white-space: nowrap;
}
@media (max-width: 576px) {
.presence-regions {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-snap-type: x proximity;
}
.presence-regions::-webkit-scrollbar {
display: none;
}
.presence-region {
flex: 0 0 auto;
white-space: nowrap;
scroll-snap-align: start;
}
}
.presence-map-wrapper [data-country] {
transition:
fill 0.25s ease,
opacity 0.25s ease;
}
.presence-map-wrapper svg {
width: 100%;
}   .presence-map-wrapper
[data-country].is-active-country {
fill: #928a8c;
} .presence-map-dot {
fill: #ff0024;
stroke: rgba(255, 0, 36, 0.22);
pointer-events: none;
}