@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/QUICKSAND-REGULAR.TTF') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'QuicksandBold';
    src: url('../fonts/QUICKSAND-BOLD.TTF') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
:root {
    --darkblue: #00346d;
    --cyan: #38a4d7;
    --anticyan: #1a497c;
	--yellow: #ffa900;
	--antiyellow: #d48d02;
   }

#dfy {font-family: 'QuicksandBold'; color:#ffffff; font-size:20px;}
#dfy li {list-style-type:none;}
#dfy  {padding:70px 0;}
#dfy  h2 {color:var(--cyan); font-size:38px; margin:0 0 40px 0;}
#dfy .donateControl  {background:var(--darkblue);  position:relative;}
#dfy .donateControl .controlsInner {max-width:63%;}
#dfy .donateControl .controls {    padding: 0px 45px 25px 45px;}
#dfy .donateControl:before {content:url('../images/wave-top-white.svg'); transform: scale(102%);  display: block;}
#dfy .donateControl:after {content:url('../images/wave-bottom-white.svg'); transform: scale(102%);  display: block; position: relative;  bottom: -20px;}
#dfy .donateControl .controls ul{display:flex; margin:0; padding:0; gap:15px; justify-content: center;}
#dfy .donateControl .controls ul li { margin:0;font-size: 30px; flex: 0 0 48.44%; text-align: center; cursor:pointer; display: flex; flex-wrap: wrap; flex-direction: column;background:var(--darkblue);}
#dfy .donateControl .controls ul li p {color:#ffffff;}
#dfy .donateControl .controls ul li span {color:#ffffff; border-radius:4px; background:var(--anticyan); padding:.3em; margin:0 0 15px 0; -webkit-transition: all .4s ease-in-out;  transition: all .4s ease-in-out;}
#dfy .donateControl .controls li.active:before {content:url('../images/star.png'); position: absolute;  width: 20px; height: 50px; display: block;  top: -30px;  right: 13px;  transform: scale(0.6); animation: starAppear 0.3s  ease-out forwards;}
#dfy .donateControl .controls ul li.active span {color:#ffffff; background:var(--cyan); }
#dfy .donateControl .controls ul li.active img {opacity:1;}
#dfy .donateControl .controls ul li.active { position:relative;}
#dfy .donateControl .controls ul li:hover span {background:#ffffff; color:var(--darkblue);}
#dfy .donateControl .donateFrame {  padding:0px 45px 25px 45px; display:none; flex-wrap:wrap;}
#dfy .donateControl .donateFrame.active {display:flex;}
#dfy .donateControl p {  margin: 0 0 15px 0;}
#dfy .donateFrame-oneoff .donateRight ul.options li{padding: 18px 0;}
#dfy .donateRight { flex: 0 0 100%;}
#dfy .donateRight ul.options li {position:relative; font-size: 30px; border-radius:4px; color:#ffffff; cursor:pointer; background:var(--anticyan); padding:.3em; margin:0 0 15px 0; -webkit-transition: all .4s ease-in-out;  transition: all .4s ease-in-out; flex:33%; text-align:center;}
#dfy .donateRight ul.options li.active {color:#ffffff; background:var(--cyan); }
#dfy .donateRight ul.options li.active:before	{content:url('../images/star.png'); position: absolute;  width: 20px; height: 50px; display: block;  top: -30px;  right: 13px;  transform: scale(0);  opacity: 0; animation: starAppear 0.3s  ease-out forwards;}
#dfy .donateRight ul.options { display: flex;  margin: 0;  padding: 0;   justify-content: center;   gap: 15px;  max-width: 63%;}
#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: 32px;}
#dfy .donateLeft { order: 2; background:var(--yellow);color:var(--darkblue); display:flex; flex-wrap:wrap;     border-radius: 4px;     margin: 0 0 35px 0;}
#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 > span:before {content: ""; transform: scale(1.03); position: absolute;   left: -94px;   top: 0;   bottom: 0;   width: 125px;   background: url(../images/arrow-ext.svg) no-repeat center center;  background-size: contain; }
#dfy .donateLeft ul { margin:0; flex: 0 0 68%; align-content: center;}
#dfy .donateLeft .summary { display: flex;  align-items: center;}
#dfy .donateLeft .summary p { margin: 0;  padding: 25px 95px 25px 25px;  line-height: 25px;}
#dfy .donateLeft .summary span {  font-size: 48px;    padding: 0 40px;}
#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 .4s ease-in-out;   transition: all .4s 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.button:before { content: url(../images/star.png);  position: absolute;    width: 20px;     height: 50px; display: block;top: 33px;  left: 90%;  transform: translate(-50%, -50%) scale(0.6); opacity: 0;  pointer-events: none;  z-index: 10;}
#dfy .donateLeft .button em {font-style:normal; }
#dfy .donateLeft .button.button-active:before {
    animation: starAppearButton 0.3s ease-out forwards;
}

