#header-bar { height: 70px; display: flex; justify-content: space-between; }
    #header-bar > .logo { height: 100%; padding: 4px 10px; }
        #header-bar > .logo > img { height: 100%; }
    #header-bar > .r { display: flex; }
        #header-bar > .r > a { display: flex; justify-content: center; align-items: center; text-decoration: none; }
        #header-bar > .r > .social { width: 70px; }
        #header-bar > .r > .tw { color: white; font-size: 32px; padding-top: 8px; }
        #header-bar > .r > .swabbed { width: 220px; color: white; font-weight: bold; font-size: 20px; }

#top-goal { background: #005B79; height: 500px; position: relative; padding-top: 60px; font-size: 36px; box-sizing: border-box; overflow: hidden; }
    #top-goal > h3 { color: #FF4E00; text-align: center; font-size: 36px; text-transform: uppercase; margin: 0; }
    #top-goal > .goal { color: white; font-weight: bold; text-align: center; margin-top: 45px; }
        #top-goal > .goal > .amount { display: inline-block; position: relative; line-height: 1em; }
            #top-goal > .goal > .amount > .t { font-size: 100px; }
            #top-goal > .goal > .amount > .of { position: absolute; font-size: 28px; color: #A2F1FF; top: 0; left: 100%; width: 200px; text-align: left; margin-left: 15px; line-height: 0em; }
    #top-goal > .mount-l { position: absolute; bottom: 0; left: 50%; opacity: .8; margin-left: -700px; }
    #top-goal > .mount-r { position: absolute; bottom: 0; opacity: .8; left: 50%; margin-left: 20%; }
    #top-goal > .slider { max-width: 70%; height: 35px; background: white; margin: 50px auto; border-radius: 20px; position: relative; width: 1000px; padding: 2px; box-sizing: border-box; }
        #top-goal > .slider > .done { background: #58BE5B; height: 100%; border-radius: 20px; z-index: 10; position: relative; box-sizing: border-box; min-width: 30px; }
        #top-goal > .slider > .ball { width: 74px; height: 74px; background: white; border-radius: 100px; position: absolute; right: -50px; margin-top: -54px; border: solid 2px white; display: flex; justify-content: center; align-items: center; top: 30px; }
        #top-goal > .slider.zero > .done { display: none; }
        #top-goal > .slider.complete > .done { max-width: 99%; border-top-right-radius: 0; border-bottom-right-radius: 0; }
        #top-goal > .slider.complete > .ball { background: #58BE5B; /* z-index: 20; */ }
            #top-goal > .slider.complete > .ball:after { font-family: 'fontello'; content: '\e80C'; color: white; }
    #top-goal > .donate { color: white; font-weight: bold; font-size: 24px; width: 245px; margin: 60px auto 0; display: flex; height: 70px; background: #FF4E00; border: solid 2px white; box-sizing: border-box; }

#cn-info { padding: 80px 20px; }
#img-bio { max-width: 1160px; margin: 0 auto; display: flex; align-items: flex-start; position: relative; }
    #img-bio > .img { flex: 4; min-width: 0; }
        #img-bio > .img > img { width: 100%; min-width: 0; }
    #img-bio > .t { flex: 3; margin-left: 50px; }
        #img-bio > .t > .bio { font-size: 17px; }

