@charset "utf-8";
/* Preserve the original centered four-across Staff Bios layout. */

ul.staffWrapper {width:96%;max-width:1200px;display:flex;flex-wrap:wrap;justify-content:center;padding:0 0 100px;margin:0 auto;text-align:center;list-style-type:none;}
ul.staffWrapper li {max-width:300px;width:25%;min-width:180px;padding:10px;box-sizing:border-box;position:relative;}

/* STAFF PHOTOS - no pointer or hover treatment if there is no bio. */
.staff-thumbnail {position:relative;width:100%;overflow:hidden;cursor:default;}
.staff-thumbnail img {width:100%;height:auto;display:block;transition:transform .3s ease,filter .3s ease;}
.staff-thumbnail.has-bio {cursor:pointer;}
.staff-thumbnail.has-bio::before {content:"READ BIO";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-size:16px;font-weight:bold;opacity:0;transition:opacity .3s ease;z-index:1;}
.staff-thumbnail.has-bio:hover img,
.staff-thumbnail.has-bio:focus-visible img {filter:brightness(50%);transform:scale(1.05);}
.staff-thumbnail.has-bio:hover::before,
.staff-thumbnail.has-bio:focus-visible::before {opacity:1;}
.staff-thumbnail .noImage {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

.staff-name {background:#000;color:#fff;font-size:16px;font-weight:bold;text-transform:uppercase;padding:15px 10px;text-align:center;margin-top:-5px;}
.staff-title {font-size:.9em;font-weight:normal;font-style:italic;}

/* STAFF BIO MODALS - scoped so unrelated website modals are unaffected. */
.staff-bio-modal {display:none;padding:20px;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);justify-content:center;align-items:center;box-sizing:border-box;}
.staff-bio-modal-content {background:#fff;padding:20px;width:50%;max-width:600px;max-height:90vh;overflow-y:auto;overscroll-behavior:contain;border-radius:10px;position:relative;animation:staffBioFadeIn .3s ease-in-out;box-sizing:border-box;}
.staff-bio-modal-content .staff-bio-close {position:absolute;top:10px;right:15px;font-size:24px;font-weight:bold;line-height:1;cursor:pointer;color:#333;background:transparent;border:0;padding:0 3px;}
body.staff-bio-modal-open {overflow:hidden;}
.ineditmode .staff-bio-modal,
.ineditmode .staff-bio-modal-content {display:none !important;visibility:hidden !important;height:0 !important;overflow:hidden !important;}

@media only screen and (max-width:768px) {
    ul.staffWrapper li {padding:4px;}
    .staff-bio-modal-content {width:90%;}
}

/* On touchscreens, only staff with a biography get the Read Bio overlay. */
@media (hover:none) and (pointer:coarse) {
    .staff-thumbnail.has-bio::before {opacity:1;}
    .staff-thumbnail.has-bio img {filter:brightness(50%);}
}

@keyframes staffBioFadeIn {
    from {opacity:0;transform:translateY(-20px);}
    to {opacity:1;transform:translateY(0);}
}