/* .filter */
        
.filter { margin-bottom: 2rem;}
.filter button .ico { margin-right: 1rem;}
.filter button h3 { letter-spacing: 3px;}

.filter .filter-list { display: none; width:100%; background: #00618a; margin: .5rem 0 0;}
.filter .filter-list ul { justify-content: flex-start; flex-wrap: wrap; text-align: center; width: 100%; margin: 0 auto;}
.filter .filter-list ul li a { position: relative; z-index: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; overflow: hidden; color:#fff; font-family:'apercuregular', sans-serif; font-size: .85rem; font-weight:300; line-height: 1rem; text-align: center; text-transform: uppercase; background: #00618a; border-top: 4px solid #00618a; padding: 1.5rem; transition: all 0.5s ease; }
.filter .filter-list ul li a:before{ content: ''; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 0; background-color: #fff; transition: height .5s ease;}

@media (hover:hover){
    .filter .filter-list ul li a { height:90px;}
    .filter .filter-list ul li a:hover { color:#00618a; border-top: 4px solid #f4ce01; }
    .filter .filter-list ul li a:hover:before { height: 100%;}
}

@media(max-width: 1023px){
    .filter .filter-list ul li a { height: auto; padding: 1rem; border: none;}
}
@media(max-width: 767px){
    .filter .filter-list ul li { width: 100%;}
    .filter .filter-list ul li a { font-size: 1rem;}
}