#about-pages { background: #00BBDC; display: flex; align-items: center; justify-content: center; padding: 20px 0; position: sticky; top: 60px; z-index: 10; }
    #about-pages > .page { text-decoration: none; color: white; font-size: 16px; font-weight: bold; width: 150px; text-align: center; }
        #about-pages > .page > .icon-w-w { display: flex; height: 65px; justify-content: center; align-items: center; }
        #about-pages > .page.active { cursor: default; color: #004D69; }

#whoweare-article { display: flex; justify-content: center; background: #F4F4F4; padding: 60px 40px 70px; }
    #whoweare-article > .img { width: 340px; height: 340px; margin-right: 90px; border-radius: 200px; flex: none; }
    #whoweare-article > .c { font-size: 18px; max-width: 750px; line-height: 1.6em; }
        #whoweare-article > .c > h2 { margin-top: 0; }

#about-cancer { padding-bottom: 30px; }
    #about-cancer > .t > h2 { color: #FF4E00; }
#conditions { padding-top: 0; }
    #conditions > .t { max-width: 1170px; }
        #conditions > .t > h3 { font-size: 24px; color: #50B0DE; }
        #conditions > .t > ul { padding-left: 1.2em; line-height: 1.5em; }

#did-you-know { width: 600px; margin: 110px auto 190px; }
    #did-you-know > h2 { margin: 0 0 80px; }
    #did-you-know > .part { margin-bottom: 90px; display: flex; font-size: 24px; line-height: 30px; align-items: flex-start; }
        #did-you-know > .part > .t > b { font-size: 36px; }
        #did-you-know > .part > .i-w { margin-right: 25px; }
        #did-you-know > .part:nth-child(odd) > .i-w { order: 2; margin-left: 25px; margin-right: 0; }

.people-boxes-w > h2 { text-align: center; margin: 85px 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; }
    .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; }
    .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 .click-info { display: none; width: 100%; }
    .people-boxes.open > .person-box:not(.open) { opacity: 0.5; }

#founders { background: #F7F7F7; padding: 150px 0; text-align: center; margin-top: 100px; }
    #founders > h2 { margin: 0 0 15px; }
    #founders > .caption { font-size: 22px; font-weight: 600; margin-top: 10px; margin-bottom: 90px; }
    #founders > .name-h { margin: 75px 0 0; }
    #founders > .name { font-size: 22px; font-weight: 600; }

#credentials > h2 { text-align: center; margin: 82px 0 24px; }
#credentials > .caption { width: 830px; margin: 0 auto; font-size: 18px; }
#credentials > .list { margin-top: 90px; margin-bottom: 50px; }

#partners { padding-bottom: 60px; }
    #partners > .section > h2 { text-align: center; margin: 80px 0 20px; }

