/* Header */
.out.give .promo {
    background: #76C8C2;
}

.out.give .section__title {
    color: #76C8C2;
}

.out.give .section__link.active {
    border-color: #76C8C2;
    color: #76C8C2;
}

.out.give .btn_custom {
    border-color: rgba(180, 134, 171, 0.4);
    color: #76C8C2;
}

.out.give .btn_custom:hover {
    background: #76C8C2;
    color: #FFF;
}

/* Loaders */
.donations-loader {
    margin: 0 auto 0 !important;
}

.donations-loader > div {
    background-color: #ffffff !important;
}

.donations-loader-container {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
}

.donations-loader-description {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #ffffff;
}

/* Server Unavailable */
.giving-server-unavailable {
    text-align: center;
}

/* Form */
.form-step-wrap {
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
    width: 100%;
    height: 75vh;
}

.slider-step {
    /*box-shadow: 5px 5px 50px rgba(0,0,0,0.2);*/
    position: absolute;
    background-color: transparent;
    padding: 40px;
    width: 100%;
    right: -100%;
    top: 0px;
    opacity: 0;
    -webkit-transition:all, 0.3s linear;
    -moz-transition: all, 0.3s linear;
    -ms-transition: all, 0.3s linear;
    -o-transition: all, 0.3s linear;
    transition: all, 0.3s linear;
    display: block;
    height: 100%;
}

.first-step {
    right: 0;
    opacity: 1;
}

.form-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.form-row input, select {
    flex-grow: 1;
    margin: 5px;
    width: auto;
}

.button_row {
    right: 0;
    padding: 0 5% 0 5%;
    margin-top: 20px;
    bottom: 20px;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.button_row_final {
    justify-content: center;
    flex-direction: row;
}

.btn-next, .btn-back {
    width: 40%;
}

.btn-next {
    right: 0;
}

.btn-back {
    left: 0;
}

[data-anim="show-from--right"]{
    right: 0;
    opacity: 1;
}

[data-anim="show-from--left"]{
    right: 0;
    opacity: 1;
}

[data-anim="hide-to--right"]{
    right: -100%;
    opacity: 0;
}

[data-anim="hide-to--left"]{
    right: 100%;
    opacity: 0;
}


/* Errors */
.error-overlay-content {
    text-align: center;
    color: #ffffff;
    padding: 25%;
}

.error-overlay-message {
    margin-bottom: 25px;
}

.error-overlay-close-button {
    background: transparent;
    border: 1px solid white;
    color: #ffffff;
}

/* Account or Guest */
.account-options-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.account-options-container .form-row {
    justify-content: center;
}

.account-options-container input, .account-options-container .collapsible_body {
    max-width: 40%;
}

.account-established-container {
    flex: 1 0 50%;
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
}

.account-guest-container {
    flex: 1 0 50%;
    width: 100%;
    text-align: center;
}

.account-option-description {
    text-align: center;
    margin-bottom: 15px;
    width: 100%;
}

#donation-account-login-button, #donation-account-guest-button {
    margin-top: 25px !important;
}

/* Campaigns */
input[name=donation-campaign] {
    display: none;
}

input[name=donation-campaign]:checked ~ label {
    transition: all 0.2s ease-in-out;
    transform: scale(1.05, 1.05);
}

input[name=donation-campaign]:checked ~ label .design__wrap {
    transition: background-color 1ms ease-in-out;
    background-color: #5CCCAC;
}

input[name=donation_amount] {
    border: 0;
    border-bottom: 2px solid black;
    font-size: 30px;
    line-height: 35px;
    height: 50px;
    text-align: center;
    padding: 10px;
    background-color: transparent;
    max-width: 100%;
    width: 20%;
}

input[name=donation_amount] + label {
    display: block;
    position: relative;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    -webkit-transition: width 0.4s ease;
    -moz-transition: width 0.4s ease;
    -ms-transition: width 0.4s ease;
    -o-transition: width 0.4s ease;
    transition: width 0.4s ease;
}

input[name=donation_amount]:focus + label {
    width: 80%;
}

input[name=donation_amount] + label > span {
    font-weight: 300;
    position: relative;
    color: #8f8f8f;
    font-size: 32px;
    top: 0px;
    z-index: -1;
    transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}

input[name=donation_amount]:focus + label > span {
    top: 10px;
    font-size: 22px;
}

.campaign-col {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: calc(33.33% - 30px);
    margin: 15px;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    float: left;
    transition: all 0.2s ease-in-out;
}

.campaign-amount-wrapper {
    margin-top: 30px;
    opacity: 1;
    text-align: center;
    display: none;
}

.amount-input {
    width: 100%;
    margin-bottom: 0em;
    position: relative;
    background-color: #459981;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.amount-input label {
    text-align: left;
    display: inline-block;
    font-weight: 700;
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 10px;
    top: -1.25em;
    left: 0.5em;
    font-style: italic;
    user-select: none;
}

.amount-input input {
    background-color: transparent;
    text-align: left;
    font-weight: 300;
    color: #ffffff;
    font-size: 2em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 10px 10px 0;
    height: 1.5em;
    width: 70%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    outline: none;
    border: 0px solid rgba(132,178,255, 0.67);
}

.amount-input input::placeholder {
    color: #ffffff;
    opacity: 0.8;
}

