/*********************************************
 * Detail Navigation
**********************************************/
.vii-detail-nav {position:relative;}
.vii-detail-nav:before {
    content:""; position:absolute; top:0;
    left:calc(-1 * var(--vii-gap-side));
    right:calc(-1 * var(--vii-gap-side));
    border-top:1px solid var(--vii-color-neutral-200);
}

/* list */
.vii-detail-nav ul {list-style:none; margin:0;}
.vii-detail-nav ul li {width:33.33%; padding:0;}
@media only screen and (min-width:768px) {
    .vii-detail-nav ul li {border-left:1px solid var(--vii-color-neutral-200);}
    .vii-detail-nav ul li:last-child {border-right:1px solid var(--vii-color-neutral-200);}
}

/* arrow */
.vii-detail-nav ul li a {
    min-height:120px; padding:20px 30px;
    color:var(--vii-color-text);
}
.vii-detail-nav ul li a:hover,
.vii-detail-nav ul li a:focus {text-decoration:none; color:var(--vii-color-primary);}
.vii-detail-nav ul li a i {font-size:2.2em; transition:transform .3s ease;}
.vii-detail-nav ul li a span {color:inherit !important;}

.vii-detail-nav ul li a:hover i {transform:translateX(4px);}

/* view all */
.vii-detail-nav ul li.view-all a {background-color:var(--vii-color-dark-orange);}
.vii-detail-nav ul li.view-all a i {font-size:1.5em;}
.vii-detail-nav ul li.view-all a:hover,
.vii-detail-nav ul li.view-all a:focus {color:#fff;}
.vii-detail-nav ul li.view-all a:hover i {transform:rotate(90deg);}

/*********************************************
 * Detail Navigation Responsive
**********************************************/
@media only screen and (max-width:1024px) {
    .vii-detail-nav ul li a {min-height:100px; padding:15px 20px;}
}
@media only screen and (max-width:767px) {
    .vii-detail-nav ul li a i {font-size:1.9em;}
    .vii-detail-nav ul li.view-all a i {font-size:1.4em;}

    /* has view all */
    .vii-detail-nav:before {border-color:var(--vii-color-primary);}
    .vii-detail-nav.has-view-all ul li.arrow {width:50%;}
    .vii-detail-nav.has-view-all ul li.arrow.prev {padding-right:15px; border-right:1px solid var(--vii-color-primary);}
    .vii-detail-nav.has-view-all ul li.arrow.next {padding-left:15px;}
    .vii-detail-nav.has-view-all ul li.arrow a {color:var(--vii-color-primary);}
    .vii-detail-nav.has-view-all ul li.arrow a span {font-size:var(--vii-size-h5) !important;}


    .vii-detail-nav.has-view-all ul li.view-all {order:4; width:100%;}
    .vii-detail-nav.has-view-all ul li.view-all a {
        width:auto; padding:15px 20px;
        margin-left:calc(-1 * var(--vii-gap-side));
        margin-right:calc(-1 * var(--vii-gap-side));
        flex-direction:row-reverse; justify-content:space-between; align-items:center;
    }

    .vii-detail-nav.has-view-all ul li a {min-height:70px; padding:10px 0;}

    /* element */
    .vii-detail-nav.element {margin-left:calc(-1 * var(--vii-gap-side)); margin-right:calc(-1 * var(--vii-gap-side));}
    .vii-detail-nav.element:before,
    .vii-detail-nav.element ul li:not(.mobile) {display:none;}
    .vii-detail-nav.element ul li.mobile {width:100%;}
    .vii-detail-nav.element ul li.mobile a {
        padding:0 20px; background-color:var(--vii-color-dark-orange); color:#fff;
        text-transform:uppercase;
    }
}
@media only screen and (max-width:480px) {
    .vii-detail-nav ul li a {min-height:70px; padding:10px 20px;}

    /* has view all */
    .vii-detail-nav.has-view-all ul li.arrow a {padding:0;}
}