@keyframes starAppearButton {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-75%, -75%) scale(0.7);
        opacity: 1;
    }
    100% {
        transform: translate(-100%, -100%) scale(0.6);
        opacity: 1;
    }
}

.button.button-active:before {
    animation: starAppearButton 0.3s ease-out forwards, starFadeOut 0.5s 0.4s forwards;
}

@keyframes starFadeOut {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.2); // Maintain scale or slightly grow
    }
}

#dfy .imagWrap:before {content:url('../images/sun.svg');}
#dfy .imagWrap img {position: absolute; opacity: 0; left: 50%; top:47%;  transform: translate(-50%, -50%); border-radius: 50%; width:290px; height:290px; animation: fadeZoomInImage 0.5s 0.3s ease-out forwards;}
#dfy .imagWrap {top: -50px;   position: absolute;  transform: scale(0.7) rotate(65deg);  right: -50px; animation: fadeZoomIn 0.5s ease-out forwards;}

@keyframes fadeZoomIn {
  0% {
    opacity: 0;
    transform: scale(0.7) rotate(65deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes fadeZoomInImage {
  0% {
    opacity: 0;
     transform: translate(-50%, -50%) scale(0.7);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8);
  }
   100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
 @keyframes starAppear {
	0% {
    opacity: 0;
    transform: scale(0);
  } 
  100% {
    opacity: 1;
    transform: scale(0.6);
  } 
 }

#dfy .controlsRow ul {padding:0; display: flex;  flex-wrap: wrap;}
#dfy .controlsRow .customSelect {  padding: 14px 0; display: flex;  align-items: center;  justify-content: center;  border-radius: 4px; background: var(--anticyan);  max-width: 566px;  width: 100%;}
#dfy .controlsRow .customSelect label{color:#ffffff; font-size:14px;     flex: 0 0 50%;}
#dfy .controlsRow .customSelect  span {display:flex;}
#dfy .controlsRow .customSelect  span:before {    position: relative;  left: 16px; top: -5px;  font-size: 31px;content: "\00A3";color:#ffffff;   font-style: normal;}
#dfy .controlsRow .customSelect input {  border-radius: 0;    border: 0;    padding: 3px 5px;    margin: 0 30px;    height: 30px;    background: var(--anticyan);    border-bottom: 2px solid #ffff;    color: #ffffff;   font-size: 26px;    width: 70%;    position: relative;    bottom: -5px;}
#dfy .controlsRow .customSelect label { text-align: center;}

#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 section.inmem .inmemInner {  background-color: #f0f0f0;  padding:25px 25px 0 25px!important;   flex: 0 0 100%;}
#donationForm form section.inmem .row:last-child .inmemInner {padding:25px!important;}
#donationForm form section.inmem .inmemInner label {color:#5c5c5c;}
#donationForm form section.inmem .row {margin:0;}
#donationForm form .inmem .col-md-6 { width: 50%;}
#donationForm form section.inmem label {color:#ffffff; margin: 0 0 20px 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 .giftaid .col-md-4, #donationForm form .giftaid .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 .giftaid .row, #donationForm form .giftaid .col-md-6, #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; font-family: 'QuicksandBold';}
#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%;}
#donationForm form .giftaid { overflow-x: clip; padding:0;}
#donationForm form .giftaid .col-md-12 {margin:0;}
#donationForm form .giftaid .container {background:var(--yellow); border:0;}
#donationForm form .giftaid:before {content:url('../images/wave-top-yellow.svg'); transform: scale(102%);  display: block; position: relative;  top:20px;}
#donationForm form .giftaid:after {content:url('../images/wave-bottom-yellow.svg'); transform: scale(102%);  display: block; position: relative;  bottom:0px;}
#donationForm form .giftaid  .col-md-6 { width: 50%; }
#donationForm form .giftaid h3, #donationForm form .giftaid p, #donationForm form .giftaid label, #donationForm form .giftaid small {color:var(--darkblue);}
#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;}
#donationForm form .gagroup label.error, #donationForm form .commsgroup label.error {color:#ffffff;}
#donationForm form label.error {box-shadow:none;     background: #df3079;  color: #ffffff;  padding: 16px !important;   line-height: 12px;   border-radius: 6px;    font-size: 14px;    margin: 10px 10px 10px 0 !important;   display: block;}
#donationForm form label {padding:5px 0; display:inline-block; max-width:unset; color:#ffffff;}
#donationForm form .commsgroup input[type=radio], #donationForm form input[type=radio] {width:15px; height:15px; min-height:unset; position:relative; top:1px; margin:0 7px;}
#donationForm form .commsgroup span {width:auto; margin:0 12px 0 0; display:inline-block; min-width:100px;}
#donationForm form .newslettergroup input[type=radio] {width:15px; height:15px; position:relative; top:-1px; margin:0 7px;}
#donationForm form .newslettergroup span {width:auto; margin:0 12px 0 0; display:inline-block;}
#donationForm form .container.contact, #donationForm form .container.payment {margin:40px auto;}
#donationForm form .radiogroup input, #donationForm form .taggroup input {margin:0 12px 0 0; position:relative; top:-2px;}
#donationForm form .taggroup label {width:100%; display:inline-block; max-width:unset;}
#donationForm form .radiogroup span {margin:0 12px 0 0;}
#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%;}
#donationForm form small {padding:0 30px; display:block; font-size: 14px;}
#donationForm form .commsgroup {padding:20px 0px; overflow:hidden; max-width:95%;}
#donationForm form .commsgroup div {width:100%; display:flex;}
#donationForm form .commsgroup div span:last-child {text-align:right;}
#donationForm form .commsgroup div span {margin:0 0 10px 0; flex:2 1 auto;}
#donationForm form #Postcode-error {   background: #df3079; color: #ffffff; padding: 16px !important; line-height: 12px; border-radius: 6px; font-size: 14px; margin: 10px 0px 10px !important; display: block;}
#donationForm form .commsgroup label input {margin:0px 0 0 12px!important; position:relative; top:-3px;}
#donationForm form textarea {height:100px; width:100%; max-width:unset;}
#donationForm form .prefsIntro {margin:32px 0 0 0!important;}
#donationForm form section.contact-details p {margin:10px 0 0 0;}
#donationForm form section.contact-details .row {padding:0%;}
#donationForm form section.contact-details h3, #donationForm form section.contact-details p, #donationForm form section.contact-details label, #donationForm form .commsgroup span {color:#000000;}
#donationForm form section.doubleup .container {display:flex; padding:0;}
#donationForm form section.payment-details, #donationForm form section.payment-details .paymentFields {width:100%; margin:0;}
#donationForm form section.payment-details .row .col-md-12 {padding:0 5%;}
#donationForm form section.payment-details .commit {flex:0 0 100%!important;}
#donationForm form section.payment-details .paymentFieldsinner {width: 100%;  display: flex;  flex-wrap: wrap; background:var(--brightteal);} 
#donationForm form section.payment-details .payment-detailsInner {width: 100%;  display: flex;  flex-wrap: wrap; background:var(--brightteal); padding: 25px!important;} 
#donationForm form section.payment-details .payment-detailsInner p {color:#ffffff;}
#donationForm form section.payment-details .row {margin:0; padding:0;}
#donationForm form section.payment-details img.DirectDebitLogo {width:150px; margin:0 0 30px 0;}
#donationForm form section.payment-details .row .col-md-12:last-child {padding:0 5%;}
#donationForm form section.payment-details .commit.once div { margin: 14px 0 0 0 !important; width:100%; max-width:unset;}
#donationForm form section.payment-details .commit.regular div {padding:0% 5% 1% 5%; margin: 14px 0 0 0 !important; width:100%; max-width:unset;}
#donationForm form section.payment-details .row.heading .col-md-12 {padding:10px 0!important;}
#donationForm form section.payment-details .row.heading {margin:0;}
#donationForm form section.payment-details h3 {padding:0; margin:0; color: #ffffff !important;}
#donationForm form section.payment-details .paymentInner {padding: 0 8%;}
#donationForm form .gagroup div:first-child label {    cursor: pointer;    border-radius: 4px;    font-size: 24px;    margin: 0;    -webkit-transition: all .4s ease-in-out;    transition: all .4s ease-in-out;    border: 0;    color: #ffffff;    padding: .3em 1.3em;   background: var(--antiyellow);}
#donationForm form .gagroup div label.active{background:var(--darkblue);}
#donationForm form .gagroup .row.heading {padding:0px 45px 0px 45px;}
#donationForm form .gagroup input {display:none;}
#donationForm form .payment-details .col-md-4.expdate {display:flex;}
#donationForm form .payment-details .col-md-4 { flex:0 0 45%;}
#donationForm form .payment-details .col-md-2 {padding:0px 18px 11px 0; flex:0 0 25%;}
#donationForm form .payment-details .col-md-4 {padding:0px 0px 11px 0;}
#donationForm form .payment-details label {text-align:left !important; width:100%; color: #ffffff !important;}
#donationForm form .payment-details .inputFix {height:auto;padding: 0!important;}
#donationForm form .containerUnwrap {display:flex; margin:80px auto;}
#donationForm form .gagroup {display: flex;  justify-content: space-between;  gap:15px; margin: 30px 0 0 0; align-items: center;}
#donationForm form .gagroup >*:first-child { flex: 0 0 100%; gap: 15px;  display: flex;}
#donationForm form .gagroup div:first-child label:hover {  background: #fff;  color: var(--darkblue);}

#donationForm form .commsgroup div:first-child label {    cursor: pointer;    border-radius: 4px;    font-size: 24px;    margin: 0;    -webkit-transition: all .4s ease-in-out;    transition: all .4s ease-in-out;    border: 0;    color: #ffffff;    padding: .3em 1.3em;   background: var(--anticyan);}
#donationForm form .commsgroup div label.active{background:var(--cyan);}
#donationForm form .commsgroup .row.heading {padding:0px 45px 0px 45px;}
#donationForm form .commsgroup input {display:none;}
#donationForm form .commsgroup {display: flex;  justify-content: space-between;  gap:15px; margin: 30px 0 0 0; align-items: center;}
#donationForm form .commsgroup >*:first-child { flex: 0 0 100%; gap: 15px;  display: flex; justify-content: center;}
#donationForm form .commsgroup div:first-child label:hover {  background: #fff;  color: var(--darkblue);}

#donationForm form section.contact .row.heading {margin:0; display:flex;}
#donationForm form section.contact .col-md-12 label span {margin:0;}
#donationForm form section.contact .col-md-12 label {line-height: 25px; margin: 20px 0; padding: 5px 0 5px 35px; position:relative;}
#donationForm form #commsGroups label, #donationForm form #purposeGroups label {padding:0;}
#donationForm form #commsGroups .commsGroup, #donationForm form #purposeGroups .checkbox-item { display: flex; align-items: center;}
#donationForm form #commsGroups .commsGroup label, #donationForm form #purposeGroups .checkbox-item label {    margin: 0px 0;  padding: 0px 0 0px 5px;}


#donationForm form #tagGroups {  display: flex;  flex-wrap: wrap;   width: 100% !important;}
#donationForm form .tagGroup { flex: 0 0 32%;}
#donationForm form .tagGroup:nth-child(2), .tagGroup:nth-child(5) { flex: 0 0 39%!important; }
#donationForm form .tagGroup:nth-child(3), .tagGroup:nth-child(6) { flex: 0 0 25%!important; }
#donationForm form .tagGroup label {display: flex;}

#donationForm form .payment-details .row.heading, #donationForm form .payment-details .row.commit, #donationForm form .payment-details .paymentFieldsinner { padding: 0 45px;}

#donationForm form .dd .col-md-12 {padding:0!important;}
#donationForm form .dd.commit.regular div {  padding: 0% 5% 1% 0%!important;}

#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 {color:red; font-weight:14px; margin-bottom:12px;}
#donationForm form section .customQs {margin:0 0 40px 0;}
#donationForm form .commsgroup div span:first-child {width:490px;}
#donationForm form #fullAddress {color:green;  padding: 0 0 20px 25px;}
#donationForm form #fullAddress.active:before {content:"\2713"; font-size: 25px; color: green; margin: 0 12px;}
#donationForm form #submitButton{ cursor: pointer;  border-radius: 4px;  font-size: 24px!important;  margin: 0;  -webkit-transition: all .4s ease-in-out;  transition: all .4s ease-in-out;  border: 0;  color: #ffffff!important;  padding: .7em 1.3em; width: auto !important; background: var(--cyan);  font-family: 'QuicksandBold'; height:auto;  text-transform: unset;}
#donationForm form #submitButton:hover { background: #ffffff; color: var(--darkblue)!important;}
#donationForm form .submit-button-wrapper { position: relative;}
#donationForm form .submit-button-wrapper:before { content: url(../images/star.png);  position: absolute;    width: 20px;     height: 50px; display: block;top:-27px;  left: 90%;  transform: translate(-50%, -50%) scale(0.6); opacity: 0;  pointer-events: none;  z-index: 10;}
#donationForm form .submit-button-wrapper.button-active:before {  animation: starAppearButton 0.3s ease-out forwards, starFadeOut 0.5s 0.4s forwards;}

#donationForm form .button-pair span{  border-radius: 4px;  color: #ffffff;  cursor: pointer;  background: var(--anticyan); min-width:100px;  padding: .3em;   margin: 7px;   -webkit-transition: all .4s ease-in-out;    transition: all .4s ease-in-out; text-align: center;}
#donationForm form .button-pair span:hover {    background: #ffffff;  color: var(--cyan);}
#donationForm form .button-pair span.active {color: #ffffff;  background: var(--cyan);}
#donationForm form .button-pair { display: flex;  align-items: center;}
#donationForm #ErrorContainer {    background: #df3079; color: #ffffff; padding:16px !important; line-height:17px; border-radius: 6px; font-size: 14px; margin: 10px 0px 10px !important;}
#donationForm form .customQs .row {  padding: 0 45px;}
#donationForm form .payment-details .row.commit { padding: 20px 45px;}
#donationForm #payment-request-button {padding:20px 0; max-width:90%;}

#dfy .thanks h2 {font-size: 24px; font-family: 'QuicksandBold'; color: var(--darkblue);}
#dfy .thanks .blog-post-main { text-align: left;}
#dfy .thanks .one-third.column { flex: 0 0 48%; margin:0; }
#dfy .thanks .one-third.column img {margin:0;}
#dfy .thanks { box-sizing:border-box;  display: flex;  gap:4%;}
#dfy .thanks:before {display:none;}
#dfy .blog-post-excerpt {text-align:left;}
#dfy .blog-listing .blog-post-main {border:0;}


@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 .imagWrap { top: -100px; position: absolute; transform: scale(0.5) rotate(65deg);right: -100px;}
@keyframes fadeZoomIn {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(65deg);
  }
  100% {
    opacity: 1;
    transform: scale(0.7) rotate(0deg);
  }
}
@keyframes fadeZoomInImage {
  0% {
    opacity: 0;
     transform: translate(-50%, -50%) scale(0.7);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8);
  }
   100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
#dfy .donateControl .controlsInner { max-width: 70%;}
#dfy .donateRight ul.options { max-width: 100%;}
#dfy .controlsRow .customSelect {max-width: unset;}
#dfy .donateLeft .button {font-size: 21px;max-width: 124px;}
#dfy .donateLeft .summary span {  font-size: 36px;   padding: 0px 26px;}
#dfy .donateLeft .button em {font-style:normal;     display: block;}
#dfy .donateLeft .summary p {    margin: 0;    padding: 10px 85px 10px 5px;    line-height: 25px;}
#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%;}
}

@media only screen and (max-width: 895px) {
#dfy .donateControl {  margin: 30px 0 0 0;}
#donationForm form .row, #donationForm form section.payment-details .paymentInner {padding: 0 4%;}
#donationForm #bill .bill {  padding: 20px 4%;}
#donationForm, #donationForm form .row {margin:0;}
#donationForm form .col-md-4 { width: 100%;}
#donationForm form input, #donationForm form select, #donationForm form textarea, #donationForm form select, .inputFix { width: 100%;}
#donationForm form h3 {padding:0;}
#donationForm form .payment-details .col-md-4 { flex: 0 0 50%;}
#donationForm form .col-md-12 {  margin: 0 0 15px 0;}
#dfy .donateControl .controls {  padding: 130px 45px 25px 45px;}
#dfy .donateControl .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%;}
#donationForm form .payment-details .col-md-4, #donationForm form .payment-details .col-md-2{  flex: 0 0 100%; }
#donationForm #bill .bill em { font-size: 32px;}
#donationForm #bill .bill p{  padding: 0 0  5px 0;}
#donationForm form h3 { font-size: 29px;  line-height: 32px;}
#donationForm form input, #donationForm form select, #donationForm form select, .inputFix {min-height: 35px;height: 32px;}
#donationForm form .shortfieldfirst, #donationForm form .shortfield {  width: 100% !important;}
#donationForm form .payment-details .col-md-4 { padding: 0 0 11px 0;}
#donationForm form .giftaid small {  padding: 0;  margin: 45px 0;}
#dfy .donateLeft { width: 100%; display: inline; }
#dfy .donateLeft ul li {position: relative;   justify-content: center;  text-align: center;  flex-wrap: wrap;}
#dfy .donateControl .controls { padding: 10px 45px 25px 45px;}
#dfy .donateLeft ul	{ overflow-x: clip;}
#dfy .donateLeft { margin: 10px 0 35px 0;}
#dfy .donateLeft .summary{ margin-top: -60px; align-items: end;  flex: 0 0 100%;  order: 2; flex-wrap: wrap; justify-content: center;} 
#dfy .donateLeft .summary p {padding: 25px; }
#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 .imagWrap { top: -100px; position: static; order: 1; margin-top: -90px; transform: scale(0.5) rotate(65deg);right: 50%;}
#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%;}
#dfy .controlsRow .customSelect input {   border-radius: 0;  padding: 3px 5px;   margin: 0 0 0 30px;   height: 30px;   background: var(--anticyan);   border-bottom: 2px solid #ffff;   color: #ffffff;   font-size: 26px;   width: 80%;    position: relative;    bottom: -5px;}

#donationForm form .person-details .row.ydidentity .col-md-4 {flex:0 0 100%; }
#donationForm form .person-details .row.ydidentity .col-md-6, #donationForm form .person-details .row.ydaddress .col-md-6, #donationForm form .person-details .row {flex:0 0 100%; }
#donationForm form input, #donationForm form select, #donationForm form select, .inputFix {min-height: 47px;  height: 47px;}
#donationForm form .row.heading {  margin: 30px 0 10px 0;}
#donationForm form .person-details .col-md-6, #donationForm form .person-details .col-md-4, #donationForm form .person-details .col-md-12, #donationForm form .giftaid .col-md-4, #donationForm form .giftaid .col-md-12, #donationForm form .payment-details .col-md-4, #donationForm form .payment-details .col-md-12 { width: 100%;}
#donationForm form .person-details .row.ydcomms .col-md-6 {  flex: 0 0 100%;}
#donationForm form .commsgroup >*:first-child {justify-content: start;}
#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 100% !important;}


@keyframes fadeZoomIn {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(65deg);
  }
  100% {
    opacity: 1;
    transform: scale(0.7) rotate(0deg);
  }
}
@keyframes fadeZoomInImage {
  0% {
    opacity: 0;
     transform: translate(-50%, -50%) scale(0.7);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8);
  }
   100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}


