/*
* CSS for embedded Salsa Engage forms
* Developed by Jon Wheeler, PowerThru Consulting, June 2019
* jon@powerthruconsulting.com
*/

section:not(.section-signup-fullwidth):not(#engage_free_text) div[data-ignite-container-type="formContainer"] {
    border: 2px solid #545451;
}

#glc,
#sc,
#ssc,
#engage_codes {
    display: none;
}

input[type='radio'] {
    height: auto;
}

.sli-widget {
    font-family: "futura-pt", futura-pt, sans-serif;
}

.sli-widget h3 {
    margin: 0;
    line-height: 1;
}

.sli-donationsummary-dedication>div>label {
    font-weight: 700;
}

#engage_adoption_heading.section--donation {
    background-position: center;
}

.section--donation div.section--adoption__form .donation-period,
.section--donation div.section--donation__form .donation-period {
    position: relative;
    width: 100%;
    height: 44px;
}

.section--donation div.section--adoption__form .donation-period label input[type="radio"],
.section--donation div.section--donation__form .donation-period label input[type="radio"] {
    clip: rect(0, 0, 0, 0);
    position: absolute;
}

.section--donation div.section--adoption__form .donation-period.donation-period__extra label,
.section--donation div.section--donation__form .donation-period.donation-period__extra label {
    width: 50%;
    padding-left: 0;
    padding-right: 0;
}

.section--donation div.section--adoption__form .donation-period.donation-period__extra label:first-child,
.section--donation div.section--donation__form .donation-period.donation-period__extra label:nth-child(2) {
    width: 50%;
    left: 0;
}

.section--donation div.section--adoption__form .donation-period label,
.section--donation div.section--donation__form .donation-period label {
    width: 50%;
    position: absolute;
    left: 0;
    background-color: #545451;
    color: #fff;
    height: 44px;
    line-height: 22px;
}

.section--donation div.section--adoption__form .donation-period label.active,
.section--donation div.section--donation__form .donation-period label.active,
.section--donation .js-activate-extra-tab:not(.active)+label.button {
    background-color: #f1c205;
    color: #ffffff;
}

.section--donation div.section--adoption__form .donation-period.donation-period__extra label:nth-child(2),
.section--donation div.section--donation__form .donation-period.donation-period__extra label:nth-child(2) {
    left: 50%;
    right: 0;
    border-left: 2px solid #1d1d1b;
}

/*Adoptions*/
#primary_monkey_heading h3 {
    margin: 10px 0;
}

#primary_monkey_heading .formRow,
#donation_amount_adoption .formRow {
    float: none;
    position: relative;
    display: inline-block;
    min-width: 180px;
    min-height: 44px;
    max-width: 45%;
    width: 45%;
    margin: 4px;
    background-color: #fff;
    overflow: auto;
    padding: 0;
    border: 2px solid #1d1d1b;
}

#donation_amount_adoption .formRow label,
#primary_monkey_heading .formRow label {
    top: 0;
    left: 0;
    position: relative;
    width: 100%;
    display: block;
    background: transparent;
    padding: 0;
    margin: 0;
    line-height: unset;
}

#donation_amount_adoption .formRow label input,
#primary_monkey_heading .formRow label input {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
    height: auto;
    margin-right: 10px;
}

#donation_amount_adoption .formRow label span,
#primary_monkey_heading .formRow label span {
    text-align: center;
    padding: 10px 30px;
    display: block;
    cursor: pointer;
}

#donation_amount_adoption .formRow input:checked+span,
#donation_amount_adoption .formRow label span:hover,
#primary_monkey_heading .formRow input:checked+span,
#primary_monkey_heading .formRow label span:hover {
    color: #fff;
    background: #1d1d1b;
}

.monthly-gift-heading p {
    font-weight: 700 !important;
    color: rgb(29, 29, 27) !important;
    margin-bottom: 0 !important;
}

.sli-selectRecurring {
    margin-left: 12px !important;
}

.sli-input[name='dedication'] {
    margin-bottom: 0 !important;
}

