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

/****************************
 * Extend: Hybrid mobile layout
 * Add class "flickity-extended-hybrid-layout" above the slider
****************************/
/* create the same selector in your code to override these variables */
.flickity-extended-hybrid-layout .flickity-enabled {
    /* total gap between each slide */
    --extend-slide-gap:60px;

    /* width of each slide */
    --extend-slide-width:25%;
}
/* you can change the breakpoint to fit your need, but should not change the calculation inside */
@media only screen and (min-width:320px) {
    /* remove side margins of the slider */
    .flickity-extended-hybrid-layout .flickity-enabled {margin:0 calc(-1 * var(--extend-slide-gap) / 2) !important;}

    /* slides in the middle */
    .flickity-extended-hybrid-layout .flickity-slider > * {
        padding:0 calc(var(--extend-slide-gap) / 2) !important;
        width:calc(var(--extend-slide-width) + var(--extend-slide-gap)) !important;
    }

    /* slides on two edges */
    .flickity-extended-hybrid-layout .flickity-slider > :first-child {
        padding-left:calc(var(--vii-gap-side) + var(--extend-slide-gap) / 2) !important;
    }
    .flickity-extended-hybrid-layout .flickity-slider > :last-child {
        padding-right:calc(var(--vii-gap-side) + var(--extend-slide-gap) / 2) !important;
    }
    .flickity-extended-hybrid-layout .flickity-enabled:not(.navigation-disabled) .flickity-slider > :first-child,
    .flickity-extended-hybrid-layout .flickity-enabled:not(.navigation-disabled) .flickity-slider > :last-child {
        width:calc(var(--vii-gap-side) + var(--extend-slide-width) + var(--extend-slide-gap)) !important;
    }

    /*no slider*/
    .flickity-extended-hybrid-layout .navigation-disabled .flickity-slider > :first-child {padding-left:calc(var(--extend-slide-gap) / 2) !important;}
    .flickity-extended-hybrid-layout .navigation-disabled .flickity-slider > :last-child {padding-right:calc(var(--extend-slide-gap) / 2) !important;}
}


/****************************
 * Flickity arrows
****************************/
.flickity-button {
    --flkt-btn-size:32px;
    --flkt-icon-size:10px;
    --flkt-position:20px;
    --flkt-bg:var(--vii-color-primary);
    --flkt-bg-hover:var(--vii-color-on-primary);

    position:static; transform:translateY(0);
}

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

/* button */
.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(--vii-color-on-primary);
    opacity:1;
    border:2px solid #000; background:#000;
}
.flickity-prev-next-button.previous + .flickity-prev-next-button.next {margin-left:4px;}

/* button > 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:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
    font-weight:700;
}
.flickity-prev-next-button.previous:before {content:"\e92e";}
.flickity-prev-next-button.next:before {content:"\e92f";}

/* button > hover */
.flickity-prev-next-button:not(:disabled):hover {
    background:var(--vii-color-primary); border-color:var(--vii-color-primary);
    box-shadow:none;
}

/* button > disabled */
.flickity-button:disabled {pointer-events:none; opacity:.5 !important;}

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

/* button > center*/
.flickity-button-center .flickity-button {
    position:absolute; bottom:auto; top:50%; transform:translateY(-50%);
}
.flickity-button-center .flickity-prev-next-button.previous {left:var(--flkt-position);}
.flickity-button-center .flickity-prev-next-button.next {right:var(--flkt-position);}

/* button > white color*/
.txt_color_white .flickity-button {background:transparent; border-color:#fff; color:#fff;}
.txt_color_white .flickity-button:not(:disabled):hover {
    background:#000; border-color:#000; color:#fff;
}


/****************************************
 * Flickity arrows - triangle-button
****************************************/
.flickity-triangle-button .flickity-button {
    --flkt-position:calc((var(--ls-width) + var(--ls-spacing-item) - var(--vii-container)) / 2);
    --flkt-btn-size:30px;
    z-index:3;
    border-radius:0; border:1px solid #e5e5e5;
    background:transparent; color:#e5e5e5;
}
.flickity-triangle-button .flickity-prev-next-button.previous:before {content:"\e92a";}
.flickity-triangle-button .flickity-prev-next-button.next:before {content:"\e92b";}
.flickity-triangle-button.flickity-button:hover {
    background:var(--vii-color-primary); color:#fff; border-color:var(--vii-color-primary);
}

/****************************
 * 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-30);}
body .flickity-page-dots li {padding:0;}
body .flickity-page-dots .dot {opacity:1; margin:0 4px; background:rgba(17, 16, 16, .11); transition:var(--vii-transition);}
body .flickity-page-dots .dot:hover {background:rgba(17, 16, 16, .3);}
body .flickity-page-dots .dot.is-selected {background:var(--vii-color-primary);}

body .txt_color_white .flickity-page-dots .dot {background-color:#fff;}
body .txt_color_white .flickity-page-dots .dot:hover {background:var(--vii-color-neutral-200);}
body .txt_color_white .flickity-page-dots .dot.is-selected {background:var(--vii-color-primary);}

/****************************
 * Flickity Lazyload Icon
****************************/
[data-flickity-bg-lazyload]:after {
    content:""; position:absolute; top:0; left:0; z-index:99;
    width:100%; height:100%;
    background:rgba(255, 255, 255, 0.4) var(--vii-loading-image) center/30px no-repeat;
    transition:var(--vii-transition);
}


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