.cred-boxes { display: flex; flex-wrap: wrap; max-width: 1360px; margin-left: auto; margin-right: auto; }
    .cred-boxes > .box { width: 284px; margin: 30px 28px; text-decoration: none; color: white; }
        .cred-boxes > .box > .banner-w { height: 180px; padding: 25px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; background: #F7F7F7; border: solid 1px #E8E8E8; border-radius: 5px; }
            .cred-boxes > .box > .banner-w > .banner { height: 100%; background-position: center; background-size: contain; background-repeat: no-repeat; width: 100%; }
        .cred-boxes > .box > .t { background: #02384B; height: 300px; padding: 22px; box-sizing: border-box; font-size: 15px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
            .cred-boxes > .box > .t > h6 { margin: 0 0 20px; font-size: 20px; color: #FF4E00; }
    .cred-boxes:not(.no-t) > .box > .banner-w { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

#awards { }
    #awards > .h-w { background: #F7F7F7; text-align: center; padding: 82px 0 74px; }
        #awards > .h-w > h2 { margin: 0 0 30px; }
        #awards > .h-w > p { font-size: 18px; max-width: 490px; margin: 0 auto; }
    #awards > .row { display: flex; justify-content: center; padding: 80px 0; }
        #awards > .row > .award { width: 385px; margin: 0 25px; font-size: 18px; }
            #awards > .row > .award > .img { height: 270px; background-position: center; background-size: cover; border-radius: 10px; }
            #awards > .row > .award > h3 { font-size: 28px; margin: 40px 0 0; }
            #awards > .row > .award > .sub-h { color: #FF4E00; font-weight: 600; margin-bottom: 20px; }
            #awards > .row > .award > .btn-g { margin-top: 38px; }
        #awards > .row:nth-child(odd) { background: #00BBDC; }
            #awards > .row:nth-child(odd) > .award { color: white; }
                #awards > .row:nth-child(odd) > .award > .sub-h { color: #02384B; }
                #awards > .row:nth-child(odd) > .award > .btn-g { background: white; color: #FF4E00; }

#history { font-size: 18px; }
    #history h2 { margin: 0; font-size: 40px; }
    #history > .history { max-width: 1200px; margin: 80px auto; padding: 0 0; display:flex; justify-content:center; }
            #history > .history > figure > .img { width: 340px; height: 340px;  border-radius:50%; margin-right:90px;}
            #history > .history > figure > figcaption {font-size:20px; width:260px; color: #FF4E00; margin-left:40px; font-weight:bold;}
            #history > .history > div > h2 { margin: 0; }
            #history > .history > div > p { margin-top: 35px; }
    #history > .one-in-a-mil { background-color: #00BBDC; height: 820px;}
        #history > .one-in-a-mil > .trailer-header { font-size: 40px; font-weight:bold; text-align: center; padding-top:100px;}
        #history > .one-in-a-mil > div > iframe { display: block; margin: 20px auto; width: 818px; height: 460px;}
        #history > .one-in-a-mil > .trailer-caption { font-size: 24px; text-align:center; color: white;}
    #history > .innovations { background: url(/res/img/about/light-bulbs.jpg); padding: 95px 0 10px; color: white; background-position: left; background-size: cover; }
        #history > .innovations > h2 { color: #FF4E00; text-align: center;}
        #history > .innovations > .sub-h { text-align: center; margin-top: 34px; }
        #history > .innovations > .years { width: 794px; margin: 70px auto; }
            #history > .innovations > .years > .year { display: flex; align-items: center; position: relative; margin-bottom: 80px; }
                #history > .innovations > .years > .year > .num { font-size: 60px; font-weight: bold; margin-right: 30px; }
                #history > .innovations > .years > .year:before { content: ''; width: 28px; height: 28px; background: white; border-radius: 100%; position: absolute; left: -50px; }
                #history > .innovations > .years > .year:not(:last-child):after { content: ''; width: 2px; height: 150px; position: absolute; background: white; left: -37px; top: 50%; }

#financials { font-size: 18px; }
    #financials > h2 { font-size: 40px; text-align: center; margin: 88px 0 0; }
    #financials > .items { margin-top: 90px; padding: 0 40px; }
        #financials > .items > .item { display: flex; justify-content: center; margin-bottom: 100px; }
            #financials > .items > .item > .img-w { margin-right: 42px; width: 220px; text-align: center; flex: none; }
            #financials > .items > .item > .t { max-width: 1010px; }
                #financials > .items > .item > .t > h3 { margin-top: 0; color: #FF4E00; font-size: 32px; }

/*!desktop*/
@media(max-width:1439px) {
    #conditions > .t { max-width: 970px; }
    .people-boxes { width: 1024px; }
        .people-boxes .person-box { width: 226px; height: 226px; }
    #awards > .h-w { padding: 60px 0 50px; }
        #awards > .h-w > h2 { font-size: 30px; }
        #awards > .h-w > p { font-size: 16px; max-width: 420px; }
    #awards > .row { padding: 50px 0; }
        #awards > .row > .award { width: 220px; font-size: 14px; margin: 0 15px; }
            #awards > .row > .award > .img { height: 154px; }
            #awards > .row > .award > h3 { font-size: 17px; margin-top: 25px; }
            #awards > .row > .award > .sub-h { margin-bottom: 10px; }
}


/*laptop-desktop*/
@media (min-width: 1024px) {
    .person-box:hover > .person-info-box { opacity: 1; }
}

/*mobile-tablet*/
@media(max-width:1023px) {

    #about-pages > .page { font-size: 13px; width: 105px; }
        #about-pages > .page > .icon-w-w { height: 50px; }
            #about-pages > .page > .icon-w-w > .icon-w { }
                #about-pages > .page > .icon-w-w > .icon-w > img { width: 65%; }

    #whoweare-article { padding: 50px 40px; }
        #whoweare-article > .img { width: 180px; height: 180px; margin-right: 26px; }
        #whoweare-article > .c { font-size: 15px; }
            #whoweare-article > .c > h2 { font-size: 26px; }

    #conditions > .t { max-width: 610px; }

    #did-you-know { margin: 70px auto 100px; width: 430px; }
        #did-you-know > h2 { font-size: 26px; }
        #did-you-know > .part { font-size: 20px; line-height: 26px; margin-bottom: 60px; }
            #did-you-know > .part > .t > b { font-size: 26px; }
            #did-you-know > .part > .i-w { margin-right: 15px; }
            #did-you-know > .part:nth-child(odd) > .i-w { margin-left: 15px; }

    .people-boxes { width: 616px; }
        .people-boxes .person-box { width: 138px; height: 138px; margin: 10px 8px; }
        .people-boxes .about-person { font-size: 15px; padding: 20px; margin-left: 8px; margin-right: 8px; }
            .people-boxes .about-person > .person-name { font-size: 18px; }
            .people-boxes .about-person > .social > a { font-size: 22px; }
        .people-boxes .person-title { font-size: 15px; }
        .people-boxes .triangle { border-width: 0 14px 20px 14px; margin-left: -14px; }

    #leadership h2 { font-size: 26px; }

    #history { font-size: 16px; }
        #history h2 { font-size: 30px; }
            #history > .history { margin: 70px auto;  }
                #history > .history > figure > .img { width:180px; height: 180px; margin-right: 26px;}
                #history > .history > figure > figcaption { font-size: 14px; width:190px; margin-left: 5px;}
                #history > .history > div { max-width: 450px; }
            #history > .one-in-a-mil { height: 575px;}
                #history > .one-in-a-mil > .trailer-header { font-size: 30px; padding-top: 60px}
                #history > .one-in-a-mil > div > iframe { width: 560px; height: 315px;}
                #history > .one-in-a-mil > .trailer-caption { font-size: 21px;}
            #history > .innovations > .sub-h { max-width: 500px; margin: 22px auto 0px; }
            #history > .innovations > .years { width: 566px; }
                #history > .innovations > .years > .year > .num { font-size: 40px; }

    #financials { font-size: 16px; }
        #financials > h2 { font-size: 30px; margin-top: 68px; }
        #financials > .items { margin-top: 55px; }
            #financials > .items > .item { margin-bottom: 50px; }
                #financials > .items > .item > .t > h3 { font-size: 24px; }
                #financials > .items > .item > .img-w { margin-right: 36px; width: 150px; }
}

/*tablet*/
@media(min-width:768px) and (max-width:1023px) {
    #credentials > .caption { width: 600px; }
    #credentials > .list { margin-top: 50px; }
    .cred-boxes { width: 729px; }
        .cred-boxes > .box { width: 205px; margin: 20px 19px; }
            .cred-boxes > .box > .banner-w { height: 130px; }
            .cred-boxes > .box > .t { height: 218px; font-size: 12px; padding: 16px; }
                .cred-boxes > .box > .t > h6 { font-size: 14px; }
}

/*!mobile*/
@media(min-width:768px) {
    #mob-about-pages { display: none; }
}

/*mobile*/
@media(max-width:767px) {
    #about-pages { display: none; }
    #mob-about-pages { height: 50px; position: relative; }
        #mob-about-pages > .cur { background: #00BBDC; }
        #mob-about-pages > .cur, #mob-about-pages > .others > .link { color: white; display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 0 10px 0 20px; font-weight: bold; }
            #mob-about-pages > .cur > .arrow { font-size: 24px; }
        #mob-about-pages > .others { display: none; }
            #mob-about-pages > .others > .link { border-top: solid 1px #98DFFF; text-decoration: none; }
        #mob-about-pages.open > .cur > .arrow:before { content: '\e80E'; }
        #mob-about-pages.open > .others { display: block; background: #00BBDC; }

    #whoweare-article { display: block; background: no-repeat; padding: 35px 0; }
        #whoweare-article > .img { margin: 0 auto; display: block; }
        #whoweare-article > .c { margin-top: 40px; padding: 20px 20px; background: #F7F7F7; }
            #whoweare-article > .c > h2 { text-align: center; }
    #conditions > .t > h3 { text-align: left; font-size: 18px; }

    #did-you-know { width: auto; padding: 40px 38px 0; margin: 0 0; }
        #did-you-know > h2 { text-align: center; margin-bottom: 30px; }
        #did-you-know > .part { font-size: 18px; display: block; }
            #did-you-know > .part > .i-w { text-align: center; margin-bottom: 10px; }

    .people-boxes { width: 308px; }
        .people-boxes .person-box { margin: 8px; }

    #leadership h2 { font-size: 22px; }
    .people-boxes-w > h2 { margin: 40px 20px 35px; }
    .people-boxes .person-title { max-width: 200px; }
    .people-boxes .about-person > .social { top: 12px; right: 10px; }
        .people-boxes .about-person > .social > a { font-size: 16px; }

    #founders { padding: 50px 0; }
        #founders > .caption { margin: 5px 20px 30px; font-size: 16px; }
        #founders > .name-h { margin-top: 40px; }
        #founders > .name { font-size: 16px; }

    #credentials > h2 { margin-top: 50px; }
    #credentials > .caption { width: auto; margin: 0 18px; }
    .cred-boxes { width: auto; display: block; }
        .cred-boxes > .box { margin: 0 auto 28px; display: block; }

    #awards > .h-w > h2 { font-size: 24px; margin-bottom: 15px; }
    #awards > .h-w > p { font-size: 14px; max-width: 300px; }
    #awards > .row { display: block; }
        #awards > .row > .award { margin: 0 30px 50px; width: auto; }
            #awards > .row > .award > .img { height: 57vw; }

    #history { font-size: 15px; }
        #history h2 { font-size: 24px; }
        #history > .history { margin: 70px 15px; display:block; }
            #history > .history > figure > .img { margin: 0 auto; display:block;}
            #history > .history > figure > figcaption { margin: 5px auto 30px; text-align: center;}
            #history > .history > div {max-width: revert;}
            #history > .history > div > h2 { text-align: center;}
        #history > .one-in-a-mil { height: 320px;}
            #history > .one-in-a-mil > .trailer-header { font-size: 24px; font-weight:normal; padding-top:40px;}
            #history > .one-in-a-mil > div > iframe { width: 290px; height: 165px;}
            #history > .one-in-a-mil > .trailer-caption { font-size: 13px;}
        #history > .innovations { padding: 30px 15px 2px; font-size: 14px; }
            #history > .innovations > .years { width: auto; margin-left: 50px; }
                #history > .innovations > .years > .year { display: block; margin-bottom: 40px; }
                    #history > .innovations > .years > .year:before { left: -40px; width: 22px; height: 22px; top: 15px; }
                    #history > .innovations > .years > .year:not(:last-child):after { left: -30px; top: 30px; height: 130%; }

    #financials { font-size: 15px; }
        #financials > h2 { font-size: 24px; }
        #financials > .items { padding: 0 20px; }
            #financials > .items > .item { display: block; margin-bottom: 90px; }
                #financials > .items > .item > .img-w { width: auto; margin: 0 0 30px; }
                #financials > .items > .item > .t > h3 { font-size: 20px; text-align: center; }
}