/*********************************************
 * Accordion with Animation
**********************************************/
.vii-accordion-animation__col {width:50%;}
.vii-accordion-animation__anim {padding-right:var(--vii-gap-container);}

/* head */
.vii-accordion-animation__item-head {padding-bottom:var(--vii-spacing-25); cursor:pointer; display:block;}
.vii-accordion-animation__item-head-inner {position:relative; padding-left:30px;}
.vii-accordion-animation__item-order {left:0;}
.vii-accordion-animation__item:not(:last-child) .vii-accordion-animation__item-head {
    border-bottom:2px solid var(--vii-color-neutral-200);
}
.vii-accordion-animation__item:not(:first-child) .vii-accordion-animation__item-head {
    padding-top:var(--vii-spacing-25);
}

/* content */
.vii-accordion-animation__item-content {padding:0 0 var(--vii-spacing-45) 30px;}

/* active */
.vii-accordion-animation__item-head.active {border:none !important;}
.vii-accordion-animation__item-content.active {border-bottom:2px solid #000;}

/* hover */
.vii-accordion-animation__item-title {transition:var(--vii-transition);}
.vii-accordion-animation__item-head:not(.active):hover .vii-accordion-animation__item-title {color:var(--vii-color-primary) !important;}

/*********************************************
 * Accordion with Animation Responsive
**********************************************/
@media only screen and (max-width:1023px) {
    .vii-accordion-animation__col {width:100%;}
    .vii-accordion-animation__anim {padding-right:0; max-width:600px;}
}
@media only screen and (max-width:768px) {
    /*icon*/
    .vii-accordion-animation__item-head-inner {padding-right:20px;}
    .vii-accordion-animation__item-head-inner:after {
        font-family:var(--vii-font-icomoon); content:"\e931";
        color:var(--vii-color-text); font-size:var(--vii-size-14); line-height:1; font-weight:600;
        position:absolute; top:5px; right:0;
        transition:var(--vii-transition);
    }
    .vii-accordion-animation__item-head.active .vii-accordion-animation__item-head-inner:after {
        transform:rotate(180deg);
    }
    .vii-accordion-animation__item-head:not(.active):hover .vii-accordion-animation__item-head-inner:after {
        color:var(--vii-color-primary);
    }
}
@media only screen and (max-width:480px) {
    /*icon*/
    .vii-accordion-animation__item-head-inner:after {font-size:var(--vii-size-12); top:7px;}
}