/****************************
 * Flickity fade
 * Use CSS important to override Flickity's JS transition
****************************/
.flickity-enabled.is-fade:not(.custom) .flickity-slider > * {
    pointer-events:none; z-index:0;
    opacity:0 !important;
    transition:opacity .45s ease;
}
.flickity-enabled.is-fade:not(.custom) .flickity-slider > .is-selected {
    pointer-events:auto; z-index:1;
    opacity:1 !important;
}

/****************************
 * Flickity arrows
****************************/
.flickity-button {
    --flkt-btn-size:47px;
    --flkt-icon-size:16px;
    --flkt-position:20px;
    --flkt-opacity:1;
    --flkt-bg:transparent;
    --flkt-bg-hover:var(--vii-color-primary);
    --flkt-color:var(--vii-color-primary);
    --flkt-color-hover:var(--vii-color-on-secondary);
    --flkt-border-w:2px;
    --flkt-border-style:solid;
    --flkt-border-color:var(--vii-color-light-gray-6);
    --flkt-border-color-hover:var(--vii-color-primary);
}
/* button white */
.txt_color_white .flickity-button {
    --flkt-bg:var(--vii-color-white);
    --flkt-bg-hover:var(--vii-color-primary);
    --flkt-color:var(--vii-color-primary);
    --flkt-color-hover:var(--vii-color-on-primary);
}

/* button with bg-tertiary around */
.bg-tertiary .flickity-button {
    --flkt-bg:transparent;
    --flkt-bg-hover:var(--vii-color-primary);
    --flkt-color:var(--vii-color-primary);
    --flkt-color-hover:var(--vii-color-on-primary);
    --flkt-border-w:0;
    --flkt-border-color:transparent;
}

/* button > freeze (no navigation) */
.flickity-button-freeze {display:none;}

/* button */
.flickity-button:disabled,
.flickity-button:disabled:hover,
.flickity-prev-next-button,
.flickity-prev-next-button:focus {
    width:var(--flkt-btn-size); height:var(--flkt-btn-size);
    background:var(--flkt-bg); color:var(--flkt-color);
    opacity:var(--flkt-opacity); box-shadow:none; display:flex; align-items:center; justify-content:center;
    border:var(--flkt-border-w) var(--flkt-border-style) var(--flkt-border-color);
}


/* button > position */
.flickity-prev-next-button.previous {left:var(--flkt-position);}
.flickity-prev-next-button.next {right:var(--flkt-position);}
.flickity-rtl .flickity-prev-next-button.previous {right:var(--flkt-position);}
.flickity-rtl .flickity-prev-next-button.next {left:var(--flkt-position);}

/* button > icon */
.flickity-prev-next-button svg {display:none;}
.flickity-prev-next-button:before {
    font-family:var(--vii-font-icomoon); font-size:var(--flkt-icon-size);
    position:relative; color:inherit;
}
.flickity-prev-next-button.previous:before {content:"\e926";}
.flickity-prev-next-button.next:before {content:"\e927";}

/* button > hover */
.flickity-prev-next-button:focus-visible {
    border-radius:50%;outline:none;
}
.flickity-prev-next-button:hover,
.flickity-prev-next-button:focus-visible,
.flickity-prev-next-button:focus {
    background:var(--flkt-bg-hover); color:var(--flkt-color-hover);
    border-color:var(--flkt-border-color-hover);
}

/* button > disabled */
.flickity-button:disabled {pointer-events:auto; --flkt-opacity:0.5;}

/* button > responsive */
@media only screen and (max-width:1280px) {
    .flickity-button {
        --flkt-btn-size:40px;
        --flkt-position:10px;
    }
}

/****************************
 * Position relative button
****************************/
.flickity-button-relative {display:flex; gap:var(--vii-spacing-10);}
.flickity-button-relative .flickity-button {position:relative;}
.flickity-button-relative .flickity-prev-next-button {transform:none; top:auto;}
.flickity-button-relative .flickity-prev-next-button.previous {left:auto;}
.flickity-button-relative .flickity-prev-next-button.next {right:auto;}

/* with dots */
.flickity-button-relative.has-dots {align-items:center; gap:16px;}
.flickity-button-relative.has-dots .flickity-button {
    --flkt-btn-size:40px;
    --flkt-icon-size:22px;
    --flkt-border-color:rgba(0, 0, 0, 0);
}
.flickity-button-relative.has-dots .flickity-dots-custom {gap:8px;}
.flickity-button-relative.has-dots .flickity-dots-custom .dot {
    width:8px; height:8px; background:var(--vii-color-white);
    border-radius:50%; border:1px solid var(--vii-color-primary); cursor:pointer;
    transition:var(--vii-transition);
}
.flickity-button-relative.has-dots .flickity-dots-custom .dot:hover,
.flickity-button-relative.has-dots .flickity-dots-custom .dot:focus,
.flickity-button-relative.has-dots .flickity-dots-custom .dot.is-selected {background:var(--vii-color-primary)}

/* With navigation */
.flickity_slider_nav.flickity-button-relative {gap:2px;}
.flickity_slider_nav .flickity-button {--flkt-btn-size:30px;--flkt-border-w:0;--flkt-icon-size:16px;}
.flickity-navigation-custom {width:calc(100% - 85px);height:1px;margin-right:auto;position:relative;
    background-color:var(--vii-color-light-gray-7);overflow:hidden;}
.flickity-navigation-custom__line {
    /* --line-width and --progress are from js */
    width:var(--line-width, 100%);left:calc((100% - var(--line-width, 100%)) * var(--progress, 0));
    position:absolute;display:inline-block;top:0;bottom:0;background-color:var(--vii-color-primary);
}

/* only arrow */
.flickity-button-relative.only-arrow {gap:4px;}
.flickity-button-relative.only-arrow .flickity-button {
    --flkt-border-w:0;--flkt-icon-size:24px;--flkt-btn-size:45px;
}

/****************************
 * Button visible on hover (this class should be added to the div.flickity-enabled)
****************************/
.vc_desktop .flickity-button-visible-hover:not(:hover) .flickity-button {--flkt-opacity:0; visibility:hidden;}
.vc_desktop .flickity-button-visible-hover:not(:hover) .flickity-prev-next-button.previous {margin-left:20px;}
.vc_desktop .flickity-button-visible-hover:not(:hover) .flickity-prev-next-button.next {margin-right:20px;}

/****************************
 * Adaptive height transition
****************************/
.flickity-viewport {transition:height .3s ease;}

/****************************
 * Flickity Dots
****************************/
body .flickity-page-dots {position:relative; margin:0; bottom:auto; padding-top:var(--vii-spacing-24);}
body .flickity-page-dots li {padding:0;}
body .flickity-page-dots .flickity-page-dot {
    opacity:1; margin:0 4px;
    width:8px; height:8px; background:#fff; border:1px solid var(--vii-color-primary);
    transition:var(--vii-transition)
}
body .flickity-page-dots .flickity-page-dot:hover,
body .flickity-page-dots .flickity-page-dot.is-selected {background:var(--vii-color-primary);}

/****************************
 * Flickity > Avoid layout shift
****************************/
.avoid-cls-slider:not(.flickity-enabled) > *:not(:first-child) {
    position:absolute; top:0; left:0;
    opacity:0; visibility:hidden;
}