﻿h2, #part-2 h2, #bullets-w h2 { color: #F05125; }

#banner-1 { height: 23.5vw; background: url(/res/img/donors/diversity-bg.jpg) center/cover; position: relative; }
    #banner-1 > .caption { background: rgba(0,0,0,.5); border: solid 1px #D6D6D6; }
        #banner-1 > .caption > .t { width: 100%; }

#dire-need { padding: 108px 60px; background: #F4F4F4; }
    #dire-need > .imgs { display: flex; justify-content: center; }
        #dire-need > .imgs > img { border-radius: 100%; min-width: 0; }
            #dire-need > .imgs > img:not(:last-child) { margin-right: 78px; }
    #dire-need > h2 { text-align: center; margin-top: 58px; }
    #dire-need > .c { max-width: 1160px; margin: 0 auto; }

#percent { padding: 130px 0 105px; text-align: center; border-bottom: solid 1px #888B8D; max-width: 1428px; margin: 0 auto; }
    #percent > h3 { text-align: center; margin: 0 0 75px; }
    #percent > img { max-width: 90%; }

#videos-w { text-align: center; padding: 0 60px 125px; }
    #videos-w > h2 { margin: 70px 0 65px; }
    #videos-w > .videos > .video { width: 436px; }
        #videos-w > .videos > .video:not(:last-child) { margin-right: 60px; }
        #videos-w > .videos > .video > .name { font-size: 24px; font-weight: bold; margin-top: 32px; }


#bullets-w { background: url(/res/img/donors/diversity-bg.jpg) center/cover; padding: 130px 40px 100px; }
    #bullets-w > img { margin-right: 60px; max-width: 100%; }
    #bullets-w > .t { color: white; }
        #bullets-w > .t > .bullets { margin-top: 50px; margin-left: 35px; }
            #bullets-w > .t > .bullets > .bullet > .h { font-size: 24px; font-weight: 600; position: relative; cursor: pointer; }
                #bullets-w > .t > .bullets > .bullet > .h:before { font-family: 'fontello'; content: '\e814'; color: #F15825; position: absolute; left: -35px; font-size: 40px; top: -5px; }
            #bullets-w > .t > .bullets > .bullet > .c { padding-top: 20px; }
            #bullets-w > .t > .bullets > .bullet:not(.open) > .c { display: none; }
            #bullets-w > .t > .bullets > .bullet.open > .h:before { content: '\e813' }
            #bullets-w > .t > .bullets > .bullet:not(:last-child) { margin-bottom: 50px; }

@media(min-width:768px) {
    #banner-1 > .youtube-w-w { position: absolute; top: 10%; left: 40%; height: 78%; width: 32.5%; }
    #banner-1 > .caption { top: 32%; position: absolute; left: 5%; padding: 20px 25px; width: 24%; }
    #banner-1 > .dotcomm { position: absolute; top: 36%; right: 7%; height: 28%; }
    #videos-w > .videos { display: flex; justify-content: center; }
    #part-2 { padding: 112px 0 134px; }
}

@media(max-width:767px) {
    #banner-1 { height: auto; display: flex; flex-direction: column; align-items: center; padding: 25px 0 30px; }
        #banner-1 > .caption { width: 60%; padding: 10px 15px; }
        #banner-1 > .youtube-w-w { width: 85%; margin-top: 20px; }
        #banner-1 > .dotcomm { width: 76px; margin-top: 20px; }

    #dire-need { padding: 50px 15px 80px; }
        #dire-need > .imgs > img:not(:first-child) { display: none; }
        #dire-need > .imgs > img:not(:last-child) { margin: 0; width: 200px; }
        #dire-need > h2 { margin-top: 32px; }

    #percent { padding: 58px 0px 65px; margin: 0 20px; }

    #videos-w { padding: 0 14px 20px; }
        #videos-w > .videos > .video { width: 100%; margin-bottom: 38px; }
            #videos-w > .videos > .video > .name { font-size: 17px; margin-top: 16px; }

    #bullets-w { padding: 70px 35px; }
        #bullets-w > img { margin: 0 auto; }
        #bullets-w > .t { margin-top: 50px; }
            #bullets-w > .t > .bullets { margin-left: 0; }
                #bullets-w > .t > .bullets > .bullet > .h { font-size: 16px; }
                    #bullets-w > .t > .bullets > .bullet > .h:before { font-size: 26px; left: -20px; top: -2px; }
                #bullets-w > .t > .bullets > .bullet > .c { font-size: 15px; }
}
