@charset "UTF-8";
@font-face {
    font-family: ChevinStd-Medium;
    src: url("../../fonts/twingle/2F3BE5_0_0.eot");
    src: url("../../fonts/twingle/2F3BE5_0_0.eot?#iefix") format("embedded-opentype"), url("../../fonts/twingle/2F3BE5_0_0.woff2") format("woff2"), url("../../fonts/twingle/2F3BE5_0_0.woff") format("woff"), url("../../fonts/twingle/2F3BE5_0_0.ttf") format("truetype");
}

@font-face {
    font-family: ChevinStd-Light;
    src: url("../../fonts/twingle/2F3BE5_1_0.eot");
    src: url("../../fonts/twingle/2F3BE5_1_0.eot?#iefix") format("embedded-opentype"), url("../../fonts/twingle/2F3BE5_1_0.woff2") format("woff2"), url("../fonts/twingle/2F3BE5_1_0.woff") format("woff"), url("../../fonts/twingle/2F3BE5_1_0.ttf") format("truetype");
}

@font-face {
    font-family: Sternsinger;
    src: url("../../fonts/twingle/sternsinger-webfont.eot");
    src: url("../../fonts/twingle/sternsinger-webfont.eot?#iefix") format("embedded-opentype"), url("../../fonts/twingle/sternsinger-webfont.woff2") format("woff2"), url("../fonts/twingle/sternsinger-webfont.woff") format("woff"), url("../../fonts/twingle/sternsinger.ttf") format("truetype"), url("../../fonts/twingle/sternsinger-webfont.svg#webfont") format("svg");
}

/**
 MIXINS
**/
/* AMOUNT
*/
.amount-wrapper input[type="number"],
.amount-wrapper input[type="text"],
.amount-wrapper input[type="tel"] {
    font-family: ChevinStd-Medium, Helvetica, Arial, sans-serif;
    font-weight: 400;
    border: 2px solid #CDCBBB;
    border-radius: 0px;
    box-shadow: none;
}

.amount-wrapper:not(.no-slider) .input-wrapper input {
    border-radius: 0px;
    text-align: center;
}

.amount-wrapper .input-wrapper .currency-symbol {
    border: 2px solid #CDCBBB;
    border-left-width: 0;
}

/*
 Active donation rhythm selection
 */
input[type="radio"] + label {
    font-family: ChevinStd-Medium, Helvetica, Arial, sans-serif;
    font-weight: 400;
    background-color: #F5F5EC;
    color: #000;
    font-weight: bold;
}

input[type="radio"]:checked + label {
    background-color: #FFCC00;
}

.non-touch input[type="radio"] + label:hover {
    background-color: #ffeb99;
}

.amount-wrapper .slider-wrapper {
    background-color: #F5F5EC;
    border-radius: 0;
}

.rythm_target-wrapper .columns input[type=radio] + label {
    border-radius: 0 !important;
}

input[type="text"], input[type="tel"], input[type="email"],
input[type="number"], input[type="date"], select, textarea, textarea[rows] {
    border-radius: 0;
    color: #000;
    border: 2px solid #CDCBBB;
}

input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="date"]:focus, select:focus, textarea:focus, textarea[rows]:focus, .checkbox-toggle input:focus+label {
    box-shadow: 0 0 2px #FFCC00;
    border: 2px solid #CDCBBB;
}

input[type="text"]:focus + label, input[type="tel"]:focus + label, input[type="email"]:focus + label, input[type="number"]:focus + label,
input[type="date"]:focus + label, select:focus + label, textarea:focus + label, textarea[rows]:focus + label, .checkbox-toggle input:focus+label {
    color: #615354;
}

input[type="text"] + label, input[type="tel"] + label, input[type="email"] + label, input[type="number"] + label,
input[type="date"] + label, select + label, textarea + label, textarea[rows] + label, .checkbox-toggle input:focus+label {
    font-family: ChevinStd-Medium, Helvetica, Arial, sans-serif;
    font-weight: 400;
}

