/* == RESOURCES PAGE ONLY == */

.hero:before {content: '';  opacity: 1; position: absolute; inset: 0; background-repeat: no-repeat; background-position: top right; background-size: cover;
    background-image: url('../img/hero/hero-dust-particles-sm.jpg'); }

@media (min-width: 600px) {.hero:before { background-image:url('../img/hero/hero-dust-particles-md.jpg');} }
@media (min-width: 1200px) {
    .hero { min-height: 50vh; }
    .hero:before { background-image: url('../img/hero/hero-dust-particles.jpg'); background-attachment: fixed; }
}

.featured-resource {margin-top:-150px;}
.featured-resource img {max-height: 300px; width: auto; position: relative;}

.resource-filters select {font-size: 1rem; margin:0 1rem 0 0; border-radius: 5px; background-color: #F2F2F2; padding: 2px 8px; border: 1px solid #D9D9D9; }
.resource-filters .btn.btn-sm {padding: 2px 10px !important;}
.resource-filters .btn.btn-sm:hover {color:rgba(0, 0, 0, 0.7) !important;}
.rf-title {font-size: 1rem; text-transform: uppercase;  font-weight: 600; margin-right:1rem;}
.bi-arrow-clockwise::before {font-weight: 900 !important;}

.card figure {position: relative; overflow: hidden; margin: 0; }
.card figure img {object-fit: contain; }
.card figure .overlay {position: absolute; background: rgba(200, 0, 0, 0.8); top: 5px; left: 5px; right: 5px; bottom: 5px; overflow: hidden;  opacity: 0; pointer-events: none; transition: 0.6s; z-index: 1;}
.card figure .zoom {display: block; color: #fff; width: 100%; position: absolute; z-index: 2; top: 0; bottom: 0; right: 0; font-size: 3rem; text-align: center; text-decoration: none; opacity: 0; pointer-events: auto; transition: 0.6s;  transform: translateX(100%); }
.card figure .zoom .bi-play-circle {position: absolute; left: 50%; top: 50%; margin: -19px 0 0 -19px;}

.card figure > img {margin-bottom: 0; width: 100%; height: auto;}
.card figure:hover .overlay {opacity: 1; }
.card figure:hover .zoom {opacity: 1; transform: translateY(0);}

.card .img-wrapper {overflow: hidden;}
.card .img-wrapper img {transition: 0.6s ease; }
.card .img-wrapper img:hover {transform: scale(1.2); transition: 0.6s ease; }

.card .card-body {display:flex; flex-direction: column;}
.card .card-text {font-size:1rem; margin: 8px 0 15px 0;}
.card .card-icon {font-size:2rem; margin-top:auto;}