/* Donation */ .wp-block-cover.donationStart { min-height: unset;} #dfy { margin: 55px 0;} #dfy, #dfy section { max-width: unset; width: 100%;} #dfy .donateControl{position: relative; background: #eae0d6; text-align:center;display:flex; flex-wrap: wrap; max-width: unset;} #dfy .donateControl .donateFrame, #dfy .donateControl .donateFrame .donateLeft li, #dfy .donateControl .donateFrame .donateRight .description {display:none;} #dfy .controls li span {font-weight:900; width: 100%; font-size:18px;} #dfy .donateControl .donateFrame.active, #dfy .donateControl .donateFrame .donateLeft li.active, #dfy .donateControl .donateFrame .donateRight .description.active {display:flex; max-width: unset;} #dfy .donateControl .donateFrame li, #dfy .controls li {list-style-type:none;} #dfy .controls li:hover{background:#a11d1f; color:#ffffff;} #dfy .controls li {cursor:pointer; display:inline-block; text-align:center; padding: .5em 2em .4em 2em; margin:0 0.2em; background: #5f1617; color: #ffffff; font-size:18px; font-weight: 790; border: 0; text-decoration: none; border-radius: 7px;-webkit-transition: all .16s ease;transition: all .16s ease;} #dfy .controls li:before{display:none;} #dfy .controls ul {margin:0 auto; padding: 0;} #dfy .controls {text-align: center; width: 50%; position: absolute; right: 0; top:30px; max-width:50%;} #dfy .controls li.active {background:#a11d1f;} #dfy .donateControl .donateFrame {width:100%;} #dfy .donateLeft img{ max-width:unset;} #dfy .donateControl .donateFrame .donateRight li span {text-transform: none; color: #fff;font-weight: 600;line-height: 35px;font-size: calc(35px + (30 - 21) * ((100vw - 768px) / (1600 - 768)));display: inline-block;} #dfy .donateControl .donateFrame .donateLeft ul{ margin: 0 auto; max-width: 530px; display: flex;} #dfy .donateControl .donateFrame .donateRight ul {justify-content: space-evenly; max-width: unset; display:flex;} #dfy .donateControl .donateFrame li p {line-height:23px;} #dfy .donateFrame .donateLeft { padding: 0 2% 0 0;} #dfy .donateFrame .donateRight { padding: 140px 0 0 2%;} #dfy .donateFrame .donateRight li.option {-webkit-transition: all .16s ease;transition: all .16s ease; background:#5f1617; position: relative; padding:1.4em 1.5em .7em 1.5em; cursor: pointer; border-radius: 7px;} #dfy .donateFrame .donateRight li.option.active {background:#a11d1f;} #dfy .donateControl .donateFrame > div {width:50%;} #dfy .donateFrame .donateRight li.option:hover { background: #a11d1f; } #dfy .donateControl .donateFrame .donateLeft ul {position:relative; padding:0; margin:0;} #dfy .controlsRow {text-align: center; width: 50%; position: absolute; right: 0; bottom:0; max-width:50%; bottom: 30px;} #dfy .controlsRow ul {width: 100%;float: none;padding: 0;margin: 0 auto;max-width: 490px;} #dfy .controlsRow #customAmount { font-size: 22px; background-color: #fff; width: 150px; border: 1px solid #bbb; padding: 6px; color: #4e4e4e; margin: 0 12px 0 0 !important; border-radius: 0; min-height: 45px;} #dfy .controlsRow .customSelect {list-style-type:none; position:relative; display: flex;} #dfy .controlsRow .customSelect:before { display: none;} #dfy .controlsRow .customSelect label {color: #a11d1f;text-align: left;font-size: 15px;padding: 0 19px 0 0;line-height: 20px;position: relative;bottom: -14px;} #dfy .controlsRow .customSelect span {display: block;max-width: unset;padding: 12px 0 0 30px;width: 40%;position: relative;} #dfy .controlsRow .customSelect span::before { content: "\00A3"; position: absolute; left: 0px; color:#a11d1f; font-weight: 600; line-height: 44px; font-size: 38px; bottom: -3px;} #dfy .controlsRow .customSelect button, #donationForm form #submitButton { cursor: pointer; display: inline-block; text-align: center; padding: 0.3em 2em 0.3em 2em; margin: 0 0.2em!important; background: #5f1617; color: #ffffff!important; font-size: 18px!important; font-weight: 790; border: 0; text-decoration: none; border-radius: 7px!important; -webkit-transition: all .16s ease; transition: all .16s ease; position: relative; bottom: -10px; height: 51px; width: auto;} #dfy .controlsRow .customSelect button:hover, #donationForm form #submitButton:hover {background:#a11d1f; color:#ffffff;} #dfy .donateControl .donateFrame .donateRight ul.descriptions { padding: 0 3vw;} #dfy .donateControl .donateFrame .donateRight .descriptions li span { font-size: calc(35px + (30 - 21) * ((100vw - 768px) / (1600 - 768))); color: #5f1617; line-height: 52px;} #dfy .donateControl .donateFrame .donateRight .descriptions li span span {font-size: 11px; line-height: 6px;} #dfy .donateControl .donateFrame .donateRight .descriptions li p {color: #5f1617; font-size: 16px; text-align: left; padding: 0 0 0 4%;} #dfy .donateControl .donateFrame .donateRight ul.options { padding: 0;} #dfy .donateControl .donateFrame .donateRight li span span { display:block; font-size: 18px; line-height: 23px; padding: 0;} #dfy.confirmation { margin: 180px 0;} #dfy.confirmation .donateControl {padding: 45px; flex-wrap:wrap;} #dfy.confirmation .donateControl h2 {width:100%; text-align: left;} #dfy.confirmation .donateControl .footer__social { width: 100%;} #dfy.confirmation .donateControl p { text-align: left;} #dfy.confirmation .donateControl:after {top:29%;} .donationStart .wp-block-cover__background {position:static;} .donateControl:after { background-image: url(assets/img/graphic-1-black.svg); bottom: -25%; left: -25%; top: auto; -webkit-transform: rotate(37.92deg); transform: rotate(37.92deg); background-repeat: no-repeat; background-size: contain; content: ""; display: block; height: 100%; position: absolute; width: 100%; z-index: -1;} #donationForm {display:none; max-width: unset;} #donationForm.active {display:inline;} #donationForm form {width:100%; display: flex; flex-wrap: wrap; max-width: unset;} #donationForm form .block{ width: 100%;} #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 40px 0; position:relative;} #donationForm form .col-md-6, #donationForm form .col-md-4, #donationForm form .col-md-12 { padding: 0;} #donationForm form h3 {position:relative; color: #000000; padding: 80px 0 0 0; font-size:25px; font-family: Epilogue ,sans-serif; font-weight: normal;} #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: 0 4%;} #donationForm form .paymentFields h4, #donationForm form #DeviceHeader, #donationForm form #PaypalHeader{width: 100%; text-align:left; font-weight:700; font-family: Epilogue Bold,sans-serif;} #donationForm form input, #donationForm form select, #donationForm form textarea, #donationForm form select, .inputFix { padding: 0px 5px; border-radius: 0; width: 90%; 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 12px 0 0 !important; border-radius: 0!important; min-height: 45px;} #donationForm form .giftaid .col-md-12 { width: 50%;} #donationForm form .giftaid .halves .col-md-12:first-child {background:#eae0d6; padding: 5%;} #donationForm form .row.halves { align-items: center;} #donationForm form input#GiftAid { margin: 0 6px 7px -22px;height: 15px; width: 15px;} #donationForm form .taggroup input {height: 15px; width: 15px;} #donationForm form .shortfieldfirst{ width: 100px!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;} #donationForm form .radiogroup .col-md-2 { padding:0px 18px 0px 0;} #donationForm form h1 {font-size: 36px; 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; bottom: -3px;} #donationForm form .commsgroup { display: flex; align-items: center;} #donationForm form .radiogroup label.error {padding:0!important;} #donationForm form label.error {border-color: #b94a48; box-shadow: none; color: #b94a48!important; padding: 8px 0 0; display: block;} #donationForm form .error {box-shadow: none;} #donationForm form label {padding:5px 0; display: inline-block; max-width: unset;} #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; max-width: unset;} #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: 150px;margin: 0 0 30px 0;} #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;} #donationForm form .commsgroup { padding: 20px 0px; overflow: hidden; max-width: unset;} #donationForm form textarea { height: 100px; width: 100%; max-width: unset;} #donationForm form section.contact-details p {margin: 10px 0 0 0;} #donationForm form section.contact-details .row { padding: 0%;} #donationForm form section.giftaid{margin:50px 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, #donationForm form section.payment-details .paymentFieldsinner, #donationForm form section.payment-details .commit div {background:#eae0d6; padding: 5%;} #donationForm form section.payment-details .paymentFieldsinner {width:50%; padding: 5% 5% 0 5%;} #donationForm form section.payment-details .row {margin: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 .row div{ background: #eae0d6;}*/ #donationForm form section.payment-details .commit div {padding: 2% 5% 5% 5%; margin: 0!important; width:100%; max-width:unset;} #donationForm form section.payment-details .row.heading .col-md-12 {padding: 5% 5% 0 5%!important;} #donationForm form section.payment-details .row.heading { margin: 0;} #donationForm form section.payment-details h3 {padding:0; margin:0;} #donationForm form .gagroup label { padding: 5px 0; display: block;} #donationForm form .payment-details .col-md-4.expdate{display: flex;} #donationForm form .payment-details .col-md-4 { width: 100% !important; margin:0 0 30px 0;} #donationForm form .payment-details .col-md-2 { padding: 0px 18px 11px 0; flex: 0 0 15%;} #donationForm form .payment-details .col-md-4 { padding: 0px 18px 11px 0; flex: 0 0 35%; text-align: right;} #donationForm form .payment-details label {text-align: left !important;width: 100%;} #donationForm form .payment-details .inputFix {height:auto;} #donationForm form .containerUnwrap {display:flex; margin: 80px auto;} #donationForm form .gagroup { margin:0px;} #donationForm form section.contact-details .row.heading { margin: 0;} #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.payment-details { margin: 0 0 50px 0;} @media screen and (max-width: 1380px) and (min-width: 1180px){ #dfy .donateControl .donateFrame .donateRight li span {line-height: unset;font-size: calc(20px + (30 - 21) * ((100vw - 768px) / (1600 - 768))); } #dfy .donateFrame .donateRight li.option {padding: 1em 1em 0.5em 1em;} } @media screen and (max-width: 1380px) { #dfy .donateControl .donateFrame .donateRight .descriptions li p, #dfy .controlsRow .customSelect label {font-size: 14px; line-height: 19px;} #dfy .controlsRow .customSelect button, #donationForm form #submitButton { line-height: 16px; padding: 0.6em 1em 0.5em 1em; line-height: unset;} #dfy .controlsRow #customAmount {min-height: unset;} button, input, optgroup, select, textarea {line-height: 90%;} } @media screen and (max-width: 1180px) { #dfy .donateControl .donateFrame.active { display: flex!important; flex-wrap: wrap;} #dfy .controls, #dfy .controls p { text-align: center; width: 100%; position: static; max-width: unset; padding:15px 0 0 0;} #dfy .donateControl .donateFrame > div { width: 100%; padding: 25px 0 0 0;} #dfy .controlsRow {position:static;} #dfy .donateControl .donateFrame .donateLeft ul { position: relative; padding: 0; margin: 0; max-width: unset; display: inline;} #dfy .donateControl .donateFrame.active .donateLeft li { width: 100%; text-align: center;} #dfy .donateControl .donateFrame.active .donateLeft li img {display:inline; margin: 0 auto; max-width: 380px;} #dfy .donateControl .donateFrame > div { max-width: unset;} #dfy .donateFrame .donateRight p { max-width: unset; text-align: center; width: 100%; } #dfy .donateControl .donateFrame .donateRight ul{display: flex; margin: 0 auto;} #dfy .donateControl .donateFrame .donateRight ul.descriptions { padding: 16px;} #dfy .donateControl .donateFrame .donateRight ul.options { max-width: 410px;} #dfy .donateControl .donateFrame .donateRight ul.descriptions { max-width: 420px;} #dfy .controlsRow { text-align: center; width: 100%; max-width: unset;} #dfy .donateControl {padding: 0 0 50px 0;} #dfy .controlsRow .customSelect { display: inline;} #dfy .controlsRow .customSelect label { color: #a11d1f; text-align: left; padding: 0; position: static;} #dfy .controlsRow .customSelect label br {display:none;} #dfy .controlsRow .customSelect span { width: 100%; padding: 12px 0 0 0px;} #dfy .donateLeft { order: 2;} #dfy .controlsRow {padding: 10px 0 0 0;} #dfy .controlsRow #customAmount {width: auto;} #dfy .controlsRow .customSelect span::before { position: relative; bottom: -7px; left: -12px;} #dfy .donateControl { padding: 0 0 50px 0; max-width: 560px; margin: 0 auto;} .donateControl:after {bottom: 0; max-width: 300px; left: -65%; top: -20%;} #donationForm form { max-width: 560px; margin: 0 auto;} #donationForm form .row {padding:0;} #donationForm form h3 { padding: 20px 0 0 0;} #donationForm form .row.heading { margin: 0 0 0px 0;} #donationForm form label, #donationForm form p, #donationForm form p label{ font-size: 14px;} #donationForm form h3 {font-size: 20px;} #donationForm form .commsgroup span { width: auto; margin: 0 32px 0 0; display: inline-block; min-width: unset;} #donationForm form .payment-details .col-md-2 { padding: 0px 18px; flex: 0 0 15%; float: none; width: 100%;} #donationForm form .payment-details .col-md-4 {margin: 0;} #donationForm form section.payment-details .commit div { padding: 2% 5% 10% 5%;} #donationForm form .payment-details .col-md-2 { padding: 0;} #dfy .donateControl .donateFrame .donateRight .descriptions li span span { line-height: 16px;} } @media (max-width: 1024px){ #dfy.donationForm .block { width: 100%;} } @media (max-width: 870px){ #dfy.donationForm section.doubleup .container {display:block;} #dfy.donationForm .col-md-4 { float: none; width: 100%;} #dfy.donationForm img.giftAidLogo { width: 150px; margin: 12px 0;} #dfy.donationForm small { padding: 0;} .inputFix {width:100%;} #donationForm form .payment-details .col-md-4 { padding: 0px 0px 11px 0;} } @media screen and (max-width: 550px) { #donationForm form .giftaid .col-md-12 { width: 100%;} #donationForm form small { padding: 30px 0 0 0;} #donationForm form .col-md-4 { width: 100%; float: none;} #donationForm form input, #donationForm form select, #donationForm form textarea, #donationForm form select, .inputFix {width:100%;} #donationForm form section.payment-details .paymentFieldsinner { width: 100%;} #dfy .controlsRow #customAmount { width: 120px;} #donationForm form .commsgroup { display: inline-block;} #dfy .donateControl .donateFrame .donateRight .descriptions li span {line-height: 38px;} } @media screen and (max-width: 460px) { #dfy .donateControl .donateFrame .donateRight li span {line-height: unset;font-size: calc(20px + (30 - 21) * ((100vw - 768px) / (1600 - 768))); } #dfy .donateFrame .donateRight li.option {padding: 1em 1em 0.5em 1em;} #dfy .controlsRow #customAmount { margin: 0!important;} #dfy .controlsRow .customSelect span { width: 50%; margin: 0 auto;} #dfy .controlRow #customAmount { width: 130px;} #dfy .donateControl:after { max-width: 200px; left: -125%; top: -16%;} #dfy .donateControl .donateFrame .donateRight ul.options { display: inline;} #dfy .donateControl .donateFrame .donateRight ul.options li{margin: 12px;} }