#engage_single_adoption .section--adoption__form .section--donation__form__standard {
    display: block;
}

#engage_single_adoption .section--adoption__form .section--donation__form__extra {
    display: none;
}

#engage_single_adoption .section--adoption__form .donation-period__extra .section--donation__form__extra {
    background-color: #fff;
    padding: 0;
}

.enage-adoption .sli-donationAmounts ul.sli-style-button li {
    margin-bottom: 0;
}

#additional-contribution {
    width: 100px;
    display: inline-block;
}

.sli-selectRecurring {
    width: 0;
    height: 0;
    overflow: hidden;
}

.period-button,
.honor-memory-button {
    display: inline-block;
    min-width: auto;
    max-width: 48%;
    min-height: 44px;
    width: 48%;
    float: none;
    margin: 0.8em 0 0 0;
    padding: 0 0 0 0;
    position: relative;
}

.button_style_radio {
    float: left;
    left: 0;
    min-width: 80%;
    margin: 0 2px;
    text-align: center;
    padding: 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-block;
    position: relative;
    -webkit-transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
    background: transparent;
    border: 2px solid #1d1d1b;
    color: #1d1d1b;
}

.button_style_radio:hover,
.button_style_radio.selected {
    background-color: #1d1d1b;
    color: #fff;
    border-color: #1d1d1b;
}

#button-recurring.button_style_radio {
    float: right;
}

.sli-step-navigation-wrapper .sli-step-navigation-steps .sli-step-navigation-step {
    min-width: auto;
}

.adoption-period-message p {
    margin-bottom: 0 !important;
}

.sli-donorPaysFees {
    margin-top: 0 !important;
}

.sli-recurringDonation {
    padding: 0 !important;
}

p.sli-recurringFrequency {
    padding: 0;
}

.period-button.gift-button {
    width: 100%;
    max-width: 100%;
}

.period-button.gift-button #button-gift-option {
    text-transform: uppercase !important;
}

.sli-donationsummary-dedication>div>label {
    font-weight: normal;
}

.sli-donationsummary-dedication ul,
.sli-donationsummary-dedication input[name='dedication'],
.sli-donationsummary-dedication>div:first-of-type,
.honor-memory-buttons,
.gift_char_message,
.gift-email,
.gift-address,
.gift-message,
.gift-adoption-notice {
    display: none;
}

.sli-donationsummary-dedication,
.gift_char_message,
.gift-email,
.gift-address,
.gift-message,
.gift-adoption-notice {
    margin: 0;
}

.sli-donationsummary-dedication,
.gift-email {
    margin-top: 10px;
}

.honor-memory-buttons p {
    margin: 20px 0 0 !important;
}

.gift_char_message {
    font-style: italic;
    margin-bottom: 10px;
}

ul.sli-style-button .sli-amount-label,
.sli-button.sli-small,
.sli-button.sli-small {
    font-weight: 700 !important;
    font-size: 16px !important;
    z-index: 0;
}

@media screen and (max-width: 1023px) {

    #engage_donation,
    #engage_multiple_adoption,
    #engage_single_adoption {
        min-height: auto !important;
    }

    #engage_donation .column,
    #engage_multiple_adoption .column,
    #engage_single_adoption .column {
        width: 100%;
    }

    #engage_multiple_adoption .orderform {
        margin-bottom: 50px;
    }
}

/*Signup form */
.section-signup-fullwidth formtemplate .sli-content-pane.sli-widget {
    background-color: transparent !important;
}

.section-signup-fullwidth .sli-widget .sli-form input::placeholder,
.section-signup-fullwidth .sli-widget .sli-form textarea::placeholder {
    color: #8a8a8a;
}