.amount-input input::-webkit-input-placeholder {
    color: #ffffff;
    opacity: 0.8;
}

.amount-input input::-ms-input-placeholder {
    color: #ffffff;
    opacity: 0.8;
}

#campaigns-error-message {
    display: none;
    text-align: center;
    color: red;
}

/* Donor Information */
#donor-info-address-container {
    margin-bottom: 10px;
    font-size: 20px;
    color: #202020;
}

#donor-info-contact-container {
    margin-bottom: 15px;
    font-size: 16px;
    color: #202020;
}

#donation-city {
    flex-basis: 45%;
}

#donation-state {
    flex-basis: 15%;
}

#donation-zip {
    flex-basis: 1%;
}

#donation-notes {
    margin: 1%;
    width: 100%;
    resize: none;
    padding: 10px;
    text-transform: capitalize;
}

/* Review & Payment */
.donation-review-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

#donation-review-donor-info-container {
    padding: 2%;
    flex-basis: 100%;
    flex-grow: 1;
}

#donation-review-campaigns-info-container {
    flex-basis: 40%;
    flex-grow: 1;
}

.donation-review-campaign-row {
}

.donation-review-campaign-amount {
    font-size: 24px;
    text-align: right;
}

.donation-review-campaign-description {
    margin-bottom: 8px;
    opacity: 0.6;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 4px;
    float: left;
    text-align: left;
}

.donation-review-total-amount-row {
    margin: 20px 0 25px 0;
    padding: 10px 0 0 0;
    text-align: right;
    border-top: 1px solid #EAEAEA;
}

.payment-loader-container {
    flex-basis: 50%;
    flex-grow: 1;
}

.payment-loader {
    margin: 0 auto;
}

#donation-payment-info-container {
    flex-basis: 50%;
    flex-grow: 1;
    display: none;
}

.payment-loader-description {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-align: center;
    opacity: 0.6;
}

.saved-card-details-container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 75%;
    padding: 10px;
    margin: 10px auto 0 auto;
    border: 1px solid black;
}

input[name=vaulted-payment-method] {
    display: none;
}

.payment-method-sub-description {
    font-size: 14px;
    font-style: italic;
    opacity: 0.75;
}

.payment-methods-group {
    margin-bottom: 25px;
}

.payment-methods-group-header {
    width: 80%;
    margin: 0 auto 10px auto;
    text-align: center;
    opacity: 0.75;
}

.selected_payment_method {
    border: 3px solid green;
}

.delete-card-confirmation {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: white;
    visibility: hidden;
}

.delete-card-confirmation p {
    padding: 5px;
}

.delete-card-confirmation-buttons {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    flex-basis: 15%;
}

.delete-card-confirmation-buttons div {
    flex-basis: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-right: 5px;
}

.delete-card-confirmation-buttons div:nth-child(1) {
    color: red;
}

.delete-card-confirmation-buttons div:nth-child(2) {
    opacity: 0.75;
}

.credit-card-form-field {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}

#card-number, #cvv, #expiration-date {
    height: 40px;
    width: 100%;
    padding: 10px;
    border-radius: 3px 0 0 3px;
    border: 1px solid black;
    margin-top: 2%;
    margin-bottom: 2%;
}

#expiration-month, #expiration-year {
    height: 40px;
    width: 50%;
    padding: 10px;
    border-radius: 3px 0 0 3px;
    border: 1px solid black;
    margin-top: 2%;
    margin-bottom: 2%;
}

#cvv-container {
    width: 45%;
    margin-right: 5%;
    float: left;
    display: inline-block;
}

#expiration-date-container {
    width: 45%;
    margin-left: 5%;
    display: inline-block;
}

#card-number.braintree-hosted-fields-invalid {
    border: 1px solid red;
}

.vault-current-card-container {
    width: 80%;
    margin: 10px auto 0 auto;
    text-align: center;
}

.vault-current-card-container input {
    width: auto;
    height: auto;
}

#paypal-button {
    text-align: center;
}

@media only screen and (max-width: 1023px) {
    /* Form */
    .button_row {
        position: relative;
        margin-top: 5%;
    }
}

@media only screen and (max-width: 767px) {
    /* Form */
    .form-step-wrap {
        height: 120vh;
    }

    .slider-step {
        padding: 0;
    }

    .button_row {
        position: relative;
        flex-wrap: wrap-reverse;
        margin-top: 5%;
        bottom: 0;
    }

    .btn-next, .btn-back {
        width: 100%;
    }

    /* Account or Guest */
    .account-options-container input, .collapsible_body {
        max-width: 100%;
        min-width: 75%;
        width: auto;
    }

    /* Campaigns */
    .campaign-col {
        width: 100%;
        margin: 0;
        overflow: hidden;
    }

    /* Review and Payment */
    .saved-card-details-container {
        width: 100%;
    }

    .credit-card-form-field {
        width: 100%;
    }

    #cvv-container {
        width: 100%;
        margin-right: 0;
    }

    #expiration-date-container {
        width: 100%;
        margin-left: 0;
    }

    .vault-current-card-container {
        width: 100%;
    }

    #payment-error-container, #account-error-container {
        padding: 10%;
    }

    #payment-error-close-button, #account-error-close-button {
        width: 60%;
    }
}