:root { --darkblue: #113c5d; --iceblue: #00afc6; --lightsky: #caeaef; --grey: #959595; --mint: #bbe9dd; } body { font-family: "Sora", sans-serif!important; font-weight: 400 !important;} #dfy {font-family: inherit; color:#000000; font-size:20px; margin: 0 auto !important; width:100%!important; max-width: 923px!important; padding:0;} #dfy ~ .mascot {margin-top: -100px; z-index: 2; position: relative;} #dfy li {list-style-type:none;} #dfy .donateIntro { color: var(--darkblue); font-size: var(--p); width: 50%;} #dfy .donateControl .halfCol {width: 50%;} #dfy .donateControl .controlsInner { max-width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; position: relative; top: 90px;} #dfy .donateControl .controlsInner p{margin: 0 110px 15px auto; font-size:28px;} #dfy .donateIntro h2 { color: var(--darkblue); font-size: var(--p); border-left: 0; padding-left: 0px;} #dfy .donateControl { position:relative; margin-top: 0px; border-radius: 20px; padding: 0 0 150px;} #dfy .donateControl .controls { padding: 0px 45px 25px 45px;} #dfy .donateControl .controls ul{display: flex; padding: 0; gap: 15px; flex-wrap: wrap; margin: 0 0 0 auto; justify-content: end;} #dfy .donateControl .controls ul li {border-radius: 4px; justify-content: end; margin: 0; font-size: 30px; flex: 0 0 100%;text-align: center; cursor: pointer;display: flex; flex-wrap: wrap;} #dfy .donateControl .controls ul li:first-child {padding: 0 60px 0 0;} #dfy .donateControl .controls ul li p {color:#ffffff;} #dfy .donateControl .controls ul li span {color:var(--grey); display: flex; padding:.3em; margin:0 ; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; border-radius: 4px;font-size: 24px;} #dfy .donateControl .controls ul li span:before {content:""; display:block; height:20px; width:20px; margin: 0 10px 0 0; background:var(--grey); border:6px solid var(--grey); border-radius: 50%;} #dfy .donateControl .controls ul li.active span {color:#000; } #dfy .donateControl .controls ul li.active span:before {content:""; display:block; height:20px; width:20px; background:var(--lightsky); border:6px solid var(--grey); margin: 0 10px 0 0;} #dfy .donateControl .controls ul li.active { position:relative;} #dfy .donateControl .controls ul li:hover span {background:#ffffff; color:var(--darkblue);} #dfy .donateControl .donateFrame { display:none; } #dfy .donateControl .donateFrame .circle{ aspect-ratio: 1 / 1; background: url("circle.svg") center center no-repeat; background-size: cover; padding: 45px; display: flex; flex-wrap: wrap; margin: 0 auto; max-width: 650px; justify-content: center;} #dfy .donateControl .donateFrame.active {display:block;} #dfy .donateControl p { text-align: center; padding: 38px 25px 25px 25px; font-size: 27px; line-height: 31px; color: var(--darkblue);} #dfy .donateFrame-oneoff .donateRight ul.options li{padding: 18px 0;} #dfy .donateRight { flex: 0 0 100%;} #dfy .donateRight ul.options li {min-height:81px;position:relative; font-size: 43px; color:#ffffff; cursor:pointer; background: url("oval-grey.svg") center center no-repeat; background-size: contain; padding:.7em .3em; margin:0 0 15px 0; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; flex:33%; text-align:center; border-radius: 4px; display: flex; align-items: center; justify-content: center;} #dfy .donateRight ul.options li.active { background: url("oval-blue.svg") center center no-repeat; background-size: contain; } #dfy .donateRight ul.options { display: flex; margin: 0; padding: 0; max-width: 100%; justify-content: center; gap: 15px;} #dfy .donateRight ul.options li.active:hover, #dfy .donateRight ul.options li:hover {background: url("oval-blue.svg") center center no-repeat; background-size: contain;} #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 { display: flex; flex-wrap: wrap;} #dfy .donateLeft ul li {min-width: 560px; display: none;} #dfy .donateLeft ul li.active { display: flex; align-items: center; flex-flow: column;} #dfy .donateLeft > span {background:var(--darkblue); flex: 0 0 32%; padding: 0; justify-content: right; align-items: center; display: flex; position:relative;} #dfy .donateLeft ul { margin:0; flex: 0 0 100%; align-content: center; padding: 0;} #dfy .donateLeft .summary { display: flex; align-items: center; flex-flow: column; text-align: center; width: 70%; max-width: 350px;} #dfy .donateLeft .summary p { margin: 0; padding: 8px 25px 25px 25px; font-size: 27px; line-height: 31px;} #dfy .donateLeft .summary span {font-size: 80px;padding: 10px 40px 0; color: var(--darkblue);} #dfy { flex: 100%; } #dfy .donateFrame.active { display: flex; flex-flow: row; align-items: center; gap: 40px;} #dfy .donateFrame > span { flex: 1 0 50%; display: block; } #dfy .button {cursor:pointer; border-radius: 40px !important; font-size: 30px !important; width: 80%; padding: 12px 48px !important;} #dfy .button:hover{background:#ffffff; color:var(--darkblue);} #dfy .button em {font-style:normal; } #dfy .donateFrame img {flex: 50%;} #dfy .donationStart {padding: 0px 45px 25px 45px; display: flex; align-items: center; align-content: center;} #dfy .donationStart > span {max-width:40%; margin: 0 23px 0 0 !important;} #dfy .donateReason .donateReasons {padding: 0; display: flex; flex-wrap: wrap; gap: 10px 20px;} #dfy .donateReason .donateReasons li {flex: 1 0 calc(50% - 20px); display: flex; align-items: center;} #dfy .donateReason .donateReasons li .donateReasonsCheckbox {width: 30px; height: 30px; border: 2px solid #fff; border-radius: 4px; background-color: var(--grey);vertical-align: middle;cursor: pointer; appearance: none;-webkit-appearance: none;-moz-appearance: none; flex: none;} #dfy .donateReason .donateReasons li .donateReasonsCheckbox:checked { background-color: var(--grey);} #dfy .donateReason .donateReasons li .donateReasonsCheckbox:checked::after { content: url("check.svg"); color: var(--darkblue); font-size: 24px; position: relative; left: 0px; top: 0px;} #dfy .donateReason .donateReasons li label {margin-left:10px; cursor: pointer;} #dfy .imagWrap {margin-top: -180px; position: absolute; left: 10px;} #dfy .imagWrap::before {content: url(outline.svg); position: absolute; z-index: 200; transform: scale(164%) rotate(-36deg); top: 74px; left: 54px;} #dfy .imagWrap img {width: 300px; height: auto; object-fit: cover; clip-path: url(#ovalClip); -webkit-clip-path: url(#ovalClip);} #dfy .controlsRow ul {padding:0; display: flex; flex-wrap: wrap; padding:0;} #dfy .controlsRow .customSelect { padding: 14px 0; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--mutedblue); max-width:100%; width: 100%;} #dfy .controlsRow .customSelect label{color: #000; font-size: 21px; flex: 0 0 50%;} #dfy .controlsRow .customSelect span {display:flex;} #dfy .controlsRow .customSelect span:before { position: relative; left: 16px; top: -2px; font-size: 36px;content: "\00A3";color:#000; font-style: normal;} #dfy .controlsRow .customSelect input { border-radius: 0; background:var(--mint); border: 0; padding: 3px 5px; margin: 0 30px; height: 30px; border-bottom: 2px solid #000; color: #000; font-size: 26px; width: 70%; position: relative; bottom: -5px;} #dfy .controlsRow .customSelect label { text-align: center;} #dfy .ElementsApp, #dfy .ElementsApp #dfy .InputElement {color: #fff;} #donationForm {max-width:unset; margin: 50px 0px;} #donationForm form {margin: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: 80px 0;} #donationForm form .block.donationStep5 { padding:0;} #donationForm form .block.person-details { padding: 80px 0 0 0;} #donationForm form .donationStep2 {background-color: var(--teal);} #donationForm form .donationStep2 p.semibold {font-weight: 600; font-size: 20px;} #donationForm form .donationStep2 p.semibold + p {font-size: 20px;} #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 .donationStep.in-memory {background-color: var(--midblue); } #donationForm form .donationStep.in-memory .row {gap: 40px;} #donationForm form .donationStep.in-memory .row .col-md-6 {flex: calc(50% - 40px);} #donationForm form .donationStep.in-memory .row a {color: inherit;} #donationForm form .donationStep.in-memory .row .row {padding: 20px 0 0; gap: 20px; align-items: center;} #donationForm form .payment-details .covercosts-row {display: flex; flex-wrap: nowrap; gap: 20px; align-items: center; margin-top: 30px !important; margin-bottom: 30px !important} #donationForm form .payment-details .covercosts-row input { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 30px; height: 30px; border: 2px solid #fff; border-radius: 4px; display: inline-block; vertical-align: middle; cursor: pointer; background-color: transparent;} #donationForm form .payment-details .covercosts-row input[type="checkbox"]:checked::after {content: "✓"; color: white; font-size: 14px; position: relative; left: 3px; top: -6px;} #donationForm form .payment-details .covercosts-row label {padding-top: 0;} #donationForm form .payment-details .covercosts-row .small {font-size: 12px; display: block; margin-top: 5px;} #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: 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 .additional-person-details .row.ydidentity .col-md-4, #donationForm form .additional-person-details .row.ydidentity .col-md-6 { width: unset !important; padding: 0 !important;} #donationForm form .additional-person-details .row.ydidentity .col-md-6 { flex: 0 0 40%; padding: 0 !important;} #donationForm form .additional-person-details .row.ydidentity .col-md-4 { flex: 0 0 17%; padding: 0 !important;} #donationForm form .additional-person-details .row.ydidentity, #donationForm form .additional-person-details .row.ydaddress {padding: 0 45px; display: flex; justify-content: start;} #donationForm form .additional-person-details .row.ydaddress .col-md-6 { flex: 0 0 40%; padding: 0 !important;} #donationForm form .additional-person-details .row.ydaddress .col-md-4 { flex: 0 0 19%; padding: 0 !important;} #donationForm form .additional-person-details .row.ydcomms {padding: 0 45px; align-items: center; display: flex; margin: 0;} #donationForm form .additional-person-details .row.ydcomms small {padding:0;} #donationForm form .additional-person-details .row.ydcomms .col-md-6 { flex: 0 0 50%; padding: 0 !important;} #donationForm form .col-md-6.emailform {flex: 0 1 45%;} #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:#fff !important; font-size:22px; background-color:transparent; border:2px solid #fff; padding:6px; margin:0 !important; min-height:45px;} #donationForm form select {height: 61px;} #donationForm form select option {color:#000!important;} select#reason { width: 100% !important;} #donationForm form .giftaid .col-md-12 {margin:0;} #donationForm form .giftaid .container {background:var(--yellow); border:0;} #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] {accent-color:#feffef; 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:97%; 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 .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 .commit .paymentFieldsinner {width: auto;} #donationForm form section.payment-details .payment-detailsInner { 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 .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 .2s ease-in-out; transition: all .2s ease-in-out; border: 0; color: #ffffff; padding: .3em 1.3em; background: var(--darkteal);} #donationForm form .gagroup div label.active{background:var(--midblue);} #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: var(--midblue); color: #fff;} #donationForm form .commsgroup div:first-child label { cursor: pointer; border-radius: 4px; font-size: 24px; margin: 0; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; border: 0; color: #ffffff; padding: .3em 1.3em; background: var(--mutedblue);} #donationForm form .commsgroup div label.active{background:var(--midblue);} #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: var(--midblue); color: #fff;} #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 {position: relative; text-align:left; margin: 0 45px;} #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{ border-radius: 40px !important; cursor: pointer; border-radius: 4px; font-size: 24px!important; margin: 0; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; border: 0; color: var(--darkblue)!important; padding: .7em 1.3em; width: auto !important; background: var(--pink); height:auto; text-transform: unset;font-weight: bold;font-family: inherit} #donationForm form #submitButton:hover { background: #ffffff; color: var(--darkblue)!important;} #donationForm form .submit-button-wrapper { position: relative;} #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 .2s ease-in-out; transition: all .2s 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 { align-items: center; padding: 0 45px;} #donationForm form .payment-details .row.commit { padding: 20px 45px; align-items: center; display: flex;} #donationForm form .payment-details .row.commit .col-md-4 {padding:0;} #donationForm form.loadgateways .payment-details .row.commit .paymentFieldsinner #paypal-button-container:before { content: "or"; position:absolute; left: -55px; top: 7px;} #donationForm #payment-request-button {padding:20px 0; max-width:90%;} #donationForm #Comms-error, #donationForm #GiftAid-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; font-size:14px;} #donationForm #GiftAid-error { margin: 0 45px !important;} #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;} #dfyAppeal .restore {display:none; padding: 0 45px; text-decoration: underline; cursor:pointer;} #dfyAppeal .container { max-width: 95%;} #dfyAppeal .editor-content {display:flex; position: relative;} #dfyAppeal .dfyAppealContent { flex: 0 0 60%;} #dfyAppeal .dfyAppealForm { flex: 0 0 40%;} #dfyAppeal article.editor-content > p, #dfyAppeal article.editor-content > ul, #dfyAppeal article.editor-content > ol, #dfyAppeal article.editor-content > dl, #dfyAppeal article.editor-content > table, #dfyAppeal article.editor-content > h3, #dfyAppeal article.editor-content > h4, #dfyAppeal article.editor-content > h5, #dfyAppeal article.editor-content > h6, #dfyAppeal article.editor-content > blockquote, #dfyAppeal article.editor-content > .gform_wrapper, #dfyAppeal article.editor-content > .videowrapper, #dfyAppeal article.editor-content > iframe, #dfyAppeal article.editor-content > .gallery{ max-width: unset;} #dfyAppeal #dfy .donateControl {margin-top:0; padding: 80px 0 20px;} #dfyAppeal #dfy { width: 92%;} #dfyAppeal #dfy .donateControl .controlsInner, #dfyAppeal #dfy .donateRight ul.options, #dfyAppeal #dfy .controlsRow .customSelect { max-width: 100%;} #dfyAppeal #dfy .donationStart {display: flex; flex-wrap: wrap; justify-content: center;} #dfyAppeal #dfy .donationStart > span { max-width: 100%; margin: 0px 0 23px 0 !important;} #dfyAppeal .dfyAppealForm.returned { flex: 0 0 75%; width: 80vw; margin-left: -30vw; z-index: 10; position: relative;} #dfyAppeal .dfyAppealForm.returned #donateControlWrapper {display:none;} #dfyAppeal .dfyAppealForm.returned .restore {display:block;} #dfyAppeal .dfyAppealForm.returned #dfy .donateControl{ padding: 30px 0 20px;} #dfyAppeal .appealJump { line-height: 48px; height: 48px; text-align: center; text-decoration: none; background-color: var(--pink); border: 0; padding: 0 40px; border-radius: 40px; top: -6px; transition: all 0.5s; display: inline-block; font-weight: 700; color: var(--darkblue);cursor:pointer;} #dfyAppeal .appealJump:hover {background-color: var(--aqua); color: #fff;} #dfyAppeal .donateReason .donateReasons {padding:0 45px!important;} #donationForm form #GiftDetails .row.ydaddress .col-md-6 {flex: 0 0 50%;} #dfy .donateThankYou {background-color: var(--darkblue); border-radius: 20px; display:flex; overflow: hidden; box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.15);} #dfy.donationThankYouWrapper h2, #dfy.donationThankYouWrapper p {color: #fff;} #dfy.donationThankYouWrapper h2 {border-left: 0;padding-left:0;font-size: var(--h3);width: 55%;} #dfy .donateThankYou .donateThankYouContent {flex: 75%;padding: 45px;} #dfy .donateThankYou .donateThankYouImage {flex:1 0 25%; position: relative;} #dfy .donateThankYou .donateThankYouImage img {position: absolute; width: 90%;bottom: -25px; right: -20px;} @media only screen and (max-width: 1340px) { #dfyAppeal .dfyAppealContent {flex: 60%;} #dfyAppeal .dfyAppealForm {flex: 40%;} } @media only screen and (max-width: 1280px) { /*#dfy .donateRight ul.options { max-width: 100%;} #dfy .controlsRow .customSelect {max-width: unset;}*/ #donationForm form .person-details .row.ydidentity .col-md-6 { flex: 0 0 100%;} #donationForm form .additional-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 .donateLeft ul li {min-width: unset;} #dfy .donateLeft ul li.active {right: 20px;} #dfy .imagWrap img { max-width: 300px; max-height: 300px;} #dfy .donateLeft ul li.active { right: -20px; } #dfy .donationStart > span {height: auto !important;} #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 { padding: 25px 0;} #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: 976px) { #dfy .imagWrap {margin: 0 auto;} #dfy .donateLeft ul {flex: 100%;} #dfy .donateFrame .donateLeft{width: 100%;} #dfy .donateFrame.active {flex-wrap: wrap; justify-content: center;} #dfy .donateFrame.active img {max-width: 500px;} #dfy .imagWrap img {width: calc(100% - 20px);} #dfy .donateLeft .summary p { padding: 25px 0 0; } #donationForm form .donationStep2 {padding: 40px 0;} #donationForm form .donationStep.in-memory .row .col-md-6 {flex: 100%;} #donationForm form .block {padding: 40px 0;} #dfy .donateLeft ul li {position: relative !important; justify-content: center; text-align: center; flex-wrap: wrap !important; right: 0 !important; top:0 !important;} #dfy .donateRight ul.options { max-width: 100%;} #dfy .controlsRow .customSelect {max-width: unset;} #dfy .donationStart {flex-flow: column;} #dfy .donationStart > span {max-width: 90%; border-radius: 10px !important; margin:0 0 20px 0 !important;} #dfy .donateControl .controlsInner {max-width: 100%;} #dfyAppeal .editor-content {flex-flow: column; gap: 40px;} #dfyAppeal #dfy {width: 100%;} #dfy .donateControl .halfCol { width: 100%; } #dfy .donateIntro { width: 100%; } } @media only screen and (max-width: 895px) { #dfy .donateControl { margin: 30px 0 0 0; padding: 40px 0 100px;} #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%; box-sizing: border-box;} #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 .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 {padding:0;} #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%;} #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;} #donationForm form .giftaid .col-md-6 { width: 100%;} #donationForm form .additional-person-details .col-md-6, #donationForm form .additional-person-details .col-md-4, #donationForm form .additional-person-details .col-md-12{ width: 100%;} #donationForm form .additional-person-details .row.ydidentity .col-md-4 {flex:0 0 100%; } #donationForm form .additional-person-details .row.ydidentity .col-md-6, #donationForm form .additional-person-details .row.ydaddress .col-md-6, #donationForm form .additional-person-details .row {flex:0 0 100%; } #donationForm form .additional-person-details .row.ydcomms .col-md-6 { flex: 0 0 100%;} #donationForm form .payment-details .row.commit > div { flex: 0 0 100%; margin: 0 0 30px 0; padding: 0;} #donationForm form #paypal-button-container, #donationForm form #applePayDivId { margin: 20px 0 0 0;} #donationForm form.loadgateways .payment-details .row.commit .paymentFieldsinner #paypal-button-container::before { left: 0px; top: -40px;} #dfy.donationThankYouWrapper {margin-bottom: 40px;} } @media only screen and (max-width: 550px) { #dfy { padding: 0px 0 30px 0; width:96%;} #dfy .donateReason .donateReasons {flex-flow: column;} #dfy .donateReason .donateReasons li {flex: 100%;} #dfy .button {width: auto; height: auto !important;} #dfy .donateFrame.active img {max-width: 100%;} #dfy {width: 100%; padding-bottom: 40px;} #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:last-child { padding: 0px 18px 18px 18px;} #dfy .controlsRow .customSelect { flex-wrap: wrap; padding: 10px 10px 30px 10px; } #dfy .donateControl .controls ul li:last-child { padding: 0px 18px 18px 18px;} #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;} #donationForm form .additional-person-details .row.ydidentity, #donationForm form .additional-person-details .row.ydaddress,#donationForm form .additional-person-details .row.ydcomms {padding: 0 20px;} #donationForm form .additional-person-details .col-md-6, #donationForm form .additional-person-details .col-md-4, #donationForm form .additional-person-details .col-md-12, {padding: 0 20px;} #dfy .thanks .one-third.column { flex: 0 0 100%;} #dfy .thanks {flex-wrap:wrap;} #donationForm form .payment-details .row.commit { padding: 20px !important; } #donationForm form .person-details .row.ydidentity, #donationForm form .person-details .row.ydaddress {padding: 0 20px !important;} #donationForm form .additional-person-details .row.ydidentity, #donationForm form .additional-person-details .row.ydaddress {padding: 0 20px !important;} #dfy .donateReason {padding: 0 20px 25px;} #donationForm form .giftaid .halves {padding: 0 20px;} #donationForm form input, #donationForm form select, #donationForm form select, .inputFix, #donationForm form textarea {box-sizing: border-box;} #donationForm form .col-md-6 .emailform {width: 100%; box-sizing: border-box;} #dfy .donationStart img {max-width: 100%;} #dfy.donationThankYouWrapper {margin-top: 80px; margin-bottom: 0;} #dfy .donateThankYou {flex-direction: column;} #dfy .donateThankYou .donateThankYouContent {padding: 20px;padding-bottom: 0;} #dfy.donationThankYouWrapper h2 {width: 100%;} #dfy .donateThankYou .donateThankYouImage img {position: relative; bottom:0; right: 0; margin: 0 auto; display: block; width: 80%; margin-bottom: 20px;} }