input[type="text"]:focus + label.error, input[type="text"].ng-touched.ng-invalid + label, input[type="tel"]:focus + label.error, input[type="tel"].ng-touched.ng-invalid + label, input[type="email"]:focus + label.error, input[type="email"].ng-touched.ng-invalid + label,
input[type="number"]:focus + label.error,
input[type="number"].ng-touched.ng-invalid + label, input[type="date"]:focus + label.error, input[type="date"].ng-touched.ng-invalid + label, select:focus + label.error, select.ng-touched.ng-invalid + label, textarea:focus + label.error, textarea.ng-touched.ng-invalid + label, textarea[rows]:focus + label.error, textarea[rows].ng-touched.ng-invalid + label {
    color: #EE5A0D;
}

input[type="text"].ng-touched.ng-invalid, input[type="tel"].ng-touched.ng-invalid, input[type="email"].ng-touched.ng-invalid,
input[type="number"].ng-touched.ng-invalid, input[type="date"].ng-touched.ng-invalid, select.ng-touched.ng-invalid, textarea.ng-touched.ng-invalid, textarea[rows].ng-touched.ng-invalid {
    border-color: #EE5A0D;
}

.callout, button.button.grey + .hint, a.button.grey + .hint, body.event-donation .callout {
    background-color: #F5F5EC;
    color: #615354;
    border-radius: 0;
    font-family: ChevinStd-Light, Helvetica, Arial, sans-serif;
    font-weight: 400;
}

.row.columns > label, .amount-wrapper label, form.event label[for="transaction-amount"] {
    font-family: ChevinStd-Light, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #968485;
}

.row.columns > label.error, .amount-wrapper label.error, form.event label[for="transaction-amount"].error {
    color: #EE5A0D;
}

input, textarea {
    color: #000;
}

input::placeholder, textarea::placeholder {
    color: #968485;
}

a {
    color: #B15F00;
    text-decoration: none;
}

a:hover, a:focus {
    color: #180d00;
    text-decoration: underline;
}

.payment-component-wrapper .payment-wrapper .columns input[type=radio] + label {
    border-radius: 0 !important;
}

.input-wrapper.info > i {
    background-color: #F5F5EC;
    border-radius: 0;
}

input[type='checkbox'] + label, .event-donator .checkbox-wrapper label {
    font-family: ChevinStd-Light, Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #615354;
}

.checkboxbutton-wrapper input:focus+label {
    box-shadow: none;
}

.checkboxbutton-wrapper input:checked+label {
    color: #FFCC00;
}

.checkboxbutton-wrapper input:checked+label span {
    color: #615354;
}

.checkboxes checkbox-button:first-child label, .checkboxes checkbox-button:last-child label {
    border-radius: 0;
}

.checkboxbutton-wrapper label, .checkboxbutton-wrapper input:checked+label {
    background-color: inherit;
}

.checkbox-wrapper label:not(.error):before {
    border-color: #615354;
    color: #FFCC00;
}

.button, button.button.grey {
    box-shadow: 4px 4px 0 #EFB30A;
    color: #000;
    background-color: #FFCC00;
    border-radius: 0;
    font-family: ChevinStd-Medium, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
}

.button:hover, .button:focus, button.button.grey:hover, button.button.grey:focus {
    background-color: #ffe066;
}

.infotext {
    background-color: #FFCC00;
    border-radius: 0;
    box-shadow: none;
    font-family: ChevinStd-Light, Helvetica, Arial, sans-serif;
    font-weight: 400;
}

.amount-wrapper .slider-wrapper .slider input[type=range]:hover {
    cursor: pointer;
}