#donationForm form .giftaid .col-md-6 { width: 100%;}

}


@media only screen and (max-width: 550px) {
	#dfy {  padding: 0px 0 30px 0; width:96%;}
	#dfy .donateControl .controls li.active:before {right: 33px;}
	#dfy .donateControl .controls ul, #dfy .donateRight ul {flex-wrap:wrap; }
	#dfy .donateControl .controls ul li, #dfy .donateRight ul li {flex:0 0 100%;}
	#dfy .donateControl .controls ul li div, #dfy .donateControl .controls ul li p ,   #dfy .controlsRow .inmemory img {display:none;}
	#dfy .donateControl .controls ul li.active {  background: var(--darkblue);}
	#dfy .donateControl .controls ul li:last-child { padding: 0px 18px 18px 18px;}
	#dfy .controlsRow .customSelect { flex-wrap: wrap;   padding: 10px 10px 30px 10px; }
	#dfy .donateFrame h3 {padding: 20px 10px;}  
	#dfy .controlsRow .customSelect input {margin:0 20px;}
	#donationForm form .giftaid .giftaidInner, #donationForm form section.payment-details .payment-detailsInner {  padding: 15px!important;}
	#donationForm form .button-pair {  flex-wrap: wrap;}
	#donationForm form .inputFix { padding: 10px 12px 7px 12px;}
	#dfy .controlsRow .customSelect	{flex: unset;}
	#dfy .donateControl .controls ul {gap:0;}
   #dfy .donateControl .controls, #dfy .donateControl .donateFrame { padding: 10px 20px 0px 20px;}
	#donationForm form .person-details .row.ydidentity, #donationForm form .person-details .row.ydaddress {padding: 0 20px;}	
	#dfy .donateRight ul.options li {flex: 100%;  padding: 5px 0;  margin: 0;}
	#dfy .donateRight .controlsRow {  margin: 20px 0 0 0;}
	#dfy .controlsRow .customSelect { padding: 10px 10px 15px 10px;    }
	#donationForm form .person-details .col-md-6, #donationForm form .person-details .col-md-4, #donationForm form .person-details .col-md-12, #donationForm form .giftaid .col-md-4, #donationForm form .giftaid .col-md-12,#donationForm form .payment-details .col-md-12, #donationForm form .person-details .row.ydcomms, #donationForm form .customQs .row, #donationForm form .payment-details .row.heading, #donationForm form .payment-details .row.commit, #donationForm form .payment-details .paymentFieldsinner {padding: 0 20px;}

	#dfy .thanks .one-third.column { flex: 0 0 100%;}
	#dfy .thanks  {flex-wrap:wrap;}	
	#dfy .donateControl:before {content:url('../images/wave-top-white.svg'); transform: scale(105%);  display: block;}
#dfy .donateControl:after {content:url('../images/wave-bottom-white.svg'); transform: scale(105%);  display: block; position: relative;  bottom: -20px;}
#donationForm form .giftaid:before {content:url('../images/wave-top-yellow.svg'); transform: scale(105%);  display: block; position: relative;  top:20px;}
#donationForm form .giftaid:after {content:url('../images/wave-bottom-yellow.svg'); transform: scale(105%);  display: block; position: relative;  bottom:0px;}
  #donationForm form .payment-details .row.commit {  padding: 20px  !important;  }
}