#payment-w { display: flex; margin: 0 auto; height: 1135px; padding: 0 20px; background: #005B79; box-sizing: border-box; }
    #payment-w > .l { position: relative; }
        #payment-w > .l > .mount-w { position: absolute; bottom: 0; left: -70px; height: 100%; }
            #payment-w > .l > .mount-w > .mount { position: absolute; bottom: 0; left: 0; }
            #payment-w > .l > .mount-w > .flag-w { position: absolute; left: 291px; top: 182px; height: 290px; }
                #payment-w > .l > .mount-w > .flag-w > .flag-t { position: absolute; }
                    #payment-w > .l > .mount-w > .flag-w > .flag-t > .t { color: white; position: absolute; right: 0; top: 24px; font-weight: bold; width: 60px; text-align: center; }
        #payment-w > .l > .goal-amount > .amount { font-size: 84px; font-weight: bold; color: white; line-height: 1em; }
        #payment-w > .l > .goal-amount { text-align: center; margin-top: 150px; width: 500px; position: absolute; right: 0; z-index: 10; }
            #payment-w > .l > .goal-amount > .goal { font-size: 24px; font-weight: bold; margin-top: 10px; color: #FF4E00; }
            #payment-w > .l > .goal-amount > .share-btn { background: #00BBDC; margin-top: 25px; }
        #payment-w > .l > .lower > .social { display: flex; align-items: center; margin-top: 15px; }
            #payment-w > .l > .lower > .social > .share { background: #f05521; color: white; display: flex; align-items: center; padding: 2px 12px; border-radius: 5px; font-weight: bold; margin-right: 14px; }
                #payment-w > .l > .lower > .social > .share > .ss-heart { font-size: 18px; margin-top: 5px; margin-right: 8px; }
            #payment-w > .l > .lower > .social > a { color: #f05521; font-size: 24px; text-decoration: none; cursor: pointer; }
                #payment-w > .l > .lower > .social > a[class^='ss-'] { padding-top: 11px; margin-left: 20px; }

    #payment-w > .r { position: relative; padding-top: 60px; margin-left: 40px; }
        #payment-w > .r > .tab { font-size: 24.5px; font-weight: bold; color: #f05521; height: 50px; position: absolute; top: -50px; background: white; padding: 10px 30px 0; border-top-left-radius: 10px; border-top-right-radius: 10px; letter-spacing: -.05em; }
    #payment-w > .r { width: 450px; margin-right: auto; flex: none; }
        #payment-w > .r > .h { text-transform: uppercase; color: #D3F8FF; font-size: 28px; font-weight: bold; text-align: center; }
        #payment-w > .r > #stepflow { width: auto; background: white; border-radius: 5px; }

#supporters { background: #f5f5f5; position: absolute; right: 0; bottom: 290px; width: 450px; border-radius: 5px; overflow: hidden; }
    #supporters > h4 { text-transform: uppercase; font-weight: bold; font-size: 24px; background: #E8E8E8; margin: 0; text-align: center; padding: 10px 20px; }
    #supporters > .list { overflow: auto; }
        #supporters > .list > .i { display: flex; align-items: center; height: 45px; font-size: 18px; color: #02384B; margin: 0 20px; }
            #supporters > .list > .i > .t { flex: 1; display: flex; flex-wrap: wrap; align-items: center; }
                #supporters > .list > .i > .t > .title { font-weight: bold; margin-right: 10px; }
                #supporters > .list > .i > .t > .desc { color: #FF4E00; font-size: 14px; font-style: italic; font-weight: 600; }
            #supporters > .list > .i > .amount { font-weight: bold; }
            #supporters > .list > .i:nth-child(even) > .t > .desc { color: #00BBDC; }
            #supporters > .list > .i:not(:first-child) { border-top: solid 1px #dcdcdc; }

#stepflow > .stepflow > h3 { background: #E8E8E8; text-align: center; font-size: 24px; text-transform: uppercase; padding: 12px 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
#stepflow > .stepflow > .stepflow-step { padding: 10px 28px; }
#stepflow > .stepflow > .end-table { padding: 10px 28px; margin-top: 0; }
.stepflow .buttons-wrap { display: flex; justify-content: space-between; }
#squares { display: flex; flex-wrap: wrap; margin: 0 -5px 10px; font-size: 20px; line-height: 1em; font-weight: bold; }
    #squares > .square { min-width: 28%; flex: 1; display: flex; justify-content: center; align-items: center; height: 60px; background: #c0c0c0; border-radius: 5px; margin: 5px; color: white; cursor: pointer; text-align: center; }
        #squares > .square.active { background: #f05522; }