.amount-wrapper .slider-wrapper .slider input[type=range]::-webkit-slider-thumb {
    background-color: #615354;
    background-size: 60%;
    background-image: url(https://s3.k8s.sternsinger-web.mobilistics.zone/sternsinger-cdn/images/twingle/icon_stern.svg) !important;
}

.amount-wrapper .slider-wrapper .slider input[type=range]::-webkit-slider-runnable-track {
    background-color: #CDCBBB !important;
}

.amount-wrapper .slider-wrapper .slider input[type=range]:focus::-webkit-slider-track {
    background-color: #a29e80 !important;
}

.amount-wrapper .slider-wrapper .slider input[type=range]::-moz-range-thumb {
    background-color: #615354;
    background-size: 60%;
    background-image: url(https://s3.k8s.sternsinger-web.mobilistics.zone/sternsinger-cdn/images/twingle/icon_stern.svg) !important;
}

.amount-wrapper .slider-wrapper .slider input[type=range]::-moz-range-track {
    background-color: #CDCBBB !important;
}

.amount-wrapper .slider-wrapper .slider input[type=range]:focus::-moz-range-track {
    background-color: #a29e80 !important;
}

.amount-wrapper .slider-wrapper .slider input[type=range]::-ms-thumb {
    background-color: #615354;
    background-size: 60%;
    background-image: url(https://s3.k8s.sternsinger-web.mobilistics.zone/sternsinger-cdn/images/twingle/icon_stern.svg) !important;
}

.amount-wrapper .slider-wrapper .slider input[type=range]::-ms-track {
    background-color: #CDCBBB !important;
}

.amount-wrapper .slider-wrapper .slider input[type=range]:focus::-ms-track {
    background-color: #a29e80 !important;
}

.non-touch .input-wrapper.info > i:hover {
    background-color: white;
}

.input-wrapper.info input {
    border-radius: 0;
}

.input-wrapper.info > i {
    border-left: 2px solid #CDCBBB;
    color: #615354;
}

.payment-component-wrapper .method-wrapper {
    background: #F5F5EC;
}

.payment-component-wrapper .method-wrapper input[type="radio"] + label {
    border-radius: 0;
}

@media screen and (max-width: 36.1875em) {
    input[type="radio"] + label i {
        color: #F5F5EC;
        border-radius: 0;
        background-color: #615354;
    }
}

/**
 Donation campaigns
**/
.row {
    max-width: 100%;
}

.progress {
    background-color: #F5F5EC;
}

.progress .target {
    font-family: ChevinStd-Light, Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #615354;
}

.progress .progress-meter {
    border: 2px solid #FFCC00;
}

.progress .progress-meter + .text, .progress .progress-meter + .text span {
    font-family: ChevinStd-Light, Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #615354;
}

.progress.stand {
    display: none;
}

header.event .teaser {
    color: #514445;
    font-size: 20px;
    line-height: 1.33333333;
    font-family: ChevinStd-Light, Helvetica, Arial, sans-serif;
    font-weight: 400;
}

form.event {
    background-color: white;
}

.event > .row > .columns > .logo {
    display: none;
}

.event h1 {
    font-family: Sternsinger, Helvetica, Arial, sans-serif;
    font-size: 34px;
}

a.button {
    box-shadow: 4px 4px 0 #EFB30A;
    color: #000;
    background-color: #FFCC00;
    border-radius: 0;
    font-family: ChevinStd-Medium, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
}

a.button:hover, a.button:focus {
    background-color: #ffe066;
}

button.arrow:after, a.button.arrow:after {
    display: none !important;
    border-color: transparent transparent transparent #FFCC00 !important;
}

.event-list-wrapper {
    background-color: #FFF;
    font-family: ChevinStd-Light, Helvetica, Arial, sans-serif;
    font-weight: 400;
}

.event-list-wrapper h1 {
    color: #000;
    font-size: 34px;
    text-align: left;
    font-family: Sternsinger, Helvetica, Arial, sans-serif;
}

.event-list-wrapper a.button {
    box-shadow: 4px 4px 0 #EFB30A;
    color: #000;
    background-color: #FFCC00;
    border-radius: 0;
    font-family: ChevinStd-Medium, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
}

.event-list-wrapper a.button:hover, .event-list-wrapper a.button:focus {
    background-color: #ffe066;
}

.event-list-wrapper button.arrow:after, .event-list-wrapper a.button.arrow:after {
    border-color: transparent transparent transparent #FFCC00;
}

.event-list-wrapper .button.secondary:not(:hover) {
    background-color: #FFCC00 !important;
    color: #000 !important;
}

.event-list-wrapper .event-list .event {
    background: url("../../img/twingle/bg-secondary-5.png");
    background-size: 100% 100%;
    box-shadow: none;
}

.event-list-wrapper .event-list .event > a:focus, .event-list-wrapper .event-list .event > a:hover {
    text-decoration: none;
}

.event-list-wrapper .event-list .event > a .progress {
    background-color: #E4E2D4;
}

.event-list-wrapper .event-list .event h2 {
    font-family: Sternsinger, Helvetica, Arial, sans-serif;
}

.event-list-wrapper .event-list .event strong {
    font-family: ChevinStd-Light, Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #615354;
}

.event-list-wrapper .event-list .event .button {
    border-radius: 0;
}

.share.event:not(.light) .share-content > .row {
    background-color: #F5F5EC;
}

.share.event:not(.light) .share-content {
    color: #615354;
}

.share.event:not(.light) .icons a {
    color: #B15F00;
}

.share.event:not(.light) .icons a:focus, .share.event:not(.light) .icons a:hover {
    color: #4b2800;
    text-decoration: none;
}

@media screen and (min-width: 36.25em) {
    .share.event:not(.light) .share-content > .row {
        border-radius: 0;
    }
}

.project-donators h3 {
    font-family: ChevinStd-Medium, Helvetica, Arial, sans-serif;
    font-weight: 400;
}

.project-donators .donation {
    font-family: ChevinStd-Light, Helvetica, Arial, sans-serif;
    font-weight: 400;
}

.project-donators .donation .amount {
    font-family: ChevinStd-Medium, Helvetica, Arial, sans-serif;
    font-weight: 400;
    background-color: #FFCC00;
}

.project-donators .donation .from {
    color: #615354;
}

.project-donators .donation .message {
    color: #514445;
}

/**
 create campaign
**/
.widget-header.widget {
    background-color: transparent;
}

.widget-header.widget h1 {
    text-align: left;
    font-family: Sternsinger, Helvetica, Arial, sans-serif;
    font-size: 34px;
}

.postfix i {
    color: #615354 !important;
    border: 2px solid #CDCBBB !important;
    border-radius: 0 !important;
}

.input-wrapper.postfix input {
    border-radius: 0;
}

body.event-donation form .image-preview-wrapper {
    background-color: #CDCBBB;
}

body.event-donation form [type="radio"] + label {
    font-family: ChevinStd-Light, Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #968485;
}

body.event-donation form [type="radio"]:checked + label {
    font-family: ChevinStd-Light, Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #615354;
}

body.event-donation .callout p {
    color: #615354;
}

body.event-donation form .button-wrapper p {
    color: #CDCBBB;
}

donation-app {
    font-family: ChevinStd-Light, Helvetica, Arial, sans-serif;
    font-weight: 400;
}

.contact-wrapper.closed {
    background-color: #F5F5EC;
}

.contact-wrapper.closed button {
    background-color: #FFCC00;
}

.thankyou-wrapper i {
    color: #FFCC00;
}

.thankyou {
    margin: 22px 0px
}

@media screen and (min-width: 36.25em) {
    .thankyou {
        margin: 32px 0px;
    }
}

.footer.light {
    background-color: #F5F5EC;
}

.share a {
    color: #B15F00;
}

.share .share-content {
    background-color: #CDCBBB;
}

.non-touch .contact-wrapper.closed button {
    box-shadow: 4px 4px 0 #EFB30A;
    color: #000;
    background-color: #FFCC00;
    border-radius: 0;
    font-family: ChevinStd-Medium, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
}

.non-touch .contact-wrapper.closed button:hover, .non-touch .contact-wrapper.closed button:focus {
    background-color: #ffe066;
}

.non-touch .step-navigation:hover {
    color: #4b2800;
}

.non-touch .step-navigation:hover span {
    background-color: #CDCBBB;
    color: #CDCBBB;
}

.step-navigation {
    color: #B15F00;
}

.step-navigation .twingle-arrow_left_solo::after {
    content: 'Zurück';
    font-size: 18px;
    font-family: ChevinStd-Medium, Helvetica, Arial, sans-serif;
    font-weight: 400;
    margin-left: 5px;
}

.step-navigation span {
    background-color: #F5F5EC;
    color: #F5F5EC;
}

.non-touch button, .non-touch a.button, .non-touch button.button,
.non-touch a.button, .non-touch button.button.light, .non-touch a.button.light {
    box-shadow: 4px 4px 0 #EFB30A;
    color: #000;
    background-color: #FFCC00;
    border-radius: 0;
    font-family: ChevinStd-Medium, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
}

.non-touch button:hover, .non-touch button:focus, .non-touch a.button:hover, .non-touch a.button:focus, .non-touch button.button:hover, .non-touch button.button:focus,
.non-touch a.button:hover,
.non-touch a.button:focus, .non-touch button.button.light:hover, .non-touch button.button.light:focus, .non-touch a.button.light:hover, .non-touch a.button.light:focus {
    background-color: #ffe066;
}

.contact-wrapper .salutation-wrapper input[type="radio"] + label, .contact-wrapper .salutation-wrapper input[type="radio"]:checked + label {
    border-radius: 0 !important;
    border: 2px solid #CDCBBB;
    color: #CDCBBB;
}

.contact-wrapper .salutation-wrapper input[type="radio"]:checked + label {
    background-color: #FFCC00;
    color: #000;
}

button.button.light, a.button.light {
    background-color: #FFCC00;
}

.copyfield label + span, .copyfield-dummy {
    background-color: #F5F5EC;
    color: #615354;
}

.non-touch .copyfield:hover label + span {
    background-color: #CDCBBB;
}

.copyfield .info {
    background-color: #FFCC00;
}

.copyfield .info:after {
    border-color: #FFCC00 transparent transparent transparent;
}

.banktransfer-info .teaser, .banktransfer-info p.info {
    color: #615354;
}

banktransfer label {
    color: #615354;
}

page-header h1, page-header img {
    display: none;
}

#donation_target {
    margin-top: 36px;
}

#donation_target + label {
    font-family: ChevinStd-Light, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 18px !important;
    color: #968485;
}

.start.widget.widget-header {
    display: none;
}

.step-index ol li {
    background-color: #F5F5EC;
    border-radius: 0;
    font-family: Sternsinger, Helvetica, Arial, sans-serif;
}

.step-index ol li small {
    font-family: ChevinStd-Medium, Helvetica, Arial, sans-serif;
    font-weight: 400;
}

.step-index ol li:after {
    border-color: transparent transparent transparent #F5F5EC;
}

.step-index ol li.active {
    background-color: #FFCC00;
}

.step-index ol li.active:after {
    border-color: transparent transparent transparent #FFCC00;
}

.step-index ol li:last-child {
    border-radius: 0;
}

.counter-el-value, .active-till-el-value {
    font-family: Sternsinger, Helvetica, Arial, sans-serif;
    font-size: 48px;
}

.column-with-spacing {
    width: 49.5%;
    padding: 10px 15px;
}

.bg-lightgray {
    background-color: #F5F5EC;
}

.disclaimer-text {
    font-size: 12px;
}

.row.with-margin {
    margin-top: 10px;
    margin-bottom: 10px;
}

event-header .small-12.columns > iframe {
    width: 100%;
}

donation-app share {
    display: none;
}

.flex-row {
    width: 97%;
}

.payment-sepa-hint-wrapper button, .payment-sepa-hint-wrapper .non-touch button {
    box-shadow: none;
    background-color: white;
    border: 2px solid #ffeb99;
    font-size: 14px;
    margin-top: 10px;
}