/*********************************************
 * Navigation Horizontal
**********************************************/
.vii-nav.horizontal {
    padding-top:48px;
    padding-bottom:24px;
    border-bottom:1px solid rgba(0, 0, 0, 0.15);
}
.vii-nav.horizontal > ul {
    position:relative;
    min-height:30px;
    opacity:0;
    transform:translateY(10px);
    transition:var(--vii-transition-slow);
}
.vii-nav.horizontal > ul.show {
    transform:translateY(0);
    opacity:1;
}

/* Item */
.vii-nav.horizontal .vii-nav--list-item {
    padding:0;
    margin-right:18px;
}
.vii-nav.horizontal .vii-nav--list-item__link {
    position:relative;
    opacity:.5;
    padding:4px 18px 4px 10px;
}
.vii-nav.horizontal .vii-nav--list-item__link::before {
    content:"";
    display:block;
    width:8px;height:8px;
    border-radius:50%;
    position:absolute;top:50%;left:0;
    transform:translateY(-50%);
    opacity:0;
    pointer-events:none;
    background-color:var(--vii-color-primary);
    transition:var(--vii-transition);
}
.vii-nav.horizontal .vii-nav--list-item.active .vii-nav--list-item__link,
.vii-nav.horizontal .vii-nav--list-item:not(.active) .vii-nav--list-item__link:is(:hover, :focus) {
    padding-left:18px;
    padding-right:10px;
    opacity:1;
}
.vii-nav.horizontal .vii-nav--list-item.active .vii-nav--list-item__link::before,
.vii-nav.horizontal .vii-nav--list-item__link:is(:hover, :focus)::before {
    opacity:1;
    pointer-events:auto;
}

/* A11y */
.vii-nav--list-item__link:focus-visible {
    outline:2px solid var(--vii-color-primary); border-radius:4px;
}

/* nav dropdown */
.vii-nav--dropdown.horizontal select {
    opacity:0;
    min-height:50px;
}
.vii-nav--dropdown.horizontal .easy-select {
    --es-text-hover:var(--vii-color-text);

    display:block;
    max-width:400px;
    margin-left:auto;margin-right:auto;
    font-weight:700;font-size:14px;
}
.vii-nav--dropdown.horizontal .es-dropdown .es-option:not(.es-active):not(:hover):not(:focus) {
    opacity:.5;
}


/*********************************************
 * Navigation Responsive
**********************************************/
@media only screen and (max-width:1024px) {
    .vii-nav.horizontal {
        padding-top:var(--vii-gap-container);
        padding-bottom:var(--vii-gap-container);
    }
    .vii-nav.horizontal > ul {display:none;}
}