.tx-ig-donationbox #spendenbaum {
    color: #ffffff;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}


.tx-ig-donationbox #spendenbaum .spendenbaum-slider {
    position: relative;
    width: 100%;
    height: 200px;
    background-image: linear-gradient(141deg, rgba(48, 35, 174, 0.3) 0%, rgba(83, 160, 253, 0.15) 47%, rgba(180, 236, 81, 0.15) 100%), url("/_assets/3fed303ccd97691253e69455307bfc12/Images/donationtree/background_weit@2x.png");
    background-size: cover;
    background-repeat: repeat-x;
    transition: background-position-x 0.3s ease-in-out;
}

.tx-ig-donationbox #spendenbaum .spendenbaum-slider .baum-outer {
    width: 100%;
    display: inline-block;
    transition: margin-left 0.3s ease-in-out;
    position: relative;
}

.tx-ig-donationbox #spendenbaum .spendenbaum-slider .baum-outer img {
    transition: transform 0.3s ease-in-out;
}

.tx-ig-donationbox #spendenbaum .spendenbaum-slider .baum {
    display: inline-block;
    float: right;
    height: 150px;
    width: auto;
    margin-top: 50px;
}

.tx-ig-donationbox #spendenbaum .spendenbaum-slider .spendenbaum-slider-inner {
    white-space: nowrap;
    overflow: hidden;

}

.baumindex-0 {
    background-position-x: 0%;
}

.baumindex-1 {
    background-position-x: 10%;
}

.baumindex-2 {
    background-position-x: 20%;
}

.baumindex-3 {
    background-position-x: 30%;
}

.baumindex-4 {
    background-position-x: 40%;
}

.baumindex-5 {
    background-position-x: 50%;
}

.baumindex-6 {
    background-position-x: 60%;
}

.baumindex-7 {
    background-position-x: 70%;
}


.baumindex-0 .baum-outer-0 {
    margin-left: 0%;
}

.baumindex-1 .baum-outer-0 {
    margin-left: -100%;
}

.baumindex-2 .baum-outer-0 {
    margin-left: -200%;
}

.baumindex-3 .baum-outer-0 {
    margin-left: -300%;
}

.baumindex-4 .baum-outer-0 {
    margin-left: -400%;
}

.baumindex-5 .baum-outer-0 {
    margin-left: -500%;
}

.baumindex-6 .baum-outer-0 {
    margin-left: -600%;
}

.baumindex-7 .baum-outer-0 {
    margin-left: -700%;
}

.baumindex-1 .baum-outer-0 img {
    transform: translateX(50%);
}

.baumindex-2 .baum-outer-1 img {
    transform: translateX(50%);
}

.baumindex-3 .baum-outer-2 img {
    transform: translateX(50%);
}

.baumindex-4 .baum-outer-3 img {
    transform: translateX(50%);
}

.baumindex-5 .baum-outer-4 img {
    transform: translateX(50%);
}

.baumindex-6 .baum-outer-5 img {
    transform: translateX(50%);
}

.baumindex-7 .baum-outer-6 img {
    transform: translateX(50%);
}

.spendenbaum-slider-control {
    position: absolute;
    z-index: 100;
    top: 50%;
    right: 0;
    width: 400px;
}

.spendenbaum-slider-control.isFirst .spendenbaum-slider-control-prev {
    display: none;
}

.spendenbaum-slider-control.isLast .spendenbaum-slider-control-next {
    display: none;
}

.tx-ig-donationbox #spendenbaum .baum-count {
    position: absolute;
}


/* Form Wrapper spacing */

.ig-form-wrapper {
    padding: 0 20px 20px 20px;
}

/* Copy Wrapper spacing */
.ig-copytxt-wrapper {
    padding: 20px;
}


/*

Styling Buttons

*/


/* Normalansicht */
.ig-btn {
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.12);
    padding: 11px 15px;
    max-width: 500px;
    color: #ffffff;
    font-size: 15px;
    line-height: 24px;
    cursor: pointer;
    box-sizing: border-box;
    border: 2px solid transparent;
    margin-bottom: 10px;
}

/* Hoveransicht */
.ig-btn:hover {
    border: 2px solid #FFAB00;
    box-sizing: border-box;
    background: #FFAB00;
}

