/******************************************
* Milestones
******************************************/
.vii-milestones {
    --width-content:calc(var(--vii-gap-side) + 0.34 * var(--vii-container));
    --width-item:315px;
    --height-item:calc(var(--width-item) * 415 / 315);
    --gap-item:16px;
}

/* column */
.vii-milestones__col.left {width:var(--width-content); padding-right:24px; padding-left:var(--vii-gap-side);}
.vii-milestones__col.right {width:calc(100% - var(--width-content));}

/* years */
.vii-milestones__titles:first-child {padding-top:0;}
.vii-milestones__titles-item {
    --vii-color-heading:rgba(0,0,0,.3);
    padding:8px 0; cursor:pointer; border-bottom:1px solid rgba(164,167,177,.5);
}
.vii-milestones__titles-item:first-child {padding-top:0;}
.vii-milestones__titles-item:nth-last-child(2) {padding-bottom:0; border-bottom:none;}
.vii-milestones__titles-item:hover, .vii-milestones__titles-item.active {--vii-color-heading:var(--vii-color-blue)}


/* CLS */
.vii-milestones__items-inner, .vii-milestones__item, .vii-milestones__item-inner {min-height:var(--height-item)}
.vii-milestones:not(.easy-tab-accordion-enabled) .vii-milestones__items:not(:first-child) {display:none;}

/* slider > item */
.vii-milestones__item {width:calc(var(--width-item) + var(--gap-item)); padding-right:var(--gap-item)}
.vii-milestones__item-inner {gap:var(--vii-gap-container); padding:28px 24px 16px;}
.vii-milestones__item:not(:hover) .vii-milestones__item-image-background {transform:scale(0.8); opacity:0;}
.vii-milestones__item-image-background:before {
    background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
    opacity: 0.4;
}
.vii-milestones__item:not(.txt_color_white) .vii-milestones__item-image-background:before {
    background:#fff;
}

/* slider > navigation */
.vii-milestones__dots {gap:16px; align-items:center;}
.vii-milestones__dots .flickity-page-dots {gap:8px; order:2; width:auto; padding-top:0;}
.vii-milestones__dots .flickity-page-dots .flickity-page-dot {
    width: 8px; height: 8px; background: var(--vii-color-white);
    border-radius: 50%; border: 1px solid var(--vii-color-primary); box-shadow:none;
    transition: var(--vii-transition); margin:0;
}
.vii-milestones__dots .flickity-page-dots .flickity-page-dot:hover,
.vii-milestones__dots .flickity-page-dots .flickity-page-dot:focus,
.vii-milestones__dots .flickity-page-dots .flickity-page-dot.is-selected {background:var(--vii-color-primary)}
.vii-milestones__dots .flickity-button {
    --flkt-btn-size:40px;
    --flkt-icon-size:22px;
    --flkt-border-color:rgba(0, 0, 0, 0);
}
.vii-milestones__dots .flickity-button.next {order:3;}
@media only screen and (min-width:1561px) {
    .vii-milestones__dots .flickity-page-dots .flickity-page-dot:nth-last-child(2),
    .vii-milestones__dots .flickity-page-dots .flickity-page-dot:nth-last-child(3) {display:none;}
}

/* hide arrow/dots */
.vii-milestones__items-inner.is-cannot-slide + .vii-milestones__dots {display:none;}

/* animation */
.vii-milestones__items {
    --duration-delay:0ms;
    --number-item:1;
}
.vii-milestones__items-inner {
    transform:translateX(calc(0.2 * var(--number-item) * var(--width-item)));
    transition:transform 1s ease-out;
}
.vii-milestones__item-inner, .vii-milestones__dots {
    opacity:0; transform:translateX(5%);
    transition: all 0.5s ease var(--duration-delay);
}
.vii-milestones__dots {--duration-delay:1.25s; }
.vii-milestones.animated .vii-milestones__items.animated .vii-milestones__items-inner {transform:translatex(0);}
.vii-milestones.animated .vii-milestones__items.animated .vii-milestones__item-inner,
.vii-milestones.animated .vii-milestones__items.animated .vii-milestones__dots {opacity:1; transform:translateX(0)}


/******************************************
* Milestones - Responsive
******************************************/
@media only screen and (max-width:1560px) and (min-width:1024px) {
    .vii-milestones__dots .flickity-page-dots .flickity-page-dot:nth-last-child(2) {display:none;}
}
@media only screen and (max-width:1023px) {
    .vii-milestones {flex-direction:column;}

    /* column */
    .vii-milestones__col.left {width:100%; padding:0; margin-bottom:36px; position:relative; z-index:5}
    .vii-milestones__col.right {width:100%;}

    /* fade layer */
    .vii-milestones__col.left:before {
        content:"";
        width:60px; height:70px; background:linear-gradient(to left, #fff 0%, rgba(0,0,0,0) 100%);
        position:absolute; right:0; bottom:0;
        z-index:1; pointer-events:none; opacity:0;
    }
    .title-full-container .vii-milestones__col.left:before {opacity:1;}

    /* heading */
    .vii-milestones__heading {
        padding:0 var(--vii-gap-side);
    }

    /* year */
    .vii-milestones__titles {padding:24px var(--vii-gap-side) 0;}
    .vii-milestones__titles-item {display:none;}
    .vii-milestones__titles-mobile {display:flex;}
    .vii-milestones__titles-mobile .easy-select {min-width:250px;}
    .vii-milestones__titles-mobile .easy-select .es-current {
        --es-radius:0px;
        --es-height:40px;
        --es-text:rgba(0,0,0,.5);
        --es-text-hover:var(--vii-color-blue);
        border:none; border-bottom:var(--es-border);
    }
    .vii-milestones__titles-mobile .easy-select .es-current .es-option {padding:0; font-size:24px;}
    .vii-milestones__titles-mobile .easy-select:not(.es-disabled):hover .es-current {
        border:none; border-bottom:var(--es-border-hover);
    }
    .vii-milestones__titles-mobile .easy-select .es-current .es-option:after {right:0; font-size:14px;}

    /* item */
    .vii-milestones__item {padding-left:var(--gap-item);}
    .vii-milestones__item:not(:last-child) {padding-right:0}
    .vii-milestones__item:first-child {width:calc(var(--width-item) + var(--vii-gap-side)); padding-left:var(--vii-gap-side);}
    .vii-milestones__item:last-child {
        width:calc(var(--width-item) + var(--vii-gap-side) + var(--gap-item));
        padding-right:var(--vii-gap-side);
    }
    .vii-milestones__item-inner {padding:20px var(--vii-gap-container) 16px;}
    .vii-milestones__titles-item, .vii-milestones__item-year {--vii-size-h3:32px;}

    /* hide nav */
    .vii-milestones__dots {display:none;}

    /* animation */
    .vii-milestones__items-inner {
        transform:translateX(calc(0.1 * var(--number-item) * var(--width-item)));
    }
}
@media only screen and (max-width:480px) {
    /* year */
    .vii-milestones__titles-mobile .easy-select {width:100%;}
}