html {
scroll-behavior: smooth;
}
@media only screen and (min-width: 900px) {
.globe_wrapper{
max-width: 23vh;
margin: 0 auto;
width: 100%;
}
}
.location-globe { color: rgba(0, 0, 0, 0.6);
position: relative;
}
@media only screen and (max-width: 900px) {
.globe_wrapper{
position: relative;
}
.globe_wrapper .location-globe {
width: 216px;
height: 216px; }
.location-globe .callout.callout--country{
display: none !important;
}
}
.location-globe .pin{
fill: #E3001B;
} .location-globe.location-globe-lists__regions > * + * {
margin-top: 2rem;
}
.location-globe .location-globe-lists__region {
}
.location-globe .location-globe-lists__region-name {
font-size: 1.25rem;
font-weight: 700;
color: #e3001b;
cursor: pointer;
padding-right: 30px;
}
.location-globe-lists__region-name:before {
--icon_size: 24px;
right: 5px;
}
.location-globe-lists__region-name.active:before {
transform: rotate(-100grad);
}
.location-globe .location-globe-lists__countries {
margin-top: 1rem;
column-width: 10em;
column-gap: 2rem;
display: none;
}
.location-globe .location-globe-lists__country-name {
cursor: pointer;
margin-bottom: 0.5rem;
}
.location-globe .location-globe-lists__country-name:hover {
color: rgba(0, 0, 0, 0.8);
} .location-globe svg {
display: block;
overflow: visible;
}
.location-globe .water {
fill: #9ec7de;
fill: #ddd;
}
.location-globe .country {
fill: #edf1f9;
stroke: #ffffff;
stroke-width: 1px;
}
.location-globe .country:hover,
.location-globe .country.focused {
fill: #dce2ed;
}
.location-globe .location {
cursor: pointer;
fill: #e3001b;
transition: fill 0.15s;
}
.location-globe .location:hover {
fill: #cc0018;
}
.location-globe .callout {
position: absolute;
top: 0;
left: 0;
padding: 0.5rem 15px 0.5rem 0.75rem;
border-radius: 0.5rem;
background-color: rgba(255, 255, 255, 0.9);
pointer-events: none;
opacity: 0;
transition: opacity 0s;
border: 1px solid #ccc;
min-width: 180px;
}
.location-globe .callout.is-visible {
opacity: 1;
pointer-events: all;
transition-duration: 0.1s;
}
.location-globe .callout.callout--country {
pointer-events: none;
background: none;
border: none;
width: auto;
padding: 0 0 0 5px;
}
.location-globe .callout__location-country {
color: #e3001b;
}
.location-globe .callout__location-site {
cursor: pointer;
display: flex;
align-items: center;
color: currentColor;
text-decoration: none;
}
.location-globe .callout__location-site .chevron {
transition: transform 0.1s;
}
.location-globe .callout__location-site:hover .chevron {
transform: translateX(2px);
}