#loading-wrap { display: none; }

#desktop-steps { background: #F8F8F8; display: flex; align-items: center; justify-content: center; height: 254px; }
    #desktop-steps > .step { position: relative; margin: -40px 35px 0; }
        #desktop-steps > .step > .circle { width: 84px; height: 84px; background: #D6D6D6; border-radius: 100%; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: bold; color: white; z-index: 10; position: relative; }
            #desktop-steps > .step > .circle > .img { display: none; }
        #desktop-steps > .step > .line { width: 72px; height: 5px; background: #D6D6D6; position: absolute; top: 40px; left: 83px; }
        #desktop-steps > .step > .t { position: absolute; text-align: center; width: 100px; left: 50%; margin-left: -50px; margin-top: 15px; font-weight: bold; font-size: 17px; }
        #desktop-steps > .step.active > .circle { background: #00BBDC; }
            #desktop-steps > .step.active > .circle > .img { display: block; }
            #desktop-steps > .step.active > .circle > .num { display: none; }
        #desktop-steps > .step.done > .circle { background: white; border: solid 4px #2EC0DF; box-sizing: border-box; }
            #desktop-steps > .step.done > .circle > .num { display: none; }
            #desktop-steps > .step.done > .circle:after { content: url(/res/img/register/check.png); display: block; width: 49px; height: 41px; }
        #desktop-steps > .step.done > .line { background: #00BBDC; }

/*keep out of media query - some sites use different breakpoints*/
#mobile-steps-wrap { padding: 40px 0 0; height: 180px; margin-bottom: 20px; }
#mobile-steps { width: 300px; margin: 0 auto; }
    #mobile-steps > .outer-bar { border-radius: 30px; background: #e4e5e5; height: 60px; }
        #mobile-steps > .outer-bar > .inner-bar { border-radius: 30px; height: 100%; background: #00BBDC; }
    #mobile-steps > .texts { width: 300px; margin: 0 auto; font-size: 1.8em; }
        #mobile-steps > .texts > .text { width: 130px; text-align: center; margin-top: 10px; display: none; font-size: 16px; font-weight: 600; }
    #mobile-steps > .tt { background: black; width: 60px; color: white; font-weight: bold; padding: 6px 10px; position: relative; border-radius: 4px; margin-bottom: 10px; text-align: center; }
        #mobile-steps > .tt > i { color: black; position: absolute; bottom: -12px; left: 50%; margin-left: -6px; font-size: 14px; }

    #mobile-steps.step-1 > .outer-bar > .inner-bar { width: 60px; }
    #mobile-steps.step-1 > .texts > .step-1 { display: block; margin-left: -20px; }
    #mobile-steps.step-1 > .tt { margin-left: 0; }

    #mobile-steps.four-steps.step-2 > .outer-bar > .inner-bar { width: 55%; }
    #mobile-steps.four-steps.step-3 > .outer-bar > .inner-bar { width: 75%; }
    #mobile-steps.four-steps.step-4 > .outer-bar > .inner-bar { width: 100%; }
    #mobile-steps.four-steps.step-2 > .texts > .step-2 { display: block; margin-left: 60px; }
    #mobile-steps.four-steps.step-3 > .texts > .step-3 { display: block; margin-left: 120px; }
    #mobile-steps.four-steps.step-4 > .texts > .step-4 { display: block; margin-left: 180px; }
    #mobile-steps.four-steps.step-2 > .tt { margin-left: 85px; }
    #mobile-steps.four-steps.step-3 > .tt { margin-left: 155px; }
    #mobile-steps.four-steps.step-4 > .tt { margin-left: 210px; }