#pay-summary { color: #f05521; font-weight: bold; margin-bottom: 10px; font-size: larger; }

#stats { background: #f5f5f5; padding: 20px 40px; }
    #stats > .big { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 20px; text-align: center; }
        #stats > .big > .item { margin: 0 20px; }
            #stats > .big > .item > .sprite-about-us { margin: 0 auto; }
            #stats > .big > .item > .title { color: #062b31; font-size: 10px; font-family: "Gotham A", "Gotham B", sans-serif; font-weight: bold; text-transform: uppercase; max-width: 80px; text-align: center; margin: 0 auto; }
            #stats > .big > .item > .num { color: #f05622; font-weight: bold; font-size: 24.5px; margin-top: 10px; }
    #stats > h3 { color: #00badc; font-size: 30px; margin: 0; letter-spacing: -.08em; text-align: center; }
.sprite-about-us { background-image: url(/res/img/about-us/sprites.png); }
    .sprite-about-us.bulb { width: 199px; height: 200px; background-position-x: -0px; }
    .sprite-about-us.microscope { width: 200px; height: 200px; background-position-x: -238px; }
    .sprite-about-us.steth { width: 201px; height: 201px; background-position-x: -485px; }

#clip-input { position: absolute; bottom: -1000px; }

#confettiCanvas { pointer-events: none; }

/*!mobile*/
@media(min-width:768px) {
}

/*!desktop*/
@media(max-width:1439px) {
    #payment-w > .l > .mount-w { left: 20%; margin-left: -440px; }
    #payment-w > .l > .goal-amount { width: 400px; }
        #payment-w > .l > .goal-amount > .amount { font-size: 70px; }
    #payment-w > .r { width: 350px; }
    .stepflow-buttons-row > .buttons-wrap > .btn-g { width: 120px; height: 44px; }
}

@media (max-width:991px) {
    #stats > .big > .item { margin: 0 10px; }
        #stats > .big > .item > img { width: 70px; }
}

@media (max-width:1023px) {
    #top-goal { height: 265px; font-size: 17px; padding-top: 22px; }
        #top-goal > .donate { font-size: 15px; width: 150px; height: 44px; padding: 0; }
        #top-goal > h3 { font-size: 16px; }
        #top-goal > .goal { margin-top: 25px; }
            #top-goal > .goal > .amount > .of { font-size: 16px; }
            #top-goal > .goal > .amount > .t { font-size: 48px; }
        #top-goal > .slider { height: 18px; margin: 30px auto; }
            #top-goal > .slider > .ball { width: 30px; height: 30px; right: -20px; top: 46px; }
            #top-goal > .slider > .done { min-width: 14px; }
        #top-goal > .mount-l { width: 178px; margin-left: -400px; }
        #top-goal > .mount-r { width: 250px; margin-left: 30%; }

    #img-bio > .t { margin-left: 20px; }

    #payment-w > .l > .goal-amount { margin-top: 40px; }
        #payment-w > .l > .goal-amount > .amount { font-size: 59px; }
        #payment-w > .l > .goal-amount > .goal { font-size: 15px; }
        #payment-w > .l > .goal-amount > .share-btn { float: right; }
    #payment-w > .l > .lower > .social { margin-top: 5px; }
    #payment-w > .l > .mount-w { margin-left: -300px; }
        #payment-w > .l > .mount-w > .mount { height: 737px; }
        #payment-w > .l > .mount-w > .flag-w { width: 2px; left: 253px; height: 224px; top: 212px; }
            #payment-w > .l > .mount-w > .flag-w > .flag-t > img { height: 45px; }
            #payment-w > .l > .mount-w > .flag-w > .flag-t > .t { width: 30px; top: 10px; }
    #payment-w > .r { padding-top: 40px; width: 290px; }
        #payment-w > .r > .tab { height: 40px; top: -40px; padding-right: 20px; padding-left: 20px; }
        #payment-w > .r > .h { font-size: 20px; }

    #stepflow > .stepflow > h3 { font-size: 18px; padding: 8px 10px; }
    #stepflow > .stepflow > .stepflow-step { padding: 10px 18px; }
    #stepflow select { padding: 2px; }
    #stepflow input[type=text], #stepflow select { height: 40px; }
    #stepflow .stepflow-step > .row { margin-bottom: 11px; }

    #squares { font-size: 14px; }
        #squares > .square { height: 40px; }

    #supporters { width: 290px; bottom: 120px; }
        #supporters > h4 { font-size: 18px; }
        #supporters > .list > .i { height: 38px; font-size: 12px; }
            #supporters > .list > .i > .avatar > img { height: 25px; }
            #supporters > .list > .i > .t > .desc { font-size: 11px; }
}

