/* Theme Name: BRUK Theme Template: twentytwentyfour Version: 1.0 Description: A child theme for the Twenty Twenty Four theme. Author: Andi Best */ @font-face { font-family: 'Apex'; src: url('fonts/ApexRounded-Book.woff') format('woff'); font-style: normal;} @font-face { font-family: 'ApexBold'; src: url('fonts/ApexRounded-Medium.woff') format('woff'); font-style: normal;} :root { --dark-purple: #281e5a; --panel-grey: #f1f3f6; --white: white; --blue: #09d; --yellow: #fd0; --purple: #a366bb; --pink: #f84488; --orange: #ff7d52; --line-solid-grey: #d5d5d5; --light-purple-border--line: #281e5a4d; --green: #0a0; } body { background: var(--blue); font-family: "Apex",sans-serif; background: linear-gradient(344deg, rgba(0, 153, 221, 1) 0%, rgba(163, 102, 187, 1) 100%); font-size: 18px;} * { box-sizing: border-box; } p {font-family: "Apex",sans-serif; font-size: 16px;} header { background: #ffffff; display:flex; height: 110px; padding: 25px;} header > div { width: 100%; max-width: 1090px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;} header .logo {max-width:145px;} header .logo img {width:100%;} @media(max-width:359px) { header .logo {max-width:110px;} } header .security {font-size: 14px!important; color:#737373;} header .security:before {content:url('i/lock.png'); position: relative; top: 5px; left: -10px;} h1.wp-block-post-title { display: none;} .text-align-right { text-align: right;} .small-text { font-size: 14px!important; color:#737373!important;} .bold-text { font-weight: bold;} .light-color { color: #797979;} #pageIntro { padding: 25px 25px 0 25px; text-align: center; width: 100%; max-width: 1090px; margin: 0 auto;} #pageIntro h1 {color:#ffffff!important; font-size:32px!important;font-family: 'Apex'; margin:25px 0 20px 0!important;} #pageIntro h2 {color:#ffffff!important;font-size:16.8px!important;font-family: 'Apex'!important; margin:15px 0 35px 0; line-height:30px;} #mainPageContent .donateControl .controls {width: 100%; max-width: 1090px; margin: 0 auto;} #mainPageContent .donateControl .controls ul{ padding: 0; gap: 10px; position: relative; display: grid; grid-template-columns: repeat(2, 1fr); width: fit-content; margin: 0 auto; border: 10px solid var(--panel-grey); border-radius: 999em; background: var(--panel-grey); font-weight: bold; font-size: 25px; line-height: 1em; color: var(--dark-purple); cursor: pointer;} #mainPageContent .donateControl .controls ul li {list-style-type:none;padding: 18px 50px 15px 50px; font-family: 'ApexBold'!important; text-align: center; z-index: 1;display: flex; align-items: center; justify-content: center; border-radius: 999em;} #mainPageContent .donateControl .controls ul li span {font-family: 'ApexBold'!important;} #mainPageContent .donateControl .controls ul li.active { color:#fff; border-radius: 999em;background: var(--pink); transition: all 0.3s;} #mainPageContent .donateControl .controls ul li:hover { background-color: var(--purple); color: var(--white);} @media screen and (max-width: 768px) { #mainPageContent .donateControl .controls ul li {font-size: 16px; padding: 15px;} #mainPageContent .donateControl .controls {padding: 30px;} #dfy .block.border-top#button {display: flex; flex-flow: column; align-items: center;} #dfy .block.border-top#button .commit {margin-top: 40px;} } #mainPageContent p, #dfy p {color: var(--dark-purple); font-size: 18px;} #dfy #dfyInner { padding: 35px;} #dfy { margin: 20px auto 0; width: 100%; max-width: 1090px; background-color: var(--panel-grey);} #dfy .container { padding: 70px 60px; color: var(--dark-purple);} #mainPageContent h1, #dfy h2, .container h1, .container h2 { margin: 0 0 20px; color: var(--pink); font-size:40px; line-height: 1.1em; font-family: "Apex",sans-serif;} #dfy .container .bold, #dfy .container strong, strong{ font-family: 'Apex';} #dfy .container .highlight-pink, .highlight-pink { color: var(--pink);} #dfy .image-quote-container { background-color: var(--purple); color: var(--white); font-size: 16px;} #dfy .image-quote-container img { width: 100%;height: auto;} #dfy .image-quote-container div { padding: 10px;} #dfy .two-column { display: grid; grid-column-gap: 60px; grid-row-gap: 20px; grid-template-rows: auto; grid-template-columns: 2fr 1fr; grid-auto-columns: 1fr;} #dfy .firstRow {display: flex; justify-content: space-between;} #dfy form { display: flex; flex-wrap: wrap; width: 100%;} #dfy .block { width: 100%;} #dfy .block.border-top { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line-solid-grey);} #dfy section .container { padding: 0;} #dfy .input-container {display: flex; gap: 10px; margin-bottom: 10px;} #dfy input[type=radio] { width: 25px; height: 25px; position: relative; accent-color: var(--dark-purple); top: -5px;} #dfy input[type=radio]:focus { outline: none; border-radius: 100%; box-shadow: 0 0 0 2px var(--dark-purple);} #dfy .donateFrame .options { padding: 0; display: flex; gap: 15px; margin: 50px 0;} #dfy .donateFrame .options li {font-family: "Apex",sans-serif; list-style: none; cursor: pointer; justify-content: center; background-color: var(--white); padding:17px 25px 10px 25px; text-align: center; flex: 0 1 25%; color: var(--dark-purple); font-size: 25px; border-radius: 999em; transition: all 0.3s;} #dfy .donateFrame .options li.active { background-color: var(--pink); color: var(--white);} #dfy .donateFrame .options li:hover { background-color: var(--purple); color: var(--white);} #dfy .controlsRow ul { padding: 0;} #dfy .controlsRow .customSelect { list-style: none; text-align: left; position: relative;} #dfy .controlsRow .customSelect label { display: block; width: 80px; padding: 18px 10px 10px 10px; border-radius: 999em; background-color: var(--dark-purple); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0; z-index: 2; position: absolute; height: 55px;} #dfy .controlsRow .customSelect input { font-family: 'Apex'; width: 230px; height: 55px; box-shadow: none; border: 0; padding: 10px 25px 10px 110px; border-radius: 999em; font-size: 25px !important; color: var(--dark-purple) !important;} #dfy .controlsRow .customSelect input.active { background: var(--pink); color: var(--white);} #dfy .controlsRow .customSelect input::placeholder { font-size: 25px; color: var(--dark-purple);} #dfy .controlsRow .customSelect input.active::placeholder { color: var(--white);} #dfy .donateFrame.active{display: flex;} @media screen and (max-width: 768px ) { #dfy .donateFrame.active { flex-flow: column-reverse; } } #dfy .donateFrame { display: none;} #dfy #oneoff-description.active,#monthly-description.active { margin-bottom: 16px; display: block;} #dfy .donateFrame > div { flex: 0 0 60%; padding: 0 45px 0 0;} #dfy .donateFrame .optionsArt { flex: 0 0 40%; padding: 0;} #dfy .giftaid .giftaid-title { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between;} #dfy .gaImage img { width: 100%; max-width: 120px;} #dfy .gagroup { background: linear-gradient(344deg, rgba(0, 153, 221, 1) 0%, rgba(163, 102, 187, 1) 100%); color: var(--white); padding: 20px;} #dfy .gagroup label { display: block; line-height: 27px; position: relative; padding-left: 45px; margin-bottom: 12px; cursor: pointer; font-size: 16px; line-height: 1.4; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} #dfy .gagroup input:checked ~ .checkmark { background-color: var(--pink);} #dfy .gagroup #GiftAidCue { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;} #dfy .gagroup .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border: 3px solid var(--pink); margin-top: 0.2em; transform: all ease-in-out 0.2s;} #dfy .gagroup .checkmark:after { content: ""; position: absolute; display: none;} #dfy .gagroup input:checked ~ .checkmark:after { display: block;} #dfy .gagroup label .checkmark:after { left: 6px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} #dfy .payment-options { display: flex; align-items: center; gap: 30px; margin-top: 30px;} #dfy .payment-button { background-color: var(--dark-purple); color: var(--white); font-size: 16px; line-height: 1; display: flex; align-items: center; padding: 8px; gap: 20px; text-decoration: none;} #dfy .payment-button img { width: 100%; max-width: 40px;} #dfy #paypal-button img { width: 100%; max-width: 150px; display: block;} #dfy #google-play-button img { width: 100%; max-width: 90px; display: block;} #dfy-footer-wrapper { display: flex; flex-flow: row; gap: 40px; width: 100%; max-width: 1090px; margin: 40px auto;} #dfy-footer-wrapper .footer-inner { background-color: var(--panel-grey); padding: 40px; color: var(--dark-purple); flex: 50%; font-size: 16px;} #dfy-footer-wrapper .footer-inner h2 { color: var(--orange); margin-top: 0; font-family: "Apex",sans-serif;} #dfy-footer-wrapper .footer-inner a { text-decoration: underline; color: inherit;} #dfy-footer-wrapper .footer-inner .link-wrapper {font-weight: bold; display: flex; gap: 40px; margin-bottom: 20px;} #dfy-footer-wrapper .footer-inner .link-wrapper span { flex: 0 0 100px;} #dfy-footer-wrapper .footer-inner .link-wrapper a { text-decoration: none;} #dfy-footer-bottom { display: flex; flex-flow: row; justify-content: space-between; gap: 40px; width: 100%; max-width: 1090px; margin: 40px auto; color: var(--white); font-size: 14px;} #dfy-footer-bottom img { width: 100%;max-width: 200px; height: auto; object-fit: contain;} #dfy #payment{display:none;} #dfy #payment.active{display:flex;} #dfy .commit { color: #fff; border-radius: 999em; background: var(--pink); transition: all 0.3s; list-style-type: none; padding: 15px 50px; text-align: center; cursor: pointer;} #dfy .commit:hover {background:var(--purple);} #dfy .companyField, #dfy .inmemField, #dfy .publicField {display:none;} #dfy .companyField label, #dfy .inmemField label, #dfy .publicField label {display:block;} #dfy .companyField input, #dfy .inmemField input, #dfy .publicField input { font-family: 'Apex'; max-width: 500px; padding: 0px 5px; width: 90%; height: 42px; border-radius: 0px !important; font-size: 1em !important; color: #000000 !important; font-size: 22px; background-color: #fff; padding: 6px; margin: 0 12px 0 0 !important; min-height: 45px; border: 0; margin: 12px 0 !important;} #dfy #button.inactive{display:none;} #dfy #button img { float: right; opacity: 0.8;} #dfy .donationContext {display:none;} #dfy .donationContext.active {display:block;} #dfy .errMsg { color: #fb5b72; margin: 40px 0 0 0;} #dfyForm #donationForm .commsGroup label { display: block; position: relative; padding-left: 45px; margin-bottom: 12px; cursor: pointer; font-size: 16px; line-height: 1.4; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} #dfyForm #donationForm .commsGroup input:checked ~ .checkmark { background-color: var(--pink);} #dfyForm #donationForm .commsGroup .KeepInTouch { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;} #dfyForm #donationForm .commsGroup .checkmark { position: absolute; top: -5px; left:-30px; height: 25px; width: 25px; background-color: #eee; border: 3px solid var(--pink); margin-top: 0.2em; transform: all ease-in-out 0.2s;} #dfyForm #donationForm .commsGroup .checkmark:after { content: ""; position: absolute; display: none;} #dfyForm #donationForm .commsGroup input:checked ~ .checkmark:after { display: block;} #dfyForm #donationForm .commsGroup label .checkmark:after { left: 6px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} #dfyForm #donationForm form #commsGroups { padding: 0 0 0 30px;} #dfyForm #donationForm {max-width:unset; margin:0px;} #dfyForm #donationForm .corp{display:none;} #dfyForm #donationForm .corp.active{display:flex; flex: 0 0 100%; flex-wrap: wrap;padding: 20px 0 0 0;} #dfyForm #donationForm .corp label{padding:5px 0;} #dfyForm .container { padding: 0 !important;} #dfyForm .container.heading .col-md-12 { margin: 0 !important;} #dfyForm #donationForm form {margin:0px 0 40px 0; width:100%; display:flex; flex-wrap:wrap; max-width:unset; max-width: unset;} #dfyForm #donationForm form #AddressSearch {width:95%; margin:0!important;} #dfyForm #donationForm form .block {width:100%; padding: 0 0 30px 0;} #dfyForm #donationForm form p , #dfyForm #donationForm form p label {font-size:18px; max-width:unset; } #dfyForm #donationForm form section {position:relative; display:inline-block;} #dfyForm #donationForm form form {padding:60px 0 0 0;} #dfyForm #donationForm form .row.heading {margin:0; position:relative;} #dfyForm #donationForm form .col-md-6, #dfyForm #donationForm form .col-md-4, #dfyForm #donationForm form .col-md-12 {padding:0;} #dfyForm #donationForm form h3 {position:relative;margin: 0 0 15px 0 !important;color: var(--dark-purple); font-size: 18px; font-family: "Apex",sans-serif;} #dfyForm #donationForm form .block.content-blocks.full-width {text-align:left; max-width:unset;} #dfyForm #donationForm form .block.intro p {padding:0;} #dfyForm #donationForm form section .row > p {display:none;} #dfyForm #donationForm form section .row {display: inline-block; width:100%; clear:both; margin:0 0 7px 0; flex-wrap:wrap; max-width:unset;} #dfyForm #donationForm form .container.heading .row { margin: 0;} #dfyForm #donationForm form section .container.standard {overflow: hidden; display:flex;} #dfyForm #donationForm form section.customQs .container.standard {} #dfyForm #donationForm form .paymentFields h4, #dfyForm #donationForm form #DeviceHeader, #dfyForm #donationForm form #PaypalHeader {margin-bottom: 1rem;color:#1A2446!important;width:100%; text-align:left; font-weight:700; font-family:Epilogue Bold, sans-serif; font-size:16px;} #dfyForm #donationForm form label { font-size: 18px; font-family: "Apex", sans-serif;} #dfyForm #donationForm form input, #dfyForm #donationForm form select, #dfyForm #donationForm form textarea, #dfyForm #donationForm form select, .inputFix {padding:0px 5px; width:90%; height:42px; border-radius: 32px!important; font-size:1em !important; color:#000000 !important; font-size:22px; background-color:#fff; padding:6px; margin:0 12px 0 0 !important; min-height:45px; font-family: 'Apex';} #dfyForm #donationForm form textarea { padding: 10px!important;} #dfyForm #donationForm form input, #dfyForm #donationForm form select, #dfyForm #donationForm form textarea {border-radius: 0px!important; padding: 2px 10px 0 10px; border: var(--bs-border-width) solid var(--bs-border-color);} #dfyForm #donationForm form .giftaid .giftaidInner {flex:0 0 60%; padding: 35px;} #dfyForm #donationForm form .giftaid .giftaidInner p:first-child {font-weight:bold; font-size:18px;} #dfyForm #donationForm form .giftaid .giftaidInner p {font-size:12px; line-height: 26px;} #dfyForm #donationForm form .giftaid .giftaidInner p strong {color:#a7292e;} #dfyForm #donationForm form .giftaid .container.standard .row {display:flex; flex-wrap: nowrap;margin: 0; align-items: center;} #dfyForm #donationForm form .taggroup input {height:15px; width:15px;} #dfyForm #donationForm form .shortfieldfirst, #dfyForm #donationForm form .shortfield {width:150px!important;} #dfyForm #donationForm form .rowAnnotation {position:relative; flex: 0 0 300px; padding:25px 0 0 45px;} #dfyForm #donationForm form .rowGroup { flex: 1;} #dfyForm #donationForm form .rowAnnotation span {color:#1a2446; font-size:16px; line-height:30px; font-weight:400; cursor:pointer; position:relative;display: inline-block; margin: 0 0 30px 0;} #dfyForm #donationForm form .rowAnnotation span:hover {text-decoration:underline;} #dfyForm #donationForm form .rowAnnotation span:before {background:#1a2446; width:2px; content:""; height:120px; top: -25px; display:block;position: absolute; left: -35px;} #dfyForm #donationForm form .rowAnnotation span:after {content: "^"; transform: scaleX(1.9) rotate(180deg); color:#1a2446; display: inline-block; margin: 0 8px; font-size: 13px; position: absolute; bottom: -34px; left: -4px;} #dfyForm #donationForm form .rowAnnotation p {display:none; font-size: 12px; line-height: 22px;} #dfyForm #donationForm form .rowAnnotation p.active {display:inline;} #dfyForm #donationForm form .col-md-4#tagGroups { width: 100%;} #dfyForm #donationForm form .col-md-2 {float:left; width:48%; padding:0px 18px 11px 0;} #dfyForm #donationForm form .col-md-12 {width:100%; max-width:unset; margin: 15px 0;} #dfyForm #donationForm form .radiogroup .col-md-2 {padding:0px 18px 0px 0;} #dfyForm #donationForm form .col-md-1 {padding:0px 18px 0px 0;} #dfyForm #donationForm form .radiogroup {padding:30px 0;} #dfyForm #donationForm form .col-md-4 {width:50%; float:left;} #dfyForm #donationForm form img.DirectDebitLogo {margin:30px 0;} #dfyForm #donationForm form input[type=checkbox] { width:25px; height:auto; min-height:16px; float:left; position:relative; transform: scale(1.3); margin: 0 12px 0 3px !important; top: -3px;} #dfyForm #donationForm form .radiogroup label.error {padding:0!important;} #dfyForm #donationForm form .gagroup label.error {color:#ffffff;} #dfyForm #donationForm form label {padding:5px 0; display:block; max-width:unset;color:var(--bs-heading-color,inherit); font-weight: 400; font-family: 'Apex';} #dfyForm #donationForm form .commsgroup input[type=radio], #dfyForm #donationForm form input[type=radio] {width:15px; height:15px; min-height:unset; position:relative; top:1px; margin:0 7px;} #dfyForm #donationForm form #commsGroups .commsGroup, #dfyForm #donationForm form #tagGroups .tagGroup { padding: 12px 0;} #dfyForm #donationForm form .commsgroup span {width:auto; margin:0 12px 0 0; display:inline-block; min-width:100px;} #dfyForm #donationForm form .newslettergroup input[type=radio] {width:15px; height:15px; position:relative; top:-1px; margin:0 7px;} #dfyForm #donationForm form .newslettergroup span {width:auto; margin:0 12px 0 0; display:inline-block;} #dfyForm #donationForm form .container.contact, #dfyForm #donationForm form .container.payment {margin:40px auto;} #dfyForm #donationForm form section.contact .container.standard { padding: 0 !important;border-radius: 0;} #dfyForm #donationForm form section.giftaid .container.standard {padding: 0 !important;} #dfyForm #donationForm form .radiogroup input, #dfyForm #donationForm form .taggroup input {margin:0 12px 0 0; position:relative; top:-2px;} #dfyForm #donationForm form .taggroup label {width:100%; display:inline-block; max-width:unset;} #dfyForm #donationForm form .radiogroup span {margin:0 12px 0 0;} #dfyForm #donationForm form .container {width:100%!important; padding:8px 0 0 0!important; max-width:unset;} #dfyForm #donationForm form .inputFix {padding:12px 12px 10px 12px;} #dfyForm #donationForm form .container.giftaid, #dfyForm #donationForm form .container.payment {border:3px #000000 solid; padding:15px; margin:15px 0; line-height:20px;} #dfyForm #donationForm form img.giftAidLogo { width: 100%; margin: 9px 0 0 0; max-width: 156px;} #dfyForm #donationForm form .container.consent, #dfyForm #donationForm form .container.contact {padding:36px 30px 20px 30px; border-radius:50px; background:#ebebeb;} #dfyForm #donationForm form .grey {background:#ebebeb; padding:0 17%;} #dfyForm #donationForm form small {padding:0 30px; display:block;} #dfyForm #donationForm form .commsgroup {padding:20px 0px; overflow:hidden; max-width:95%;} #dfyForm #donationForm form .commsgroup div {width:100%; display:flex;} #dfyForm #donationForm form .commsgroup div span:last-child {text-align:right;} #dfyForm #donationForm form .commsgroup div span {margin:0 0 10px 0; flex:2 1 auto;} #dfyForm #donationForm form #Postcode-error {color:var(--pink); display: block;} #dfyForm #donationForm form .commsgroup label input {margin:0px 0 0 12px!important; position:relative; top:-3px;} #dfyForm #donationForm form textarea {height:100px; width:100%; max-width:unset; border: var(--bs-border-width) solid var(--bs-border-color); border-radius:0!important;} #dfyForm #donationForm form .prefsIntro {margin:32px 0 0 0!important;} #dfyForm #donationForm form section.contact-details p {margin:10px 0 0 0;} #dfyForm #donationForm form section.contact-details .row {padding:0%;} #dfyForm #donationForm form section.contact-details h3, #dfyForm #donationForm form section.contact-details p, #dfyForm #donationForm form section.contact-details label, #dfyForm #donationForm form .commsgroup span {color:#000000;} #dfyForm #donationForm form section.doubleup .container {display:flex; padding:0;} #dfyForm #donationForm form section.payment-details, #dfyForm #donationForm form section.payment-details .paymentFields {width:100%; margin:0;} #dfyForm #donationForm form section.payment-details .row .col-md-12 {padding:0 5%;} /*#dfyForm #donationForm form section.payment-details .commit {flex:0 0 100%!important;}*/ #dfyForm #donationForm form section.payment-details .paymentFieldsinner {width: 100%; display: flex; padding:0; flex-wrap: wrap; } #dfyForm #donationForm form section.payment-details .payment-detailsInner {width: 100%; display: flex; flex-wrap: wrap;} #dfyForm #donationForm form section.payment-details .payment-detailsInner p {} #dfyForm #donationForm form section.payment-details .row {margin:0; padding:0;} #dfyForm #donationForm form section.payment-details img.DirectDebitLogo {width:150px; margin:0 0 30px 0;} #dfyForm #donationForm form section.payment-details .row .col-md-12:last-child {padding:0 5%;} #dfyForm #donationForm form section.payment-details .commit.once div { margin: 14px 0 0 0 !important; width:100%; max-width:unset;} #dfyForm #donationForm form section.payment-details .commit.regular div {padding:0% 5% 1% 5%; margin: 14px 0 0 0 !important; width:100%; max-width:unset;} #dfyForm #donationForm form section.payment-details .row.heading .col-md-12 {padding:10px 0!important;} #dfyForm #donationForm form section.payment-details .row.heading {margin:0;} #dfyForm #donationForm form section.payment-details h3 {padding:0; margin:0;} #dfyForm #donationForm form .gagroup label { padding: 12px 0 0 0; color: #ffffff; font-weight: 400; line-height: 31px;} #dfyForm #donationForm form .gagroup p {display: none;} #dfyForm #donationForm form .gagroup input {margin:0 12px 25px 0!important;} #dfyForm #donationForm form .payment-details .col-md-4.expdate {display:flex;} #dfyForm #donationForm form .payment-details .col-md-4 { flex:0 0 25%;} #dfyForm #donationForm form .payment-details .col-md-2 {padding:0px 18px 11px 0; flex:0 0 10%; align-content: end;} #dfyForm #donationForm form .payment-details .col-md-4 {padding:0px 18px 11px 0;} #dfyForm #donationForm form .payment-details label {text-align:left !important; width:100%; color:#1A2446!important;} #dfyForm #donationForm form .payment-details .inputFix {height:auto; display: flex; align-items: center; border: var(--bs-border-width) solid var(--bs-border-color);} #dfyForm #donationForm form .containerUnwrap {display:flex; margin:80px auto;} #dfyForm #donationForm form .gagroup {display: flex; flex:0 0 40%; justify-content: space-between; flex-wrap: wrap; gap:15px; align-items: center; background:#525a8c; padding: 35px;} #dfyForm #donationForm form .payment-details #card-number,#dfyForm #donationForm form .payment-details #card-cvc, #dfyForm #donationForm form .payment-details #card-expiry {flex:1;} #dfyForm #donationForm form section.contact .row.heading {margin:0;} #dfyForm #donationForm form section.contact .col-md-12 label span {margin:0;} #dfyForm #donationForm form section.contact .col-md-12 label {line-height: 25px; margin: 20px 0; padding: 5px 0 5px 35px; position:relative;} #dfyForm #donationForm form #commsGroups label, #dfyForm #donationForm form #tagGroups label {padding:0;} #dfyForm #donationForm form #commsGroups label br, #dfyForm #donationForm form #tagGroups label br {display:none;} #dfyForm #donationForm form #commsGroups .commsGroup, #dfyForm #donationForm form .tagGroup, #dfyForm #donationForm form .corpGroup { display: flex; align-items: center;} #dfyForm #donationForm form .corpGroup { flex-wrap:wrap;} #dfyForm #donationForm form .tagGroup input[type=checkbox] {top: 1px; margin:0 12px 13px 3px !important;} /* #dfyForm #donationForm form .corpGroup {flex-wrap:wrap; } */ #dfyForm #donationForm form .corpGroup label span {margin-left:0;} #dfyForm #donationForm form .tagGroup label span {margin-left:0;} #dfyForm #donationForm form #commsGroups .commsGroup label, #dfyForm #donationForm form .tagGroup label, #dfyForm #donationForm form .corpGroup label { margin: 0px 0; padding: 0px 0 0px 5px;} #dfyForm #donationForm form .dd .col-md-12 {padding:0!important;} #dfyForm #donationForm form .dd.commit.regular div { padding: 0% 5% 1% 0%!important;} #dfyForm #donationForm form section.block.content-blocks.full-width.customQs .standard > p { flex: 0 0 100%;} @media screen and (max-width: 767px){ #dfyForm #donationForm form .col-md-4 { width: 100%;float: none;} #dfyForm #donationForm form #commsGroups .commsGroup { align-items: flex-start; padding-top: 0;} #dfyForm #donationForm .commsGroup .checkmark {top: 0;} #dfyForm #donationForm form .payment-details .col-md-4 {flex: 100%;} #dfyForm #donationForm form .payment-details .col-md-4 .inputFix { width: 100%; margin-right: 0; } #dfyForm #donationForm form .shortfield {width: auto !important;} #dfyForm #donationForm form .payment-details .col-md-2 {padding-right: 0; margin:0;flex:48%;} #dfyForm #donationForm form .payment-details .col-md-2.once {padding-right: 0; margin:0; margin-top: 20px; flex:100%;} #dfyForm #donationForm form #submitButton { width: 100% !important;} } #dfyForm #donationForm form section.contact .col-md-12 label input { position: absolute; left: -4px;} #dfyForm #donationForm form .debit-details .row {display:inline !important;} #dfyForm #donationForm form .debit-details p {color:#000000;} #dfyForm #donationForm form #paypal-button-container, #dfyForm #donationForm form #applePayDivId {width:90%; text-align:left;} #dfyForm #donationForm form .giftaid h3 {padding:0;} #dfyForm #donationForm form .giftaid .heading .col-md-4 {width:75%;} #dfyForm #donationForm form .giftaid p span {font-weight:bold;} #dfyForm #donationForm form .giftaid p em {font-style:normal; text-decoration:underline; cursor:pointer;} #dfyForm #donationForm #PaypalErrorContainer {color:red; font-weight:14px; margin-bottom:12px;} #dfyForm #donationForm form section .customQs {margin:0 0 40px 0;} #dfyForm #donationForm form .commsgroup div span:first-child {width:490px;} #dfyForm #donationForm form #fullAddress {color:green; padding: 0 0 20px 25px;} #dfyForm #donationForm form #fullAddress.active:before {content:"\2713"; font-size: 25px; color: green; margin: 0 12px;} #dfyForm #donationForm form #submitButton{color: #fff!important; width: fit-content; border-radius:999em!important; background: var(--pink); transition: all 0.3s; list-style-type: none; padding: 13px 50px; text-align: center; cursor: pointer;} #dfyForm #donationForm form #submitButton:hover { background: var(--purple); color:#ffffff!important;} #dfyForm #donationForm form .button-pair span{position:relative; border-radius: 4px; color:#ffffff; cursor: pointer; min-width:100px; padding: .7em .3em .7em 2.5em; margin: 0px; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; text-align: left;} #dfyForm #donationForm form .button-pair span:before {content:"";height: 25px; width: 25px; background-color: #fff; border: 1px solid #e2e5e8; display: block; position: absolute; border-radius: 4px; left: 7px; top: 10px;} #dfyForm #donationForm form .button-pair span.active:before {content:"\2713"; font-weight:bold; color:#000000; text-align:center;} #dfyForm #donationForm form .button-pair span:hover { background:rgba(var(--bs-link-color-rgb), 1); color:#ffffff;} #dfyForm #donationForm form .button-pair {flex-wrap: wrap; display: flex; align-items: center;} #dfyForm #donationForm #ErrorContainer{ flex: 0 0 100%; font-size:16px; color: #fb5b72; ;padding: 40px 0 0 0; line-height: 22px; } #dfyForm #donationForm #ErrorContainer #Errors {} #dfyForm #donationForm form .error {box-shadow:none; color: var(--pink);} #dfyForm #donationForm #ErrorContainer p {display:none;} #dfyForm .dd img { opacity: 0.8;} #donationComplete {background:#f0f0f0; border-radius:32px; margin: 0 auto 80px auto;} #donationComplete i.fa-brands { color: #293A70;} #donationComplete .left-column {text-align:center;} #donationComplete .justify-content-lg-start, #donationComplete .justify-content-lg-start p { justify-content: flex-start !important; display: flex; gap: 5px !important; } @media screen and (max-width: 1280px) { #dfy-footer-wrapper .footer-inner .link-wrapper span { flex: 1 0 100%;} #dfy-footer-wrapper .footer-inner .link-wrapper { flex-flow: row wrap; gap: 5px; } } @media screen and (max-width: 880px) { #dfy #button img { max-width: 300px;} } @media screen and (max-width: 767px) { #dfy .payment-options { flex-flow: column; } #dfy-footer-wrapper { flex-wrap: wrap;} #dfy .container { padding: 40px 30px; } #dfy-footer-bottom { flex-wrap: wrap; } #dfy-footer-wrapper .footer-inner { flex: 100%; padding: 40px 30px; } #dfy .giftaid .giftaid-title { flex-wrap: wrap; flex-flow: column-reverse; } #dfy .two-column { grid-template-columns: 1fr;} } .container { margin: 20px auto 0; width: 100%; max-width: 1090px; background-color: var(--panel-grey); padding: 40px; } .appeal-grids { margin-top: 40px; display: flex; gap: 40px; flex-flow: row wrap; } .appeal-grids--item {flex: 0 1 30%; background-color: var(--purple); display: flex; flex-flow: column;} .appeal-grids--item-img {overflow: hidden;} .appeal-grids--item-img img {width: 100%; object-fit: cover; object-position: center; display: block; height: 200px;} .appeal-grids--item-inner {color: var(--white); padding: 25px; font-size: 14px;display: flex; flex-flow: column; justify-content: space-between; flex-grow: 1;} .appeal-grids--item-inner h2 {color: #fff; font-size: 30px; margin-top: 10px;} .appeal-grids--item-inner div {flex-grow: 1;} .appeal-grids--item .button-primary {color: #fff; border-radius: 999em; background: var(--pink); transition: all 0.3s; list-style-type: none; padding: 15px 50px; text-align: center; cursor: pointer; text-decoration: none; display: inline-block;margin-top: 20px;} .appeal-grids--item .button-primary:hover { background: var(--orange); } @media screen and (max-width: 767px) { .appeal-grids--item {flex: 0 1 46%;} } @media screen and (max-width: 595px) { .appeal-grids--item {flex: 1 100%;} #dfyForm #donationForm form input, #dfyForm #donationForm form select, #dfyForm #donationForm form textarea, #dfyForm #donationForm form select, .inputFix {width:96%; margin:0 4px 0 4px !important} #dfy-footer-bottom {padding: 40px 30px; margin:0;} }