/* 16:9 */
@keyframes biSlideFade {
    0% {
        opacity: 0;
    }

    3% {
        opacity: 1;
    }

    26% {
        opacity: 1;
    }

    29% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes rotating

/* Safari and Chrome */
    {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.bi-rotating {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
}

@media only screen {
    .staff .stafflist {
        margin-bottom: 1rem !important;
    }
    
    .stafflist div {
        overflow: inherit;
    }

    .staff .stafflist .staff-item div {
        display: block;
    }
    .staff .staff-item {
        padding: 0.5rem;
        border-radius: 2px;
        border: solid thin #ddd;
        background-color: white;
        margin: 1rem;
        height: 100%;
    }

    .staff .staff-item h3.staff-name {
        margin: 0.5rem 0;
    }

    .staff .staff-item h3.staff-name .jobtitle {
        display: block;
        font-style: italic;
        font-size: 1rem;
        line-height: 1;
        color: #080808;
    }

    .staff .staff-item figure p {
        margin: 0;
    }

    .staff .staff-bio {
        display: block;
    }

    .staff .staff-1 .staff-item {
        border-left: none;
        border-radius: none;
        border-bottom: 0;
        padding-left: 0;
        padding-right: 0;
        display: block;
        overflow: auto;
    }

    .staff .staff-1 .staff-item figure {
        max-width: 300px;
        width: 300px;
        display: block;
        max-height: none;
    }
}

@media only screen and (min-width: 38em) {
    .staff .staff-1 .staff-item figure {
        float: left;
        margin-right: 1rem;
    }
}

@media only screen {
    .staff .staff-1 .staff-item h3 {
        display: inline-block;
    }

    .staff .staff-3 .staff-container {
        justify-content: space-between;
    }

    .staff .stafflist.staff-accordion h3.staff-name {
        padding: 0.25rem 1.5rem 0.25rem 0.25rem;
        cursor: pointer;
        color: #0055b8;
    }

    .staff .stafflist.staff-accordion h3.staff-name:before {
        content: '\f067';
        font-family: 'fontawesome';
        vertical-align: middle;
        display: inline-block;
        color: darkgray;
        margin-left: .75rem;
        float: right;
    }

    .staff .stafflist.staff-accordion h3.staff-name:hover {
        background: gainsboro;
        color: #e11383;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }

    .staff .stafflist.staff-accordion h3.staff-name:hover:before {
        color: #e11383;
        transition: all 0.3s ease-in-out;
    }

    .staff .stafflist.staff-accordion h3.staff-name.active {
        background: gainsboro;
        color: #e11383;
        transition: all 0.3s ease-in-out;
    }

    .staff .stafflist.staff-accordion h3.staff-name.active:before {
        color: #e11383;
        transform: rotate(45deg);
        transition: all 0.3s ease-in-out;
    }

    .staff .stafflist.staff-accordion .staff-bio {
        display: none;
        background: rgba(255, 255, 255, 0.3);
        padding: 1.5rem;
    }

    .staff .stafflist.staff-accordion .staff-bio p:first-child {
        margin-top: 0;
    }

    .staff .stafflist.staff-accordion .staff-bio p:last-child {
        margin-bottom: 0;
    }

    .staff .stafflist.staff-excerpts .staff-item {
        position: relative;
        padding: 1em 1em 0.5em 1em;
    }

    .staff .stafflist.staff-excerpts .staff-item figure {
        position: relative;
        z-index: 2;
        display: block;
        float: none;
        width: 100%;
        margin: 0;
        max-width: 100%;
        height: 250px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 1em;
    }
    .staff .stafflist.staff-excerpts .staff-item figure p {
        display: block;
    }
    
    .staff .stafflist.staff-excerpts .staff-item figure img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .staff .stafflist.staff-excerpts .staff-bio {
        overflow: hidden;
    }

    .staff .stafflist.staff-excerpts a.morelink {
        text-decoration: none;
        outline: none;
    }

    .staff .stafflist.staff-excerpts .morecontent span {
        display: none;
    }

    .staff .stafflist.staff-excerpts .morecontent {
        display: block;
        text-align: right;
        padding: 0.75rem 1rem 0.25rem 1rem;
        background: white;
        background: linear-gradient(0deg, white 50%, rgba(255, 255, 255, 0) 100%);
        min-height: 1.5rem;
        z-index: 1;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
    }

    .staff .rounded .staff-item figure {
        padding: 0.5rem;
        width: 300px !important;
        height: 300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .staff .rounded .staff-item figure img {
        border-radius: 100%;
        overflow: hidden;
        border: solid 0.25rem #f1f1f4;
    }
}

.staff .staff-item figure {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 300px;
    min-height: 300px;
}

.staff .staff-item figure img {
    /*max-height: 250px;*/
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: center;
}

.stafflist .bi-two-up figure,
.stafflist .bi-three-up figure,
.stafflist .bi-four-up figure,
.stafflist .bi-two-up figure p,
.stafflist .bi-three-up figure p,
.stafflist .bi-four-up figure p {
    float: none;
}

@media only screen and (max-width: 38em) {
    .staff .stafflist .staff-item .bi-video-container {
        padding: 0 !important;
        height: 200px;
        margin-top: 1rem;
        margin-bottom: 0;
    }
}

@media only screen and (min-width: 38em) {
    .staff .staff-item figure p {
        text-align: center;
    }

    .staff .staff-item .bi-video-container {
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 50%;
        margin-top: 1.5rem;
        margin-bottom: 0;
    }

    .staff .bi-two-up {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .staff .bi-two-up .staff-item {
        flex-basis: calc(50% - 2rem);
        width: calc(50% - 2rem);
        max-width: calc(50% - 2rem);
        -ms-max-width: calc(49.5% - 2rem);
        height: auto;
    }

    .staff .bi-three-up {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .staff .bi-three-up .staff-item {
        flex-basis: calc(50% - 2rem);
        width: calc(50% - 2rem);
        max-width: calc(50% - 2rem);
        -ms-max-width: calc(50% - 2rem);
        height: auto;
    }

    .staff .bi-four-up {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .staff .bi-four-up .staff-item {
        flex-basis: calc(50% - 2rem);
        width: calc(50% - 2rem);
        max-width: calc(50% - 2rem);
        -ms-max-width: calc(49.5% - 2rem);
        height: auto;
    }
}

@media only screen and (min-width: 68em) {
    .staff .bi-four-up {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: row;
    }
    
    .staff .bi-three-up .staff-item {
        flex-basis: calc(33% - 2rem);
        width: calc(33% - 2rem);
        max-width: calc(33% - 2rem);
        -ms-max-width: calc(33% - 2rem);
        height: auto;
    }

    .staff .bi-four-up .staff-item {
        flex-basis: calc(25% - 2rem);
        width: calc(25% - 2rem);
        max-width: calc(25% - 2rem);
        -ms-max-width: calc(24% -2rem);
    }
}