::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 color: #000;  font-size: 18px; font-weight:400;
}
::-moz-placeholder { /* Firefox 19+ */
 color: #000;  font-size: 18px; font-weight:400;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #000;  font-size: 18px; font-weight:400;
}
:-moz-placeholder { /* Firefox 18- */
 color: #000;  font-size: 18px; font-weight:400;
}


.spendenbetrag input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #000;  font-size: 18px; font-weight: 700;
}
.spendenbetrag input::-moz-placeholder { /* Firefox 19+ */
   color: #000; font-size: 18px; font-weight: 700;
}
.spendenbetrag input:-ms-input-placeholder { /* IE 10+ */
   color: #000;  font-size: 18px; font-weight: 700;
}
.spendenbetrag input:-moz-placeholder { /* Firefox 18- */
  color: #000;  font-size: 18px; font-weight: 700;
}

.formarea h2 {
  font-size: 22px;
  color: #00507b;
  margin-bottom: 0px;
  line-height: 28px;
  margin-top: 22px;
  clear:both; margin-left: 4px;
}


.controlset {margin-bottom: 20px;}

button {border:none; background:transparent; display:block;cursor:pointer;font-family: 'FFMetaWebProRegular','Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif; }

button:focus {border:1px solid #d2d2d2;}

button.active {background-color: #9e1b1c;}



.radiocontrols div {width: auto; float:left;padding: 0px 20px 0px 0px; }

.radiocontrols button  {width: 100%;
height: 40px;
font-size: 22px;
font-weight: 500;
border: none;
background-color: #fff;
background-image: url(../images/spendenformular/radio1-off.png);
background-repeat: no-repeat;
background-size: 30px auto;
background-position: left center;
padding-left: 32px;
font-size: 18px;
text-align: left;}

.radiocontrols button:focus  { border:1px solid #eba500;}

.radiocontrols button.active  {background-color: #fff; border:1px solid #fff; background-image: url(../images/spendenformular/radio1-on.png) ;}

  


.spendenbetrag div {width: 50%; float:left;padding: 4px; }
.spendenbetrag button   {width: 100%; height: 55px; font-size: 22px; font-weight: 700; border:1px solid #d2d2d2; background:#fff; padding: 4px;text-align: center;}
.spendenbetrag button:focus  { border:1px solid #eba500;}
.spendenbetrag button.active  {background-color: #9e1b1c; border:1px solid #9e1b1c; color:#fff;}

 
div.texteuro {width: 100%;
height: 55px;
font-size: 22px;
font-weight: 700;
border: 1px solid #d2d2d2;
background: #fff;
text-align: left;
padding:0;}

div.texteuro.meinbetragaktiv {background-color: #9e1b1c; border:1px solid #9e1b1c;}

div.texteuro.meinbetragaktiv input, div.texteuro.meinbetragaktiv span {color:#fff;}

div.texteuro input {height: 55px;
font-size: 22px;
font-weight: 700;
border: none;
background: transparent;
text-align: right;
padding: 4px 10px 4px 4px;
width: calc(100% - 30px);
line-height: 28px;}

 div.texteuro.meinbetragaktiv input {width: calc(100% - 68px);}
   	

div.texteuro span {font-size: 22px;
font-weight: 700;
color: #000;
width: 30px;
display: inline-block;
text-align: left;
}

 div.texteuro.meinbetragaktiv span {}

.spendeninfo p , #fondstext p{font-size: 18px;
margin: 0px 0px 8px 0px;
line-height: 23px;}

span.highlight {font-weight: bold;   color: #00507b;} 


#spendenfondscontainer {position:relative; height: 40px; margin-top: 10px;margin-left: 4px;}

.triggerbutton { position:absolute; top: 0; height: 40px;  border:1px solid #d2d2d2; width: 100%; text-align:left; 
 
 background-repeat: no-repeat;
background-image: linear-gradient(45deg, transparent 50%, #999999 50%), linear-gradient(135deg, #999999 50%, transparent 50%);
background-position: right 15px top 1em, right 10px top 1em;
background-size: 8px 8px, 8px 8px;
background-color: #fff; 
transition: all 0.3s easeIn;
-moz-transition: all 0.3s easeIn;
-o-transition: all 0.3s easeIn;
 

}

/*
.top-arrow:before {
  background:
   linear-gradient(to top right,transparent 50%,red 50.5%) top left/20% 50% no-repeat,
   linear-gradient(to top left,transparent 50%,red 50.5%) top right/80% 50.5% no-repeat;
}

.bottom-arrow:after {
  background:
   linear-gradient(to bottom right,transparent 50%,pink 50.5%) bottom left /80% 50% no-repeat,
   linear-gradient(to bottom left,transparent 50%,pink 50.5%) bottom right /20% 50.5% no-repeat;
}
*/

.triggerbutton.triggerbutton_active  {background-image: linear-gradient(135deg, transparent 50%, #999999 50%), linear-gradient(45deg, #999999 50%, transparent 50%);}


.triggerbutton span {display:block; line-height: 40px; font-size: 18px;  font-weight: bold;  padding:0px 10px 0px 10px;}


.formarea .toggle_container {display:none;  border:1px solid #d2d2d2; width: 100%; padding:0px; position:absolute; top: 50px; right: 0; width: 75%;background-color: #fff;
z-index:100;
transition: all 0.3s easeIn;
-moz-transition: all 0.3s easeIn;
-o-transition: all 0.3s easeIn;}

.toggle_container div {display:block; }

.toggle_container button {padding:10px 10px 10px 10px; text-align:left; font-size: 18px; width: 100%;}

.toggle_container button.active {background-color:#d2d2d2;}



#fondsinfo { display:block;border-left:1px solid #d2d2d2;  border-right:1px solid #d2d2d2;  border-bottom:1px solid #d2d2d2; border-top:1px solid #d2d2d2;
margin: 25px 0px 20px 4px;}
#fondsimage { width: 56%; display:block; float:left;  padding: 0px;  }

.fondsimage {position:relative; padding-bottom: 55%; padding-bottom: 56.944444%;

/*aktuelle bilder.seitenverhältnis 215:482  padding-bottom: 44.6%; */

border-right:1px solid #d2d2d2; 

background-size: cover; background-position: center; background-repeat:no-repeat; }


#fondsimage img { width: 100%; height: auto; }
#fondstext { width: 44%; display:block; float:left; padding: 10px 10px 10px 20px;}


#fondsinfo_hidden { display:none; }



.submitbutton {	

font-weight:700;
font-size:18px;
font-family:'FFMetaWebProBook','Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, sans-serif  ; 
margin: 0px; margin-left: 4px;
padding: 5px 35px 5px 15px; 
/*background: #8b0e13 url(../images/spendenformular/pfeil_tr.png) right 5px center  no-repeat ;*/
background: #8b0e13 url(../images/spendenformular/pfeil_hover_tr.png) right 0px center  no-repeat ;	
color:#fff;
display:block;
width:125px;
height:40px;
border: #8b0e13 1px solid; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
border-radius: 5px;
 
 cursor:pointer;
text-align:left;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}

.submitbutton:hover {	
/*background: #8b0e13 url(../images/spendenformular/pfeil_hover_tr.png) right 0px center  no-repeat ;*/
background: #8b0e13 url(../images/spendenformular/pfeil_tr.png) right 0px center  no-repeat ;

}


.submitbutton.breit {width:170px;background: #8b0e13 url(../images/spendenformular/pfeil_hover_tr.png) right 0px center  no-repeat ;	}

.submitbutton.breit:hover {	
background: #8b0e13 url(../images/spendenformular/pfeil_tr.png) right 0px center  no-repeat ;
}


.spendenbetrag .zahlungsicons {width: 100%; height: 45px;}

.zahlungsicons span {
float: right;
filter: grayscale(100%);
}

span.zahlungsicon {display: block;padding: 0px;width: 80px;height: 45px;
background-repeat: no-repeat;
background-size: 56px auto;
background-position: center  top 4px;
text-indent: -9999px;}

span.paypal {background-image: url(../images/paypal.png);}
span.sepa {background-image: url(../images/SepaLogoDE.jpg);background-size: 46px auto;}

.zahlungsmittel span {float: left;
display: block;
line-height: 40px;
background-position: left center;background-size: 76px auto;
height: 40px; padding-right: 16px;
}
.zahlungsmittel span.zahlungsicon {width: 100px;}
.zahlungsmittel span.sepa {background-size: 56px auto;}

.zahlungsmittel button {margin-right: 30px;}

#paypalinfo p {font-size: 17px;
line-height: 24px;}
#paypalinfo p:last-of-type {margin-bottom: 22px;}

/*
.spendenheader2 {background:#9e1b1c; padding: 5px 60px 5px 10px; width: 100%; text-align:left; margin-top:22px; position:relative; }
.spendenheader2 button {border:none; cursor:pointer; color:#fff;position:absolute; right: 10px; bottom: 8px; font-size: 16px;}
.spendenheader2 h2 {display:inline-block;color:#fff; padding:0px 12px 0px  0px;  margin:0;}
.spendenheader2 span {display:inline-block;color:#fff;padding:0px 12px 0px   0px;}

.spendenheader1 {background:#fff; padding: 5px 60px 5px 10px; width: 100%; text-align:left; margin-top:22px; position:relative; border: 1px solid #d2d2d2;}
.spendenheader1 button {border:none; cursor:pointer; color:#00507b;position:absolute; right: 10px; bottom: 8px; font-size: 16px;}
.spendenheader1 h2 {display:inline-block;color:#00507b; padding:0px 12px 0px  0px;  margin:0;}
.spendenheader1 span {display:inline-block;color:#00507b;padding:0px 12px 0px   0px;}
*/

.spendenheader {background:#00507b; padding: 5px 60px 5px 10px; width: 100%; text-align:left; margin-top:22px; position:relative; border: 1px solid #00507b;}
.spendenheader button {border:none; cursor:pointer; color:#fff;position:absolute; right: 10px; bottom: 8px; font-size: 16px;}
.spendenheader a {border:none; cursor:pointer; color:#fff;position:absolute; right: 10px; bottom: 8px; font-size: 16px;}
.spendenheader a:hover {border:none; cursor:pointer; color:#fff;position:absolute; right: 10px; bottom: 8px; font-size: 16px;}

.spendenheader h2 {display:inline-block;color:#fff; padding:0px 12px 0px  0px;  margin:0;}
.spendenheader span {display:inline-block;color:#fff;padding:0px 12px 0px   0px;}
 
.spendenheader span#zurueck {border:none; cursor:pointer; color:#fff;position:absolute; right: 10px; bottom: 8px; font-size: 16px;}
.spendenheader span#zurueck:hover {border:none; cursor:pointer; color:#fff;position:absolute; right: 10px; bottom: 8px; font-size: 16px;}






.formelement {float:left; display:block; padding: 0px 20px 20px 0px; width: 100%;}
.formelement.w50 {width: 50%;}
.formelement.w30 {width: 30%;}

.formelement.w70 {width: 70%;}

.text0 {width: 100%; height: 48px; padding: 4px; font-size:18px; border:1px solid #d2d2d2;}

.formelement label , .conditional {display:none; }

.checkcontrols span {font-size: 18px; display:inline-block; padding-left: 12px;width: calc(100% - 30px);}

 
select::-ms-expand {
  display: none;
}
select {
display: inline-block;
box-sizing: border-box;
padding: 0 2em 0 0.5em;
border: 1px solid #eee;
font: inherit;
  font-size: inherit;
  line-height: inherit;
line-height: 48px;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
background-repeat: no-repeat;
background-image: linear-gradient(45deg, transparent 50%, #999999 50%), linear-gradient(135deg, #999999 50%, transparent 50%);
background-position: right 15px top 1em, right 10px top 1em;
background-size: 8px 8px, 8px 8px;
background-color: #fff;
border: 1px solid #d2d2d2;
width: 100%;
font-size: 18px;
transition: all 0.3s easeIn;
-moz-transition: all 0.3s easeIn;
-o-transition: all 0.3s easeIn;
  
}

select.error, input.text0.error {border: 1px solid red;}

.spendenformular1 .shareblock {display:none; }
.spendenformular1 .shareblock {display:none; }
.spendenformular1 .openshare {display:none; }
.spendenformular1 .singlecol {padding-bottom: 100px; }

.buttonrow {padding:20px 0px 0px 0px;}

p.error {margin: 20px 0px 20px 0px;font-weight:700; color: red;}

.spendenformular1 h1 {margin-bottom:0;}
.spendenformular1 .singlecol.standalone {padding-bottom: 0px}
.spendenformular1 .blockcontent + .block {padding-bottom: 0px}



 .spendenbetrag {display:block;   width: 100%;}
.spendeninfo {display:block; width: 100%; padding: 0px 10px 20px 10px;}
 .clear {clear:both !important; float: none !important; padding: 0 !important; }

@media all and (min-width: 560px){ 
.spendenbetrag {display:block; float:left; width: 56%;}
.spendeninfo {display:block; float:left; width: 44%;padding-left: 20px;  padding: 0px 0px 0px 20px;}

}