﻿#main { min-height: 750px; background-position: center; background-size: cover; display: flex; align-items: center; position: relative; padding: 55px 0; }
    #main:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: black; opacity: .3; }
    #main > .c { position: relative; margin-left: 330px; width: 450px; }
        #main > .c > .allocation-info { display: flex; justify-content: center; margin-bottom: 40px; color: white; font-size: 18px; align-items: center; }
            #main > .c > .allocation-info > .img-w { width: 126px; height: 126px; border: solid 1px white; border-radius: 200px; margin-right: 30px; flex: none; overflow: hidden; background-position: center; background-size: contain; background-repeat: no-repeat }
            #main > .c > .allocation-info[data-id='11686'] > .img-w { background-size: 100px }
            #main > .c > .allocation-info > .t > a { color: #00BBDC; }
        #main > .c > .once-reg { display: flex; border-radius: 5px; height: 40px; overflow: hidden; }
            #main > .c > .once-reg > .i { flex: 1; display: flex; justify-content: center; align-items: center; text-transform: uppercase; font-size: 15px; font-weight: bold; background: white; color: #FF4E00; cursor: pointer; }
            #main > .c > .once-reg > .active { background: #FF4E00; color: white; cursor: default; }

        #main > .c > .step { display: none; border-radius: 5px; background: white; margin-top: 26px; }
            #main > .c > .step > .h { text-align: center; background: #E8E8E8; padding: 14px; margin: 0; color: black; font-size: 20px; font-weight: bold; border-top-left-radius: 5px; border-top-right-radius: 5px; }
            #main > .c > .step > .giving { }
                #main > .c > .step > .giving > .change { text-decoration: underline; color: #003BFF; font-size: 17px; cursor: pointer; }
            #main > .c > .step > .c > .btns { display: flex; margin-top: 20px; }
                #main > .c > .step > .c > .btns > .btn-g { flex: 1; border: none; }
                #main > .c > .step > .c > .btns > .back { background: #969696; margin-right: 10px; }
                #main > .c > .step > .c > .btns > .next { background: #359FF4; }
            #main > .c > .step form input[type=text], #main > .c > .step form input[type=email], #main > .c > .step form input[type=tel], #main > .c > .step form select, #main > .c > .step form textarea { box-sizing: border-box; border: solid 1px #C1C1C1; border-radius: 5px; font-size: 16px; font-weight: 600; min-width: 0; padding: 0 10px; }
            #main > .c > .step form input[type=text], #main > .c > .step form input[type=email], #main > .c > .step form input[type=tel], #main > .c > .step form select { height: 50px; }
            #main > .c > .step form .chosen-choices > .search-field > input { padding: 5px; min-width: 200px; }
        #main > .c > .amounts-w { padding-bottom: 20px; }
            #main > .c > .amounts-w > .freqs { display: flex; justify-content: center; border-bottom: solid 1px #C1C1C1; padding-bottom: 24px; padding-top: 24px; }
                #main > .c > .amounts-w > .freqs > .freq { width: 126px; height: 50px; display: flex; justify-content: center; align-items: center; color: white; background: #E8E8E8; border: solid 1px #C1C1C1; border-radius: 5px; font-weight: bold; font-size: 17px; margin: 0 5px; color: #707070; cursor: pointer; box-sizing: border-box; }
                    #main > .c > .amounts-w > .freqs > .freq.active { background: #359FF4; border: none; color: white; }
            #main > .c > .amounts-w > .amounts { display: flex; flex-wrap: wrap; justify-content: center; margin: 16px 0 8px; }
                #main > .c > .amounts-w > .amounts > .amount { background: #E8E8E8; width: 126px; height: 50px; margin: 8px 5px; font-size: 19px; font-weight: bold; color: #707070; border: solid 1px #C1C1C1; border-radius: 5px; display: flex; justify-content: center; align-items: center; cursor: pointer; box-sizing: border-box; }
                    #main > .c > .amounts-w > .amounts > .amount > .t { text-align: center; }
                        #main > .c > .amounts-w > .amounts > .amount > .t > small { font-size: 11px; display: block; }
                    #main > .c > .amounts-w > .amounts > .amount.active { background: #58BE5B; color: white; border: none; }
            #main > .c > .amounts-w > .other { display: block; margin: 0 auto; width: 404px; background: #E8E8E8; border: solid 1px #C1C1C1; text-align: center; font-size: 19px; font-weight: bold; height: 50px; border-radius: 5px; box-sizing: border-box; -moz-appearance: textfield; }
                #main > .c > .amounts-w > .other::-webkit-outer-spin-button, #main > .c > .amounts-w > .other::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
            #main > .c > .amounts-w > .err-msg { text-align: center; margin-top: 10px; }
            #main > .c > .amounts-w > .donate, #main > .c > .amounts-w > .crypto-w > .crypto { background: #58BE5B; border: none; width: 404px; margin: 16px auto 0; display: block; }
            #main > .c > .amounts-w > .crypto-w { border-top: solid 1px #C1C1C1; margin-top: 20px; padding-top: 20px; }
                #main > .c > .amounts-w > .crypto-w > .crypto { display: flex; background: #00BBDC; margin-top: 0; padding: 0; }
            #main > .c > .amounts-w .caption { position: absolute; font-size: 13px; color: white; right: 0; bottom: -25px; }
        #main > .c.once > .amounts-w > .freqs { display: none; }
        #main > .c > .demog { margin-top: 30px; border-radius: 5px; }
            #main > .c > .demog > .c { padding: 22px 26px; }
                #main > .c > .demog > .c > .line > .phone { display: flex; }
                    #main > .c > .demog > .c > .line > .phone > .cc { width: 80px; margin-right: 10px; }
                    #main > .c > .demog > .c > .line > .phone > .num { flex: 1; }
                #main > .c > .demog > .c > .line.dc-w { display: none; }
                #main > .c > .demog > .c > .chk-w { margin-bottom: 15px; font-size: smaller; }
                    #main > .c > .demog > .c > .chk-w > label { display: flex; }
                        #main > .c > .demog > .c > .chk-w > label > input { margin-right: 8px; margin-top: 0; flex: none; }
                #main > .c > .demog > .c > .err-msg { text-align: center; margin-bottom: 10px; }

        #main > .c > .honor > .c { padding: 18px 26px; }
            #main > .c > .honor > .c > .radios > label:not(:last-child) { margin-right: 20px; }
        #main > .c > .payment > .payment-form { padding: 15px 26px 30px; }


