:root {
  --positive-size: 0.5rem;
  --negative-size: -0.5rem;
  --color: var(--primary-3);
  --background: var(--primary-2);
  --active: var(--primary-3);
  --white: WHITE;
}
.single-campaign h1 {
    margin-bottom: 1.5rem;
}
input[type="radio"]:checked ~ label {
    background-color: var(--primary-2)!important;
    color: var(--white)!important;
}
.page.wrapper {
    display: flex;
    gap: 5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 0;
    padding-right: 0;
    &.cold {
        flex-flow: column-reverse;
    }
    &.warm {
        flex-flow: column;
    }
    & .ask.wrapper {
    }
    & .donation.wrapper {
        position: relative;
        & strong {
            line-height: 1rem;
            margin-top: 1.5rem;
            display: block;
        }
        & input[type=radio] {
            height: 0;
            width: 0;
        }
        & .frequency.wrapper {
            & .frequencies {
                display: flex;
                margin-top: calc(var(--positive-size) * 2);
                margin-bottom: calc(var(--positive-size) * 2);
                position: relative;
                transform: translateX(var(--negative-size));
                width: calc(100% + 0.5rem);
                gap: var(--positive-size);
                max-width: 100%;
            }
            & .frequency {
                width: 100%;
                position: relative;
                cursor: pointer;
                display: contents;
                & input[type=radio]:checked+label {
                    background-color: var(--active);
                    color: var(--white);
                }
                & .frequency label {
                    background-color: #88C5E2;
                    /*border: 1px solid var(--active);*/
                    font-size: calc(var(--positive-size) * 2);
                    padding: calc(var(--positive-size) * 2);
                    /*color: var(--color);*/
                    opacity: 1;
                    width: calc(100% + calc(var(--positive-size) * 3));
                    transition: ease-out 0.2s all;
                    text-transform: uppercase;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: var(--radius);
                    cursor: pointer;
                }
                &:not(:first-of-type) {
                    margin-left: calc(var(--positive-size) * 0.5);
                }
                &:not(:last-of-type) {
                    margin-right: alc(var(--positive-size) * 0.5);
                }
            }
        }
        & .amount.wrapper {
            position: relative;
            .amount.group {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                column-gap: calc(var(--positive-size) * 2);
                width: calc(100% + calc(var(--positive-size) * 2));
                justify-content: flex-start;
                & .amount {
                    margin-top: var(--negative-size);
                }
                & label {
                    line-height: calc(var(--positive-size) * 4);
                    cursor: pointer;
                    height: auto;
                    display: flex;
/*                    color: var(--color);*/
                    flex-flow: column;
                    text-align: center;
                    border-radius: var(--radius);
                    background-color: #88C5E2;
                    overflow: hidden;
                    padding-top: calc(var(--positive-size) * 2);
                    padding-bottom: calc(var(--positive-size) * 2);
                    & > * {
                        flex: 1;
                        display: list-item;
                        list-style: none;
                    }
                    & .amount-image {
                        display: none;
                    }
                    & .amount-statement {
                        display: none;
                    }
                }
                & .amount-value {
                    font-size: calc(var(--positive-size) * 2.5);
                    font-weight: bold;
                    line-height: 3rem;
                    margin: var(--positive-size);
                    margin-bottom: calc(var(--negative-size) * 0.5);
                    line-height: calc(var(--positive-size) * 3);
                    /* transform: translateY(calc(50% - 0.5rem)); */
                    min-height: calc(var(--positive-size) * 4);
                }
                & .amount.other .amount-value span {
                    font-weight: normal;
                }
            }
        }
        & .best-gift.wrapper {
            & span.cur-symbol {
                background: var(--background);
                display: inline-block;
                line-height: 1.625rem;
                vertical-align: middle;
                padding: 0.5rem;
                margin: 0;
                position: relative;
                top: -2px;
                color: var(--white);
                width: 2rem;
                text-align: center;
            }
            & input#best-gift {
                width: calc(50% - 2rem);
                padding: 0.5rem 0.5rem;
                margin: 0.5rem 0;
                border: 1px solid var(--background);
            }
            & .best-gift.group {
                margin-top: 0.5rem;
                margin-bottom: 0.5rem;
            }
        }
        & .payment.wrapper input#paynow_btn {
            width: 50%;
            font-weight: bold;
            margin-top: var(--positive-size);
            border-radius: var(--radius);
        }
    }
}

/* put it after Bootstrap so its rules win */
.payment.wrapper { position: relative; }        /* anchor for absolute spinner */
 
.btn-spinner {
    position: absolute;
    top: 56%;
    width: 1rem;
    left: 2%;
    height: 1rem;
    margin-top: -.5rem;
    border: .15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btnspin .75s linear infinite;
    color: #fff;
}

@keyframes btnspin { to { transform: rotate(360deg); } }

@media only screen and (min-width: 768px) {
    .page.wrapper {
        padding-top: 3rem;
        padding-bottom: 3rem;
        padding-left: 0;
        padding-right: 0;
        &.warm {
            flex-flow: row;
        }
        &.cold {
            flex-flow: row-reverse;
        }
    }
}
html .page.wrapper .donation.wrapper.images .amount.wrapper .amount.group label {
    padding-top: 0;
    & .amount-image {
        flex: auto;
        height: 4rem;
        background-size: cover;
        background-position: center center;
        display: list-item;
        list-style: none;
    }
    & .amount-value {
        margin-top: calc(var(--positive-size) * 3);
    }
}
html .page.wrapper .donation.wrapper.statements .amount.wrapper .amount.group label .amount-statement {
    display: list-item;
    list-style: none;
    & p {
        --font-size: 0.8rem;
        font-size: var(--font-size);
        line-height: calc(var(--font-size) * 1.3);
        padding: 0 5%;
        text-align: center;
    }
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.consent label {
    max-width: 85%;
    display: inline-flex;
    margin-left: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.3rem;
    opacity: 0.7;
    margin-bottom: 0.5rem;
}
.secure.wrapper {
    max-width: 21rem;
    margin-top: 1rem;
}