/* Page Modules - Resource Center */

section.resource-center { z-index: 2!important; }

#filter-form-heading { scroll-margin-top: 180px; max-width: 1100px; }
.headline-row .filtered-cat-names { color: var(--primary); }
.filter-container { display: flex; gap: 2rem; align-items: center; margin-top: 1.25rem; position: relative; z-index: 1; flex-wrap: wrap; }
.filter-container > div { margin-bottom: 0.5rem; }
.filter-container .type-filter-container,
.filter-container .topic-filter-container { flex: 1 0 300px; width: 100%; }
.filter-container .filter-label { text-transform: uppercase; letter-spacing: 0.056rem; font-size: 0.8rem; display: block; margin-bottom: 0.5rem; color: var(--primary); line-height: 1; margin-top: -1.2rem; }
.filter-container .search-filter-container { flex: 1 0 300px; position: relative; align-self: flex-end; width: 100%; }
.filter-container .search-filter-container:after { content: "\e9eb"; font-family: var(--icon-family); position: absolute; right: 1rem; color: var(--light-gray); top: 0; bottom: 2px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; pointer-events: none; transition: var(--global-transition); }
.filter-container .search-filter-container:focus-within:after { color: var(--primary); }
.filter-container .search-filter { padding: 1.25rem!important; padding-right: 3rem!important; border: 1px solid var(--form-border-color); border-radius: 0.833rem; margin-bottom: 0!important; }
.filter-container .submit-filter-container { flex: 0 0 110px; display: flex; justify-content: flex-end; }
.filter-container .submit-filter-container .button { margin-bottom: 0; }
.clear-filter-container { display: flex; justify-content: flex-start; margin-top: 1rem; }
.clear-filter-container button { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05rem; color: var(--white); background-color: var(--primary); transition: var(--global-transition); padding: 0.5rem 0.7rem; cursor: pointer; border-radius: 2px; }
.clear-filter-container button:hover { background-color: var(--secondary); }

.selectric-type-filter .selectric,
.selectric-topic-filter .selectric { border-width: 1px; }
.selectric-type-filter .selectric-items span.check-box,
.selectric-topic-filter .selectric-items span.check-box { height: 1.25rem; width: 1.25rem; border-radius: 4px; display: inline-flex; border: 1px solid var(--light-gray); background: var(--white); margin-right: 1rem; transition: var(--global-transition); justify-content: center; align-items: center; }
.selectric-type-filter .selectric-items span.check-box .icon,
.selectric-topic-filter .selectric-items span.check-box .icon { color: var(--white); }
.selectric-type-filter .selectric-items li,
.selectric-topic-filter .selectric-items li { display: flex; align-items: center; padding: 0.5rem 1rem!important; }
.selectric-type-filter .selectric-items li.selected span.check-box,
.selectric-topic-filter .selectric-items li.selected span.check-box { border-color: var(--primary); background: var(--primary); }

@media (max-width: 1100px) {
    .filter-container { flex-wrap: wrap; }
    .filter-container .type-filter-container,
    .filter-container .topic-filter-container { flex: 1 1 300px; }
    .filter-container .search-filter-container { flex: 1 1 250px; }
}
@media (max-width: 430px) {
    .filter-container .submit-filter-container { justify-content: flex-start; }
}


#resources-posts { margin-top: 2.5rem; }
#resources-posts .resources-section:first-of-type { margin-top: -1.5rem; }
#resources-posts .resources-section { padding-top: 3.5rem; padding-bottom: 2.5rem; }
#resources-posts .resources-section:nth-child(even) { background-color: var(--off-white); border-top: 1px solid var(--lightest-gray); border-bottom: 1px solid var(--lightest-gray); }
#resources-posts .heading-row h2 { margin-bottom: 1.5rem; }
#resources-posts .button-row { display: flex; justify-content: flex-end; }
#resources-posts .button-row .button { margin-bottom: 0; }
#resources-posts .row-cards { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#resources-posts .row-cards .column { /*padding-left: 1rem; padding-right: 1rem;*/ margin-bottom: 2rem; }
#resources-posts .row-cards .card { padding: 0; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; /*box-shadow: 2px 2px 8px 2px rgba(41, 51, 63, 0.1);*/ background-color: #FFF; border-radius: 0.833rem; border: solid 1px var(--gray); overflow: hidden; font-weight: 400; }
#resources-posts .row-cards .card .image { margin: 0; /*height: 14rem;*/ overflow: hidden; flex-shrink: 0; position: relative; padding-bottom: 55%; }
#resources-posts .row-cards .card .image img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1!important; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
#resources-posts .row-cards .card figure.responsive:before { padding-bottom: 56.6%; }
#resources-posts .row-cards .card:hover .image img { opacity: 0.9!important; }

#resources-posts .row-cards .card .card-body { padding: 2.222rem 2.222rem 1.66rem 2rem; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
#resources-posts .row-cards .card .card-body .content-block__label { line-height: 1.5; margin-bottom: 0.15rem; }
#resources-posts .row-cards .card .card-body h3 { margin-bottom: 0.2rem; }
#resources-posts .row-cards .card .card-body .card-date { font-size: 0.8rem; color: var(--darker-gray); margin-bottom: 1.4rem; }
#resources-posts .row-cards .card .card-body .label { margin-bottom: 0.4rem; }
#resources-posts .row-cards .card .card-body .overview { margin-bottom: 1.6rem; }
#resources-posts .row-cards .card .card-body .button { margin-bottom: 0; -ms-flex-item-align: start; align-self: flex-start; margin-top: auto; }
#resources-posts .row-cards .card:hover .button { color: var(--hover-color); }
#resources-posts .row-cards .card:hover .button:after { color: var(--hover-color); animation: sideside .5s ease 2; }

#resources-posts .spinner { padding-bottom: 8rem !important; }

@media (max-width: 800px) {
    #resources-posts .row-cards .card .card-body { padding: 1.75rem 1.5rem 1.5rem 1.5rem; }
}

@media (max-width: 500px) {
    #resources-posts .row-cards .column { margin-bottom: 1rem; }
}