.chosen-container-single .chosen-single { padding: 10px 10px; border-radius: 5px; font-size: 16px; }
    .chosen-container-single .chosen-single abbr { top: 18px; }
    .chosen-container-single .chosen-single div { top: 12px; }

#badges { background: #F7F7F7; height: 210px; display: flex; justify-content: center; align-items: center; }
    #badges > .badge-w { margin: 0 20px; }

.article { display: flex; justify-content: center; padding: 100px 25px 80px; }
    .article > .img-w > .img { width: 350px; height: 350px; border-radius: 500px; background-position: center; background-size: cover; }
    .article > .img-w > .caption { color: #707070; font-size: 17px; text-align: center; margin-top: 12px; }
    .article > .t { width: 860px; margin-left: 54px; font-size: 18px; }
        .article > .t > h3 { font-size: 36px; margin-top: 0; color: #14313B; }
        .article > .t > .btn-g { background: #FF4E00; margin-top: 20px; }
    .article.even { background: #F7F7F7; }
        .article.even > .img-w { order: 2; }
        .article.even > .t { margin-left: 0; margin-right: 54px; }

input[type=radio] { appearance: none; -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50px; vertical-align: -8px; border: solid 1px #BABABC; box-sizing: border-box; }
    input[type=radio]:checked { background: #58BE5B; border: none; font-family: "fontello"; display: inline-flex; justify-content: center; align-items: center; border: none; }
        input[type=radio]:checked:before { content: '\e80C'; color: white; font-size: 18px; position: absolute; margin-top: 2px; }

input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; vertical-align: -8px; border: solid 1px #BABABC; box-sizing: border-box; }
    input[type=checkbox]:checked { background: #58BE5B; border: none; font-family: "fontello"; display: inline-flex; justify-content: center; align-items: center; border: none; }
        input[type=checkbox]:checked:before { content: '\e80C'; color: white; font-size: 18px; position: absolute; margin-top: 2px; }


#main > .c > .payment > .c > .donate { width: 100%; background: #359FF4; border: none; margin-top: 10px; }
#cvn-w { display: flex; align-items: center; }
    #cvn-w > .cvn { width: 100px; margin-right: 10px; }

#main > .c.wide { width: 1200px; margin-left: 100px; }

#main > .c > .thanks > .h { font-size: 26px; padding: 18px; }
    #main > .c > .thanks > .h > .check { background: #58BE5B; border-radius: 50px; color: white; width: 40px; height: 40px; display: inline-flex; justify-content: center; align-items: center; font-size: 26px; margin-right: 10px; }

#main > .c > .thanks > .c { font-size: 17px; display: flex; padding: 35px 60px; align-items: center; }
    #main > .c > .thanks > .c > .l { margin-right: 40px; }
    #main > .c > .thanks > .c > .img-share { display: flex; align-items: center; padding: 30px 30px; justify-content: center; }
        #main > .c > .thanks > .c > .img-share > .r { text-align: center; margin-left: 40px; display: flex; flex-direction: column; justify-content: center; width: 250px; }
            #main > .c > .thanks > .c > .img-share > .r > h3 { margin: 0; font-size: 32px; color: #14313B; }
            #main > .c > .thanks > .c > .img-share > .r > .share-w-w > .img { display: none; }
            #main > .c > .thanks > .c > .img-share > .r > .share-w-w > .share-w { margin-top: 20px; cursor: pointer; }
                #main > .c > .thanks > .c > .img-share > .r > .share-w-w > .share-w > .share { background: #FF4E00; color: white; border-radius: 50px; width: 70px; height: 70px; display: flex; margin: 0 auto; justify-content: center; align-items: center; font-size: 45px; padding-right: 5px; box-sizing: border-box; }
                #main > .c > .thanks > .c > .img-share > .r > .share-w-w > .share-w > .t { font-weight: bold; margin-top: 5px; }
#main.steven-bochco > .c > .allocation-info { font-size: 24px; font-weight: bold; margin-bottom: 20px; }


@media(max-width:1439px) {
    #main > .c.wide { width: 900px; margin-left: 50px; }
    #main > .c > .thanks > .c > .img-share > .img-w > img { width: 250px; }
    #main > .c > .thanks > .c { display: block; padding: 0; }
        #main > .c > .thanks > .c > .l { text-align: center; border-bottom: solid 1px #C1C1C1; padding: 25px 40px; margin: 0; }
        #main > .c > .thanks > .c > .img-share > .img-w { order: 2; }
            #main > .c > .thanks > .c > .img-share > .img-w > img { width: 206px; }
        #main > .c > .thanks > .c > .img-share > .r { margin: 0 30px 0 0; }
            #main > .c > .thanks > .c > .img-share > .r > h3 { font-size: 28px; }
            #main > .c > .thanks > .c > .img-share > .r > .share-w-w > .share-w > .share { width: 55px; height: 55px; font-size: 35px; }
}

@media(max-width:1023px) {
    #main { min-height: 964px; display: block; padding: 70px 0; box-sizing: border-box; }
        #main > .c { margin: 0px auto; }
            #main > .c.wide { width: 560px; margin: 0 auto; }
            #main > .c > .thanks > .h { font-size: 20px; padding: 12px; }
                #main > .c > .thanks > .h > .check { width: 30px; height: 30px; font-size: 20px; }
            #main > .c > .thanks > .c { font-size: 15px; }
    #badges { height: 126px; }
        #badges > .badge-w { text-align: center; }
            #badges > .badge-w > .badge { }
        #badges > .badge-1 > .badge { width: 75px }
        #badges > .badge-2 > .badge { width: 53px }
        #badges > .badge-3 > .badge { width: 84px }
        #badges > .badge-4 > .badge { width: 45px }
        #badges > .badge-5 > .badge { width: 92px }
        #badges > .badge-6 > .badge { width: 102px }

    .article { padding: 75px 0 40px; }
        .article > .img-w > .img { width: 180px; height: 180px; }
        .article > .img-w > .caption { font-size: 12px; }
        .article > .t { font-size: 15px; width: 440px; margin-left: 28px; }
            .article > .t > h3 { font-size: 26px; }
        .article.even > .t { margin-right: 28px; }
}

@media(max-width:767px) {
    #main { min-height: 700px; }
        #main > .c, #main > .c.wide { width: 290px; }
            #main > .c > .once-reg > .i { font-size: 12px; }
            #main > .c > .step > .h { font-size: 15px; }
            #main > .c > .step > .giving { font-size: 17px; }
                #main > .c > .step > .giving > .change { display: block; font-size: 13px; }
            #main > .c > .step > .c { font-size: 14px; }
                #main > .c > .step > .c > .line > .field { margin-bottom: 10px; width: 100%; min-width: 0; }
                #main > .c > .step > .c > .line.mob-one-line { display: flex; }
                    #main > .c > .step > .c > .line.mob-one-line > .field:not(:last-child) { margin-right: 10px; }
            #main > .c > .step form input[type=text], #main > .c > .step form input[type=email], #main > .c > .step form select { height: 41px; font-size: 14px; }

            #main > .c > .amounts-w > .freqs { padding: 17px 0; }
                #main > .c > .amounts-w > .freqs > .freq { width: 78px; height: 40px; font-size: 13px; }
            #main > .c > .amounts-w > .amounts > .amount { font-size: 14px; width: 78px; height: 40px; }
            #main > .c > .amounts-w .caption { font-size: 9px; bottom: -20px; }
            #main > .c > .amounts-w > .other { height: 41px; font-size: 14px; width: 254px; }
            #main > .c > .amounts-w > .donate, #main > .c > .amounts-w > .crypto-w > .crypto { height: 41px; font-size: 14px; width: 254px; }

            #main > .c > .amounts-w > .amounts { margin: 12px 0 8px; }
            #main > .c > .demog > .c { padding: 20px; }
                #main > .c > .demog > .c > .line > .phone > .cc { width: 50px; }

            #main > .c > .honor > .c { padding: 20px; }
                #main > .c > .honor > .c > .radios > label:not(:last-child) { margin-right: 10px; }
                #main > .c > .honor > .c > .line.radios { margin-bottom: 10px; }

            #main > .c > .thanks > .h { font-size: 15px; }
                #main > .c > .thanks > .h > .check { width: 25px; height: 25px; }
            #main > .c > .thanks > .c > .l { padding: 20px 18px; }
            #main > .c > .thanks > .c > .img-share { display: block; padding: 25px; }
                #main > .c > .thanks > .c > .img-share > .img-w { display: none; }
                #main > .c > .thanks > .c > .img-share > .r { width: auto; margin: 0; }
                    #main > .c > .thanks > .c > .img-share > .r > h3 { font-size: 21px; }
                    #main > .c > .thanks > .c > .img-share > .r > .share-w-w { display: flex; justify-content: center; margin-top: 20px; }
                        #main > .c > .thanks > .c > .img-share > .r > .share-w-w > .img { display: block; width: 120px; height: 120px; margin-right: 30px; }

    #badges { flex-wrap: wrap; height: auto; padding: 25px 0; }
        #badges > .badge-w { width: 30%; margin: 5px 0; }
            #badges > .badge-w > .badge { }
        #badges > .badge-1 > .badge { width: 61px }
        #badges > .badge-2 > .badge { width: 44px }
        #badges > .badge-3 > .badge { width: 68px }
        #badges > .badge-4 > .badge { width: 37px }
        #badges > .badge-5 > .badge { width: 75px }
        #badges > .badge-6 > .badge { width: 83px }


    .article { display: block; padding: 40px 0 35px; }
        .article > .t { margin: 40px 24px 0; width: auto; }
            .article > .t > h3 { text-align: center; }
        .article > .img-w > .img { margin: 0 auto; }
        .article.even > .t { margin: 40px 24px 0; }

    .chosen-container-single .chosen-single { padding: 7px 10px; }
        .chosen-container-single .chosen-single div { top: 8px; }
        .chosen-container-single .chosen-single abbr { top: 15px; }
}

@media(min-width:768px) {
    #main > .c > .step > .c > .line { display: flex; margin-bottom: 15px; }
        #main > .c > .step > .c > .line > .field { flex: 1; min-width: 0; }
            #main > .c > .step > .c > .line > .field:not(:last-child) { margin-right: 10px; }
}
