/******************************************
* Work list
******************************************/
.vii-work-list {--wl-height:60px; --wl-width:134px;}
.vii-work-list__form {position:relative; z-index:2;}

/* form input */
.vii-work-list__search {
    width:calc(100% - var(--wl-width)); padding-right:15px;
    position:relative; z-index:2;
}
.vii-work-list__search input {
    width:100%; height:var(--wl-height); padding:5px 24px;
    background-color:var(--vii-color-neutral-100);
    border:2px solid var(--vii-color-neutral-200);
    transition:var(--vii-transition);
    -webkit-appearance:none !important; -webkit-border-radius:0 !important;
}
.vii-work-list__search input:hover,
.vii-work-list__search input:focus {border-color:var(--vii-color-primary);}

/* form button */
.vii-work-list__filter {width:var(--wl-width);}
.vii-work-list__filter-button {
    width:100%; height:var(--wl-height); position:relative; z-index:2;
    border:2px solid #000; background-color:#fff; cursor:pointer;
    transition:var(--vii-transition);
}
.vii-work-list__filter-button:hover {background-color:#000; color:#fff;}
.vii-work-list__filter-text {color:inherit !important;}
.vii-work-list__filter-button i {margin-right:8px; font-size:1.4em;}
.vii-work-list__filter-button i.icon-close {font-size:1em;}

/* hover box */
.vii-blog-filter__hover-box {
    position:absolute; top:calc(100% - 2px); left:0; right:0;
    background-color:#fff;
    border:2px solid var(--vii-color-neutral-200);
    transition:var(--vii-transition);
}
.filter-list {position:relative;}
.filter-list:before, .filter-list:after {
    content:""; position:absolute; top:0; bottom:0;
    width:1px; background-color:var(--vii-color-neutral-200);
}
.filter-list:before {left:33.33%;}
.filter-list:after {left:66.66%;}
.filter-list-col.text {width:33.33%; padding:20px 24px;}
.filter-list-col.items {width:66.66%; padding:20px 0;}

/* hover box > items */
.filter-item {width:50%; margin-bottom:10px; padding:0 24px;}
.filter-item-clickable {cursor:pointer; transition:var(--vii-transition);}
.filter-item.active .filter-item-clickable,
.filter-item-clickable:hover {color:var(--vii-color-primary);}

/* hover box > show/hide  .vii-work-list__form:not(:hover)  */
html:not(.filter-open) .vii-blog-filter__hover-box {
    opacity:0; visibility:hidden; transform:translateY(-10px);
}
html.filter-open .vii-work-list__form .closing.hidden {display:block;}
html.filter-open .vii-work-list__form .opening {display:none;}

/* not found */
.not-found {width:100%; padding-top:var(--vii-spacing-default);}

/* selected */
.vii-work-list__selected {cursor:pointer; transition:var(--vii-transition); color:var(--vii-color-primary);}
.vii-work-list__selected i {font-size:12px; margin-right:10px;}
.vii-work-list__selected span {color:inherit !important;}
.vii-work-list__selected:hover {color:#000;}

/* load more */
.vii-work-list__load-more {padding:var(--vii-spacing-90) 0 var(--vii-spacing-30); text-align:center;}
.vii-work-list__load-more span {color:var(--vii-color-neutral-400) !important;}
.vii-work-list__load-more span i {display:block; padding-top:5px;}

/******************************************
* Work list - Responsive
******************************************/
@media only screen and (max-width:1024px) {
    .vii-work-list {--wl-height:50px;}
}
@media only screen and (max-width:767px) {
    /* hover box */
    .filter-list:before, .filter-list:after {display:none;}
    .filter-list-col.text {width:100%; padding:20px 20px 0;}
    .filter-list-col.items {width:100%; padding:20px 0;}
    .filter-item {padding:0 20px;}
}
@media only screen and (max-width:480px) {
    .vii-work-list {--wl-height:45px; --wl-width:110px;}
    .vii-work-list__search input {padding:5px 15px;}

    /* hover box */
    .filter-item {width:100%;}
}