/* Aktivansicht */
.ig-btn.active {
    box-sizing: border-box;
    border: 2px solid #FFAB00;
    border-radius: 5px;
    background: linear-gradient(180deg, #FFAB00 0%, #F77120 100%);
}


/*

Styling Background

*/

.tx-ig-donationbox #spendenbaum {
    box-sizing: content-box;
    border: 15px solid #ffffff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
    position: relative;
}

/*

Styling Headerbild Wrapper

*/

.ig-header-img-wrapper {
    height: 80px;
    width: 607px;
    background-image: url("../Images/donationtree/schild_a@2x.png");
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 40px;
    left: 20px;
    z-index: 50;
}

/*

Position Content Wrapper

*/

.ig-content-wrapper {
    position: absolute;
    top: 120px;
    left: 20px;
    max-width: 610px;
}

/* Copytext Styling */

#spendenbaum .ig-copytxt {

    font-size: 15px;
    line-height: 24px;
    color: #ffffff;
    font-weight: lighter;
}

/* input field styling */

form.ig-form {
    display: inline-block;
}

#ig-spenden-input {

    color: #212121;
    font-size: 25px;
    line-height: 30px;
    box-sizing: border-box;
    height: 50px;
    width: 150px;
    border: 3px solid #0057B5;
    background-color: #FFFFFF;
    padding: 10px;
    padding-right: 25px;
    text-align: right;
}

.tx-ig-donationbox #spendenbaum .currency {
    margin-left: 8px;
    position: absolute;
    color: #000;
    right: 10px;
    top: 0px;
    font-size: 25px;
    line-height: 50px;
}

.amount-wrapper {
    position: relative;
    width: fit-content;
}

.ig-label-input {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    display: block;
}

/* baum counter */

.baum-count {
    box-sizing: border-box;
    height: 20.5px;
    width: 80.5px;
    border: 0.5px solid #0057B5;
    border-radius: 20px;
    box-shadow: 0 1px 0 0 #0057B5;
    background: linear-gradient(180deg, rgba(65, 145, 203, 0.6) 50%, rgba(65, 145, 203, 0.5) 10%);
    background-color: rgba(0, 87, 181, 1);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: bold;
    line-height: 20px;
    text-align: center;
    right: 176px;
    bottom: 86px;
}

.ig-form-row-wrap {
    position: relative;
    padding-top: 10px;
}

/* checkbox list styling */

ul.ig-radio-list {
    list-style: none;
    display: inline-block;
    margin: 0;
    position: absolute;
    right: 70px;
    top: 29px;
}

li.ig-list-item {
    display: inline-block;
    margin-right: 15px;
}

li.ig-list-item:last-child {
    margin-right: 0;
}

input[type="radio"] {
    opacity: 0;
    position: absolute;
}

label.ig-lbl-pay-opt {
    cursor: pointer;
    width: 80px;
    height: 50px;
    border-radius: 5px;
}

input:checked + label {
    border: 3px solid #0057B5;
}

/* individuelle label hintergrundgrafiken für zahlungsartauswahl */
label.ig-pay {
    background-image: url("../Images/donationtree/zahlart_paypal.png");
    background-repeat: no-repeat;
    background-size: contain;
}

label.ig-pay:hover {
    background-image: url("../Images/donationtree/zahlart_paypal_hover.png");
    background-repeat: no-repeat;
    background-size: contain;
}

label.ig-sep {
    background-image: url("../Images/donationtree/zahlart_ec_sepa.png");
    background-repeat: no-repeat;
    background-size: contain;
}

label.ig-sep:hover {
    background-image: url("../Images/donationtree/zahlart_ec_sepa_hover.png");
    background-repeat: no-repeat;
    background-size: contain;
}

label.ig-vis {
    background-image: url("../Images/donationtree/zahlart_visa_mc.png");
    background-repeat: no-repeat;
    background-size: contain;
}

label.ig-vis:hover {
    background-image: url("../Images/donationtree/zahlart_visa_mc_hover.png");
    background-repeat: no-repeat;
    background-size: contain;
}

/* Absenden Button Styling */

.ig-btn-send-wrapper {
    width: 500px;
    position: relative;

}

