/****************************
 * Flippable Circles
****************************/
.vii-flippable-circles {
    --item-width:clamp(200px, 316px, calc(var(--vii-container)/4 - 9px));
    --title-height:25px;
    --description-height:100px;
}
.vii-flippable-circles__item {opacity:0.6;}


/* layer */
.vii-flippable-circles__item-layer {
    box-shadow:-4px 5px 20px #ed2e6e, 2px -3px 20px #ff703e;
}
.vii-flippable-circles__item-layer:before, .vii-flippable-circles__item-layer:after {
    content:'';
    position:absolute; transition:var(--vii-transition-slow); border-radius:50%;
}
.vii-flippable-circles__item-layer:before {
    inset: 0; z-index: 1;
    background: linear-gradient(35deg, var(--vii-color-pink) 0%, rgba(22, 29, 55, .4) 50%, var(--vii-color-orange) 100%);
}
.vii-flippable-circles__item-layer:after {
    inset:3px; z-index:2;
    background:var(--vii-color-dark-blue);
}

/* hover */
html.vc_desktop .vii-flippable-circles__item:hover,
html.vc_mobile .vii-flippable-circles__item.active {z-index:99 !important; opacity:1}
html.vc_desktop .vii-flippable-circles__item:hover .vii-flippable-circles__item-layer,
html.vc_mobile .vii-flippable-circles__item.active .vii-flippable-circles__item-layer {
    transform:scale(1.2);
    box-shadow:-4px 5px 18px #ed2e6e, 2px -2px 18px #ff703e;
}
html.vc_desktop .vii-flippable-circles__item:hover .vii-flippable-circles__item-layer:before,
html.vc_mobile .vii-flippable-circles__item.active .vii-flippable-circles__item-layer:before {
    inset:-4px; filter:blur(2px);
}
html.vc_desktop .vii-flippable-circles__item:not(:hover) .description,
html.vc_mobile .vii-flippable-circles__item:not(.active) .description {opacity:0; transform:translateY(20px);}
html.vc_desktop .vii-flippable-circles__item:not(:hover) .title,
html.vc_mobile .vii-flippable-circles__item:not(.active) .title {
    transform:translateY(calc((var(--title-height) + var(--description-height))/2 - 50%));
}

/* loaded */
.vii-flippable-circles:not(.loaded) .title {opacity:0;}


/*********************************************
 * Flippable Circles Responsive
**********************************************/
@media only screen and (max-width:1280px) {
    .vii-flippable-circles {
        --item-width:clamp(300px, 350px, calc(var(--vii-container)/2 - 36px));
        max-width:910px; padding:0 30px; margin-left:auto; margin-right:auto;
    }
}
@media only screen and (max-width:767px) {
    .vii-flippable-circles {
        --item-width:clamp(250px, calc(var(--vii-container) - 60px), 400px);

        padding:0;
    }
    .vii-flippable-circles__items {gap:2px;}
    html.vc_desktop .vii-flippable-circles__item:hover .vii-flippable-circles__item-layer,
    html.vc_mobile .vii-flippable-circles__item.active .vii-flippable-circles__item-layer {
        transform:scale(1.1);
    }
}