:root { --palegrey: #f0f0f0; --orange: #f25212; --lime: #8cc63e; --input: #fff; } .d-none { display: none !important;} .text-center {text-align:center;} .carousel { position: relative; flex-wrap: wrap; display: flex;} .carousel.pointer-event {touch-action: pan-y;} .carousel-inner {position: relative;width: 100%; overflow: clip; flex: 0 0 490px; padding: 0 4px;} .carousel-inner::after { display: block; clear: both; content: "";} .carousel-item { position: relative; display: none; float: left; width: 100%; margin-right: -100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform 0.6s ease-in-out;} .carousel-item-next, .carousel-item-prev, .carousel-item.active {display: block;} .active.carousel-item-end, .carousel-item-next:not(.carousel-item-start) { transform: translateX(100%);} .active.carousel-item-start, .carousel-item-prev:not(.carousel-item-end) { transform: translateX(-100%);} @media (prefers-reduced-motion: reduce) { .carousel-item {transition: none;} } .carousel-indicators { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; justify-content: center; padding: 0; margin-right: 15%; margin-bottom: 1rem; margin-left: 15%;} .carousel-indicators [data-bs-target] { box-sizing: content-box; flex: 0 1 auto; width: 30px; height: 3px; padding: 0; margin-right: 3px; margin-left: 3px; text-indent: -999px; cursor: pointer; background-color: var(--bs-carousel-indicator-active-bg); background-clip: padding-box; border: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; opacity: 0.5; transition: opacity 0.6s ease;} @media (prefers-reduced-motion: reduce) { .carousel-indicators [data-bs-target] {transition: none;} } .carousel-indicators .active { opacity: 1;} #donorfy-enabled-page .c__hero { min-height: 260px; background-image: none; background-color: var(--orange);} .donorfyView1, .donorfyView2{background-color: var(--orange); padding: 0 0 60px 0;} #dfy-form-steps { flex: 0 0 70px; flex-wrap: wrap; padding: 29px 0 0 0;} #dfy li:before { display: none; content: "";} #dfy { color:#000; font-size:20px; padding: 60px 60px 60px 90px; display: flex; position: relative; margin-left: calc(-50vw + 50%); width: 100vw; justify-content: flex-start; } #dfy li {list-style-type:none;} #dfy #dfyDrawing { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; z-index: 0; overflow: hidden; } #dfy #dfyDrawing img { width: 100%; height: 100%; object-fit: cover; display: block; } #dfy h2 { font-size:22px; margin:20px 0;} #dfy .dfy-top-container {background:var(--palegrey); position:relative; z-index: 1;} #dfy .dfy-top-container .controls { padding:0px 0px 25px 0px; max-width: 330px;} #dfy .dfy-top-container .controls ul{display:flex; margin:0; padding:0;justify-content: center; gap:2%;} #dfy .dfy-top-container .controls ul li { margin:0;font-size: 30px; text-align: center; cursor:pointer; display: flex; flex-wrap: wrap; flex-direction: column; position:relative; z-index: 5; padding: 0; flex: 0 0 48.88%;} #dfy .dfy-top-container .controls ul li span { color: #000; font-weight: 700; font-size: 22px; background: transparent; padding: 15px 15px; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; border: #383838 2px solid;} #dfy .dfy-top-container .controls ul li:hover span {background: #d4d4d4;} #dfy .dfy-top-container .controls ul li.active span {opacity:1;color:#ffffff; border: var(--lime) 2px solid; background: var(--lime); } #dfy .dfy-top-container .controls ul li.active { position:relative;} #dfy .dfy-top-container .donateFrame { display:none; flex-wrap:wrap;} #dfy .dfy-top-container .donateFrame.active {display:flex;} #dfy .dfy-top-container p { margin: 0 0 15px 0;} #dfy .donateFrame-oneoff .donateRight ul.options li{padding: 18px 0;} #dfy .form-check { padding: 0 25px 5px;} #dfy .form-check label{font-size: 20px; line-height: 32px; font-weight: 600;} #dfy .form-check input {background-color:var(--input); position: relative; top: 4px; margin: 0 10px 0 0;} #dfy textarea { width: 100%;} #dfy .donateRight { flex: 0 0 100%;} #dfy .donateRight ul.options li { position: relative; margin: 0 0 15px 0; flex: 33%; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; line-height: 26px; text-transform: none; outline: 0; cursor: pointer; color: #000; font-weight: 700; font-size: 22px; background: transparent; padding: 15px 15px; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; border: #383838 2px solid;} #dfy .donateRight ul.options li.active {color:#ffffff; background:var(--lime); border: var(--lime) 2px solid;} #dfy .donateRight ul.options { display: flex; margin: 0; padding: 0; justify-content: center; gap: 15px; } #dfy .donateRight ul.options li.active:hover, #dfy .donateRight ul.options li:hover {background: #d4d4d4;} #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: 22px;font-size: 22px;} #dfy .donateLeft ul li { display: none; padding: 0; color: #000;} #dfy .donateLeft ul li.active { display: flex;} #dfy .donateLeft > span {background:var(--palegrey); flex: 0 0 32%; justify-content: right; align-items: center; display: flex; position:relative;} #dfy .donateLeft ul { margin:0; flex: 0 0 68%; padding:0;align-content: center;} #dfy #dfy-custom-options { margin: 0 0 12px 0;} #dfy .summary { display: flex; align-items: center;} #dfy .summary img { width: 235px; height: 155px; object-fit: cover; flex-shrink: 0; margin-right: 16px; display: block; } #dfy .summary p { margin: 0; text-align: left; font-size: 17px;} #dfy .donateLeft .button {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(--orange);} #dfy .donateLeft .button:hover{background:#ffffff; color:var(--palegrey);} #dfy .donateLeft .button em {font-style:normal; } #dfy .inlineimgWrap {position: absolute; right: 20px; top: -25px;} #dfy .inlineimgWrap img {margin:0 auto; max-width: 200px;} #dfy ul.imageVars { display: none;} #dfy .dfy-select { display: inline-block; line-height: 26px; padding: .8em 1.2em!important; text-transform: none; outline: 0; background-color: var(--input)!important; border-radius: 30px; -webkit-transition: .2s; transition: .2s; border: 2px solid #909090 !important; min-width: 160px; color:#000;} #dfy .controlsRow ul {padding:0; display: flex; flex-wrap: wrap;} #dfy .controlsRow .customSelect {max-width: 87%; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 4px 0 0;} #dfy .controlsRow .customSelect label{color:#000; font-size:18px; text-align: left; line-height:24px; font-weight:600; flex: 0 0 60%; margin: 0;} #dfy .controlsRow .customSelect span {display:flex; flex: 0 0 33%;} #dfy .controlsRow .customSelect span:before { position: relative; left: -14px; top: 10px; font-size: 25px; content: "\00A3"; color: #000; font-style: normal; font-weight: 600;} #dfy .controlsRow .customSelect input { display: inline-block; line-height: 26px; padding: .8em 1.2em; text-align: center; text-transform: none; outline: 0; background:var(--input); border-radius: 30px; -webkit-transition: .2s; transition: .2s; cursor: text; min-width: 220px; font-weight: 700; border: 2px solid #909090 !important;} #dfy .controlsRow { width: 100%;} #dfy #dfy-form-navigation { display: flex; flex-wrap: wrap; padding: 0 65px 65px 70px; justify-content:center; gap: 5px;} #donation-screens.slide-1 #dfy-prev { display: none !important; } #dfy-form-navigation button { flex: 0 0 40%; box-sizing: border-box; } select#reason { width: 100% !important;} #dfy form #giftAid p {margin: 15px 0; text-align: left; line-height: 25px;} #dfy .gagroup > div {display: flex;flex-wrap: wrap; padding: 0 22px;} #dfy .gagroup input {appearance: none; -webkit-appearance: none; background: var(--input); border-radius: unset; border: 2px solid #383838 !important; margin: 8px 18px 0 0; position: relative; top: 5px; width: 25px; height: 25px; flex-shrink: 0; cursor: pointer;} #dfy .gagroup input:checked {background: var(--orange); border-color: var(--orange) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' d='M3 8l3.5 3.5L13 4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 16px 16px;} #dfy .gagroup label{font-weight: bold;} #dfy .gagroup { padding: 20px 25px 20px 0; background: var(--lime); margin: 12px 0;} #dfy .bullet, #dfy .gagroup > div.bullet { font-size: 14px; text-align: left; margin: 0 0 8px 0; padding: 0 0 0 23px; display: inline-block; position:relative;} #dfy .bullet::before {content: ""; display: block; height: 10px; width: 10px; background: var(--lime); position: absolute; left: 1px; top: 5px; border-radius: 50%;} #dfy #persondetails .dfy-text-16 { padding: 0;} #dfy #persondetails .spacer-16 { height: 9px;} #dfy .required-group , #dfy #persondetails .row { justify-content: space-between; display: flex;} #dfy #persondetails .row .required-group { padding: 0px;} #dfy #persondetails .row .col-md-6 { display: flex; align-items: center; flex: 0 0 48% !important; flex-wrap: wrap;} #dfy #persondetails #personTitle .col-md-4 {flex: 0 0 100%;} #dfy #persondetails #personTitle {flex-wrap:wrap;} #dfy #persondetails #orgNameRow .col-md-8 {flex-wrap:wrap;} #dfy input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]), #dfy select, #dfy textarea{font-size: .8em; height:auto; line-height: 26px; padding: .8em 1.2em; text-transform: none; outline: 0; background: var(--input); border-radius: 30px; -webkit-transition: .2s; transition: .2s; cursor: text; min-width: 220px; font-weight: 700; border: 2px solid #909090 !important;} #dfy #PleaseWait{text-align: center; color: var(--lime); font-size: 14px; margin: 10px 0 0 0;} #dfy #inmem .required-group {display: flex; align-items: center; flex: 0 0 48% !important; flex-wrap: wrap; padding: 0;} #dfy #inmem .dfy-text-16 { font-weight: bold; padding: 0;} #dfy #school .required-group {display: flex; align-items: center; flex: 0 0 48% !important; flex-wrap: wrap; padding: 0;} #dfy #school .dfy-text-16 { font-weight: bold; padding: 0;} #dfy #school textarea {border-radius:unset; margin:12px 0 0 0;} #dfy #fundraising .required-group {display: flex; align-items: center; flex: 0 0 48% !important; flex-wrap: wrap; padding: 0;} #dfy #fundraising .dfy-text-16 { font-weight: bold; padding: 0;} #dfy #fundraising textarea {border-radius:unset; margin:12px 0 0 0;} #dfy .commsgroup > div {display: flex;flex-wrap: wrap;} #dfy .costsgroup > div {display: flex;flex-wrap: wrap;} #dfy .commsgroup input, #dfy .costsgroup input {appearance: none; -webkit-appearance: none; background: var(--input); border-radius: unset; border: 2px solid #909090 !important; margin: 8px 18px 0 0; position: relative; top: -12px; flex: 0 0 25px; width: 25px; height: 25px; cursor: pointer;} #dfy .commsgroup input:checked, #dfy .costsgroup input:checked {background: var(--lime); border-color: var(--lime) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' d='M3 8l3.5 3.5L13 4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 16px 16px;} #dfy .gagroup input:focus-visible, #dfy .commsgroup input:focus-visible, #dfy .costsgroup input:focus-visible { outline: 3px solid #000; outline-offset: 2px; } #dfy input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):focus-visible, #dfy select:focus-visible, #dfy textarea:focus-visible { outline: 3px solid #000; outline-offset: 2px; } #dfy .dfyButton:focus-visible { outline: 3px solid #000; outline-offset: 2px; } #dfy .controls li:focus-visible, #dfy .option:focus-visible { outline: 3px solid #000; outline-offset: 2px; } #dfy .commsgroup label, #dfy .costsgroup label{font-weight: bold; flex: 0 0 80%;} #dfy .costsgroup { margin: 15px 0;} #dfy #paymentForm { padding: 35px 0;} #dfy #paymentForm .inputFix {width: 100%; font-size: .8em; line-height: 26px; padding: .8em 1.2em; text-transform: none; outline: 0; background: var(--input); border-radius: 0; -webkit-transition: .2s; transition: .2s; cursor: text; min-width: 220px; font-weight: 700; border: 2px solid #909090 !important;} #dfy .paymentFields .row { justify-content: space-between; display: flex; width: 100%;} #dfy small {padding:0 25px; display:block; font-size: 14px;} #dfy #commsPrefs small a { text-decoration: underline;} #dfy #commsPrefs small a:hover { text-decoration: none;} #dfy #commsPrefs a {color:var(--lime);} #dfy #paymentForm .paymentFieldsinner {display: flex; flex-wrap: wrap;} #dfy #paymentForm .paymentFieldsinner .col-md-6 {display: flex; align-items: center; flex: 0 0 48% !important; flex-wrap: wrap;} #dfy #dfy-widget-navigation { display: flex; flex-wrap: wrap; justify-content:start; gap: 5px; } #dfy-widget-navigation .summary { flex: 0 0 100%; padding: 15px; position: relative; background: var(--lime); text-align: center; margin: 0 0 30px 0; color: #fff; } #dfy-widget-navigation .summary span { margin: 0 0 0 7px;} #dfy-widget-navigation .submit-button-wrapper { box-sizing: border-box; display: flex; justify-content: center; } #dfy-widget-navigation .submit-button-wrapper #submitButton { width: 100%; } #dfy-widget-navigation button { box-sizing: border-box; opacity: 1; transition: all 0.2s; } #dfy .dfy-text-16.text-center.covercosts { padding: 0; text-align: left; margin: -14px 0 0 0;} #dfy .paymentFieldsinner .dfy-text-16 { padding: 0;} #dfy .paymentFields .col-md-8 { width: 100%; display: flex; align-items: center; flex: 0 0 100% !important; flex-wrap: wrap;} #dfy .paymentFields .col-md-8 .inputFix { flex: 0 0 100%;} #dfy form .submit-button-wrapper { text-align:center;position: relative; gap: 2%;} #dfy #ErrorContainer {font-size: 14px; margin-bottom: 12px; color: red; background:transparent; padding: 6px !important; line-height: 17px; flex: 0 0 100%; border-radius: 4px; text-align: left; margin-top: 12px;} .donorfyView2 {flex-wrap: wrap; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; } .donorfyView2 .fuss { width: 100vw; height: 400px; /* overflow: hidden; */ position: absolute; } .donorfyView2 .fuss .set { display: flex; width: 100vw; height: 100%; position: absolute; top: 0;} .donorfyView2 .fuss .set .child { flex: 1; margin: 0 10px; } .donorfyView2 .fuss .set .child.var1:before{background-image:url('../images/Welcoming_Flower_2.png'); display:block; height:550px; content:""; background-size: contain; background-repeat: no-repeat; background-position: center; transform:scale(1.5); position: relative; top: -170px;} .donorfyView2 .fuss .set .child.var2:before{background-image:url('../images/Healing_Petal_2.png'); display:block; height:135px; content:""; background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; bottom: -240px;} .donorfyView2 .fuss .set .child.var3:before{background-image:url('../images/Natural_Leaf_2.png'); display:block; height:160px; content:""; background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; position: relative; top: -140px; right: -225px;} .donorfyView2 .fuss .set .child.var4:before{background-image:url('../images/Revitalising_Leaf_1.png'); display:block; height:85px; content:""; background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; position: relative; bottom: -290px; right: -180px;} .donorfyView2 .fuss .set .child.var5:before{background-image:url('../images/Stimulating_Heart.png'); display:block; height:350px; content:""; background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; width: 410px; top: -40px; left: -30px;} .donorfyView2 .fuss .set .child.var6:before{background-image:url('../images/Healing_Petal_1.png'); display:block; height:170px; content:""; background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; top: 220px; left: -110px; transform: rotate(22deg);} #dfy .dfy-donation-amount-btn:hover { background-color: #2e396066 !important; transform: scale(1.05);} #dfy .dfy-donation-amount-btn:active { transform: scale(1.05);} #dfy .dfy-donation-amount-btn.selected { background-color: #2e3960CC !important; color: #FFFFFF;} .dfyText60 { color: #2e3960AB;} .dfyButton.btn-primary { background-color: var(--orange); color: var(--palegrey); border: 0; font-size: 20px; padding: 15px 25px; line-height: 22px; font-weight: 900; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; cursor:pointer;} .dfyButton.btn-secondary { text-align: center; line-height: 26px; outline: 0; cursor: pointer; color: #000; font-weight: 700; font-size: 20px; background: transparent; padding: 15px 25px; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; border: #383838 2px solid;} .dfyButton:active { background-color: #2e396099 !important;} .dfyButton.btn-primary:hover { background-color: var(--lime); } .dfyButton.btn-secondary:hover { background-color: #d4d4d4; } #dfy .dfy-input-text,#dfy .dfy-select,#card-element { background-color: #2e39600F; border: 1px solid #2e396033;} .perc-outside,.perc-outside-pad { color: #2e3960; left: 0%; padding-left: 16px; font-weight: 600; position: absolute;} .perc-outside-pad { left: 0%; padding-left: 34px;} #dfy-other-amount-container { border: 1px solid #2e396033; background-color: #2e39601A;} #dfy-other-amount-currency { background-color: #2e396033;} .gift-aid-logo { position: relative; top: 11px; right: 11px;} #dfy .dfy-checkbox,#dfy .dfy-checkbox-sm { accent-color: #2e3960;} #payment-form.processing .loader,#payment-form.processing .loader:after { border: 5px solid #2e3960;} #dfy-amount-reminder strong { color: #2e3960 !important;} #dfy .dfy-text-bold, strong { font-weight: 600;} #dfy .dfy-text-nor { font-weight: 400;} #dfy .dfy-text-14 { font-size: 0.875rem; line-height: 20px;} #dfy .dfy-text-16 {display: block; font-size:18px; padding: 0 25px; line-height: 24px;} #dfy .dfy-text-18 { font-size: 1.125rem; line-height: 28px;} #dfy .shortfield { max-width: 200px;} /* SPACERS */ .spacer-4, .spacer-8, .spacer-12, .spacer-16, .spacer-24, .spacer-32, .spacer-40, .spacer-48, .spacer-56, .spacer-64, .spacer-72, .spacer-80, .spacer-88, .spacer-96, .spacer-104, .spacer-112, .spacer-120, .spacer-128, .spacer-xs-0, .spacer-xs-4, .spacer-xs-8, .spacer-xs-12, .spacer-xs-16, .spacer-xs-24, .spacer-xs-32, .spacer-xs-40, .spacer-xs-48, .spacer-xs-56, .spacer-xs-64, .spacer-xs-72, .spacer-xs-80, .spacer-xs-88, .spacer-xs-96, .spacer-xs-104, .spacer-xs-112, .spacer-xs-120, .spacer-xs-128 { display: block; width: 100%; padding: 0; margin: 0; flex: 0 0 100%;} .spacer-0 { height: 0px } .spacer-4 { height: 4px } .spacer-8 { height: 8px } .spacer-12 { height: 12px } .spacer-16 { height: 16px } .spacer-24 { height: 24px } .spacer-32 { height: 32px } .spacer-40 { height: 40px } .spacer-48 { height: 48px } .spacer-56 { height: 56px } .spacer-64 { height: 64px } .spacer-72 { height: 72px } .spacer-80 { height: 80px } .spacer-88 { height: 88px } .spacer-96 { height: 96px } .spacer-104 { height: 104px } .spacer-112 { height: 112px } .spacer-120 { height: 120px } .spacer-128 { height: 128px } @media (max-width: 767px), (max-height: 499px) { .spacer-xs-0 { height: 0px !important } .spacer-xs-4 { height: 4px !important } .spacer-xs-8 { height: 8px !important } .spacer-xs-8 { height: 8px !important } .spacer-xs-12 { height: 12px !important } .spacer-xs-16 { height: 16px !important } .spacer-xs-24 { height: 24px !important } .spacer-xs-32 { height: 32px !important } .spacer-xs-40 { height: 40px !important } .spacer-xs-48 { height: 48px !important } .spacer-xs-56 { height: 56px !important } .spacer-xs-64 { height: 64px !important } .spacer-xs-72 { height: 72px !important } .spacer-xs-80 { height: 80px !important } .spacer-xs-88 { height: 88px !important } .spacer-xs-96 { height: 96px !important } .spacer-xs-104 { height: 104px !important } .spacer-xs-112 { height: 112px !important } .spacer-xs-120 { height: 120px !important } .spacer-xs-128 { height: 128px !important } } #dfy .dfy-top-container { max-width: 620px; width:100%; height: auto; transition: all 0.2s; padding: 40px 0 0 0;} #dfy .required-group label:first-of-type:after { content:'*'; color:red; margin-left:4px; font-size: 0.75rem; vertical-align: super;} #dfy input::placeholder, #dfy textarea::placeholder { color: var(--palegrey); opacity: 1; /* necessary in Firefox */ } #dfy ::-webkit-input-placeholder { /* Chrome, Safari, Opera */ color: var(--palegrey); } #dfy input::-moz-placeholder, #dfy textarea::-moz-placeholder { color: var(--palegrey); opacity: 1; } #dfy .dfy-input-group { margin: 16px 0;} #dfy .dfy-input-group label { padding-bottom:4px;} #dfy .dfy-input-group label.error-label { font-weight:400; font-size:0.75rem;} #dfy .dfy-input-group .form-text { margin-bottom:16px} #dfy .dfy-input-group .form-control,#dfy .dfy-input-text, #dfy .dfy-select { padding: 0.75rem;} #dfy .dfy-input-group .form-control::placeholder,#dfy .dfy-input-text::placeholder, #dfy .dfy-select::placeholder { color:#B6B5B9;} #card-element { padding: 16px; border-radius: 4px; background-color: #f1f1f1;} #dfy .dfy-error-text {font-size: 14px; background: transparent; color: red; padding: 6px !important; line-height: 17px; flex: 0 0 100%; border-radius: 4px; text-align: left;} .dfyButton:hover { background-color:#fff;} #target-wrapper { position:relative;} #target { padding-left:2rem;} #target-wrapper:before { position:absolute; display:block; width:20px; height:20px; line-height:1; color:#aaaaaa; font-size:1.125rem; top:calc(50% - 9px); left:12px; content: '\00A3'; } .carousel-indicators { position: relative; right: 0; bottom: 0; left: 0; z-index: 2; padding: 0; margin-right: 0%; margin-bottom: 1rem; margin-left: 0%; font-size:0.75rem;} .carousel-item { transition: transform 0.3s ease-in-out;} .carousel-item label { margin-bottom:8px;} .carousel-indicators [data-bs-target] { box-sizing: border-box; display:block; flex: auto; width: auto; height: auto; padding: 0; margin-right: 0; margin-left: 0; text-indent: 0; cursor: pointer; background-color: transparent; background-clip: none; border: 0; border-top: none; border-bottom: none; opacity: 0.4; transition: opacity 0.3s ease;} .carousel-indicators [data-bs-target].active { opacity: 1;} .carousel-indicators button { width:100px;} #dfy-form-navigation button,#form-progress button { opacity: 1; transition: all 0.2s;} #payment-form h1 { padding:0 12px;} #payment-form hr { margin-top:24px;} #dfy .dfy-heading-24 { font-size:1.5rem; line-height:34px; font-weight:600;} #dfy .dfy-heading-22 {font-size: 30px; line-height: 32px; font-weight: 600; color: #000; text-align: left; font-family: 'proxima-nova';} #dfy .dfy-heading-h3 {font-size: 25px; line-height: 32px; font-weight: 600; color: #000; text-align: left; font-family: 'proxima-nova';} .btn-reset { all: unset;} #dfy-donation-amounts-container { gap:10px;} #dfy .dfy-donation-amount-btn { transition: all 0.2s; width:25%; padding:12px 12px; font-size: 1.125rem; font-weight: 600; text-align: center; border-radius:6px; cursor:pointer;} #dfy .dfy-form-step-blob { width: 20px; height: 20px; border-radius: 24px; background-color: #d4d4d4; display: flex; justify-content:center; align-items:center; transition: all 0.2s; position:relative; margin: 0 auto 12px;} #dfy .dfy-form-step.active .dfy-form-step-blob { background-color: var(--lime);} #dfy .dfy-input-text { padding: 0.75em 1em; border: none;background-color: var(--input);} #dfy .dfy-checkbox { width: 36px; height: 36px;} #dfy .dfy-checkbox-sm { width: 26px; height: 26px;} #dfy .dfy-check { gap:8px} @media only screen and (max-width: 1280px) { #dfy .controlsRow .customSelect span::before { position: relative; left: -6px;} #dfy .controlsRow .customSelect label {flex: 0 0 50%; text-align: left;} #dfy .donateRight ul.options { max-width: 100%;} #dfy .controlsRow .customSelect {max-width: unset;} #dfy .donateLeft .button {font-size: 21px;max-width: 124px;} #dfy .donateLeft .button em {font-style:normal; display: block;} } @media only screen and (max-width: 1050px) { #dfy {flex-wrap:wrap;padding: 0px 0px 60px 0px;} #dfy #dfyDrawing { position: static;flex: 0 0 100%;transform: unset;} #dfy #dfyDrawing img {max-height: 550px;} #dfy .dfy-top-container {margin: -220px auto 0 auto;} } @media only screen and (max-width: 1024px) { #dfy .dfy-top-container {flex: 0 0 600px;} #donorfy-enabled-page .c__hero .c__hero__content {height: auto;} } @media only screen and (max-width: 895px) { #dfy {flex-wrap: wrap;} #dfy .dfy-top-container .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%;} #dfy .donateLeft ul li {position: relative; justify-content: center; text-align: center; flex-wrap: wrap;} #dfy .donateLeft ul { overflow-x: clip;} #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(--palegrey) 0px 0px 0px 7px; position: relative; display: block; margin: 0 auto;} #dfy .donateLeft .button.button:before {top: 19px; left: 95%;} .donorfyView2 .fuss .set { display: flex; width: 200vw; height: 100%; position: absolute; } .donorfyView2 .fuss { width: 200vw;} } @media(min-width:768px) { #dfy .dfy-form-step { font-size: 0.875rem; } } @media only screen and (max-width: 660px) { #dfy #paymentForm .paymentFieldsinner .col-md-6 { flex: 0 0 100% !important;} #dfy .costsgroup { margin: 15px 0; padding: 0!important;} #dfy .dfy-text-16 {padding:0;} #dfy .costsgroup > div { display: flex; flex-wrap: nowrap;} #dfy .commsgroup label {flex: unset;} #dfy #dfy-form-navigation{padding: 0;} #dfy #dfy-widget-navigation{padding: 0;} #dfy .inputFix { width: 100%;} #dfy .dfy-top-container { flex: 0 0 420px;padding: 0 25px 35px 25px;} #dfy-form-steps { flex: 0 0 100%; flex-wrap: wrap; padding: 29px 0 0 0; display: flex;} #dfy .dfy-form-step-blob {margin: 0 auto;width: 15px; height: 15px;} .dfy-form-step { margin: 0 4px 0 0;} .carousel-inner {flex: 0 0 100%;} #dfy .dfy-top-container .controls {max-width:unset;} #dfy .dfy-heading-22 { font-size: 25px;} #dfy .dfy-heading-h3 { font-size: 20px; line-height: 26px;} #dfy .summary {flex-wrap: wrap;} #dfy .summary img {margin: 0 auto 20px auto;} #dfy .controlsRow ul {padding:0; margin: 0;} #dfy .donateLeft { margin: 10px 0 15px 0; } #dfy .controlsRow .customSelect > span {flex: 0 0 50%;} #dfy .controlsRow .customSelect {justify-content: center;} .gift-aid-logo { position: relative; top: 29px; right: -29px; width: 100px;} .dd-logo { position: relative; top: 29px; right: -29px; width: 100px;} #dfy .gagroup label { font-weight: bold; text-align: left; display: flex; margin: 0;} #dfy #persondetails .row .col-md-6 { flex: 0 0 100% !important;} #dfy #persondetails .row { flex-wrap: wrap;} #dfy .paymentFields .row {flex-wrap: wrap;} #dfy #paymentForm .paymentFieldsinner .col-md-6 {margin: 0 0 15px 0;} #dfy .dfy-text-16.text-center.covercosts {margin:0;} #dfy .costsgroup input {top: -4px;} } @media only screen and (max-width: 575px) { #dfy .dfy-top-container .controls li.active:before {right: 33px;} #dfy .dfy-top-container .controls ul, #dfy .donateRight ul {flex-wrap:wrap; } #dfy .dfy-top-container .controls ul li div, #dfy .dfy-top-container .controls ul li p {display:none;} #dfy .dfy-top-container .controls ul li.active { background: var(--palegrey);} #dfy .controlsRow .customSelect { flex-wrap: wrap; padding: 10px 10px 30px 10px; } #dfy .donateFrame h3 {padding: 20px 10px;} #dfy .controlsRow .customSelect input {margin:0 20px;} #dfy .controlsRow .customSelect {flex: unset;} #dfy .donateRight ul.options li {flex: 100%; padding: 10px 0; margin: 0;} #dfy .donateRight .controlsRow { margin: 20px 0 0 0;} #dfy .controlsRow .customSelect { padding: 10px 10px 15px 10px; } #dfy .controlsRow .customSelect > span {margin: 12px auto 0 auto; flex: 0 0 60%;} #dfy .gagroup label { font-weight: bold; text-align: left; display: flex; align-items: baseline;} #dfy .gagroup label input {flex: 0 0 auto;} #dfy #persondetails .row .col-md-6 {flex: 0 0 100% !important;} #dfy .required-group, #dfy #persondetails .row {flex-wrap:wrap;} .donorfyView2 .fuss .set .child {flex: 0 0 33%} .donorfyView2 .fuss .set { display: flex; width: 200vw; height: 100%; position: absolute; top: -230px; transform:scale(0.5);} .donorfyView2 .fuss { width: 200vw;} #dfy .summary img { width: 100%; height: 225px;} } @media only screen and (max-width: 460px) { #donorfy-enabled-page .c__hero { min-height: unset; } #dfy .dfy-top-container .controls ul li, #dfy .donateRight ul li {flex:0 0 100%;} #dfy #DirectDebitForm:before, #dfy #CreditCardForm:before {display:none;} #dfy .dfy-top-container .controls { padding: 0px 0px 5px 0px;} #dfy .controlsRow .customSelect label, #dfy .dfy-heading-22, #dfy .gagroup label {font-size:20px;} #dfy .dfy-top-container { flex: 0 0 100%; margin: -130px auto 0 auto; } #dfy .dfy-top-container .controls ul{gap: 15px;} #dfy .dfy-top-container .controls ul { flex-wrap: wrap; margin: 0 0 12px 0;} } @media(max-width:389px) { #dfy .dfy-donation-amount-btn { font-size: 1rem; } } @media (max-width: 359px) { .carousel-item { padding: 0px; } }