.ig-btn-send {
    position: absolute;
    left: 190px;
    top: 15px;
    border: 0;
    background: transparent;
}

/*

Slider Pfeile

*/

.spendenbaum-slider-control-prev {
    width: 24px;
    height: 24px;
    background-image: url("../Images/donationtree/pfeil_links.svg");
    background-size: contain;
    position: absolute;
    left: 10px;
    cursor: pointer;
    opacity: 0.5;
}

.spendenbaum-slider-control-next {
    width: 24px;
    height: 24px;
    background-image: url("../Images/donationtree/pfeil_rechts.svg");
    background-size: contain;
    position: absolute;
    right: 10px;
    cursor: pointer;
    opacity: 0.5;
}

/*

Banner Startseite

*/

.tx-ig-donationbox #spendenbaum-banner {
    box-sizing: content-box;
    background-image: url(../Images/donationtree/ig-banner_startseite.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    border: 15px solid #ffffff;
    padding-left: 20px;
    padding-right: 20px;
}

.ig-btn-start-list li {

    list-style-type: none;
    display: inline;
    padding-right: 7px;
}

.ig-img-start-wrapper {
    margin: 0 auto;
    width: 100%;
}

ul.ig-btn-start-list {
    margin-bottom: 0;
    margin-left: 30px;
    line-height: 1;
}

.ig-btn-start-10, .ig-btn-start-30, .ig-btn-start-60, .ig-btn-start-w {

    width: 120px;
    height: 60px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
}

a.ig-btn-start-10:link {
    background-image: url("../Images/donationtree/button_100@2x.png");
}

a.ig-btn-start-60:link {
    background-image: url("../Images/donationtree/button_60@2x.png");
}

a.ig-btn-start-30:link {
    background-image: url("../Images/donationtree/button_30@2x.png");
}

a.ig-btn-start-w:link {
    background-image: url("../Images/donationtree/button_frei@2x.png");
}

a.ig-btn-start-10:hover {
    background-image: url("../Images/donationtree/button_100_hover@2x.png");
}

a.ig-btn-start-60:hover {
    background-image: url("../Images/donationtree/button_60_hover@2x.png");
}

a.ig-btn-start-30:hover {
    background-image: url("../Images/donationtree/button_30_hover@2x.png");
}

a.ig-btn-start-w:hover {
    background-image: url("../Images/donationtree/button_frei_hover@2x.png");
}

.ig-img-start-banner {

    margin: 10px;
}


/*

Danke Seite

*/
.tx-ig-donationbox #spendenbaum-danke {
    box-sizing: content-box;
    border: 15px solid #ffffff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.tx-ig-donationbox #spendenbaum-danke .spendenbaum-danke-bg {
    height: 670px;
    position: relative;
    width: 100%;
    background: rgba(77, 145, 194, 1);
    background-image: linear-gradient(141deg, rgba(48, 35, 174, 0.3) 0%, rgba(83, 160, 253, 0.15) 47%, rgba(180, 236, 81, 0.15) 100%), url(/_assets/3fed303ccd97691253e69455307bfc12/Images/donationtree/background_weit@2x.png);
    background-size: 200%;
    background-position: left bottom;
    background-repeat: repeat-x;
    transition: background-position-x 0.3s ease-in-out;
}

.ig-img-danke-baum-wrapper {
    bottom: -30px;
    position: absolute;
}

.ig-danke-content-wrapper {
    position: absolute;
    right: 70px;
    top: 70px;
}

.ig-danke-banner-wrapper {
    max-width: 445px;
}

.ig-img-danke-banner {
    width: 100%;
    height: auto;
    margin-bottom: 60px;
}

.ig-danke-copy {
    text-align: center;
    max-width: 445px;
    line-height: 24px;
    color: #fff;
    font-size: 18px;
}

.ig-danke-spende {
    color: #FFFFFF;
    font-size: 80px;
    font-weight: bold;
    line-height: 24px;
    text-align: center;
    text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
    display: block;
    margin-bottom: 40px;
}

.ig-danke-teilen {
    display: block;
    font-weight: bold;
    margin-top: 20px;
}

.ig-danke-share-list {
    text-align: center;
}

.ig-danke-share-list-item {
    list-style-type: none;
    display: inline;
}

.img-share {
    width: auto;
    height: 50px;
}

