:root { --darkgreen: #00473d; --teal: #459eb2; --beige: #e7e3e1; --yellow: #cbd72a; --pink: #e83186; } .grecaptcha-badge {z-index: 700;} #dfy { color:#ffffff; font-size:20px; position:relative; overflow-y: hidden;} #dfyWrapper:before {content: ""; display: block; height: 210px; width: 100%; position: absolute; z-index: 400; left: 0px; top: -40px; background-image: url("../images/butterfly.png"); background-repeat: no-repeat; background-size: 100% auto;} #dfy .constructor {display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, 1fr);grid-column-gap: 0px;grid-row-gap: 0px; max-width: var(--content-width); margin: 0 auto; -webkit-transition: all .7s ease-in-out; transition: all .7s ease-in-out; } #dfy .constructor .controls { grid-area: 1 / 1 / 2 / 2; } #dfy .constructor .backingImages { grid-area: 1 / 2 / 3 / 3; position: relative;} #dfy .constructor .donateFrames { grid-area: 2 / 1 / 3 / 2; display:flex; justify-content: center; margin: -60px 0 0 0;} #dfy .constructor .donateFrames .donateFrame {padding:0px 0px 25px 0px;width: 100%; max-width: 440px;} #dfy li {list-style-type:none;} #dfy {padding:70px 0;} #dfy h2 {color:var(--darkgreen); font-size:38px; margin:0 0 40px 0;} #dfy .donateControl {background:var(--beige); position:relative;} #dfy .donateControl .controlsInner {padding: 20px 0 0 0; width: 100%; max-width: 440px;} #dfy .donateControl .controls { padding: 0px 0px 25px 0px; display: flex; align-items: center; justify-content: center;} #dfy .donateControl .controls ul{display:flex; margin:0; padding:0; gap:15px; justify-content: center;} #dfy .donateControl .controls ul li { flex: 0 0 48.44%; cursor:pointer; display: flex; flex-wrap: wrap; flex-direction: column;} #dfy .donateControl .controls ul li span {color:#598781; margin:0; background-image: url('../images/skin-white.svg'); font-size: 30px; font-weight:600;text-align: center; background-size: cover; padding:.7em; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; background-position:center top;} #dfy .donateControl .controls ul li.active span {color:var(--darkgreen); font-weight: 600; background-image: url('../images/skin-yellow.svg');} #dfy .donateControl .controls ul li.active { position:relative; } #dfy .donateControl .controls ul li:hover span {color:var(--darkgreen); background-position:center top 50px;} #dfy .donateControl .controls ul li.active:hover span {color:#fff;} #dfy .donateControl .donateFrame {display:none; flex-wrap:wrap;} #dfy #monthlyImages, #dfy #oneoffImages {display:none;} #dfy #monthlyImages.active, #dfy #oneoffImages.active {display:flex;} #dfy .donateControl .donateFrame.active {display:flex;} #dfy .donateControl p { margin: 0 0 15px 0; font-size:30px; color:var(--darkgreen); font-weight:600; text-align:center;} #dfy .donateFrame-oneoff .donateRight ul.options li{padding: 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(--beige); padding:.3em; margin:0 0 15px 0; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; flex:33%; text-align:center;} #dfy .donateRight ul.options li.active span{color:var(--darkgreen); font-weight: 600; background-image: url('../images/skin-yellow.svg');} #dfy .donateRight ul.options { display: flex; margin: 0; padding: 0; justify-content: center; gap: 15px; } #dfy .donateRight ul.options li.active:hover span, #dfy .donateRight ul.options li:hover span {color:var(--darkgreen); background-position:center top 50px;} #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; font-weight: 600; color:#598781; background-image: url('../images/skin-white.svg'); text-align: center; background-size: cover; padding:.7em; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; background-position:center top;} #dfy .donateFrame-monthly .donateRight ul.options li > span { padding: .4em .7em .2em .7em;} #dfy .backingImages ul li {position:relative; display: none; background-color: var(--darkgreen);} #dfy .backingImages ul li.active { display: flex;} #dfy .backingImages > span {background:var(--darkgreen); flex: 0 0 32%; justify-content: right; align-items: center; display: flex; position:relative;} #dfy .backingImages > 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 .constructor .backingImages .imageLists:before {content:""; background-image:url('../images/skin-beige-edge.svg'); background-repeat: repeat-y; z-index: 300; width: 40px; height: 100%; display: inline-block; background-position: right top; transform: scaleX(50%); left: -12px; position: absolute; } #dfy .backingImages ul { margin: 0; padding: 0; height: 100%;} #dfy .backingImages .summary {background:var(--teal); display: flex; align-items: center; position: absolute; bottom: 0;} #dfy .backingImages .summary p {margin: 0; padding: 25px 25px 25px 25px; line-height: 25px; color: #fff; font-size: 18px; font-weight: 400; text-align: left;} #dfy .backingImages .summary span {min-width: 122px;padding: 17px 20px 20px 50px; font-weight: 600; font-size: 30px; align-self: flex-start;} #dfy .backingImages .summary span small { display: block; font-size: 14px; margin-top: -5px;} #dfy .backingImages .button {font-weight: 600; 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(--teal);} #dfy .backingImages .button:hover{background:#ffffff; color:var(--darkgreen);} 0; pointer-events: none; z-index: 10;} #dfy .button em {font-style:normal; } #dfy .controlsRow .button { cursor:pointer; font-weight: 600; background-image: url('../images/skin-pink.svg'); text-align: center; background-size: cover; margin:25px 0 0 0; padding:.7em 3em; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; background-position:center top; font-size: 30px;} #dfy .controlsRow .button:hover {background-image: url('../images/skin-yellow.svg'); background-position:center center; color:var(--darkgreen);} #dfy .donateFrame-monthly .controlsRow .button {margin: 10px 0 0 0;} #dfy .controlsRow > span { width: 100%; display: flex; justify-content: center;} #dfy .imagWrap img {display: inline-block; object-fit: cover; height: 100%; width: 100%; } #dfy .imagWrap {max-height: 720px;} #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(--beige); max-width: 566px; width: 100%;} #dfy .controlsRow .customSelect span {display:flex;} #dfy .controlsRow .customSelect span:before { position: relative; left: 16px; top: -2px; font-size: 31px;content: "\00A3";color:var(--darkgreen); font-weight:600; font-style: normal;} #dfy .controlsRow .customSelect input { max-width: 118px;border-radius: 0; border:0; padding: 3px 5px; margin:0 0 0 30px; height: 30px; background: var(--beige); border-bottom: 4px solid var(--darkgreen); color: var(--darkgreen); font-size: 26px; width: unset; position: relative; bottom: -5px;} #dfy .controlsRow .customSelect label { text-align: left; color: var(--darkgreen); font-size: 22px;} /*#dfy .constructor.shield {margin: -710px auto 0 auto; opacity: 0.3;}*/ #dfy #paymentForm { max-width: var(--content-width); margin: 0 auto;} #donationForm form:before{position: absolute; content: ""; background-image: url('../images/skin-darkgreen-edge.svg'); background-repeat: repeat-y; z-index:300; width: 40px; height: 100%; display: inline-block; background-position: right top; transform: scaleX(50%); left: -12px;} #donationForm form:after{position: absolute; content: ""; right: -12px; background-image: url('../images/skin-darkgreen-edge.svg'); background-repeat: repeat-y; z-index:300; width: 40px; height: 100%; display: inline-block; background-position: right top; transform: scaleX(-50%); } #donationForm {max-width:unset; margin: 50px 0px;} #donationForm .edit {margin:70px 0; padding:0 0 0 45px; display: block; cursor:pointer;} #donationForm .edit:hover {text-decoration:underline;} #donationForm .edit:before {content:url('../images/back.png'); left: -30px; position: relative; top: 15px;} #donationForm form {margin:0px 0 40px 0; width:100%; display:flex; flex-wrap:wrap; max-width:unset; max-width: unset; position: relative; background: var(--beige);} #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; gap:4%;} #donationForm form .person-details .row.ydcomms .half { flex: 0 0 48%; display: flex; align-items: center;} #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: var(--darkgreen) !important; padding: 20px 0 0 0; font-size: 29px; margin: 0; line-height: 46px; font-weight: 600;} #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 30px 0; flex-wrap:wrap; max-width:unset; padding: 0px 35px 25px 35px; 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 #000; padding:6px; margin:0 !important; min-height:45px;} select#reason { width: 100% !important;} #donationForm form .row.commit > div { width:100%; display: flex; flex-wrap: wrap;} #donationForm form .giftaid {background:var(--yellow); padding:45px 0;} #donationForm form .giftaid .col-md-12 {margin:0;} #donationForm form .giftaid .col-md-6 { width: 50%; } #donationForm form .giftaid h3, #donationForm form .giftaid p, #donationForm form .giftaid label {color:var(--darkgreen); font-size: 24px;} #donationForm form .giftaid small{color:var(--darkgreen); font-size: 17px; line-height: 24px;} #donationForm form .purposegroup 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: 30px; height: 30px;min-height:16px; float:left; position:relative; margin:-5px 12px 0 0!Important;} #donationForm form .radiogroup label.error {padding:0!important;} #donationForm form .gagroup label.error, #donationForm form .commsgroup label.error {color:#ffffff;} #donationForm form label.error, #donationForm form #GiftAid-error, #donationForm form #Comms-error {box-shadow:none; background: transparent; color: #ee2915; padding: 10px 0!important; line-height: 12px; border-radius: 6px; font-size: 14px; margin: 5px 0px 5px !important; display: block;} #donationForm form label {padding:5px 0 12px; display:inline-block; max-width:unset; color: var(--darkgreen); font-size: 20px;} #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 .purposegroup input {margin:0 12px 0 0; position:relative; top:-2px;} #donationForm form .purposegroup 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 25px!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: transparent; color: #ee2915; padding: 10px 0!important; line-height: 12px; border-radius: 6px; font-size: 16px; margin: 5px 0px 5px !important; display: block;} #donationForm form #Comms-error, #donationForm form #Gagroup-error{ background: transparent; color: #ee2915!important; padding: 10px 0!important; line-height: 12px; border-radius: 6px; font-size: 16px; margin: 5px 0px 5px !important; display: block;} #donationForm form .commsgroup label input {margin:0px 0 0 12px!important; position:relative; top:-3px;} #donationForm form .commsgroup label:hover { background-image: url(../images/skin-white.svg); color: var(--darkgreen);} #donationForm form .commsgroup label { cursor: pointer; font-size: 30px; margin: 0; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; line-height: 32px; font-weight: 600; color: #598781; background-image: url(../images/skin-white.svg); text-align: center; background-size: cover; padding: .7em 1.2em; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; background-position: center top;} #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 0 30px 0;} #donationForm form section.payment-details .paymentInner {padding: 0 8%;} #donationForm form .gagroup div label { cursor: pointer; font-size: 30px; margin: 0; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; line-height: 32px; font-weight: 600; color: #598781; background-image: url('../images/skin-white.svg'); text-align: center; background-size: cover; padding: .7em 1.2em; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; background-position: center top;} #donationForm form .gagroup div label:hover {background-image: url('../images/skin-white.svg'); color: var(--darkgreen);} #donationForm form .gagroup div label.active{color: #fff; font-weight: 600; background-image: url('../images/skin-blue.svg');} #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 100%;} #donationForm form .payment-details .col-md-2 {padding:0px 18px 11px 0; flex:0 0 50%;} #donationForm form .payment-details .col-md-4 {padding:0px 0px 11px 0;} #donationForm form .payment-details label {text-align:left !important; width:100%;} #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 { color: var(--darkgreen);} #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; margin:0; align-items: center;} #donationForm form .commsgroup >*:first-child { flex: 0 0 100%; gap: 15px; display: flex; justify-content: start;} #donationForm form .commsgroup label:hover { background-position: center bottom; color: var(--darkgreen);} #donationForm form .commsgroup label { cursor: pointer; font-size: 30px; margin: 0; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; line-height: 32px; font-weight: 600; color: #598781; background-image: url(../images/skin-white.svg); text-align: center; background-size: cover; padding: .7em 1.2em; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; background-position: center top;} #donationForm form .commsgroup label.active { color:#fff; background-position: center top; background-image: url('../images/skin-blue.svg');} #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 { align-items: center; margin: 0px 0; padding: 0px 0 0px 5px;} #donationForm form #purposeGroups { display: flex; flex-wrap: wrap; width: 100% !important;} #donationForm form .purposeGroup { flex: 0 0 48%; margin: 0 0 25px 0;} #donationForm form .purposeGroup 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: 100%; text-align: left; max-width: 280px; margin: 30px 0 0 0;} #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; font-weight: 600; background-image: url(../images/skin-pink.svg); text-align: center; background-size: cover !important; padding: .7em 3em; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; background-position: center top; font-size: 30px !important; border: 0; height: auto; width: auto; border-radius: 0 !important; background-color: transparent; color:#fff!important;} #donationForm form #submitButton:hover { background-image: url(../images/skin-yellow.svg); background-position: center center; color: var(--darkgreen)!important;} #donationForm form .submit-button-wrapper { position: relative;} #donationForm #ErrorContainer { background: transparent; color: #ee2915; padding:10px 0 !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 50px 45px;} #donationForm #payment-request-button {padding:20px 0; max-width:90%;} #donationForm .payment-details .half > p { color: var(--darkgreen); padding: 0 0 0 44px;} #donationForm .payment-details .half > p a {color: var(--darkgreen); text-decoration:underline;} #donationForm form .payment-details .row.halves .half { flex: 0 0 48%; display: flex; display: flex; flex-wrap: wrap;} #donationForm form .payment-details .row.halves { align-items: start; display: flex; width: 100%;} #donationForm form .payment-details .row.halves .half:first-child >div { flex: 0 0 100%;} #donationForm form .flyout { background-image: url(../images/skin-white.svg); max-width: 380px; background-size: cover; position: relative; right: -90px; top: 90px; z-index: 800;} #donationForm form .payment-details .row.halves .half:last-child { justify-content: end;} #donationForm form .payment-details .row.commit > div > span, #donationForm form .payment-details .row.commit > div > p { color: var(--darkgreen); flex:0 0 100%;} #donationForm form .payment-details .row.commit > div > span {font-size:50px; font-weight:600;} #donationForm form .payment-details .row.commit > div > span em {display: block; font-size: 21px;font-style: normal; position: relative; top: -15px;} #donationForm form .payment-details .row.commit > div > p {margin: 30px 0 0 0;} #donationForm form .payment-details .paymentFieldsinner p {color: var(--darkgreen);} @media only screen and (max-width: 1280px) { #dfyWrapper::before {top: 0px;height:130px;} #donationForm form .gagroup label { padding: 0 2% 0 0;} #donationForm form .gagroup {flex-wrap:wrap;} #dfy .donateControl .controlsInner { max-width: 70%;} #dfy .donateRight ul.options { max-width: 100%;} #dfy .controlsRow .customSelect {max-width: unset;} #dfy .backingImages .button {font-size: 21px;max-width: 124px;} #dfy .backingImages .button em {font-style:normal; display: block;} #donationForm form .shortfieldfirst { width: 85% !important;} } @media only screen and (max-width: 1050px) { #dfyWrapper::before { top: -30px; } #dfy .constructor .donateFrames .donateFrame { max-width: 380px;} #dfy .donateControl p { font-size: 25px;} #dfy .donateRight ul.options {gap:0;} #dfy .controlsRow .customSelect label {font-size: 18px;} #dfy .donateControl .controls ul li span { padding: 0.5em;} #dfy .controlsRow .button { padding: .5em 2em;} #dfy .donateControl .controlsInner {padding:0;} #dfyWrapper::before {top: 20px;} } @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 35px 25px 35px;} #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 { max-width: 180px; 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 .backingImages { width: 100%; display: inline; } #dfy .backingImages ul li {position: relative; justify-content: center; text-align: center; flex-wrap: wrap;} #dfy .donateControl .controls { padding: 40px 35px 40px 35px;} #dfy .backingImages ul { overflow-x: clip;} #dfy .backingImages { margin: 10px 0 35px 0;} #dfy #monthlyImages.active, #dfy #oneoffImages.active { display: flex; justify-content: center;} #dfy .backingImages > span:before {display:none;} #dfy .backingImages > span { background: transparent; align-items: center; display: inline-block; position: relative; text-align: center; width: 100%; bottom: -17px;} #dfy .backingImages .button em {display:inline;} #dfy .backingImages .button{box-shadow: var(--darkgreen) 0px 0px 0px 7px; position: relative; display: block; margin: 0 auto;} #dfy .backingImages .button.button:before {top: 19px; left: 95%;} #dfy .constructor .backingImages .imageLists:before { content: ""; background-image: url('../images/skin-beige-edge.svg'); background-repeat: repeat-y; z-index: 300; width: 50px; height: 91%; display: inline-block; background-position: right bottom; transform: rotate(90deg); top: -43%; position: absolute; left: 47%;} #dfy .constructor .backingImages .imageLists:after { content: ""; background-image: url('../images/skin-beige-edge.svg'); background-repeat: repeat-y; z-index: 300; width: 50px; height: 91%; display: inline-block; background-position: right bottom; transform: rotate(-90deg); bottom: -43%; position: absolute; left: 47%;} #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;} #dfy .controlsRow .customSelect > span { text-align: center; margin: 12px auto 0 auto; flex: 0 0 190px;} #dfy .constructor{ display: flex; flex-wrap: wrap; max-width: 600px; margin: 0 auto;} #dfy .constructor .controls{ margin: 0 auto; max-width: 490px; } #dfy .constructor .backingImages{overflow: hidden;} #dfy .constructor .donateFrames { } #dfy .backingImages .summary {background: var(--teal); display: flex; align-items: center; position: absolute; bottom: 0; padding: 25px 0 45px 0;} #dfy .constructor .donateFrames .donateFrame { max-width: unset; padding: 45px 25px 45px 25px;} #donationForm form .giftaid .col-md-6 { width: 100%;} #dfy .constructor .donateFrames {flex: 0 0 100%;} #dfy .donateRight ul.options { gap: 15px; } #donationForm form .payment-details .row.halves .half { flex: 0 0 100%;} #donationForm form .payment-details .row.halves .half:last-child { justify-content: start;} #donationForm form .flyout { background-image: url(../images/skin-white.svg); max-width: 380px; background-size: cover; position: relative; right: unset; top: 60px; z-index: 800; left: 50px;} #dfy #paymentForm { max-width: 600px;} #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 15px;} #donationForm form .giftaid .halves {padding: 0 15px;} #donationForm form .giftaid {padding: 5px 0;} #donationForm form .person-details .row.ydidentity, #donationForm form .person-details .row.ydaddress {padding: 0 15px;} #donationForm form label { padding: 26px 0 12px;} #donationForm form .person-details .row.ydcomms {margin: 0px 0 0 0;padding: 0 15px;flex-wrap: wrap;} #donationForm form .person-details .row.ydcomms .half {flex: 0 0 100%;display: flex; align-items: center; flex-wrap: wrap;} #donationForm form .customQs .row {padding: 0 15px;} #donationForm form .purposeGroup { flex: 0 0 100%;} #donationForm form #purposeGroups {padding: 20px 0 0 0;} } @media only screen and (max-width: 550px) { #dfyWrapper::before {content: ""; display: block; height: 100px; width: 100%; position: absolute; z-index: 400; left: 0px; top: -40px; background-image: url("../images/butterfly.png"); background-repeat: no-repeat; background-size: 184% auto; background-position: right top;} #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 .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 li { flex: 0 0 45.44%;} #dfy .donateControl .controls, #dfy .donateControl .donateFrame { padding: 60px 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 .flyout{ top: 0px; left: 0px;} #dfy .constructor .controls {margin: 0 auto;max-width: unset; width: 100%;} #donationForm form .payment-details .row.commit { padding: 0 20px !important; } #donationForm form .payment-details .col-md-4 {padding:0;} #donationForm .payment-details .half > p { color: var(--darkgreen); padding: 20px;} #donationForm form .payment-details .row.halves .half:last-child { justify-content: start; padding: 0 20px;} } /* thanks section */ .dfyThanks .dfyThanksContainer {background: var(--beige); position: relative; display: flex; flex-flow: row-reverse; max-width: var(--content-width); margin: 0 auto; transition: all .7s ease-in-out;} .dfyThanks .thanksImage {flex: 0 0 50%; max-width: 50%;position:relative;} .dfyThanks .thanksImage img { width: 100%; height: 100%; display: block; object-fit: cover;} .dfyThanks .thanksImage::after {content:""; background-image:url('../images/skin-beige-edge.svg'); background-repeat: repeat-y; z-index: 300; width: 40px; height: 100.1%; display: inline-block; background-position: right top; transform: scaleX(50%) rotate(180deg); right: -12px; position: absolute; background-size: cover; top:0;} .dfyThanks .thanksContent { flex: 0 0 50%; max-width: 50%; padding: 100px 20px;} #dfy.dfyThanks h2 { margin: 0 0 15px 0; font-size: 30px; color: var(--darkgreen); font-weight: 700;} #dfy.dfyThanks .thanksContent p {color: var(--darkgreen); } #dfy.dfyThanks .thanksContent a {color: var(--darkgreen); font-weight: 600; background-image: url(../images/skin-yellow.svg);font-size: 30px;text-align: center;background-size: cover;padding: .7em; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; background-position: center top; display: inline-block;} #dfy.dfyThanks .thanksContent a:hover {background-position:center top 50px; color: #fff; } #dfy.dfyThanks .thanksContent .thanksContentTwo {margin-top: 20px;} @media only screen and (max-width: 895px) { .dfyThanks .dfyThanksContainer {flex-direction: column;} .dfyThanks .thanksContent, .dfyThanks .thanksImage {flex: 0 0 100%; max-width: 100%;} .dfyThanks .thanksImage::after {display:none;} .dfyThanks .thanksImage::before {content: ""; background-image: url('../images/skin-beige-edge.svg');background-repeat: repeat-y;z-index: 300; width: 50px;height: 100vw;display: inline-block;background-position: right bottom;transform: rotate(90deg);bottom: 12vw;position: absolute;left: 46%;} #dfyWrapper.dfyThanks::before { top: 20px;} } @media only screen and (max-width: 697px) { .dfyThanks .thanksImage::before {bottom: 10vw;} } @media only screen and (max-width: 550px) { .dfyThanks .thanksImage::before {bottom: 10vw;} .dfyThanks .thanksContent { padding: 60px 20px;} }