:root { --darkblue: #174b67; --cyan: #01a0bc; --antidarkblue: #3b6379; --sun: #f9b233; --input: #fff; } .d-none { display: none !important;} .text-center {text-align:center;} .carousel { position: relative;} .carousel.pointer-event {touch-action: pan-y;} .carousel-inner {position: relative;width: 100%; overflow: hidden;} .carousel-inner::after { display: block; clear: both; content: "";} .carousel-item { position: relative; display: none; float: left; width: 100%; margin-right: -100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform 0.6s ease-in-out;} .carousel-item-next, .carousel-item-prev, .carousel-item.active {display: block;} .active.carousel-item-end, .carousel-item-next:not(.carousel-item-start) { transform: translateX(100%);} .active.carousel-item-start, .carousel-item-prev:not(.carousel-item-end) { transform: translateX(-100%);} .carousel-fade .carousel-item { opacity: 0; transition-property: opacity; transform: none;} .carousel-fade .carousel-item-next.carousel-item-start, .carousel-fade .carousel-item-prev.carousel-item-end, .carousel-fade .carousel-item.active { z-index: 1; opacity: 1;} .carousel-fade .active.carousel-item-end, .carousel-fade .active.carousel-item-start { z-index: 0; opacity: 0; transition: opacity 0s 0.6s;} @media (prefers-reduced-motion: reduce) { .carousel-fade .active.carousel-item-end, .carousel-fade .active.carousel-item-start {transition: none;} .carousel-item {transition: none;} } .carousel-control-next,.carousel-control-prev { position: absolute; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 15%; padding: 0; color: #fff; text-align: center; background: 0 0; filter: var(--bs-carousel-control-icon-filter); border: 0; opacity: 0.5; transition: opacity 0.15s ease;} @media (prefers-reduced-motion: reduce) { .carousel-control-next, .carousel-control-prev { transition: none; } } .carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover { color: #fff; text-decoration: none; outline: 0; opacity: 0.9;} .carousel-control-prev {left: 0;} .carousel-control-next {right: 0;} .carousel-control-next-icon,.carousel-control-prev-icon {display: inline-block;width: 2rem; height: 2rem; background-repeat: no-repeat; background-position: 50%; background-size: 100% 100%;} .carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e"); } .carousel-control-next-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e"); } .carousel-indicators { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; justify-content: center; padding: 0; margin-right: 15%; margin-bottom: 1rem; margin-left: 15%;} .carousel-indicators [data-bs-target] { box-sizing: content-box; flex: 0 1 auto; width: 30px; height: 3px; padding: 0; margin-right: 3px; margin-left: 3px; text-indent: -999px; cursor: pointer; background-color: var(--bs-carousel-indicator-active-bg); background-clip: padding-box; border: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; opacity: 0.5; transition: opacity 0.6s ease;} @media (prefers-reduced-motion: reduce) { .carousel-indicators [data-bs-target] {transition: none;} } .carousel-indicators .active { opacity: 1;} .carousel-caption { position: absolute; right: 15%; bottom: 1.25rem; left: 15%;padding-top: 1.25rem; padding-bottom: 1.25rem; color: var(--bs-carousel-caption-color); text-align: center;} .carousel-dark {--bs-carousel-indicator-active-bg: #000; --bs-carousel-caption-color: #000; --bs-carousel-control-icon-filter: invert(1) grayscale(100);} :root, [data-bs-theme=light] { --bs-carousel-indicator-active-bg: #fff; --bs-carousel-caption-color: #fff; --bs-carousel-control-icon-filter: ; } [data-bs-theme=dark] { --bs-carousel-indicator-active-bg: #000; --bs-carousel-caption-color: #000; --bs-carousel-control-icon-filter: invert(1) grayscale(100); } #donation-screens[data-currentslide="slide_1_"] #dfy-prev{display:none;} #donorfy-enabled-page .c__hero { min-height: 260px; background-image: none; background-color: var(--cyan);} .donorfyView1, .donorfyView2{background-color: var(--cyan); padding: 0 0 60px 0;} #dfy-form-steps { flex-wrap: wrap; display: flex; justify-content: center; position: absolute; top: -70px; width: 100%; } #dfy { color:#ffffff; font-size:20px; background:var(--cyan); padding: 60px 60px 0 60px; display: flex; flex-direction: row-reverse; justify-content: flex-end;} #dfy li {list-style-type:none;} #dfy #dfyDrawing {margin: -50px 0 0 30px;width: 100%; height: auto; max-width: 600px; transform:scale(1.2); position:relative;} #dfy #dfyDrawing:after { content: ""; display: block; height: 210px; width: 210px; background-image: url(../images/flower3.png); background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; right: 0px; top: 30%; transform: translateY(-50%); z-index: -1;} #dfy h2 { font-size:22px; margin:20px 0;} #dfy .dfy-top-container {background:var(--darkblue); position:relative;} #dfy .dfy-top-container .controls { padding: 0px 0px 35px 0px;} #dfy .dfy-top-container .controls ul{display:flex; margin:0; padding:0;justify-content: center;} #dfy .dfy-top-container .controls ul li { margin:0;font-size: 30px; flex: 0 0 50%; text-align: center; cursor:pointer; display: flex; flex-wrap: wrap; flex-direction: column; position:relative; z-index: 5;} #dfy .dfy-top-container .controls ul li p {color:#ffffff;} #dfy .dfy-top-container .controls ul li span {color:#ffffff; opacity:0.6; font-weight: 700;font-size:22px;background:var(--antidarkblue); padding:30px 15px; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;} #dfy .dfy-top-container .controls ul li.active span {opacity:1;color:#ffffff; background:var(--darkblue); } #dfy .dfy-top-container .controls ul li.active { position:relative;} #dfy .operativeForm.advanced:before {display:none;} #dfy #DirectDebitForm:before {content:url('../images/flower.png'); position:absolute;top: -60px; transform: rotate(-15deg); left: -70px; transform: scale(0) translate(0, 0); opacity:0; transform-origin: bottom right; animation: var(--trigger-animation);} #dfy #CreditCardForm:before {content:url('../images/flower.png'); position:absolute; top:-60px; right:-70px; transform: scale(0) translate(0, 0); opacity:0; transform-origin: bottom left; animation: var(--trigger-animation);} @keyframes flowerIn { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } #dfy .dfy-top-container .controls ul li:hover span {background:#fff; color:var(--darkblue); opacity:1;} #dfy .dfy-top-container .donateFrame { padding:0px 25px 0px 25px; display:none; flex-wrap:wrap;} #dfy .dfy-top-container .donateFrame.active {display:flex;} #dfy .dfy-top-container p { margin: 0 0 15px 0;} #dfy .donateFrame-oneoff .donateRight ul.options li{padding: 18px 0;} #dfy .form-check { padding: 0 25px 5px;} #dfy .form-check label{font-size: 20px; line-height: 32px; font-weight: 600;} #dfy .form-check input {background-color:var(--input); position: relative; top: 4px; margin: 0 10px 0 0;} #dfy .donateRight { flex: 0 0 100%;} #dfy .donateRight ul.options li {position:relative; font-size: 30px; color:#ffffff; cursor:pointer; background:var(--antidarkblue); margin:0 0 15px 0; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; flex:33%; text-align:center; display: flex; flex-wrap: wrap; justify-content: center; line-height: 26px; padding: .8em 1.2em; text-align: center; text-transform: none; outline: 0; border-radius: 30px; -webkit-transition: .2s; transition: .2s; cursor:pointer; font-weight: 700;} #dfy .donateRight ul.options li.active {color:#ffffff; background:var(--cyan); } #dfy .donateRight ul.options li.active:after{content:url('../images/heart.png'); position:absolute; left:-20px; top:-20px;} #dfy .donateRight ul.options { display: flex; margin: 0; padding: 0; justify-content: center; gap: 15px; } #dfy .donateRight ul.options li.active:hover, #dfy .donateRight ul.options li:hover {background:#ffffff; color:var(--darkblue);} #dfy .donateRight ul.options span span { flex: 100%; font-size: 17px;} #dfy .donateRight ul.options li > span { display: flex; flex-wrap: wrap; justify-content: center; line-height: 22px;font-size: 22px;} #dfy .donateLeft ul li { display: none;} #dfy .donateLeft ul li.active { display: flex;} #dfy .donateLeft > span {background:var(--darkblue); flex: 0 0 32%; justify-content: right; align-items: center; display: flex; position:relative;} #dfy .donateLeft ul { margin:0; flex: 0 0 68%; padding:0;align-content: center;} #dfy #dfy-custom-options { margin: 0 0 12px 0;} #dfy .summary { display: flex; align-items: center;} #dfy .summary p { margin: 15px 0 0 0; text-align:center; line-height: 25px;} #dfy .donateLeft .button {margin: 0 0 0 30px; cursor:pointer; border-radius: 4px; font-size: 24px; margin: 0; max-width: 190px; line-height:30px; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; border: 0; color: #ffffff; padding: .5em 1.3em; background: var(--cyan);} #dfy .donateLeft .button:hover{background:#ffffff; color:var(--darkblue);} #dfy .donateLeft .button em {font-style:normal; } #dfy .inlineimgWrap {text-align:center;} #dfy .inlineimgWrap img {margin:0 auto; max-width: 200px;} #dfy ul.imageVars { display: none;} #dfy .dfy-select { display: inline-block; line-height: 26px; padding: .8em 1.2em!important; text-transform: none; outline: 0; background-color: var(--input)!important; border-radius: 30px; -webkit-transition: .2s; transition: .2s; min-width: 160px; color:var(--darkblue);} #dfy .controlsRow ul {padding:0; display: flex; flex-wrap: wrap;} #dfy .controlsRow .customSelect { display: flex; align-items: center; justify-content: space-between; width: 100%;} #dfy .controlsRow .customSelect label{color:#ffffff; font-size:20px; line-height:32px; font-weight:600; flex: 0 0 60%;} #dfy .controlsRow .customSelect span {display:flex; flex: 0 0 33%;} #dfy .controlsRow .customSelect span:before { position: relative; left: -14px; top: 14px; font-size: 25px; content: "\00A3"; color: #ffffff; font-style: normal; font-weight: 600;} #dfy .controlsRow .customSelect input { display: inline-block; line-height: 26px; padding: .8em 1.2em; text-align: center; text-transform: none; outline: 0; background:var(--input); border-radius: 30px; -webkit-transition: .2s; transition: .2s; cursor: text; min-width: 160px; font-weight: 700;} #dfy .controlsRow .customSelect label { text-align: center;} #dfy #dfy-form-navigation { display: flex; flex-wrap: wrap; padding: 0 0 40px 0; justify-content:center;} #dfy #dfy-prev {font-size: 15px;cursor:pointer;text-decoration: underline;} #dfy #dfy-prev:hover {text-decoration:none;} #dfy-form-navigation button { flex: 0 0 40%; margin: 0 30px 30px 30px;} #donationForm {max-width:unset; margin: 50px 0px;} #donationForm form {margin:0px 0 40px 0; width:100%; display:flex; flex-wrap:wrap; max-width:unset; max-width: unset;} #donationForm form #AddressSearch {width:95%; margin:0!important;} #donationForm form .block {width:100%; padding: 0 0 30px 0;} #donationForm form p , #donationForm form p label {font-size:18px; max-width:unset;} #donationForm form section {position:relative; display:inline-block;} #donationForm form form {padding:60px 0 0 0;} #donationForm form .row.heading {margin:0 0 10px 0; position:relative;} #donationForm form .col-md-6, #donationForm form .col-md-4, #donationForm form .col-md-12 {padding:0;} #donationForm form .person-details .col-md-6, #donationForm form .person-details .col-md-4, #donationForm form .person-details .col-md-12, #donationForm form .payment-details .col-md-4, #donationForm form .payment-details .col-md-12 { padding: 0 45px;} #donationForm form .person-details .row, #donationForm form .payment-details .row, #donationForm form .payment-details .col-md-6{padding: 0;} #donationForm form .person-details .row.ydidentity .col-md-4, #donationForm form .person-details .row.ydidentity .col-md-6 { width: unset !important; padding: 0 !important;} #donationForm form .person-details .row.ydidentity .col-md-6 { flex: 0 0 40%; padding: 0 !important;} #donationForm form .person-details .row.ydidentity .col-md-4 { flex: 0 0 19%; padding: 0 !important;} #donationForm form .person-details .row.ydidentity, #donationForm form .person-details .row.ydaddress {padding: 0 45px; display: flex; justify-content: start;} #donationForm form .person-details .row.ydaddress .col-md-6 { flex: 0 0 50%; padding: 0 !important;} #donationForm form .person-details .row.ydaddress .col-md-4 { flex: 0 0 19%; padding: 0 !important;} #donationForm form .person-details .row.ydcomms {padding: 0 45px; align-items: center; display: flex; margin: 40px 0 0 0;} #donationForm form .person-details .row.ydcomms small {padding:0;} #donationForm form .person-details .row.ydcomms .col-md-6 { flex: 0 0 50%; padding: 0 !important;} #donationForm form .giftaid .halves {box-sizing: border-box; padding: 0 45px;} #donationForm form h3 {position:relative; color:#ffffff!important; padding:0px 0 0 0; font-size:24px; margin:0; line-height:46px; } #donationForm form .block.content-blocks.full-width {text-align:left; max-width:unset;} #donationForm form .block.intro p {padding:0;} #donationForm form .row {display:flex; width:100%; clear:both; margin:0 0 11px 0; flex-wrap:wrap; max-width:unset; padding: 0px 45px 25px 45px; box-sizing: border-box;} #donationForm form .paymentFields h4, #donationForm form #DeviceHeader, #donationForm form #PaypalHeader {color: #ffffff !important;width:100%; text-align:left; font-weight:700; font-family:Epilogue Bold, sans-serif; font-size:16px;} #donationForm form .paymentFieldsinner .inputFix > div { padding: 12px;} #donationForm form input, #donationForm form select, #donationForm form textarea, #donationForm form select, .inputFix {padding:0px 5px; border-radius: 4px; width:94%; height:42px; border:0; font-size:1em !important; color:#000000 !important; font-size:22px; background-color:#fff; border:1px solid #bbb; padding:6px; margin:0 !important; min-height:45px;} select#reason { width: 100% !important;} #donationForm form .row.commit > div { width: 94%;} #dfy form #giftAid p {margin: 15px 0; text-align: center; line-height: 25px; padding: 0 15px;} #donationForm form .taggroup input {height:15px; width:15px;} #donationForm form .shortfieldfirst, #donationForm form .shortfield {width:150px!important;} #donationForm form .col-md-2 {float:left; width:48%; padding:0px 18px 11px 0;} #donationForm form .col-md-12 {width:100%; max-width:unset; margin: 15px 0;} #donationForm form .radiogroup .col-md-2 {padding:0px 18px 0px 0;} #donationForm form h1 {font-size:36px; font-family:BenchNine, sans-serif; color:#fe5000; margin:25px 0;} #donationForm form .col-md-1 {padding:0px 18px 0px 0;} #donationForm form .radiogroup {padding:30px 0;} #donationForm form .col-md-4 {width:50%; float:left;} #donationForm form img.DirectDebitLogo {margin:30px 0;} #donationForm form input[type=checkbox] {width:25px; height:auto; min-height:16px; float:left; position:relative;} #donationForm form .radiogroup label.error {padding:0!important;} #dfy .gagroup > div {display: flex;flex-wrap: wrap; padding: 0 22px;} #dfy .gagroup input {background: var(--input); border-radius: unset; border: 0; margin: 8px 18px 0 0;position: relative;top: 5px;} #dfy .gagroup label{font-weight: bold;} #dfy .gagroup { padding: 0 25px 0 0;} #dfy .bullet, #dfy .gagroup > div.bullet { font-size: 14px; text-align: left; margin: 0 0 8px 0; padding: 0 0 0 56px; display: inline-block; position:relative;} #dfy .bullet::before {content: ""; display: block; height: 10px; width: 10px; background: #ffffff; position: absolute; left: 30px; top: 5px; border-radius: 50%;} #dfy .required-group , #dfy #persondetails .row { padding: 0 25px; justify-content: space-between; display: flex;} #dfy #persondetails .row .required-group { padding: 0px;} #dfy #persondetails .row .col-md-6 { display: flex; align-items: center; flex: 0 0 48% !important; flex-wrap: wrap;} #dfy #persondetails #aSearch > div { display: flex; width: 100% !important; align-items: center;flex-wrap: wrap; flex: 0 0 100% !important;} #dfy #persondetails #aSearch > div > label { flex: 0 0 60%; padding: 0 25px 0 0px;} #dfy #persondetails #aSearch > div > input { flex: 0 0 40%;} #dfy #persondetails #aSearch { padding:0px 25px 0px 25px !important;} #dfy #persondetails #personTitle .col-md-4 {flex: 0 0 100%;} #dfy #persondetails #personTitle {flex-wrap:wrap;} #dfy input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]), #dfy select, #dfy textarea{font-size: .8em;} #dfy #organisationCheckBox span {display: none; text-align: center; padding: 12px; color: var(--darkblue); background: #fff; font-size: 15px; line-height: 24px; margin: 20px 0 0 0;} #dfy #organisationCheckBox span.active {display:block;} #dfy #organisationCheckBox span a {text-decoration:underline;} #donationForm form label {padding:5px 0; display:inline-block; max-width:unset; color:#ffffff;} #dfy #PleaseWait{text-align: center; color: var(--sun); font-size: 14px; margin: 10px 0 0 0;} #dfy #inmem .row {padding:25px;} #dfy #inmem .required-group {display: flex; align-items: center; flex: 0 0 48% !important; flex-wrap: wrap; padding: 0;} #dfy #inmem .dfy-text-16 { font-weight: bold; padding: 0;} .pca .pcaautocomplete {border:0!important;} #dfy #lieu .row {padding:25px;} #dfy #lieu .required-group {display: flex; align-items: center; flex: 0 0 48% !important; flex-wrap: wrap; padding: 0;} #dfy #lieu .dfy-text-16 { font-weight: bold; padding: 0;} #dfy #lieu textarea {border-radius:unset; margin:12px 0 0 0;} #dfy #fundraising .row {padding:25px;} #dfy #fundraising .required-group {display: flex; align-items: center; flex: 0 0 48% !important; flex-wrap: wrap; padding: 0;} #dfy #fundraising .dfy-text-16 { font-weight: bold; padding: 0;} #dfy #fundraising textarea {border-radius:unset; margin:12px 0 0 0;} #dfy #finalPayment {padding:25px;} #dfy .commsgroup > div {display: flex;flex-wrap: wrap;} #dfy .costsgroup > div {display: flex;flex-wrap: wrap;} #dfy .commsgroup input, #dfy .costsgroup input {background: var(--input); border-radius: unset; border: 0; margin: 8px 18px 0 0;position: relative;top:-9px; flex: 0 0 25px;} #dfy .commsgroup label, #dfy .costsgroup label{font-weight: bold; flex: 0 0 80%;} #dfy .costsgroup { margin: 15px 0;} #dfy .commsgroup, #dfy .costsgroup { padding: 0 22px;} #dfy #paymentForm { padding: 35px 0 0;} #dfy #paymentForm .inputFix {border-radius:50px; padding: 0.5em 1em;} #donationForm form .container.contact, #donationForm form .container.payment {margin:40px auto;} #donationForm form .container {width:100%!important; padding: 0!important; max-width:unset; background: none; border: 0;} #donationForm form .inputFix {padding:16px 12px 12px 12px;} #donationForm form .container.giftaid, #donationForm form .container.payment {border:3px #000000 solid; padding:15px; margin:15px 0; line-height:20px;} #donationForm form img.giftAidLogo { width: 100%; margin: 9px 0 0 0; max-width: 156px;} #donationForm form .container.consent, #donationForm form .container.contact {padding:36px 30px 20px 30px; border-radius:50px; background:#ebebeb;} #donationForm form .grey {background:#ebebeb; padding:0 17%;} #dfy small {padding:0 25px; display:block; font-size: 14px;} #dfy #commsPrefs p { padding: 0 25px;} #dfy #commsPrefs small a { text-decoration: underline;} #dfy #commsPrefs small a:hover { text-decoration: none;} #dfy #paymentForm .paymentFieldsinner {display: flex; flex-wrap: wrap;} #dfy #paymentForm .paymentFieldsinner .col-md-6 {display: flex; align-items: center; flex: 0 0 48% !important; flex-wrap: wrap;} #dfy #paymentForm .paymentSummary {padding: 15px;position:relative;background: #fff; text-align:center; margin: 0 0 30px 0;} #dfy #paymentForm .paymentSummary:after{content:url('../images/heart.png'); position:absolute; left:-20px; top:-20px;} #dfy #paymentForm .paymentSummary p {color:var(--darkblue);} #dfy #paymentForm .paymentSummary span {color:var(--darkblue); font-weight:30px; font-weight:bold;} #dfy #paymentForm .paymentSummary span:before{ content:"\00A3" ; color:var(--darkblue); font-weight:30px; font-weight:bold;} #dfy #paymentForm .paymentFieldsinner label {font-size: 16px;margin: 12px 0 12px 7px;} #donationForm form section.contact .col-md-12 label input { position: absolute; left: -4px;} #donationForm form .debit-details .row {display:inline !important;} #donationForm form .debit-details p {color:#000000;} #donationForm form #paypal-button-container, #donationForm form #applePayDivId {width:90%; text-align:left;} #donationForm form .giftaid h3 {padding:0;} #donationForm form .giftaid .heading .col-md-4 {width:75%;} #donationForm form .giftaid p span {font-weight:bold;} #donationForm form .giftaid p em {font-style:normal; text-decoration:underline; cursor:pointer;} #donationForm #ErrorContainer, #Errors {padding:0!important;} #donationForm #PaypalErrorContainer {font-size: 14px; margin-bottom: 12px; background: red; color: #ffffff; padding: 6px !important; line-height: 17px; flex: 0 0 100%; border-radius: 4px; text-align: left; margin-top: 12px;} #donationForm form section .customQs {margin:0 0 40px 0;} #dfy #submitButton{ cursor: pointer; opacity: 1; transition: all 0.2s; flex: 0 0 40%; margin: 30px 30px 0px 30px; background-color: var(--sun); color: var(--darkblue); border: 0; font-size: 20px; line-height: 22px; font-weight: 900; padding: .8em 1.2em;text-align: center; text-transform: none; outline: 0; border-radius: 30px; cursor: pointer; min-width: 192px;} #dfy form #submitButton:hover { background: #ffffff; color: var(--darkblue)!important;} #dfy form .submit-button-wrapper { text-align:center;position: relative;} #dfy #ErrorContainer {font-size: 14px; margin-bottom: 12px; background: red; color: #ffffff; padding: 6px !important; line-height: 17px; flex: 0 0 100%; border-radius: 4px; text-align: left; margin-top: 12px;} #dfy.dfyThanks .container-inner > div{padding:35px 25px 65px 25px; display: flex; flex-wrap: wrap;} #dfy.dfyThanks .container-inner p {text-align:center;} #dfy.dfyThanks .container-inner a {margin: 15px auto;} #dfy.dfyThanks {padding: 0px 60px 120px 60px;} .donorfyView2 {flex-wrap: wrap; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; } .donorfyView2 .fuss { width: 100vw; height: 400px; /* overflow: hidden; */ position: absolute; } .donorfyView2 .fuss .set { display: flex; width: 100vw; height: 100%; position: absolute; top: 0;} .donorfyView2 .fuss .set .child { flex: 1; margin: 0 10px; } .donorfyView2 .fuss .set .child.var1:before{background-image:url('../images/Welcoming_Flower_2.png'); display:block; height:550px; content:""; background-size: contain; background-repeat: no-repeat; background-position: center; transform:scale(1.5); position: relative; top: -170px;} .donorfyView2 .fuss .set .child.var2:before{background-image:url('../images/Healing_Petal_2.png'); display:block; height:135px; content:""; background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; bottom: -240px;} .donorfyView2 .fuss .set .child.var3:before{background-image:url('../images/Natural_Leaf_2.png'); display:block; height:160px; content:""; background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; position: relative; top: -140px; right: -225px;} .donorfyView2 .fuss .set .child.var4:before{background-image:url('../images/Revitalising_Leaf_1.png'); display:block; height:85px; content:""; background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; position: relative; bottom: -290px; right: -180px;} .donorfyView2 .fuss .set .child.var5:before{background-image:url('../images/Stimulating_Heart.png'); display:block; height:350px; content:""; background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; width: 410px; top: -40px; left: -30px;} .donorfyView2 .fuss .set .child.var6:before{background-image:url('../images/Healing_Petal_1.png'); display:block; height:170px; content:""; background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; top: 220px; left: -110px; transform: rotate(22deg);} #dfy.dfyThanks #canvas {position:absolute; width:100%;} #dfy.dfyThanks .dfy-top-container { overflow: hidden;} #dfy .dfy-text-primary { color: #2e3960; } #dfy .dfy-donation-amount-btn { color: #2e3960; background-color: #2e396033 !important; transform: scale(1); transition: all 0.2s; } #dfy .dfy-donation-amount-btn:hover { background-color: #2e396066 !important; transform: scale(1.05); } #dfy .dfy-donation-amount-btn:active { transform: scale(1.05); } #dfy .dfy-donation-amount-btn.selected { background-color: #2e3960CC !important; color: #FFFFFF; } .dfyText60 { color: #2e3960AB;} /*.dfyButton { padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: 600;}*/ .dfyButton.btn-primary { background-color: var(--sun); color: var(--darkblue); border: 0; font-size: 20px; line-height: 22px; font-weight: 900;} .dfyButton.btn-secondary { background-color: #2e396033; color: #2e3960; } .dfyButton:active { background-color: #2e396099 !important; } #fundraiseRegForm.processing .loader,#fundraiseRegForm.processing .loader:after { border: 5px solid #586baf !important;} #donation-target-bar { background-color: #2e396033;} #donation-total { background-color: #2e3960;} #dfy .dfy-text-primary { color: #2e3960;} hr { color: #2e396099;} #dfy .dfy-input-text,#dfy .dfy-select,#card-element { background-color: #2e39600F; border: 1px solid #2e396033;} .perc-outside,.perc-outside-pad { color: #2e3960; left: 0%; padding-left: 16px; font-weight: 600; position: absolute;} .perc-outside-pad { left: 0%; padding-left: 34px;} #dfy-other-amount-container { border: 1px solid #2e396033; background-color: #2e39601A;} #dfy-other-amount-currency { background-color: #2e396033;} .gift-aid-logo { color: #ffffff;} #dfy .dfy-checkbox,#dfy .dfy-checkbox-sm { accent-color: #2e3960;} #form-progress .form-progress-blob:after { background-color: #2e396044;} #form-progress .form-progress-blob.active:after { background-color: #2e3960;} #dfy .dfy-form-step-blob { background-color: #2e396044;} #dfy .dfy-form-step.active .dfy-form-step-blob { background-color: #2e3960;} #dfy .dfy-form-step-dots { border-top: 1px dotted #2e396044;} #payment-form.processing .loader,#payment-form.processing .loader:after { border: 5px solid #2e3960;} #dfy-amount-reminder strong { color: #2e3960 !important;} #dfy .dfy-text-bold, strong { font-weight: 600;} #dfy .dfy-text-nor { font-weight: 400;} #dfy .dfy-text-14 { font-size: 0.875rem; line-height: 20px;} #dfy .dfy-text-16 {font-size:18px; padding: 0 25px; line-height: 24px;} #dfy .dfy-text-18 { font-size: 1.125rem; line-height: 28px;} #dfy .dfy-text-18#dfy .dfy-text-bold small { font-size: 0.875rem; font-weight:400; opacity:0.7; line-height: 28px;} #dfy .shortfieldfirst { max-width: 200px;} /* SPACERS */ .spacer-4, .spacer-8, .spacer-12, .spacer-16, .spacer-24, .spacer-32, .spacer-40, .spacer-48, .spacer-56, .spacer-64, .spacer-72, .spacer-80, .spacer-88, .spacer-96, .spacer-104, .spacer-112, .spacer-120, .spacer-128, .spacer-xs-0, .spacer-xs-4, .spacer-xs-8, .spacer-xs-12, .spacer-xs-16, .spacer-xs-24, .spacer-xs-32, .spacer-xs-40, .spacer-xs-48, .spacer-xs-56, .spacer-xs-64, .spacer-xs-72, .spacer-xs-80, .spacer-xs-88, .spacer-xs-96, .spacer-xs-104, .spacer-xs-112, .spacer-xs-120, .spacer-xs-128 { display: block; width: 100%; padding: 0; margin: 0; flex: 0 0 100%;} .spacer-0 { height: 0px } .spacer-4 { height: 4px } .spacer-8 { height: 8px } .spacer-12 { height: 12px } .spacer-16 { height: 16px } .spacer-24 { height: 24px } .spacer-32 { height: 32px } .spacer-40 { height: 40px } .spacer-48 { height: 48px } .spacer-56 { height: 56px } .spacer-64 { height: 64px } .spacer-72 { height: 72px } .spacer-80 { height: 80px } .spacer-88 { height: 88px } .spacer-96 { height: 96px } .spacer-104 { height: 104px } .spacer-112 { height: 112px } .spacer-120 { height: 120px } .spacer-120 { height: 128px } @media (max-width: 767px), (max-height: 499px) { .spacer-xs-0 { height: 0px !important } .spacer-xs-4 { height: 4px !important } .spacer-xs-8 { height: 8px !important } .spacer-xs-8 { height: 8px !important } .spacer-xs-12 { height: 12px !important } .spacer-xs-16 { height: 16px !important } .spacer-xs-24 { height: 24px !important } .spacer-xs-32 { height: 32px !important } .spacer-xs-40 { height: 40px !important } .spacer-xs-48 { height: 48px !important } .spacer-xs-56 { height: 56px !important } .spacer-xs-64 { height: 64px !important } .spacer-xs-72 { height: 72px !important } .spacer-xs-80 { height: 80px !important } .spacer-xs-88 { height: 88px !important } .spacer-xs-96 { height: 96px !important } .spacer-xs-104 { height: 104px !important } .spacer-xs-112 { height: 112px !important } .spacer-xs-120 { height: 120px !important } .spacer-xs-120 { height: 128px !important } } #dfy .dfy-top-container { max-width: 560px; width:100%; height: auto; transition: all 0.2s;} #dfy .required-group label:first-of-type:after { content:'*'; color:red; margin-left:4px; font-size: 0.75rem; vertical-align: super;} #dfy input::placeholder, #dfy textarea::placeholder { color: var(--darkblue); opacity: 1; /* necessary in Firefox */ } #dfy :-ms-input-placeholder { /* IE 10–11 */ color: var(--darkblue); } #dfy ::-ms-input-placeholder { /* Old Edge */ color: var(--darkblue); } #dfy ::-webkit-input-placeholder { /* Chrome, Safari, Opera */ color: var(--darkblue); } #dfy input::-moz-placeholder, #dfy textarea::-moz-placeholder { color: var(--darkblue); opacity: 1; } #dfy .dfy-input-group { margin: 16px 0;} #dfy .dfy-input-group label { padding-bottom:4px;} #dfy .dfy-input-group label.error-label { font-weight:400; font-size:0.75rem;} #dfy .dfy-input-group .form-text { margin-bottom:16px} #dfy .dfy-input-group .form-control,#dfy .dfy-input-text, #dfy .dfy-select { padding: 0.75rem;} #dfy .dfy-input-group .form-control::placeholder,#dfy .dfy-input-text::placeholder, #dfy .dfy-select::placeholder { color:#B6B5B9;} #card-element { padding: 16px; border-radius: 4px; background-color: #f1f1f1;} #dfy .dfy-error-text {font-size: 14px; margin-bottom: 12px; background: red; color: #ffffff; padding: 6px !important; line-height: 17px; flex: 0 0 100%; border-radius: 4px; text-align: left; margin-top: 12px;} .dfyButton {} .dfyButton:hover { background-color:#fff;} #target-wrapper { position:relative; } #target { padding-left:2rem; } #target-wrapper:before { position:absolute; display:block; width:20px; height:20px; line-height:1; color:#aaaaaa; font-size:1.125rem; top:calc(50% - 9px); left:12px; content: '\00A3'; } .carousel-indicators { position: relative; right: 0; bottom: 0; left: 0; z-index: 2; padding: 0; margin-right: 0%; margin-bottom: 1rem; margin-left: 0%; font-size:0.75rem;} .carousel-item { transition: transform 0.3s ease-in-out;} @media (max-width: 359px) { .carousel-item { padding: 0px; } } .carousel-item label { margin-bottom:8px; } .carousel-indicators [data-bs-target] { box-sizing: border-box; display:block; flex: auto; width: auto; height: auto; padding: 0; margin-right: 0; margin-left: 0; text-indent: 0; cursor: pointer; background-color: transparent; background-clip: none; border: 0; border-top: none; border-bottom: none; opacity: 0.4; transition: opacity 0.3s ease; } .carousel-indicators [data-bs-target].active { opacity: 1; } .carousel-indicators button { width:100px; } #dfy-form-navigation button, #form-progress button { opacity: 1; transition: all 0.2s; } #form-progress .form-progress-blob { width:100px; height:24px; margin-bottom:8px; position:relative; } #form-progress .form-progress-blob:after { content:''; width:24px; height:24px; display:block; border-radius:50%; margin-left:calc(50% - 12px);} #form-progress .form-progress-blob.complete:before { content:'\f00c'; color:#ffffff; width:24px; height:24px; text-align:center; position:absolute; font-weight:900; font-family:'Font Awesome 6 Free'; width:24px; height:24px; display:block; border-radius:50%; margin-left:calc(50% - 12px);} #form-progress .form-progress-blob { width:100px; height:24px; margin-bottom:8px; position:relative; } #form-progress .form-progress-blob:after { content:''; width:24px; height:24px; display:block; border-radius:50%; margin-left:calc(50% - 12px);} #form-progress .form-progress-blob.complete:before { content:'\f00c'; color:#ffffff; width:24px; height:24px; text-align:center; position:absolute; font-weight:900; font-family:'Font Awesome 6 Free'; width:24px; height:24px; display:block; border-radius:50%; margin-left:calc(50% - 12px);} .triangle { --r:1px; /* border radius */ height: 10px; margin-right:-10px; aspect-ratio: 2; --_g:calc(var(--r)/tan(22.5deg)) bottom var(--r),#000 98%,#0000 101%; -webkit-mask: conic-gradient(from -22.5deg at 50% calc(100% + 100%/tan(22.5deg) - var(--r)/(3*sqrt(2) - 4)),#000 45deg,#0000 0) 0 100%/100% calc(100% - var(--r)/sqrt(2)) no-repeat, radial-gradient(var(--r) at 50% calc(var(--r)*sqrt(2)),#000 98%,#0000 101%), radial-gradient(var(--r) at left var(--_g)), radial-gradient(var(--r) at right var(--_g)); clip-path: polygon(50% 0,100% 100%,0 100%); } #donation-target-bar,#donation-total { border-radius: 1rem; color:#fff; line-height:1;} #donation-total { padding:0.3rem 0.5rem; font-size:0.875rem; border-radius: 1rem 0 0 1rem; height: 24px;} #payment-form h1 { padding:0 12px;} #payment-form hr { margin-top:24px;} #dfy .dfy-heading-24 { font-size:1.5rem; line-height:34px; font-weight:600;} #dfy .dfy-heading-22 {font-size:22px; line-height:32px; font-weight:600;} .btn-reset { all: unset;} #dfy-donation-amounts-container { gap:10px;} #dfy .dfy-donation-amount-btn { transition: all 0.2s; width:25%; padding:12px 12px; font-size: 1.125rem; font-weight: 600; text-align: center; border-radius:6px; cursor:pointer;} @media(max-width:389px) { #dfy .dfy-donation-amount-btn { font-size: 1rem; } } #dfy .dfy-input-text { padding: 0.75em 1em; border: none;background-color: var(--input);} #dfy .dfy-checkbox { width: 36px; height: 36px;} #dfy .dfy-checkbox-sm { width: 26px; height: 26px;} #dfy .dfy-check { gap:8px} #dfy .dfy-form-step { text-align: center; font-size: 0.75rem; color: #2e3960; transition: all 0.2s;} @media(min-width:768px) { #dfy .dfy-form-step { font-size: 0.875rem; } } @media(min-width:576px) { #dfy .dfy-form-step { min-width: 62px; } } #dfy .dfy-form-step-blob { width: 14px; height: 14px; border-radius: 24px; background-color: #ffffff; display: flex; justify-content:center; align-items:center; margin:0 auto 8px; transition: all 0.2s; position:relative;} #dfy .dfy-form-step-text { flex: 0 0 100%; text-align: center; margin: 0 0 15px 0;} #dfy .dfy-form-step.active .dfy-form-step-blob { background-color: var(--sun); } #dfy .dfy-form-step-text { flex: 0 0 100%;} @media only screen and (max-width: 1280px) { #donationForm form .payment-details .row.heading, #donationForm form .payment-details .row.commit, #donationForm form .payment-details .paymentFieldsinner {padding: 0 35px;} #donationForm form .person-details .row.ydidentity .col-md-6 { flex: 0 0 100%;} #donationForm form .gagroup label { padding: 0 2% 0 0;} #donationForm form .gagroup {flex-wrap:wrap;} #dfy .controlsRow .customSelect span::before { position: relative; left: -6px;} #dfy .controlsRow .customSelect label {flex: 0 0 50%; text-align: left;} #dfy .donateRight ul.options { max-width: 100%;} #dfy .controlsRow .customSelect {max-width: unset;} #dfy .donateLeft .button {font-size: 21px;max-width: 124px;} #dfy .summary span { font-size: 36px; padding: 0px 26px;} #dfy .donateLeft .button em {font-style:normal; display: block;} #donationForm form .tagGroup:nth-child(2), .tagGroup:nth-child(5), #donationForm form .tagGroup, #donationForm form .tagGroup:nth-child(3), .tagGroup:nth-child(6) { flex: 0 0 48% !important;} #donationForm form .payment-details .col-md-2 { flex: 0 0 23%;} @keyframes flowerIn { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(0.8); } } } @media only screen and (max-width: 1024px) { #dfy .dfy-top-container {flex: 0 0 600px;} #dfy #dfyDrawing { margin: -50px -40px 0 -20px;} #donorfy-enabled-page .c__hero .c__hero__content {height: auto;} #dfy{padding: 60px 20px 0 20px;} #dfy.dfyThanks { padding: 0 20px 120px 20px;} #dfy.dfyThanks .dfy-top-container { margin: 0; flex: 0 0 100%;} } @media only screen and (max-width: 895px) { #dfy {flex-wrap: wrap;} #dfy #dfyDrawing { margin: -40px auto 0 auto; max-width: 470px;} #dfy .dfy-top-container { margin: 0 auto; flex: 0 0 89%;} #dfy-form-steps {top: -560px;} #dfy .dfy-top-container .controlsInner { max-width: 100%;} #dfy .controlsRow .customSelect {flex-wrap:wrap; padding: 10px 50px 30px 50px;} #dfy .controlsRow .customSelect label { text-align: center; flex:0 0 100%;} #dfy .controlsRow .customSelect > span { text-align: center; margin: 12px 0 0 0; flex:0 0 100%;} #dfy .donateLeft ul li {position: relative; justify-content: center; text-align: center; flex-wrap: wrap;} #dfy .donateLeft ul { overflow-x: clip;} #dfy .donateLeft { margin: 10px 0 35px 0;} #dfy .donateLeft > span:before {display:none;} #dfy .donateLeft > span { background: transparent; align-items: center; display: inline-block; position: relative; text-align: center; width: 100%; bottom: -17px;} #dfy .donateLeft .button em {display:inline;} #dfy .donateLeft .button{box-shadow: var(--darkblue) 0px 0px 0px 7px; position: relative; display: block; margin: 0 auto;} #dfy .donateLeft .button.button:before {top: 19px; left: 95%;} .donorfyView2 .fuss .set { display: flex; width: 200vw; height: 100%; position: absolute; } .donorfyView2 .fuss { width: 200vw;} @keyframes flowerIn { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } } @media only screen and (max-width: 660px) { #dfy #paymentForm .paymentFieldsinner .col-md-6 { flex: 0 0 100% !important;} #dfy .costsgroup { margin: 15px 0; padding: 0!important;} #dfy .dfy-text-16 {padding:0;} #dfy .costsgroup > div { display: flex; flex-wrap: nowrap;} #dfy .commsgroup label {flex: unset;} #dfy #dfy-form-navigation{padding: 0;} #dfy .inputFix { width: 100%;} } @media only screen and (max-width: 575px) { #dfy { padding: 0px 0 30px 0; width:96%;} #dfy #dfyDrawing {max-width: 370px; margin: 0px auto 0 auto;} #dfy-form-steps {top: -470px;} #dfy .dfy-form-step { min-width: 62px; } #dfy .dfy-top-container .controls li.active:before {right: 33px;} #dfy .dfy-top-container .controls ul, #dfy .donateRight ul {flex-wrap:wrap; } #dfy .dfy-top-container .controls ul li div, #dfy .dfy-top-container .controls ul li p {display:none;} #dfy .dfy-top-container .controls ul li.active { background: var(--darkblue);} #dfy .controlsRow .customSelect { flex-wrap: wrap; padding: 10px 10px 30px 10px; } #dfy .donateFrame h3 {padding: 20px 10px;} #dfy .controlsRow .customSelect input {margin:0 20px;} #dfy .controlsRow .customSelect {flex: unset;} #dfy .dfy-top-container .controls ul {gap:0;} #dfy .donateRight ul.options li {flex: 100%; padding: 10px 0; margin: 0;} #dfy .donateRight .controlsRow { margin: 20px 0 0 0;} #dfy .controlsRow .customSelect { padding: 10px 10px 15px 10px; } #dfy .controlsRow .customSelect > span {margin: 12px auto 0 auto; flex: 0 0 60%;} #dfy .thanks .one-third.column { flex: 0 0 100%;} #dfy .thanks {flex-wrap:wrap;} #donationForm form .payment-details .row.commit { padding: 20px !important; } #dfy .gagroup label { font-weight: bold; text-align: left; display: flex; line-height: 32px; align-items: baseline;} #dfy .gagroup label input {flex: 0 0 auto;} #dfy #persondetails .row .col-md-6 {flex: 0 0 100% !important;} #dfy .required-group, #dfy #persondetails .row {flex-wrap:wrap;} .donorfyView2 .fuss .set .child {flex: 0 0 33%} .donorfyView2 .fuss .set { display: flex; width: 200vw; height: 100%; position: absolute; top: -230px; transform:scale(0.5);} .donorfyView2 .fuss { width: 200vw;} #dfy #dfyDrawing:after { content: ""; display: block; height: 150px; width: 150px; background-image: url(../images/flower3.png); background-repeat: no-repeat; background-size: cover; position: absolute; right: -30px; top: 10%; transform: translateY(-50%); z-index: -1;} #dfy #dfyDrawing svg {height:auto;} } @media only screen and (max-width: 460px) { #donorfy-enabled-page .c__hero { min-height: unset; } #dfy .dfy-top-container .controls ul li, #dfy .donateRight ul li {flex:0 0 100%;} #dfy #DirectDebitForm:before, #dfy #CreditCardForm:before {display:none;} #dfy .dfy-top-container .controls ul {padding: 20px;} #dfy .dfy-top-container .controls ul li.active span { background: var(--cyan); } #dfy #dfyDrawing { max-width: 250px; margin: 20px auto 0px auto;} #dfy-form-steps { top: -325px; } #dfy .dfy-form-step-blob { width: 9px; height: 9px;} #dfy .dfy-form-step { min-width: 42px; } #dfy .dfy-top-container .controls { padding: 0px 0px 5px 0px;} /*.donorfyView1, .donorfyView2 { padding: 50px 0 60px 0;}*/ #dfy .controlsRow .customSelect label, #dfy .dfy-heading-22, #dfy .gagroup label {font-size:20px;} #dfy #persondetails #aSearch > div > label { flex: 0 0 100%; padding: 0 0 10px 0;} #dfy #persondetails #aSearch > div > input { flex: 0 0 100%; max-width: 200px;} }