/*

Responsive Anpassungen

*/
/* portrait phones */
@media (min-width: 120px) and (max-width: 479px) {
    .tx-ig-donationbox #spendenbaum .spendenbaum-slider {
        height: 330px;
    }

    .tx-ig-donationbox #spendenbaum .spendenbaum-slider .baum {
        height: 330px;
        margin-top: 70px;
        margin-right: 8vw;
    }

    .ig-btn {
        max-width: none;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .ig-copytxt, .ig-label-input {
        color: #212121;
    }

    .ig-content-wrapper {
        top: unset;
        left: unset;
        right: unset;
        position: relative;
        padding: 80px 20px 0 20px;

    }

    .ig-header-img-wrapper {
        left: 50%;
        top: 0;
        width: 100%;
        margin-left: -50%;
        background-position: center;
        background-size: 80%;
        padding: 20px;
    }

    .baum-count {
        right: 87px;
        bottom: 10px;
    }

    .spendenbaum-slider-control {
        width: 100%;
        top: 190px;
    }

    .tx-ig-donationbox #spendenbaum {
        overflow: hidden;
        padding-bottom: 120px;
        box-shadow: none;
        background: linear-gradient(90deg, rgba(177, 201, 234, 1) 0%, rgba(198, 214, 223, 1) 100%);
    }

    ul.ig-radio-list {
        position: relative;
        right: auto;
        left: auto;
        display: block;
    }

    #ig-spenden-input {
        width: 100%;
    }

    form.ig-form {
        display: block;
    }

    .ig-btn-send {
        left: 50%;
        transform: translate(-50%, 0);
        top: 60px;
    }

    .ig-btn-send-wrapper {
        padding-bottom: 20px;
        width: 100%;
    }

    .ig-form-wrapper {
        padding: 0;
    }

    .ig-copytxt-wrapper {
        padding: 0 0 20px 0;
    }

    .tx-ig-donationbox #spendenbaum-banner {
        background-size: cover;
        padding-left: 0;
        padding-right: 0;
    }

    .ig-img-start-banner {
        width: 100%;
        height: auto;
        padding-left: 10px;
        padding-top: 30px;
        padding-bottom: 20px;
        padding-right: 10px;
        margin: 0;
    }

    ul.ig-btn-start-list {

        margin-left: 0;
        text-align: center;
    }

    .ig-danke-content-wrapper {
        position: initial;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        padding-top: 50px;
        left: 70px;
    }

    .tx-ig-donationbox #spendenbaum-danke .spendenbaum-danke-bg {
        height: 950px;
    }

    .ig-danke-copy {
        max-width: none;
    }

    .ig-img-danke-baum-wrapper {
        bottom: -20px;
        margin-left: -100px;
        left: 50%;
    }

    .ig-img-danke-baum {
        width: 200px;
    }

}

@media (min-width: 768px) {
    .ig-btn-send-wrapper {
        position: unset;
    }

    .ig-btn-send {
        top: 34px;
    }
}

