.map-container {
    background: var(--background-primary);
    }
.map-container canvas {
    mix-blend-mode: plus-lighter;
    width: 100%;
    height: calc(100vh - var(--header-height,90px));
    }
ul.countries {
    display: inline-flex;
    white-space: nowrap;
    }
ul.countries .label {
    margin-left: .5rem;
    }
.globe-container {
    position: relative;
    height: 70vh;
    min-height: 70vh;
    overflow: hidden;
    margin-top: -5rem;
    transition: height .5s ease-in-out,min-height .5s ease-in-out;
    }
.globe-container.is-active {
    min-height: 100vh;
    height: 100vh;
    }
.globe-container .globe--intro {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    opacity: 1;
    z-index: 1;
    }
.globe-container.is-active .globe--intro {
    transform: translate(-50%,-10%);
    opacity: 0;
    pointer-event: none;
    }
.countries-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    background: rgba(0,0,0,.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow-x: auto;
    border-top: 1px solid rgba(82,162,255,.3);
    }
.countries-container .countries {
    padding: 2rem;
    max-width: 100%;
    margin: 0;
    }
.theme-dark ul.countries li a:hover,
.theme-dark ul.countries li a:focus {
    background: rgba(0,0,0,.5);
    }
.theme-dark ul.countries li.is-active a {
    background: var(--link-color);
    color: #080932;
    }
.branch-cards-container {
    position: absolute;
    top: 50%;
    width: 100%;
    padding: 60px 0;
    transform: translateY(-50%);
    }
.branch-cards-container .branch-cards {
    display: none;
    max-width: 600px;
    position: relative;
    will-change: opacity,transform;
    }
.branch-cards-container .branch-cards .play {
    position: absolute;
    right: 1rem;
    top: 1rem;
    transform: rotate(45deg);
    }
.branch-cards-container .branch-cards.is-active {
    display: block;
    animation: card-in .25s forwards;
    backdrop-filter: blur(10px);
    }
@keyframes card-in {
from {
    opacity: 0;
    transform: translateY(10%);
    }
to {
    opacity: 1;
    transform: translateY(0);
    }
}

.branch-card {
    background: rgba(0,0,0,.1);
    padding: 60px;
    clip-path: polygon(0% 0%,calc(100% - 16px) 0%,100% 16px,100% 100%,16px 100%,0% calc(100% - 16px));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    }