﻿#main-article { align-items: flex-start; background: #00BBDC; color: white; }
    #main-article > .img { background-size: contain; background-repeat: no-repeat; border-radius: 0; height: 120px; }
    #main-article > .t > h2 { color: #14313B }

.people-boxes-w > h2 { text-align: center; margin: 0 0 58px; }
.people-boxes { display: flex; flex-wrap: wrap; width: 1120px; margin: 0 auto; }
    .people-boxes .person-box { cursor: pointer; width: 250px; height: 250px; margin: 18px 15px; position: relative; background: orange; }
        .people-boxes .person-box > .img { background-position: center; background-size: cover; display: block; height: 100%; }
        .people-boxes .person-box .person-info { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 95%; left: 2.5%; text-align: center; }
            .people-boxes .person-box .person-info .person-name { color: #4ec6df; font-size: 15px; text-transform: uppercase; }
            .people-boxes .person-box .person-info .person-title { color: white; font-size: 12px; text-transform: uppercase; }
        .people-boxes .person-box .person-info-box { opacity: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(6, 43, 49, 0.8); -webkit-transition: opacity .3s; -moz-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; display: flex; justify-content: center; align-items: center; color: white; font-size: 30px; font-weight: bold; text-transform: uppercase; text-align: center; padding: 20px; box-sizing: border-box; }
    .people-boxes .person-title { color: #FF4200; font-weight: bold; padding-bottom: 10px; font-size: 17px; text-transform: uppercase; }
    .people-boxes .more-person { padding-bottom: 15px; font-size: 17px; }
    .people-boxes .about-person { background: #f5f5f5; margin-bottom: 20px; padding: 40px; margin-left: 15px; margin-right: 15px; position: relative; }
        .people-boxes .about-person > .person-name { margin: 0; font-size: 21px; text-transform: uppercase; }
        .people-boxes .about-person > .social { position: absolute; right: 22px; top: 26px; }
            .people-boxes .about-person > .social > a { text-decoration: none; font-size: 24px; }
            .people-boxes .about-person > .social > .twitter { color: #1DA1F2; }
            .people-boxes .about-person > .social > .linkedin { color: #007BB6; margin-left: 4px; }

    .people-boxes .triangle { width: 0; height: 0; border-style: solid; border-width: 0 30px 30px 30px; border-color: transparent transparent #f5f5f5 transparent; position: relative; margin-left: -30px; }
        .people-boxes .triangle.pos-1-2 { left: 24%; }
        .people-boxes .triangle.pos-2-2 { left: 75%; }
        .people-boxes .triangle.pos-1-4 { left: 13%; }
        .people-boxes .triangle.pos-2-4 { left: 37.5%; }
        .people-boxes .triangle.pos-3-4 { left: 63%; }
        .people-boxes .triangle.pos-4-4 { left: 87%; }
        .people-boxes .triangle.pos-1-3 { left: 17.5%; }
        .people-boxes .triangle.pos-2-3 { left: 50%; }
        .people-boxes .triangle.pos-3-3 { left: 82.5%; }

    .people-boxes .click-info { display: none; width: 100%; }
    .people-boxes.open > .person-box:not(.open) { opacity: 0.5; }

#chapters { background: #F7F7F7; padding: 105px 40px 140px; }
    #chapters > .people-boxes { width: 960px; }
        #chapters > .people-boxes .person-box { width: 292px; height: 292px; margin: 14px; }
            #chapters > .people-boxes .person-box:hover .person-info-box { opacity: 0.8; }
        #chapters > .people-boxes .click-info > .about-person { background: white; }
        #chapters > .people-boxes .triangle { border-bottom-color: white; }

#members { padding: 105px 0 140px; }
#registration { background: #F2F2F2; padding: 80px 0 20px; }
    #registration .Lbl1 h3 { color: #FF4200; text-align: center; margin: 0; }
    #registration > #stepflow { max-width: 600px; }

.contribute-5-w { display: flex; align-items: center; }
    .contribute-5-w > h3 { margin: 0 0 0 20px; font-size: 30px; }

@media(max-width:1439px) {
    .people-boxes { width: 712px; }
        .people-boxes .person-box { width: 158px; height: 158px; margin: 10px; }
}

@media(max-width:1023px) {
    #chapters { padding: 70px 20px; }
        #chapters > .people-boxes { width: 558px; }
            #chapters > .people-boxes .person-box { width: 170px; height: 170px; margin: 8px; }
    #members { padding: 70px 20px; }
    #main-article > .img { width: 236px; }
}

@media(max-width:767px) {

    #chapters { padding: 52px 0; }
        #chapters > .people-boxes { width: 294px; }
            #chapters > .people-boxes .person-box { width: 135px; height: 135px; margin: 6px; }

    .people-boxes-w > h2 { margin-bottom: 42px; }
    .people-boxes { width: 284px; }
        .people-boxes .person-box { width: 130px; height: 130px; margin: 6px; }
            .people-boxes .person-box .person-info-box { font-size: 20px; }
        .people-boxes .about-person { padding: 20px; }
    #members { padding: 50px 0; }
}