/* portrait/landscape phones and portrait tablets */
@media (min-width: 480px) and (max-width: 767px) {

    .amount-wrapper {
        width: 100%;
    }

    .tx-ig-donationbox #spendenbaum .spendenbaum-slider {
        height: 330px;

    }

    .tx-ig-donationbox #spendenbaum .spendenbaum-slider .baum {
        height: 430px;
        margin-top: 100px;
    }

    .ig-btn {
        max-width: none;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .ig-copytxt, .ig-label-input {
        color: #212121;
    }

    .ig-content-wrapper {
        position: relative;
        top: -160px;
        left: unset;
        max-width: none;
        z-index: 49;
        margin-top: -90px;
        padding: 20px;
    }

    .ig-copytxt-wrapper {
        padding: 30px 40px 20px 25px;
        min-height: 380px;
        max-width: 490px;
    }

    .txt-part-1, .txt-part-2 {
        padding-right: 180px;
    }

    .ig-header-img-wrapper {
        left: 50%;
        top: 20px;
        width: 100%;
        margin-left: -50%;
        background-position: center;
        background-size: 90%;
        padding: 20px;
    }

    .baum-count {
        right: 88px;
        bottom: 35px;
    }

    .spendenbaum-slider-control {
        width: 238px;
        top: 260px;
        right: 5px;
    }

    .tx-ig-donationbox #spendenbaum {
        height: auto;
        box-shadow: none;
        background: linear-gradient(58deg, rgba(162, 188, 246, 1) 0%, rgba(198, 214, 223, 1) 100%);
    }

    ul.ig-radio-list {
        position: relative;
        right: auto;
        left: auto;
        display: block;
    }

    #ig-spenden-input {
        width: 100%;
    }

    form.ig-form {
        display: block;
    }

    .ig-btn-send-wrapper {
        width: 100%;
    }

    .ig-btn-send {
        left: 50%;
        transform: translate(-50%, 0);
        top: 60px;
    }

    .ig-form-wrapper {
        padding-top: 50px;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    .tx-ig-donationbox #spendenbaum-banner {
        background-size: cover;
        padding: 0;
    }

    .ig-img-start-banner {
        width: 100%;
        height: auto;
        padding-left: 10px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 10px;
        margin: 0;
    }

    ul.ig-btn-start-list {

        margin-left: 0;
        text-align: center;
    }

    .tx-ig-donationbox #spendenbaum-danke .spendenbaum-danke-bg {
        height: 950px;
    }

    .ig-danke-content-wrapper {
        left: 70px;
    }

    .ig-danke-copy {
        max-width: none;
    }

    .ig-danke-banner-wrapper {
        max-width: none;
    }

    .ig-img-danke-baum-wrapper {
        bottom: -20px;
        margin-left: -120px;
        left: 50%;
    }

    .ig-img-danke-baum {
        width: 240px;
    }

}


/* Landscape phones and portrait tablets */
@media (min-width: 768px) and (max-width: 991px) {
    form.ig-form {
        display: block;
    }

    .tx-ig-donationbox #spendenbaum .spendenbaum-slider {
        height: 470px;

    }

    .tx-ig-donationbox #spendenbaum .spendenbaum-slider .baum {
        height: 420px;
        margin-top: 70px;
    }

    .tx-ig-donationbox #spendenbaum {
        height: 940px;
        background: linear-gradient(58deg, rgba(172, 196, 242, 1) 0%, rgba(198, 214, 223, 1) 100%);
    }

    .ig-content-wrapper {
        top: 137px;
        left: auto;
        max-width: inherit;
    }

    .ig-copytxt-wrapper {
        max-width: 410px;
        padding-bottom: 110px;
        padding-top: 0;
        padding-left: 40px;
    }

    .ig-label-input {
        color: #212121;
    }

    .ig-btn {
        background-color: rgba(0, 0, 0, 0.4);
        max-width: none;
    }

    .ig-header-img-wrapper {
        left: 46%;
        top: 20px;
        width: 90%;
        margin-left: -50%;
        background-position: center;
        background-size: 80%;
        padding: 20px;
    }

    .spendenbaum-slider-control {
        top: 25%;
        width: 249px;
    }

    .baum-count {
        right: 83px;
        bottom: 36px;
    }

    ul.ig-radio-list {
        right: 0;
    }

    .ig-btn-send-wrapper {
        width: auto;
    }

    .ig-btn-send {
        left: 50%;
        transform: translate(-50%, 0);
    }

    .tx-ig-donationbox #spendenbaum-banner {
        background-size: cover;
    }

    ul.ig-btn-start-list {

        margin-left: 0;
        text-align: center;
    }

    .ig-img-start-wrapper {
        width: 580px;
    }

    .tx-ig-donationbox #spendenbaum-danke .spendenbaum-danke-bg {
        height: 990px;
    }

    .ig-danke-content-wrapper {
        left: 70px;
    }

    .ig-danke-copy {
        max-width: none;
    }

    .ig-danke-banner-wrapper {
        max-width: none;
    }

    .ig-img-danke-baum {
        width: 300px;
    }

    .ig-img-danke-baum-wrapper {
        bottom: -30px;
        margin-left: -150px;
        left: 50%;
    }

}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) {
    .tx-ig-donationbox #spendenbaum .spendenbaum-slider {
        height: 760px;
    }

    .tx-ig-donationbox #spendenbaum .spendenbaum-slider .baum {
        height: 720px;
        margin-top: 50px;
    }
}