/* @group Filters
------------------------------------ */
[data-comp="dropdownFilters"] .filters-head span,
[data-comp="dropdownFilters"] .filters li { text-transform: uppercase; color: var(--white); font: 400 1.5em / 1.2em var(--nobel-font); letter-spacing: .15em; }

@media only screen
and (min-width : 961px) {
    [data-comp="dropdownFilters"] { width: fit-content; margin: 0 auto; }
    [data-comp="dropdownFilters"] .filters { text-align: center; margin: 0 auto 7rem; }
    [data-comp="dropdownFilters"] .filters li { display: inline-block; background-color: rgba(0,0,0,.35); padding: .3rem 2.1rem .5rem; top: 3rem; left: 2rem; font-size: 2em; line-height: 1.4em; letter-spacing: 0; cursor: pointer; transition: all .3s ease; }
    [data-comp="dropdownFilters"] .filters li:not(:last-of-type) { margin-right: 4rem; }
    [data-comp="dropdownFilters"] .filters li.active,
    [data-comp="dropdownFilters"] .filters li:hover { background-color: var(--med-green); }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    [data-comp="dropdownFilters"] { background-color: var(--filters-green); padding: 0 1.7rem 0 2.3rem; position: relative; }
    [data-comp="dropdownFilters"] .filters-head { padding: .8rem 0; }
    [data-comp="dropdownFilters"] .filters-head { position: relative; }
    [data-comp="dropdownFilters"] .filters-head i { color: var(--white); font-size: 1.2rem; position: absolute; top: 1.2rem; right: 0; transition: scale .3s ease; }
    [data-comp="dropdownFilters"] .filters { background-color: var(--filters-green); padding: 0 1.7rem 1rem 2.3rem;  position: absolute; top: 100%; left: 0; width: 100%; z-index: 4; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
    [data-comp="dropdownFilters"] .filters li { text-align: left; display: block; width: 100%; padding: .75rem 0; }
    [data-comp="dropdownFilters"] .filters li.active { color: var(--green-2); }
    [data-comp="dropdownFilters"] .filters li:not(:last-of-type) { border-bottom: .1rem solid var(--green-2); }
    [data-comp="dropdownFilters"] .filters li:first-of-type { border-top: .1rem solid var(--white); }

    [data-comp="dropdownFilters"].opened .filters { opacity: 1; pointer-events: all; }
    [data-comp="dropdownFilters"].opened .filters-head i { scale: -1; }
}

/* @end */