.section-signup-fullwidth .sli-widget .sli-form [type="text"],
.section-signup-fullwidth .sli-widget .sli-form .salsa.donation #honorof input:not([type="radio"]),
.salsa.donation #honorof .sli-widget .sli-form input:not([type="radio"]),
.section-signup-fullwidth .sli-form [type="password"],
.section-signup-fullwidth .sli-form [type="date"],
.section-signup-fullwidth .sli-form [type="datetime"],
.section-signup-fullwidth .sli-form [type="datetime-local"],
.section-signup-fullwidth .sli-form [type="month"],
.section-signup-fullwidth .sli-form [type="week"],
.section-signup-fullwidth .sli-form [type="email"],
.section-signup-fullwidth .sli-form [type="number"],
.section-signup-fullwidth .sli-form [type="search"],
.section-signup-fullwidth .sli-form [type="tel"],
.section-signup-fullwidth .sli-form [type="time"],
.section-signup-fullwidth .sli-form [type="url"],
.section-signup-fullwidth .sli-form [type="color"],
.section-signup-fullwidth .sli-form select {
    height: 44px !important;
    display: block;
    width: 100%;
    margin: 0 0 1rem;
    padding: 0.375rem 0.55rem;
    border: 1px solid #ccc;
    background: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    -webkit-transition: all 0.14s ease-out;
    transition: all 0.14s ease-out;
    outline: none;
    border-radius: 0;
    box-shadow: inset 0 1px 2px rgba(29, 29, 27, 0.1);
    font-weight: normal;
    line-height: 1.5;
    color: #1d1d1b;
    font-family: "futura-pt", futura-pt, sans-serif;
}

.section-signup-fullwidth .sli-form .sli-button::before {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    color: #1d1d1b;
    background: #f59f1a;
    -webkit-transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}

.section-signup-fullwidth .sli-form .sli-button {
    height: 44px;
    background-color: #f1c205;
    color: #1d1d1b;
    border-color: #f59f1a;
    padding: 10px 30px;
    font-family: "futura-pt", futura-pt, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-block;
    position: relative;
    -webkit-transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}

.section-signup-fullwidth .sli-form .sli-button:hover {
    background-color: #f59f1a;
    color: #1d1d1b;
}

/*Homepage popup signup form*/
.newsletter-floating-box .fp-row.column.medium-12 {
    background-color: #3a3a3a;
}

.newsletter-floating-box formtemplate .sli-content-pane {
    background-color: transparent !important;
}

.newsletter-floating-box formtemplate>.sli-content-pane>.sli-row>.sli-columns>.sli-row>.sli-columns>.sli-form-wrapper,
.newsletter-floating-box formtemplate>.sli-content-pane>.sli-row>.sli-columns>.sli-row>.sli-columns>.sli-form-wrapper form.fv-form,
.newsletter-floating-box formtemplate .sli-field-person-firstname {
    margin-top: 0;
}

.newsletter-floating-box formtemplate input,
.newsletter-floating-box formtemplate a.sli-button {
    font-family: "futura-pt", futura-pt, sans-serif;
}

.newsletter-floating-box a.sli-button::before {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    color: #1d1d1b;
    background: #f59f1a;
    -webkit-transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}

.newsletter-floating-box a.sli-button {
    background: #f1c205;
    color: #1d1d1b;
    padding: 10px 30px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-block;
    position: relative;
    -webkit-transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}


.newsletter-floating-box a.sli-button:hover {
    background-color: #f59f1a;
    color: #1d1d1b;
    border-color: #f59f1a;
}

/*Membership and Field Project pages */

section#engage_field_project_heading.section--donation {
    background-position: center center;
}

section#engage_field_project,
section#engage_membership {
    margin-bottom: 100px;
}

section#engage_membership .period-button {
    display: block;
    float: left;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

section#engage_membership .period-button .button_style_radio {
    width: 100%;
    text-transform: none;
    margin: 0;
}

/*background image fixes*/
@media screen and (min-width: 1025px) {
    #engage_donation.section--donation {
        background-position: 25% center;
    }
}

@media screen and (min-width: 641px) {

    .section-signup-fullwidth .sli-form-field,
    .section-signup-fullwidth .sli-button-element {
        width: 20%;
        float: left;
        margin-right: 2.5%;
        clear: none;
    }

    .section-signup-fullwidth .sli-form-field.sli-field-address-zip {
        width: 10%;
    }

    .section-signup-fullwidth .sli-button-element {
        margin-right: 0;
    }
}