@media (min-width: 320px) and (max-width: 334px) {

    img.img-responsive {
        width: 100%;
    }

    section.top-banner-detail-program div.box > div.dana > div:nth-child(1) {
        margin-top: 27px;
    }

    div.info-detail-program > div.box > div.dana > .box-program-nominal > .box-program-nominal-value > .program-donasi,
    div.info-detail-program > div.box > div.dana > .box-program-nominal > .box-program-nominal-value > .program-percent > b.value-program{
        font-size: 14px;
    }

    div.top-banner-program {
        margin-top: -30px;
        margin-bottom: 0px;
        padding-left: 15px;
        padding-right: 15px;
    }

}

@media (min-width: 335px) and (max-width: 767px){

    img.img-responsive {
        width: 100%;
    }

    div.top-banner-program {
        /*margin-top: 20px;*/
        margin-bottom: 35px;
        padding: 0;
    }

    section.top-banner-detail-program div.box > div.dana > div:nth-child(1) {
        margin-top: -40px;
        width: 47%;
    }

    #flex-2 {
        margin-top: 50px;
    }

    div.info-detail-program > div.box > div.dana > .box-program-nominal > .box-program-nominal-value > .program-donasi {
        font-size: 20px;
        font-weight: bold;
    }

    #subBlockA > label.caption, #subBlockB > label.caption, #subBlockC > label.caption {
        margin-bottom: 0;
    }

    .share-facebook,
    .share-twitter {
        padding: 0 10px;
    }

}

@media (min-width: 768px) and (max-width: 991px) {

    img.img-responsive {
        width: 100%;
    }

    div.info-detail-program > div.box > div.dana > .box-program-nominal > .box-program-nominal-value > .program-donasi,
    div.info-detail-program > div.box > div.dana > .box-program-nominal > .box-program-nominal-value > .program-percent > b.value-program{
        font-size: 13px;
        word-break: break-word;
    }

    div.info-detail-program > div.box > div.dana > .box-program-nominal > .box-program-nominal-value > .program-donasi {
        margin-right: 0px;
    }

    section.top-banner-detail-program div.box > div.dana > div:nth-child(1) {
        width: 39%;
    }

    .btn-byr-donasi:after {
        font-size: 12px;
    }

    .btn-detail {
        margin-top: 35px;
    }

    #blockA, #blockB {
        margin-top: 10px;
    }

    #subBlockA > label.caption,
    #subBlockB > label.caption,
    #subBlockC > label.caption{
        font-size: 11px;
    }

    #flex-2 {
        margin-top: 50px;
    }

    div.info-detail-program > div.box > div.dana > .box-program-nominal > .box-program-nominal-value > .program-donasi,
    div.info-detail-program > div.box > div.dana > .box-program-nominal > .box-program-nominal-value > .program-percent > b.value-program {
        font-size: 18px;
        font-weight: bold;
    }
    #subBlockA > label.caption, #subBlockB > label.caption, #subBlockC > label.caption {
        margin-bottom: 0;
    }

}

@media (max-width: 768px) {

    div.info-detail-program > div.box > div.dana > .box-program-nominal > #box-value-yatim > label#label-target {
        margin-top: 0px;
        /*margin-right: -4px;*/
        font-size: 12px;
    }
    div.info-detail-program > div.box > div.dana > .box-program-nominal > .box-program-nominal-value > .program-percent {
        display: inline-block;
        font-size: 14px;
        margin-right: -4px;
    }
    section.top-banner-detail-program div.box > div.dana > div:nth-child(1) {
        width: 100%;
        margin-bottom: 14px;
    }
    .btn-byr-donasi {
        font-size: 20px;
        border-radius: 5px;
        margin-bottom: -10px;
        letter-spacing: 0px;
        margin: 0px 0 -10px;
        padding: 0px;
        height: 46px;
        transition: .3s;
    }
    #subBlockB > label.value, #subBlockC > label.value {
        text-transform: capitalize;
        font-size: 13px;
        display: block;
    }

    div.top-banner-program,
    section.top-banner-detail-program div.box > div.description > label.title-detail{
        margin-bottom: 0px;
    }

    section.top-banner-detail-program div.box > div.description {
        padding: 10px 15px 0 15px;
        margin-bottom: -15px;
    }

    section.top-banner-detail-program div.box > div.description > label.title-detail {
        height: unset;
        padding-bottom: 10px;
        font-size: 20px;
        text-transform: uppercase;
    }

    div.info-detail-program > div.box > div.dana > .box-program-nominal > .box-program-nominal-value {
        margin: 0;
    }

    p#sampai_dengan {
        margin-left: 0;
    }

    .ket-nilai {
        margin: 0;
        position: absolute;
        top: -75px;
        right: 15px;
        background-color: var(--button-color);
        padding: 5px 10px;
        border-radius: 5px;
    }
    .ket-nilai > .nilai-potongan {
        text-align: right;
    }

    .ket-nilai > .nilai {
        margin-left: 0;
        color: #FFF;
        font-size: 20px;
        font-weight: 500;
        letter-spacing: 1px;
        margin-bottom: 0;
    }
    .ket-nilai > .ket {
        display: none;
    }

    div.info-detail-program > div.box > div.dana > .box-program-percent > div, div.info-detail-program > div.box > div.dana > .box-program-percent > div > div {
        border-radius: 3px;
        margin: -4px 0 -2px;
    }

    div.box-daerah-bmh,
    label.program-group-bmh{
        display: none;
    }

    div.bmh-blockPercent > span,
    div.bmh-blockPercent > small,
    div.bmh-blockSisawaktu > span,
    div.bmh-blockSisawaktu > small{
        font-size: 12px;
        color: #3c3c3c;
    }

    div#box-seq-2 {
        margin-top: -18px;
        margin-bottom: -2px;
    }

    div.info-detail-program > div.box > div.dana > .box-program-nominal > .box-program-nominal-value > .program-percent > span {
        font-size: 12px;
    }

    div.info-detail-program > div.box > div.dana > .box-program-nominal > .box-program-nominal-value > .program-percent > b.value-program,
    div.info-detail-program > div.box > div.dana > .box-program-nominal > .box-program-nominal-value > .program-percent > b{
        font-size: 12px;
        font-weight: bold;
        color: #333 !important;
    }

    .share-facebook, .share-twitter {
        padding: 0px;
    }

    div.info-detail-program > div.box > div.dana > .box-program-nominal > .box-program-nominal-value > .program-donasi {
        font-size: 18px;
    }

    .box-donasi-bottom > .box-button > button {
        font-size: 18px;
    }

    #shareFacebook, #shareTwitter {
        width: 39px;
    }

    .box-share {
        width: 100%;
    }

    .footer-bersedekah {
        display: block;
        margin-bottom: 65px;
    }

}