+.donation {
+ background-image: url('../img/header-background.jpg');
+ background-size: cover;
+ background-attachment: fixed;
+ background-position: center center;
+ width: 100vw;
+ height: 768px;
+ margin-bottom: 1122px;
+ @include media-breakpoint-up(sm) {
+ margin-bottom: 1078px;
+ }
+ @include media-breakpoint-up(md) {
+ margin-bottom: 668px;
+ }
+ @include media-breakpoint-up(lg) {
+ margin-bottom: 522px;
+ }
+ @include media-breakpoint-up(xl) {
+ height: 800px;
+ margin-bottom: 328px;
+ }
+}
+
.donation-card {
border-radius: 4px;
background-color: white;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+ @include media-breakpoint-down(sm) {
+ background-color: transparent;
+ box-shadow: none;
+ border-radius: 0;
+ }
+ h3 a {
+ color: white;
+ }
+ .card {
+ @include media-breakpoint-down(sm) {
+ height: 1100px;
+ margin-bottom: 32px;
+ border-radius: 4px;
+ background-color: white;
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+ }
+ @include media-breakpoint-down(xs) {
+ border-radius: 0;
+ box-shadow: none;
+ margin-bottom: 0;
+ }
+ }
+ .info {
+ border-radius: 4px 0 0 4px;
+ @include media-breakpoint-down(sm) {
+ border-radius: 4px;
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+ }
+ @include media-breakpoint-down(xs) {
+ border-radius: 0;
+ box-shadow: none;
+ }
+ }
}
.ownamount {
background-image: url("/static/img/icons/icon-radiobtn-off.png");
background-repeat: no-repeat;
background-position: 0 0;
- padding-left: 38px;
+ padding-left: 40px;
+ @include media-breakpoint-up(lg) {
+ padding-left: 28px;
+ }
}
input.radiobtn:not(old):checked + label {
padding: 24px;
position: relative;
padding: 24px 20px;
+ #amount {
+ margin-left: -8px;
+ }
}
label.amount {
- width: 84px;
+ width: 76px;
height: 48px;
display: block;
background-color: white;
font-size: 20px;
color: $blue-400;
text-align: center;
- margin: 0 8px 16px 8px;
+ margin: 0 4px 12px 4px;
padding: 8px 0 0 0;
+ @include media-breakpoint-up(sm) {
+ width: 84px;
+ margin: 0 8px 16px 8px;
+ }
+}
+
+label.cc img {
+ height: 24px;
+}
+
+#ccpayment,
+#paymentpaypal,
+#sepapayment {
+ @include media-breakpoint-down(lg) {
+ padding-bottom: 24px;
+ margin-bottom: 32px;
+ label img {
+ position: relative;
+ }
+ }
+}
+
+#ccpayment {
+ @include media-breakpoint-up(lg) {
+ margin-top: 16px;
+ label {
+ background-position: 0 4px;
+ }
+ }
+}
+
+#paymentpaypal {
+ @include media-breakpoint-down(lg) {
+ label img {
+ top: -7px;
+ }
+ }
+ @include media-breakpoint-up(lg) {
+ margin-top: 14px;
+ label {
+ background-position: 0 6px;
+ }
+ }
+ @include media-breakpoint-up(xl) {
+ margin-top: 0;
+ label {
+ background-position: 0 20px;
+ }
+ }
+}
+
+#sepapayment {
+ @include media-breakpoint-up(lg) {
+ padding-top: 20px;
+ }
}
input[name=amount] {
.or {
display: block;
- height: 200px;
- width: 1px;
+ height: 1px;
+ width: 90%;
border: 1px solid $blue-grey-300;
position: absolute;
- left: 350px;
- top: 12px;
+ left: 5%;
+ top: 212px;
+ @include media-breakpoint-up(sm) {
+ top: 222px;
+ }
+ @include media-breakpoint-up(lg) {
+ height: 200px;
+ width: 1px;
+ border: 1px solid $blue-grey-300;
+ left: 257px;
+ top: 12px;
+ }
+ @include media-breakpoint-up(xl) {
+ left: 350px;
+ }
&:before {
content: "OR";
font-family: 'Ubuntu', sans-serif;
font-size: 16px;
font-weight: 500;
+ text-align: center;
color: $blue-grey-300;
background-color: $blue-grey-50;
display: block;
position: absolute;
- top: 12px;
- left: -12px;
- width: 24px;
+ top: -13px;
+ left: 50%;
+ margin-left: -20px;
+ width: 40px;
height: 24px;
+ @include media-breakpoint-up(lg) {
+ text-align: left;
+ display: block;
+ top: 12px;
+ left: -12px;
+ margin-left: 0;
+ width: 24px;
+ height: 24px;
+ }
}
}
\ No newline at end of file