/*********************************************
 * Circular Key Figures
**********************************************/
/* Desktop */
@media only screen and (min-width:1024px) {
    .vii-circular-key-figures {--height:100vh;}
    .vii-circular-key-figures__inner {position:relative; height:var(--height);}

    /* heading */
    .vii-circular-key-figures__heading {max-width:480px; padding-top:100px; position:relative; z-index:2;}

    /* content */
    .vii-circular-key-figures__content {
        position:absolute; top:50%; right:0; z-index:2;
        width:100%; max-width:440px;
    }

    /* figures */
    .vii-circular-key-figures__main {position:absolute; top:0; left:0; right:0; bottom:0;}
    .vii-circular-key-figures__holder.nth-1 {top:49%; left:0; --size:222px;}
    .vii-circular-key-figures__holder.nth-2 {top:68%; left:18%; --size:218px;}
    .vii-circular-key-figures__holder.nth-3 {top:36%; left:28%; --size:280px;}
    .vii-circular-key-figures__holder.nth-4 {top:7%; left:48%; --size:258px;}
    .vii-circular-key-figures__holder.nth-5 {top:19%; left:74%; --size:222px;}
    .vii-circular-key-figures__holder {position:absolute;}
}


/* Desktop responsive to 1024 */
@media only screen and (max-width:1180px) and (min-width:1024px), (max-height:800px) and (min-width:1024px) {
    .vii-circular-key-figures {--height:730px;}

    /* heading */
    .vii-circular-key-figures__heading {padding-top:60px;}
    .vii-circular-key-figures__item {--vii-size-h1:32px; --vii-size-18:17px;}

    /* figures */
    .vii-circular-key-figures__holder.nth-1 {top:49%; left:0; --size:180px;}
    .vii-circular-key-figures__holder.nth-2 {top:70%; left:15%; --size:175px;}
    .vii-circular-key-figures__holder.nth-3 {top:38%; left:26%; --size:240px;}
    .vii-circular-key-figures__holder.nth-4 {top:7%; left:50%; --size:210px;}
    .vii-circular-key-figures__holder.nth-5 {top:20%; left:73%; --size:180px;}
}

/*********************************************
 * Circular Key Figures Mobile
**********************************************/
.vii-circular-key-figures {--size:195px;}
.vii-circular-key-figures__item {
    width:var(--size); height:var(--size); padding:0 30px;
    border-radius:50%; position:relative;
    background:linear-gradient(63.23deg, #204ea5 -29.6%, #eb4969 101.75%);
    box-shadow:3px 10px 25px rgba(43, 13, 19, 0.3);
}
.vii-circular-key-figures__item:before {
    pointer-events:none;
    transform:scale(1.1); opacity:.2;
    border-radius:50%; border:2px dashed var(--vii-color-light-blue);
}

@media only screen and (max-width:1180px) {
    .vii-circular-key-figures__item {--vii-size-h1:30px;}
}
@media only screen and (max-width:1023px) {
    .vii-circular-key-figures {padding:var(--vii-spacing-default) 0;}
    .vii-circular-key-figures__main {padding:var(--vii-spacing-45) 0; margin:-15px;}
    .vii-circular-key-figures__holder {width:33.33%; padding:15px;}
    .vii-circular-key-figures__item {margin:0 auto;}
}
@media only screen and (max-width:767px) {
    .vii-circular-key-figures {--size:150px;}
    .vii-circular-key-figures__holder {width:50%; max-width:200px;}

    .vii-circular-key-figures__item {--vii-size-h1:27px; --vii-size-18:15px; padding:0 20px;}
}

/*********************************************
 * Circular Key Figures: Sticky for scrub animation
**********************************************/
.vii-circular-key-figures {min-height:130vh;}
.vii-circular-key-figures__container {position:sticky; top:0;}