.donation-banner {

    display: none;

    opacity: 0;

    transition:
        opacity 0.5s ease;

    text-align: center;

    padding: 14px;

    background: #111;

    color: #fff;
}

/* progress bar */

.progress-bar {

    width: 100%;

    max-width: 240px;

    height: 7px;

    background: #333;

    border-radius: 5px;

    margin: 10px auto;

    overflow: hidden;
}

.progress-fill {

    height: 100%;

    width: 0%;

    background: #4caf50;

    transition:
        width 1s ease;
}

/* ============================================================
   DONATE BUTTON
   ============================================================ */

.donate-btn {

    display: inline-flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    margin-top: 10px;

    padding: 10px 14px;

    background:
        linear-gradient(
            145deg,
            #ff3b3b,
            #ff8a00
        );

    border-radius: 14px;

    text-decoration: none;

    box-shadow:
        0 6px 0 #b31f1f,
        0 10px 18px rgba(0,0,0,.35);

    transform:
        translateY(0)
        scale(.95);

    transition:
        all .15s ease;
}

.donate-btn img {

    width: 180px;

    max-width: 85%;

    height: auto;
}

.donate-text {

    margin-top: 5px;

    font-size: 14px;

    font-weight: bold;

    color: #fff;
}

.donate-btn:hover {

    transform:
        translateY(-6px)
        scale(1.02);

    box-shadow:
        0 12px 0 #b31f1f,
        0 18px 28px rgba(0,0,0,.45);
}

.donate-btn:active {

    transform:
        translateY(-2px)
        scale(.98);

    box-shadow:
        0 4px 0 #b31f1f,
        0 8px 15px rgba(0,0,0,.3);
}