/*********************************************
 * Content with Animation
**********************************************/
.vii-expertise-anim, .vii-expertise-anim__inner {position:relative;}
.vii-expertise-anim:before {
    content:""; position:absolute; top:0; bottom:0;
    left:calc(-1 * var(--vii-gap-side));
    right:calc(-1 * var(--vii-gap-side));
    background-color:var(--vii-color-neutral-100);
}

/* item */
.vii-expertise-anim__item-col.content {width:40%; padding-right:var(--vii-gap-container);}
.vii-expertise-anim__item-col.anim {width:60%;}
.vii-expertise-anim__item-inner {width:100%; padding:var(--vii-spacing-80) 0;}
.vii-expertise-anim__item-content {max-width:470px;}

/* nav */
.vii-expertise-anim__nav {position:absolute; bottom:60px; left:0; z-index:2; display:none;}
.vii-expertise-anim__nav ul {margin:0; list-style:none; position:relative;}
.vii-expertise-anim__nav ul li {padding:0 0 0 12px; position:relative;}
.vii-expertise-anim__nav ul li button {color:var(--vii-color-neutral-600);}
.vii-expertise-anim__nav ul li.active button,
.vii-expertise-anim__nav ul li button:hover {color:var(--vii-color-primary); text-decoration:none;}
.vii-expertise-anim__nav ul li button i {margin-right:10px;}

/* nav track */
.vii-expertise-anim__nav ul:before, .vii-expertise-anim__nav > i {
    content:""; position:absolute; top:0; bottom:0; left:0;
    width:2px; background-color:var(--vii-color-neutral-200); border-radius:2px;
}
.vii-expertise-anim__nav > i {
    bottom:auto; z-index:2;
    background-color:var(--vii-color-primary);
}

/*********************************************
 * Content with Animation - Desktop animation
**********************************************/
@media only screen and (min-width:1024px) {
    .vii-expertise-anim {
        --count:1;
        --height:110vh; /* total duration of timeline */
        height:calc(var(--count) * var(--height));
    }

    /* sticky */
    .vii-expertise-anim__inner {position:sticky; height:100vh; top:0;}
    .vii-expertise-anim__item {height:100vh; position:absolute; top:0; left:0; right:0;}
    .vii-expertise-anim__item.active {z-index:2;}

    /* default state of animation */
    .vii-expertise-anim__item-content-anim {opacity:0; transform:translateY(50px);}
    .vii-expertise-anim__item-col.anim {opacity:0;}

    /* nav */
    .vii-expertise-anim__nav {display:block;}
}

/*********************************************
 * Content with Animation Responsive
**********************************************/
@media only screen and (max-width:1023px) {
    .vii-expertise-anim {padding-top:var(--vii-spacing-80);}
    .vii-expertise-anim__item-col.content {width:100%; padding-right:0; order:2;}
    .vii-expertise-anim__item-col.anim {width:100%; order:1; max-width:470px; margin:0 auto;}
    .vii-expertise-anim__item-inner {padding:0;}
    .vii-expertise-anim__item-content {margin:0 auto;}

    .vii-expertise-anim__item:not(:first-child) {padding-top:0;}
    .vii-expertise-anim__item:not(:first-child) .vii-expertise-anim__item-col.anim {
        border-top:1px solid var(--vii-color-neutral-200);
        padding-top:var(--vii-spacing-default);
    }

    .vii-expertise-anim__nav {display:none;}

    .vii-expertise-anim__heading.hidden {display:block; position:relative;}
}