/*******************************************
* Animated Map
*******************************************/
.vii-animated-map {
    min-height:var(--vii-100vh);
    background:radial-gradient(141% 237% at 100% 20%, rgba(231, 230, 230, 0) 0%, #e7e6e6 100%);
}

/* content */
.vii-animated-map__content {
    position:sticky; top:0; left:0;
    min-height:var(--vii-100vh); padding:var(--vii-spacing-48) var(--vii-gap-side);
}
.vii-animated-map__content-inner {
    max-width:533px; transition:all 1.2s ease
}

/* lottie */
.vii-animated-map__json {pointer-events:none;}
.vii-animated-map__json-animation {
    position:sticky; top:0; left:0; height:var(--vii-100vh);
    overflow:hidden; pointer-events:none;
}
.vii-animated-map__json-svg {
    position:absolute; top:0; right:0; transform:scale(1.18) translate(14%, -5%);
    width:100%;

}

/* animation */
.vii-animated-map:not(.animated) .vii-animated-map__content-inner {opacity:0; transform:translateY(15vh);}

/* admin bar */
@media only screen and (min-width:1025px) {
    html.has-admin-bar .vii-animated-map__content {padding-top:calc(var(--vii-spacing-48) + 32px)}
}


/*******************************************
* Animated Map - Responsive
*******************************************/
@media only screen and (max-width:1560px) {
    .vii-animated-map__json-svg {transform:scale(1.3) translate(13%, 3%);}
}
@media only screen and (max-width:1180px) {
    .vii-animated-map__content-inner {max-width:50%;}
    .vii-animated-map__json-svg {transform:scale(1.3) translate(16%, 10%);}
}
@media only screen and (max-width:1024px) {
    .vii-animated-map, .vii-animated-map__content {min-height:50vh}
    .vii-animated-map__json-animation {height:100%;}
    .vii-animated-map__json-svg {transform:scale(1.3) translate(16%, 0);}

    .vii-animated-map:not(.animated) .vii-animated-map__content-inner {transform:translateY(10%)}
}
@media only screen and (max-width:920px) {
    .vii-animated-map {display:flex; flex-direction:column-reverse;}
    .vii-animated-map__content {position:relative; min-height:auto;}
    .vii-animated-map__content-inner {
        max-width:100%;
    }
    .vii-animated-map__json {position:static;}
    .vii-animated-map__json-animation {position:static; height:auto;}
    .vii-animated-map__json-svg {
        top:0; right:0; left:50%; transform:translateX(-52%);
        width:165%; min-width:1280px; margin-top:-4%;
        position:relative; height:auto;
    }
}
@media only screen and (max-width:480px) {
    .vii-animated-map__json-svg {
        min-width:unset; width:300%;
        transform:translateX(-57.5%); margin-top:-20%;
    }
}