﻿#dc-w { background: #F4F4F4; padding: 50px 0; }
#dc { width: 1220px; margin: 0 auto; }
#dc-cover { z-index: 100; }
.save-cancel { margin-top: 10px; margin-bottom: 20px; }
    .save-cancel > .cancel { margin-right: 40px; text-transform: uppercase; color: #aaa; font-weight: bold; }
    .save-cancel > .save { width: 200px; }
/*mobile title*/
#mob-title-table { width: 100%; }
#mob-title-row > .give { vertical-align: middle; padding-left: 10px; text-align: center; }
    #mob-title-row > .give > .btn-g { margin-bottom: 12px; padding: 8px 12px; height: 45px; font-size: 16px; }
#mob-title-row > .title h2 { margin-bottom: 0; }
#fb-twitter-mobile-top { text-align: center; }
    #fb-twitter-mobile-top > a:first-child { margin-right: 6px; }
#share-dc-w > .link > span { cursor: pointer; }
    #share-dc-w > .link > span.active { background: white; color: #C0C0C0; }
#main-part > .c-row { margin-bottom: 5px; }

/*banner row*/
#main-img-share { margin: 0; display: flex; height: 326px; }
#main-img-w, #share-dc-w { padding: 0; overflow: hidden; }
    #main-img-w > img { height: 100%; width: 100%; }
    #main-img-w > .ctrls { position: absolute; bottom: 0; right: 0; background: rgba(255,255,255,.5); }
    #main-img-w.gol-cropper > img { position: absolute; }
#banner-edit { position: absolute; bottom: 10px; left: 10px; }

#dc-stats { margin: 0; display: flex; height: 135px; color: white; font-weight: bold; text-transform: uppercase; }

/*banner upload*/
#stock-images { max-height: 450px; overflow: auto; display: flex; flex-wrap: wrap; }
    #stock-images > .img-w { cursor: pointer; width: 365px; margin: 10px; }
        #stock-images > .img-w > img { width: 100%; }
#banner-uploads { background: #efefef; padding: 10px 15px; }
    #banner-uploads > .ctrls { margin-top: 10px; display: flex; justify-content: space-between; }
        #banner-uploads > .ctrls > .save-cancel { margin-right: 15px; order: 2; }
#upload-new-banner { margin-top: 20px; cursor: pointer; }

/*breadcrumbs*/
#breadcrumbs { text-transform: uppercase; color: #888B8D; font-weight: bold; font-size: 14px; margin-bottom: 20px; }
    #breadcrumbs > a { text-decoration: none; color: #0000FF; }
/*heading/bio*/
.edit-icon { color: white; border-radius: 20px; width: 32px; height: 32px; display: inline-flex; font-size: 14px; cursor: pointer; box-sizing: border-box; justify-content: center; align-items: center; }
#url-settings-w > .main-cell > i { margin-top: 6px; display: block; }
#url-settings { padding-top: 15px; }
    #url-settings > .alias { display: inline-block; width: auto; margin-bottom: 10px; }
    #url-settings > label { font-weight: normal; }
#bio-row { margin-top: 20px; }
/*comments*/
#comments-count { text-align: right; margin-top: 20px; cursor: pointer; }
#comments { margin-bottom: 80px; }
    #comments > .list { margin-top: 20px; }
.comment { margin-bottom: 30px; }
    .comment > p { margin-bottom: 0; }
    .comment > .name-w > .name { text-transform: uppercase; font-family: "Gotham A", "Gotham B", sans-serif; }
.comment-delete { color: #F05622; float: right; font-size: 20px; cursor: pointer; }
.new-comment { margin-top: 50px; }
    .new-comment > textarea { width: 100%; padding: 10px 20px; box-sizing: border-box; }
    .new-comment > button { width: 250px; margin-top: 20px; margin-right: 20px; }

/*right side*/
.right-box { border-radius: 5px; overflow: hidden; margin-bottom: 8px; }
    .right-box > .header { text-align: center; color: white; text-transform: uppercase; font-weight: bold; border-bottom-left-radius: 0; font-size: 21px; height: 46px; display: flex; justify-content: center; align-items: center; position: relative; }
    .right-box > .part { background: #F2F2F2; border-bottom: solid 1px #c0c0c0; padding: 18px 20px; font-weight: bold; display: none; font-size: 18px; }
        .right-box > .part:last-child { border-bottom: none; }
    .right-box:not(.no-items) > .header { cursor: pointer; }
    .right-box > .part.dis-none {
        display: none !important;
    }
#page-settings > .part { text-transform: uppercase; }
    #page-settings > .part > label { width: 100%; margin-bottom: 0; font-weight: 500; cursor: pointer; font-size: 0.8em; }
        #page-settings > .part > label > .chk { float: right; }
#right-side > .btn-g { width: 100%; margin-bottom: 8px; padding-left: 0; padding-right: 0; font-size: 21px; }
#goal-ctrl > .amount-w > .amount { margin-top: 10px; }
#goal-ctrl > .amount-w > .save-cancel > .save { height: 40px; padding-top: 8px; width: 150px; }

/*honor roll*/
#honor-roll > .part { height: 270px; overflow: hidden; }
    #honor-roll > .part > .content > .item { height: 80px; font-size: 12px; }
        #honor-roll > .part > .content > .item > b { font-size: 16px; }
    #honor-roll > .part:hover > .content { animation-play-state: paused; -webkit-animation-play-state: paused; }

/*members*/
#members-list > .list { max-height: 300px; overflow: auto; }
/*blogs*/
#blogs { background: white; border-radius: 5px; padding: 50px 65px; margin-top: 32px; }
    #blogs > h2 { margin: 0; font-size: 32px; color: #02384B; }
    #blogs > .list { margin: 0 -30px; }
.blog { padding: 35px 30px; max-width: 320px; }
    .blog > .title { font-weight: bold; font-size: 21px; }
    .blog > .date { font-weight: bold; font-size: 15px; color: #FF4200; text-transform: uppercase; margin-top: 10px; }
    .blog > .summary { margin-top: 10px; }
    .blog > .btn-w { margin-top: 20px; }
        .blog > .btn-w > .btn-g { border: solid 1px #AAAAAA; color: #555; height: 44px; }
    .blog > .ctrls { margin-top: 10px; }
        .blog > .ctrls > i { cursor: pointer; }
/*blog edit*/
#blog-edit { padding: 50px 0; margin-bottom: 50px; }
    #blog-edit .title { margin-bottom: 20px; border: solid 1px #ddd; border-radius: 5px; font-size: 18px; padding: 5px 10px; width: 100%; box-sizing: border-box; }
    #blog-edit > h3 { text-transform: uppercase; font-size: 30px; margin-bottom: 20px; }
#blog-edit-content { background: white; padding: 10px; }

/*recent activity*/
#recent-activity { background: white; border-radius: 5px; padding: 50px 65px; margin-top: 30px; }
    #recent-activity > h3 { margin: 0; text-transform: uppercase; font-size: 32px; color: #02384B; }
    #recent-activity > .list { margin: 35px -30px; }
        #recent-activity > .list .item { width: 320px; margin: 0 30px; }
            #recent-activity > .list .item > h5 { font-size: 21px; margin: 0; }
            #recent-activity > .list .item > .date { text-transform: uppercase; font-weight: bold; font-size: 15px; margin-top: 10px; }
            #recent-activity > .list .item > .share { height: 44px; }

/*blog*/
h2.blog { margin-top: 0; }
.fb-tw1.blog { text-align: right; margin-bottom: 0; }
    .fb-tw1.blog > .fb { color: #062B31; }
    .fb-tw1.blog > .tw { color: #4EC6DF; }
    .fb-tw1.blog > a { text-align: center; padding-bottom: 0; }

/*editing*/
.ok-cancel { margin-top: 10px; }
    .ok-cancel > i { cursor: pointer; }
    .ok-cancel > .ok { margin-right: 10px; }
#heading-row > .main-cell > input { max-width: 100%; font-weight: bold; font-size: 32px; }

/*misc*/
#main-img-w { width: 855px; position: relative; }

#share-dc-w { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #EAEAEA; }
    #share-dc-w > .btn-g { margin: 10px 0; width: 170px; box-sizing: border-box; padding: 0; }
    #share-dc-w > .share { background: #888B8D; }
        #share-dc-w > .share > i { font-size: 22px; }

#dc-stats > .swabs { background: #888B8D; }
#dc-stats > .stat { flex: 1; display: flex; justify-content: center; align-items: center; }
    #dc-stats > .stat > .c { margin-left: 30px; text-align: center; }
        #dc-stats > .stat > .c > .lbl { font-size: 18px; }
        #dc-stats > .stat > .c > .text { font-size: 36px; }
#dc-stats.has-dollars { height: 244px; }
    #dc-stats.has-dollars > .stat { flex-direction: column; }
        #dc-stats.has-dollars > .stat > .c { margin-left: 0; margin-top: 20px; }
#dollars-raised { background: #02384B; }

#bio-container { background: white; padding: 38px 26px 30px 46px; }
#bio { font-size: 18px; color: #333; }
    #bio img { max-width: 100%; height: auto !important; }

.right-box > .part > .item > a { color: blue; text-decoration: none; }
.right-box:not(.open):not(.no-items) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.right-box:not(.no-items) > .header:after { content: '\e80F'; font-family: "fontello"; position: absolute; right: 10px; }
.right-box.open > .header:after { content: '\e80E'; }
.right-box.open > .part { display: block; }

#giving-goal { font-weight: bold; font-size: 18px; margin-bottom: 35px; }
    #giving-goal > .t > .donated { font-size: 29px; }
    #giving-goal > .bar { height: 21px; background: #BFE3D3; border-radius: 50px; margin-top: 5px; }
        #giving-goal > .bar > .inner { background: #02A95C; height: 100%; border-radius: 50px; }

#new-campaign-d > .c { padding: 20px 20px; }
    #new-campaign-d > .c > .modal-header { border-bottom: solid 1px #ccc; padding-bottom: 15px; }
        #new-campaign-d > .c > .modal-header > h4 { margin: 0; font-size: 24px; }
    #new-campaign-d > .c > .modal-body { font-weight: bold; border-bottom: solid 1px #ccc; margin-bottom: 20px; }

/*desktop*/
@media(min-width:1440px) {
    #right-side { margin-left: 190px; width: 330px; }
    #blogs > .list { display: flex; flex-wrap: wrap; }
}

/*!desktop*/
@media(max-width:1439px) {
    #dc-w { padding: 34px 0; }
    #dc { width: 700px; }

    #main-img-w { width: 491px; }
    #main-img-share { height: 188px; }

    #share-dc-w > .btn-g { width: 136px; font-size: 14px; margin: 7px 0; }

    #dc-stats { height: 86px; }
        #dc-stats.has-dollars { height: 146px; }
            #dc-stats.has-dollars > .stat > .c { margin-top: 15px; }
        #dc-stats > .stat > .i { width: 55px; }
        #dc-stats > .stat > .c { margin-left: 15px; max-width: 100px; }
            #dc-stats > .stat > .c > .lbl { font-size: 11px; }
            #dc-stats > .stat > .c > .text { font-size: 23px; }

    #right-side { margin-left: 36px; width: 220px; }
        #right-side > .btn-g { font-size: 17px; }
    .right-box > .header { font-size: 17px; }

    #breadcrumbs { font-size: 12px; }

    #heading-row > .main-cell > h2 { font-size: 28px; }

    #bio-container { padding: 20px 14px 20px 28px; }
    #bio { font-size: 16px; }
        #bio > p:first-child { margin-top: 0; }

    #blogs > h2 { font-size: 28px; }
    #recent-activity > h3 { font-size: 28px; }
    #blogs { padding: 28px 55px; }
        #blogs > .list { margin: 0 -19px; }
    .blog { padding: 19px; }
        .blog > .title { font-size: 19px; }
        .blog > .date { font-size: 14px; }
        .blog > .summary { font-size: 15px; }
        .blog > .btn-w > .btn-g { height: 40px; }
}

/*mobile*/
@media(max-width: 767px) {
    #dc-w { padding: 0; }
    #dc { width: auto; }
    #bio-container { padding: 20px 20px; }
    #banner-container { width: 100%; padding: 0; }
    #heading-row { margin-top: 12px; margin-bottom: 12px; }
        #heading-row > .main-cell > h2 { margin-top: 0; font-size: 22px; }

    #main-img-share { height: 38vw; }

    #dc-stats { height: auto; }
        #dc-stats > .stat { height: 112px; flex-direction: column; }
            #dc-stats > .stat > .i { width: 40px; }
            #dc-stats > .stat > .c { margin-left: 0; margin-top: 5px; }
                #dc-stats > .stat > .c > .lbl { font-size: 10px; height: 25px; display: flex; flex-direction: column; justify-content: flex-end; }
                #dc-stats > .stat > .c > .text { font-size: 18px; }

    #share-dc-w { background: no-repeat; margin-top: 20px; }
        #share-dc-w > .btn-g { height: 40px; }

    #blogs { margin-top: 0; border-radius: 0; border-top: solid 1px #E8E8E8; padding: 26px; }
        #blogs > h2 { font-size: 22px; }

    #recent-activity { margin-top: 0; border-top: solid 1px #E8E8E8; border-radius: 0; padding: 26px; }
        #recent-activity > h3 { font-size: 22px; }

    #right-side { background: white; width: auto; margin: 0; padding: 36px 26px; border-top: solid 1px #E8E8E8; }
        .right-box, #right-side > .btn-g { margin-bottom: 19px; }

    .slick-slider > .icon-right-open { right: 5px; font-size: 22px; background: white; }
    .slick-slider > .icon-left-open { display: none !important; }
}

/*!mobile*/
@media(min-width: 768px) {
    #main-w { display: flex; flex-direction: row; }
    #main-part { flex: 1; }
        #main-part > .c-row { display: flex; }
            #main-part > .c-row > .icon-cell { width: 50px; flex: none; }
            #main-part > .c-row > .main-cell { flex: 1; }
    #right-side { flex: none; }
    #heading-row > .main-cell > h2 { width: 75%; margin: 0; line-height: 1em; }
    /*title*/
    .blog-title-social { display: flex; display: -webkit-flex; }
        .blog-title-social > h2 { margin-right: 20px; flex: 1; margin-top: 0; }
}
