﻿
.leaders { text-align: center; padding-top: 102px; }
    .leaders > h2 { margin: 0; color: white; font-size: 31px; }
    .leaders > .people { display: flex; flex-wrap: wrap; justify-content: center; margin: 94px auto 0; max-width: 1200px; }
        .leaders > .people > .person { width: 300px; margin: 0 48px 75px; }
            .leaders > .people > .person > .img { width: 294px; height: 294px; margin: 0 auto; border-radius: 300px; background-position: center; background-size: cover; border: solid 5px; padding: 4px; background-clip: content-box; box-sizing: border-box; }
            .leaders > .people > .person > .name { color: white; font-size: 24px; font-weight: bold; margin-top: 9px; }
            .leaders > .people > .person > .title { font-size: 18px; font-weight: 600; margin-top: 8px; }

#leadership { background: #004D69; }
    #leadership > .people > .person > .title { color: #FF4E00; }
    #leadership > .people > .person > .img { border-color: #F05125; }

#staff > h2 { color: black; }
#staff > .people > .person > .title { color: #00BBDC; }
#staff > .people > .person > .name { color: #000; }
#staff > .people > .person > .img { border-color: #2EC0DF; }

@media(max-width:1023px) {
    .leaders { padding-top: 62px; }
        .leaders > h2 { font-size: 21px; }
        .leaders > .people { margin-top: 42px; }
            .leaders > .people > .person { width: 180px; margin: 0px 25px 58px; }
                .leaders > .people > .person > .img { width: 138px; height: 138px; border-width: 2px; padding: 2px; }
                .leaders > .people > .person > .name { font-size: 15px; margin-top: 5px; }
                .leaders > .people > .person > .title { font-size: 12px; margin-top: 5px; }
}

@media(max-width:767px) {
    .leaders { padding-top: 44px; padding-bottom: 50px; }
        .leaders > h2 { font-size: 20px; }
        .leaders > .people > .person { margin-bottom: 30px; }
}