@media (min-width:768px) and (max-width:1023px) {
    #top-goal > .donate { margin-top: 30px; }
    #payment-w { height: 900px; }
        #payment-w > .r > .tab { font-size: 19px; }
        #payment-w > .l > .lower { bottom: 10px; }
}

@media (min-width:768px) {
    #payment-w > .l { width: 1000px; }
        #payment-w > .l > .lower { z-index: 10; position: absolute; width: 100%; }
}

@media(min-width:1200px) {
    #payment-w > .l > .lower { bottom: 150px; }
    #supporters > .list { max-height: 340px; }
}

/*mobile*/
@media(max-width:767px) {
    #top-goal > .slider { height: 10px; }
    #top-goal > .donate { margin-top: 15px; }

    #img-bio { display: block; }
        #img-bio > .t { margin-left: 0; margin-top: 40px; }

    #payment-w { height: auto; flex-direction: column; }
        #payment-w > .l { order: 2; display: flex; flex-direction: column; }
            #payment-w > .l > .goal-amount { order: 3; position: static; margin-top: 0; width: auto; }
                #payment-w > .l > .goal-amount > .amount, #payment-w > .l > .goal-amount > .goal { display: none; }
                #payment-w > .l > .goal-amount > .share-btn { float: none; }
            #payment-w > .l > .lower { position: relative; margin: 20px -20px 0; display: flex; flex-direction: column; }
                #payment-w > .l > .lower > .social { margin-left: 20px; margin-bottom: 10px; }
            #payment-w > .l > .mount-w { position: relative; order: 4; height: auto; margin: 40px -20px 0; left: 0; }
                #payment-w > .l > .mount-w > .mount { position: static; width: 100%; height: auto; display: block; }
                #payment-w > .l > .mount-w > .flag-w { top: 49px; height: calc(34.5vw - 30px); left: 48%; margin-left: -107px; }
        #payment-w > .r { margin-left: 0; width: auto; }
            #payment-w > .r > .tab { font-size: 16px; }

    #supporters, #stats { order: 2; }
    #supporters { position: static; width: auto; margin-top: 40px; }
        #supporters > .list { max-height: 300px; }
            #supporters > .list > .i { }
    #top-goal { height: 180px; padding-top: 15px; }
        #top-goal > h3 { font-size: 13px; }
        #top-goal > .goal { margin-top: 15px; }
            #top-goal > .goal > .amount { line-height: 10px; }
                #top-goal > .goal > .amount > .t { font-size: 31px; }
                #top-goal > .goal > .amount > .of { font-size: 10px; }
        #top-goal > .slider { height: 12px; padding: 1px; margin: 15px auto; }
            #top-goal > .slider > .done { min-width: 10px; }
            #top-goal > .slider > .ball { width: 20px; height: 20px; top: 49px; right: -16px; font-size: 12px; border-width: 1px; }
        #top-goal > .mount-l { width: 120px; margin-left: -200px; }
        #top-goal > .mount-r { width: 170px; margin-left: 20%; }

    #payment-w > .r > #stepflow { margin: 0; }
}