h3.tk-chantal, h5.tk-chantal { font-size: 45px; color: #003B45; }
img { max-width: 100%; }
h5 { font-size: 28px; color: #00B5D5; margin: 0; }
.end-table { width: 100%; }
.field > .desc { font-weight: 600; font-size: 18px; margin-bottom: 8px; }

#main-w { max-width: 1190px; margin: 0 auto; padding: 0 30px; }
    #main-w > .intro > h3 { text-align: center; margin-bottom: 0; }
    #main-w > .intro > p { font-size: 20px; }

#sf-video { display: flex; margin: 50px 0; }
    #sf-video > #stepflow { flex: 1; max-width: 600px; margin: 0 auto; }
    #sf-video > .video-w { flex: 1; }
        #sf-video > .video-w > .video { display: none; }
            #sf-video > .video-w > .video > h3 { color: #00B5D5; text-align: center; padding: 0 30px; font-size: 28px; margin-top: 20px; }
#stepflow h2 { text-align: center; }

.double-h { text-align: center; margin-bottom: 30px; }
    .double-h > h3 { font-size: 45px; margin: 0; color: #003B45 }
    .double-h > h4 { font-size: 24px; margin: 0; font-weight: 600; }
.gol-chk-w { display: flex; align-items: center; margin: 0 18px 0 20px; }
.gol-chk { width: 28px; height: 28px; border-radius: 100%; background: #EFEFF4; border: solid 1px #CDCDD2; box-sizing: border-box; }
    .gol-chk.s1 { width: 22px; height: 22px; background: white; }
    .gol-chk.on { background: url(/res/img/register/chk-bg-g.png); background-size: cover; border: none; }
.radio-group-c { display: flex; margin-top: 20px; }
    .radio-group-c .gol-chk { margin-right: 5px; }
.error-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; display: none; }
    .error-screen > .o { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); }
    .error-screen > .c { background: white; z-index: 10; position: absolute; left: 50%; margin-left: -150px; width: 260px; padding: 20px; top: 50px; border-radius: 5px; }
        .error-screen > .c > .btn { margin-top: 20px; }
#msg-screen { text-align: center; font-size: 18px; margin: 100px 20px; }
    #msg-screen > a { text-decoration: underline; cursor: pointer; }
.tiptop > a { color: gray; font-weight: bold; }

#main-content .intro { margin: 0 auto; max-width: 750px; }
.stepflow-step.step-2 hr { margin: 20px 0 30px; border-color: #eee; }
.S2_DonorInformation { margin-bottom: 40px; }
.S2_GenerateCode { background: #D0D0D0; color: #333333; font-size: 17px; height: 50px; width: 100%; font-weight: normal; text-transform: none; }
#main-content[step='3'] .intro { width: 50%; }
#main-content[step='3'] #desktop-steps > .step.active > .circle > .img { margin-bottom: 8px; }

#main-content[step='4'] #desktop-steps > .step.active > .circle > .img { margin: 2px 5px 0 0; }
.step-3 > .row { }
    .step-3 > .row > .field { padding: 0; }
    .step-3 > .row.hhq { border-bottom: solid 1px #e6e6e6; font-size: 15px; align-items: center; padding: 22px 0; cursor: default; display: flex; margin: 0; }
        .step-3 > .row.hhq .radio-group-c { display: none; }
        .step-3 > .row.hhq .radio-group > .checkbox-label { display: none; }
        .step-3 > .row.hhq .radio-group > br { display: none; }
    .step-3 > .row:not(.hhq) { padding-top: 40px; }
.step-4 > .row { }
    .step-4 > .row .radio-group-c { display: none; }
    .step-4 > .row > .field { padding: 0; }
    .step-4 > .row.hhq { border-bottom: solid 1px #e6e6e6; font-size: 15px; align-items: center; padding: 22px 0; cursor: default; }
    .step-4 > .row:not(.hhq) { padding-top: 30px; }

.step-5 .eth-h b { background: #EFEFF4; display: block; text-transform: uppercase; padding: 15px 25px; font-size: 19px; }
.step-5 .eth-chk { display: block; }
    .step-5 .eth-chk .field-main { display: flex; align-items: center; }
        .step-5 .eth-chk .field-main input { display: none; }
        .step-5 .eth-chk .field-main .gol-chk { margin-right: 10px; }

.S5_DonationLbl u { text-decoration: none; }
    .S5_DonationLbl u b, .step-6 .blue-h { font-size: 34px; text-align: center; margin-top: 60px; display: block; color: #00B5D5; }

#thanks { display: none; padding: 0 20px; max-width: 600px; margin: 0 auto; font-size: 18px; }
    #thanks > h3 { color: #1B445E; font-size: 40px; text-align: center; }
    #thanks > .save-more-h { color: #F05622; font-size: 30px; text-align: left; }
    #thanks > .if-comments { font-size: 16px; margin-top: 30px; margin-bottom: 60px; }
    #thanks > p { font-size: 20px; max-width: 740px; margin: 0 auto; }
        #thanks > p > b { font-size: 28px; }
        #thanks > p > a { text-decoration: none; }
    #thanks > .share { text-align: center; }
        #thanks > .share > h3 { color: #00B5D5; font-size: 28px; }
        #thanks > .share > p { font-size: 20px; max-width: 740px; margin: 0 auto 40px; }
        #thanks > .share > .btns { display: flex; justify-content: center; margin: 40px; }
            #thanks > .share > .btns > .b { margin: 0 10px; text-decoration: none; color: inherit; cursor: pointer; }

#badges { display: flex; justify-content: center; }
    #badges > .badge { margin: 0 10px; }
        #badges > .badge > img { display: block; margin-bottom: 10px; }

.send-invites { display: flex; margin-top: 20px; align-items: flex-start; }
    .send-invites > .send { background: #008489; color: white; border: none; border-radius: 4px; font-size: 14px; padding: 7px 15px; }
.send[disabled] { opacity: .5; cursor: not-allowed; }
.multi-email-input { flex: 1; border: solid 1px #ddd; margin-right: 5px; padding: 5px 5px; font-size: 14px; }
    .multi-email-input > .i { border: none; outline: none; font-size: 14px; width: 100%; }
    .multi-email-input .emails-w { display: flex; flex-wrap: wrap; }
        .multi-email-input .emails-w > .email { background: #f5f5f5; margin-right: 5px; padding: 2px 5px; margin-bottom: 5px; }
            .multi-email-input .emails-w > .email.active { background: #767676; color: white; }
            .multi-email-input .emails-w > .email > .rm { margin-left: 6px; cursor: pointer; }
    .multi-email-input > .cover { display: none; }
    .multi-email-input.show-cover > .cover { display: block; }
    .multi-email-input.show-cover > .emails-w, .multi-email-input.show-cover > .i { display: none !important; }
    .multi-email-input > .cover > .more { margin-left: 6px; cursor: pointer; color: #008489; }

#share-link-w > h3 { color: #F05622; font-size: 22px; margin-bottom: 0; }
#share-link { display: flex; align-items: center; }
    #share-link > .share-w { flex: 1; position: relative; margin-right: 15px; }
        #share-link > .share-w > .copy { position: absolute; right: 10px; top: 2px; color: #008489; cursor: pointer; }
        #share-link > .share-w > .link { border: solid 1px #ddd; width: 100%; padding: 5px 80px 5px 10px; font-size: 14px; box-sizing: border-box; }
    #share-link > .icons > .i { margin-right: 10px; cursor: pointer; }
#copy-box, #sms-box { position: absolute; left: -1000px; }
.dialog-1 { background: rgba(0,0,0,.5); position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 100; overflow: auto; display: none; }
    .dialog-1 > .c { width: 376px; position: absolute; left: 50%; background: white; margin-left: -188px; padding: 30px 40px; top: 60px; margin-bottom: 20px; }
        .dialog-1 > .c > .cls { cursor: pointer; }
        .dialog-1 > .c > h3 { margin: 25px 0 25px 0; font-size: 22px; }
        .dialog-1 > .c h4 { font-size: 18px; }
#share-d > .c > .items > .i { border-top: solid 1px #ddd; display: flex; align-items: center; height: 70px; cursor: pointer; }
    #share-d > .c > .items > .i > .icon { width: 20px; display: flex; align-items: center; justify-content: center; margin-right: 10px; }
    #share-d > .c > .items > .i > .t { color: #008489; }
#invites-d > .c { width: 500px; margin-left: -250px; top: 80px; }
    #invites-d > .c > .emails-w { border-bottom: solid 1px #ddd; padding-bottom: 25px; margin-bottom: 25px; }
    #invites-d > .c > .msg { border-bottom: solid 1px #ddd; padding-bottom: 20px; margin-bottom: 30px; }
    #invites-d > .c > .send { background: #008489; color: white; width: 100%; border: none; padding: 12px 20px; border-radius: 4px; cursor: pointer; font-weight: bold; }

@media(max-width:1199px) {
    #sf-video { display: block; margin-top: 20px; }
        #sf-video > #stepflow { margin: 0 0 90px 0; }
    #main-content[step='3'] .intro { margin: 0 auto; }
    h3.tk-chantal, h5.tk-chantal { font-size: 30px; }
}

@media(min-width:768px) {
    #mobile-steps-wrap { display: none; }
}

@media(max-width:767px) {
    #desktop-steps { display: none; }

    .radio-group-c { display: block; }
        .radio-group-c > .gol-chk-w { margin-bottom: 10px; }
        .radio-group-c > .checkbox-label { display: block; }

    h3.tk-chantal, h5.tk-chantal { font-size: 26px; }

    #main-content[step='3'] .intro { width: auto; }
}