:root {
    --pink: #e50071;
    --yellow: #fdc300;
    --blue: #0098b9;
    --green: #009e4d;
    --grey: #555554;
    --rgb-grey: 85, 85, 84;
    --white: #fff;
    --bg: #fff;
    --bgTint: #f5f6f6;
    --bgTintDark: #ddd;
    --bgInverse: #111;
    --bgInverse-2: #111;
    --textColor: #111;
    --textColorInverse: #fff;
    --textColorInverse-2: #fff;
    --linkText: #111;
    --focusText: #111;
    --errorText: #d4351c;
}

@media(prefers-color-scheme:dark) {
    :root {
        --pink: #ed4c9c;
        --yellow: #fedb66;
        --blue: #66c1d5;
        --green: #99d8b8;
        --rgb-grey: 221, 221, 221;
        --grey: #ddd;
        --bg: #111;
        --bgTint: #1d1d1d;
        --bgTintDark: #292929;
        --bgInverse: #fff;
        --bgInverse-2: #292929;
        --textColor: #fff;
        --textColorInverse: #111;
        --textColorInverse-2: #fff;
        --linkText: #fff;
        --focusText: #111;
        --errorText: #e96753;
    }
}

.dark-bg {
    background-color: var(--bgInverse-2);
    color: var(--textColorInverse-2);
}

html {
    font-size: 16px;
    font-family: Ingra, arial, sans-serif;
    line-height: 1.5;
}

body {
    background-color: var(--bg);
    margin: 0;
    scroll-behavior: smooth;
}


/*--------------Utility--------------------*/

.container {
    min-height: 100vh;
    display:grid;
    grid-template-rows: auto 1fr auto;
}

.skip-link {
    position: absolute;
    top: -200px;
    left: 0;
    font-weight: 700;
    padding: 10px 40px;
    width: 100%
}

.sr-only {
    border: 0;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

body:not(#en__pagebuilder) .spa-hidden {
    display: none;
}

div {
    overflow-wrap: break-word;
}



/*-------------------Header-----------------------*/

.rnib header.header {
    background-color: var(--bg);
    border-bottom: 1px solid var(--bgTintDark);
}

.header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__logo {
    max-width: 130px;
    height: auto;
}

@media screen and (max-width:600px) {
    .header__logo{
        max-width: 100px;
    }
}

.header__logo--desktop-light {
    display: inline-block;
}

.header__logo--desktop-dark, .header__logo--mobile-light, .header__logo--mobile-dark {
    display: none;
}


@media(prefers-color-scheme: dark) {
    .header__logo--desktop-dark {
        display: inline-block;
    }

    .header__logo--desktop-light {
        display: none;
    }
    
}

@media only screen and (max-width: 600px) {
    .header__logo--desktop-dark, .header__logo--desktop-light {
        display: none;
    }

    .header__logo--mobile-light {
        display: inline-block;
    }
}

@media only screen and (prefers-color-scheme: dark) and (max-width: 600px) {
    .header__logo--mobile-dark {
        display: inline-block;
    }

    .header__logo--mobile-light {
        display: none;
    }
    
}

.header__container {
    padding: 30px 40px 20px;
}

p.secure-donation {
    color: var(--grey);
    display: flex;
    align-items: center;
}

p.secure-donation::before {
    content: url(https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/1670/padlock.svg?v=1766156385000);
    display: flex;
    align-items: center;
    padding-right: 0.5rem;
}

@media(prefers-color-scheme: dark) {
    p.secure-donation {
        color: #fff;
    }
    
    p.secure-donation::before {
    content: url(https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/1670/padlock-light.svg?v=1766156441000);
    }
}

/*-----------------Footer--------------------*/
footer {
    background-color: var(--bgInverse-2);
    margin: 0;
    padding: 1.5rem;
}

.footer-container p {
    color: var(--textColorInverse-2);
    font-size: 0.9em;
}

.footer-container a {
    color: var(--textColorInverse-2);
    text-decoration: none;
}


.footer-container a:hover {
    color: var(--yellow);
}

.footer-container a:focus {
    text-decoration: underline;
    text-underline-offset: 0.1rem;
}

.footer-container ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.footer-container li {
    display: flex;
    font-size: .9em;
    margin-right: 1rem;
}

.footer-container li::before {
    content: '';
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20'><path fill='%23fff' d='M5.444 9.944 0 0h4.667L10 9.944 4.667 20H0L5.444 9.944Z'/></svg>") no-repeat left/contain;
    width: 1.2em;
    height: 0.8em;
    transform: translateY(0.3em);
}

@media only screen and (max-width: 600px) {
    .footer-container ul {
        flex-direction: column;
    }

    .footer-container li {
        margin-bottom: 0.5rem;
    }
}

/*----------Typography ---------------*/

@font-face {
    font-family: Ingra;
    src: url("https://www.rnib.org.uk/static/fonts/ingra-bold-webfont.8e796a5bd857.woff2") format("woff2"), url("https://www.rnib.org.uk/static/fonts/ingra-bold-webfont.760b60392273.woff") format("woff");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: Ingra;
    src: url("https://www.rnib.org.uk/static/fonts/ingra-regular-webfont.021e6a2dfba1.woff2") format("woff2"), url("https://www.rnib.org.uk/static/fonts/ingra-regular-webfont.31999319061f.woff") format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Ingra;
    src: url("https://www.rnib.org.uk/static/fonts/ingra-semibold-webfont.d9dd93a8cd14.woff2") format("woff2"), url("https://www.rnib.org.uk/static/fonts/ingra-semibold-webfont.a611fbc01061.woff") format("woff");
    font-weight: 600;
    font-style: normal
}


h1, h2, h3, h4, h5, h6, p, button {
/*    margin: 60px 0 40px; - set this at each heading*/
    font-style: inherit;
    font-family: Ingra, arial, sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: var(--textColor)
}

.dark-bg h1, .dark-bg h2, .dark-bg h3, 
.dark-bg h4, .dark-bg h5, .dark-bg h6, 
.dark-bg p, .dark-bg li, .dark-bg a 
.dark-bg .en__field__label {
    color: var(--textColorInverse-2);
}

h1 {
    font-size: 3.125rem;
}

@media only screen and (max-width:600px) {
    h1 {
        font-size: 2.5rem;
    }
}

h2 {
    font-size: 2.5rem;
}

@media only screen and (max-width: 600px) {
    h2 {
        font-size: 2rem;
    }
}
h3 {
    font-size: 2rem;
}

@media only screen and (max-width: 600px) {
    h3 {
        font-size: 1.625rem;
    }
}

h4 {
    font-size: 1.625rem;
}

@media only screen and (max-width: 600px) {
    h4 {
        font-size: 1.375rem;
    }
}

p, li {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--textColor);
    line-height: 1.5;
}

li {
    margin-bottom:0.8rem;
}

@media only screen and (max-width: 600px) {
    p, li {
        font-size: 1.125rem;
        line-height: 1.5;
    }
}

p.intro, big {
    font-size: 1.4rem;
    line-height: 1.5;
}

@media only screen and (max-width: 600px) {
    p.intro, big {
        font-size: 1.375rem;
    }
}

small {
    font-size: 1em;
}

strong {
    font-weight: 600;
}

.image-caption p {
    font-size: 1rem;
    border-left: 0.25rem solid var(--yellow);
    padding-left:0.8rem;
    margin-top: 0;
    color: var(--grey);
}

blockquote {
    border-left: 1rem solid var(--blue);
    padding-left: 1rem;
    margin-left: 0;
}

blockquote p {
    font-size: 1.4375rem;
}

@media only screen and (max-width: 600px) {
    blockquote p {
        font-size: 1.375rem;
    }
}

p a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .1em;
    font-weight: 600;
}

p a:hover {
    text-decoration-thickness: max(4px, 0.1875rem, 0.12em);
}

p a:focus {
    background-color: var(--yellow);
    color: var(--focusText);
    box-shadow: 0 -2px var(--yellow), 0 4px, var(--bgInverse);
    
}

/*---------- Layout ---------------*/

/* breakpoints*/

@media only screen and (max-width: 899px) {
    .rnib .en__component--advrow {
        flex-direction: column;
    }
}

@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) /*overrides EN default style of block*/ {
    .rnib .en__component--row, .rnib .en__component--row.en__component--advrow {
    display: flex;
    }
}

/*wrappers*/

.rnib .wrapper--main {
    max-width: none;
}

.rnib .wrapper--wide {
    max-width: 1600px;
    margin: 0 auto;
}

.rnib .wrapper--large, .rnib .en__component--column {
    max-width: 1280px;
    margin: 0 auto;
}

.rnib .wrapper--small {
    max-width: 780px;
    margin: 0;
}

.rnib .en__component--row { 
    align-items: flex-start;
    -webkit-align-items: flex-start;
}

.rnib .en__component--row.en__component--advrow .stretch { /*to override uneven columns*/
    align-items: stretch;
    -webkit-align-items: stretch;
}

@media only screen and (max-width: 1360px) {
    .rnib .en__component--row {
        padding: 0 40px;
    }
}

@media only screen and (max-width: 600px) {
    .rnib .en__component--row {
        padding: 0 15px;
    }
}

.rnib .en__component--row.en__component--advrow .smaller-padding {
    padding: 0 40px;
}

/*.rnib .en__component--advrow {
    styleson
}*/

/*@media only screen and (max-width:1023px) {
    .section__1column {
        padding: 0 100px;
    }
}*/

.section__2columns {
    display: flex;
    gap: 4em;
}

.section__2columns--right {
    padding: 1rem;
    background-color: var(--bgTintDark);
}

.section__1column {
    margin-block: 1em;
}

/*------------------------------------
Form 
-------------------------------------*/

.rnib .en__field__label {
  display: block;
  color: var(--textColor);
  margin-top: 0;
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 1.25rem;
  width: 100%;
}

@media only screen and (min-width: 599px) {
    .rnib .en__field__label {
        font-size: 1.125rem;
    }
}

.rnib .en__field__element--text,
.rnib .en__field__element--email,
.rnib .en__field__element--number,
.rnib .en__field__element--telephone,
.rnib .en__field__element--password,
.rnib .en__field__element--textarea,
.rnib .en__field__element--select,
.rnib .en__field__element--checkbox,
.rnib .en__field__element--splitselect,
.rnib .en__field__element--splittext,
.rnib .en__field__element--tripletext,
.rnib .en__field__element--tripleselect,
.rnib .en__field__element--other {
    display: block;
}

.rnib .en__field__input--text,
.rnib .en__field__input--email,
.rnib .en__field__input--number,
.rnib .en__field__input--telephone,
.rnib .en__field__input--password,
.rnib .en__field__input--textarea,
.rnib .en__field__input--select,
.rnib .en__field__input--splitselect,
.rnib .en__field__input--splittext,
.rnib .en__field__input--tripletext,
.rnib .en__field__input--tripleselect,
.rnib .en__field__input--other {
    width: 100%;
    min-height: 60px;
    padding: 5px 10px;
    border: 2px solid var(--bgInverse);
    background-color: var(--bg);
    color: var(--textColor);
    font: inherit;
    font-size: 1.2rem;
}

/* elements I haven't styled:
calendar
range
rating
*/

.rnib .en__field__input--text:focus, .rnib .en__field__input--text:focus-visible,
.rnib .en__field__input--email:focus, .rnib .en__field__input--email:focus-visible,
.rnib .en__field__input--number:focus, .rnib .en__field__input--number:focus-visible,
.rnib .en__field__input--textarea:focus, .rnib .en__field__input--textarea:focus-visible,
.rnib .en__field__input--select:focus, .rnib .en__field__input--select:focus-visible,
.rnib .en__field__input--splitselect:focus, .rnib .en__field__input--splitselect:focus-visible,
.rnib .en__field__input--splittext:focus, .rnib .en__field__input--splittext:focus-visible,
.rnib .en__field__input--tripletext:focus, .rnib .en__field__input--tripletext:focus-visible,
.rnib .en__field__input--tripleselect:focus, .rnib .en__field__input--tripleselect:focus-visible,
.rnib .en__field__input--other:focus, .rnib .en__field__input--other:focus-visible,
.rnib .en__field__input--vgs:focus, .rnib .en__field__input--vgs:focus-visible,
.rnib .en__field__input--checkbox:focus+ .en__field__label--item::before, 
.rnib .en__field__input--checkbox:focus-visible+ .en__field__label--item::before,
.rnib .en__field__input--radio:focus+ .en__field__label--item::before, 
.rnib .en__field__input--radio:focus-visible+ .en__field__label--item::before,
#en__field_transaction_ccnumber.vgs-collect-container__focused, #en__field_transaction_ccvv.vgs-collect-container__focused {
    border: 4px solid var(--yellow);
    box-shadow: 0 0 0 4px var(--bgInverse);
    outline: none;
}

@media only screen and (min-width: 599px) {
    .rnib .en__field__input--text,
    .rnib .en__field__input--email,
    .rnib .en__field__input--number,
    .rnib .en__field__input--textarea,
    .rnib .en__field__input--select,
    .rnib .en__field__input--splitselect,
    .rnib .en__field__input--splittext,
    .rnib .en__field__input--tripletext,
    .rnib .en__field__input--tripleselect,
    .rnib .en__field__input--other, 
    .rnib .en__field__input--vgs {
        max-width: 528px;
    }
}

.rnib .en__field__element--splitselect .en__field__item:first-of-type {
    margin-right: 10px;
}

.rnib .en__field__element--vgs:has(#en__field_transaction_ccnumber) {
    width: 100%;
}
    
.rnib .en__field__element--vgs:has(#en__field_transaction_ccvv) {
    max-width: 140px;
}


/*checboxes and radio buttons*/

.rnib .en__field__element--radio .en__field__item,
.rnib .en__field__element--checkbox .en__field__item {
    display: flex;
    position: relative;
    padding: 6px 8px;
}

.rnib .en__field__element--layouthorizontal .en__field__item {
    display: inline-flex;
}

.rnib .en__field__label--item {
    padding-left: 1em;
}


/*checkboxes*/

.rnib .en__field__input--checkbox {
    cursor: pointer;
    z-index: 1;
    top: -2px;
    left: -2px;
    width: 44px;
    height: 44px;
    margin: 0;
    opacity: 0;
}

.rnib .en__field__element--checkbox .en__field__label--item::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 6;
    width: 40px;
    height: 40px;
    border: 2px solid;
    background: var(--bg);
}

.rnib .en__field__element--checkbox .en__field__label--item::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    left: 9px;
    top: 17px;
    width: 23px;
    height: 12px;
    transform: rotate(-45deg);
    border: solid;
    border-width: 0 0 5px 5px;
    border-top-color: transparent;
    opacity: 0;
    background: transparent;
}

.rnib .en__field__input--checkbox:checked+ .en__field__label--item::after {
    opacity: 1;
}

/*radio buttons*/

.rnib .en__field__input--radio {
    cursor: pointer;
    z-index: 1;
    top: -2px;
    left: -2px;
    width: 44px;
    height: 44px;
    margin: 0;
    opacity: 0;
}

.rnib .en__component--formblock:not(.donation-box) .en__field__element--radio .en__field__label--item::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border: 2px solid;
    border-radius: 50%;
    background: var(--bg);
}

.rnib .en__component--formblock:not(.donation-box) .en__field__element--radio .en__field__label--item::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    left: 10px;
    top: 10px;
    width: 0;
    height: 0;
    border: 10px solid;
    border-radius: 50%;
    opacity: 0;
    background: currentColor;
}

.rnib .en__component--formblock:not(.donation-box) .en__field__input--radio:checked+ .en__field__label--item::after {
    opacity: 1;
}

.rnib .en__component--formblock:not(.donation-box) .en__field__element--radio .en__field__input--radio:focus+ .en__field__label--item::before {
    border: 4px solid var(--yellow);
    outline: none;
}

/*-----------------Opt-ins------------------------*/

/*.en__field--demo-email-opt-in-radio-buttons .en__field__item {
    padding: 6px 8px;
}*/

.en__component--formblock:has(.en__field--demo-email-opt-in-radio-buttons input[value="N"]:checked) + .en__component--copyblock.opt-in__prompt,
#en__pagebuilder .opt-in__prompt {
   	display: block;
} 

.opt-in__prompt {
    display: none;
    background-color: var(--bgInverse-2);
    padding: 1rem;
    margin-bottom: 2rem;
    border-left: 20px solid var(--yellow);
}

.opt-in__prompt p {
    color: var(--textColorInverse-2);
    margin: 0;
}

/*---------------------Form error messages-------------*/

#error-header-mand {
    font-size: 1.5rem;
    font-weight: 700;
}

.rnib .en__field__error {
    color: var(--errorText);
    font-weight: 700;

}

.rnib .en__field--validationFailed {
    padding-left: 20px;
    border-left: 4px solid var(--errorText);
}

/*---------- Buttons ------------*/


/*--------------------Base button ---------------------*/

.rnib button, .rnib-btn a, a.rnib-btn {
    font-size: 1.25rem;
    font-weight: 700;
    border: 2px solid transparent;
    text-decoration: none;
    padding: 1.0625rem 1.5625rem 0.8125rem;
    min-height: 3.75rem;
    margin-bottom: 3.75rem;
    transition: background-color .25s ease-out, color .25s ease-out, border .25s ease-out;
}

.rnib-btn p {
    margin: 2.5rem 0;
}

@media only screen and (max-width: 600px) {
    .rnib button, .rnib-btn a, a.rnib-btn {
        font-size: 1.125rem;
    }
}

/*Hover*/

.rnib button:hover, .rnib-btn a:hover, a.rnib-btn:hover {
    cursor: pointer;
}

/*Focus*/

.rnib button:focus, .rnib-btn a:focus, a.rnib-btn:focus {
    box-shadow: 0 0 0 4px var(--bgInverse);
}

/*----- chevron -----*/

.rnib button:not(.cassie-close-modal-button)::after,
.btn--pink a::after, a.btn--pink::after,
.btn--outline a::after, a.btn--outline::after {
    content: '';
    color: inherit;
    width: 1em;
    height: 0.8em; 
    margin-left: 0.5em;
    transform: translate3d(0, 2px,0);
    transition: transform .25s ease-out;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20'><path fill='%23fff' d='M5.444 9.944 0 0h4.667L10 9.944 4.667 20H0L5.444 9.944Z'/></svg>") no-repeat center/contain;
    display: inline-block;
}

.rnib button:hover::after,
.rnib-btn a:hover::after,
a.rnib-btn:hover::after {
    transform: translate3d(4px, 2px, 0);
}


@media(prefers-color-scheme: dark) {
    .rnib button:not(.cassie-close-modal-button)::after, 
    .btn--pink a::after, a.btn--pink::after {
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20'><path fill='%23111' d='M5.444 9.944 0 0h4.667L10 9.944 4.667 20H0L5.444 9.944Z'/></svg>") no-repeat center/contain;
    }
    
}

/*Pink button*/

.rnib button, .btn--pink a, a.btn--pink {
    background-color: var(--pink);
    color: var(--textColorInverse);
}

/*pink button hover*/

.rnib button:hover, .btn--pink a:hover, a.btn--pink:hover {
    background-color: var(--bgInverse);
}

/*pink button focus*/

.btn--pink a:focus, a.btn--pink:focus {
    border-color: var(--textColorInverse);
}

.dark-bg .btn--pink a:focus, .dark-bg a.btn--pink:focus {
    border-color: var(--textColorInverse-2);
    box-shadow: 0 0 0 4px var(--bgInverse-2);
}

/*pink button chevron*/

/*pink button chevron hover*/

/*Outline button*/

.btn--outline a, a.btn--outline {
    background-color: var(--bg);    
    color: var(--textColor);
    border: 2px solid var(--textColor);
}

.btn--outline a:hover, a.btn--outline:hover {
    background-color: var(--bgInverse);    
    color: var(--textColorInverse);
}

/*outline button on a dark background*/

.dark-bg .btn--outline a, .dark-bg a.btn--outline {
    background-color: var(--bgInverse-2);    
    color: var(--textColorInverse-2);
    border: 2px solid var(--textColorInverse-2);
}

/*Inverse button - black on light mode, white on dark background*/

.btn--inverse a, a.btn--inverse {
    background-color: var(--bgInverse);
    color: var(--textColorInverse);
}

.dark-bg .btn--inverse a, .dark-bg a.btn--inverse {
    background-color: var(--white);
    color: #111;
}

/*Black/inverse button hover*/

.btn--inverse a:hover, a.btn--inverse:hover {
    background-color: var(--bg);    
    color: var(--textColor);
    border: 2px solid var(--textColor);
}

.dark-bg .btn--inverse a:hover, .dark-bg a.btn--inverse:hover {
    background-color: var(--bgInverse-2);    
    color: var(--textColorInverse-2);
    border: 2px solid var(--textColorInverse-2);
}

/*Black/inverse button focus*/

/*Black button chevron*/

/*Black button chevron hover*/

/*Pink outline button*/

.btn--pink-outline a, a.btn--pink-outline {
    background-color: var(--bg);    
    color: var(--textColor);
    border: 2px solid var(--pink);
}

/*Pink outline button hover*/

/*Pink outline button focus*/

/*Pink outline button chevron*/

/*Pink outline button chevron hover*/

/* dark background hover and focus states here */

.dark-bg .rnib-btn a:hover, 
.dark-bg a.rnib-btn:hover, 
.rnib .en__supporterHubLogin button:hover,
.dark-bg button.rnib-btn:hover,
.dark-bg button:hover {
    background-color: var(--white); 
    color: #111;
}


/* black ::after arrow for buttons with a white hover state*/
.dark-bg .btn--pink a:hover::after, 
.dark-bg a.btn--pink:hover::after, 
.dark-bg button:hover::after, 
a.btn--outline:hover::after, 
.btn--outline a:hover::after, 
.rnib .en__supporterHubLogin button:hover::after {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20'><path fill='%23111' d='M5.444 9.944 0 0h4.667L10 9.944 4.667 20H0L5.444 9.944Z'/></svg>") no-repeat center/contain;    
}


/* Buttons with no chevron decoration */

.rnib .en__pagination button::after {
    background: none;
}

/* Disabled button styling */

.rnib button:disabled {
    background-color: #dddddd;
    color: #555554;
    cursor: not-allowed;
}

/* add a twirling progress animation/

/* Jump to x button - mobile only */

@media only screen and (min-width: 600px) {
    .rnib-btn.mobile-only  {
        display: none;
    }
    
    #en__pagebuilder.rnib .rnib-btn.mobile-only {
        display: inline-block;
    }
}


/*------------------------ 
Blocks and design elements
--------------------------*/


/*-----------------moreinfo block----------------*/

.moreinfo-heading::after {
    content: '';
    color: inherit;
    width: 1em;
    height: 0.8em;
    margin-left: 0.25em;
    transform: translate3d(0, 4px, 0);
    transition: transform .25s ease-out;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20'><path fill='%23111' d='M5.444 9.944 0 0h4.667L10 9.944 4.667 20H0L5.444 9.944Z'/></svg>") no-repeat center/contain;
    display: inline-block;
}

.moreinfo-heading:hover {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.1em;
}

.moreinfo-heading:hover::after {
    transform: translate3d(4px, 4px, 0);
}

@media(prefers-color-scheme: dark) {
    .moreinfo-heading::after {
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20'><path fill='%23fff' d='M5.444 9.944 0 0h4.667L10 9.944 4.667 20H0L5.444 9.944Z'/></svg>") no-repeat center/contain;
    }
    
}

/*-------language switch links-------*/

.language-switch p {
    font-size: 1em;
    margin-bottom: 35px;
}

.language-switch a {
    font-weight: 400;
}

.language-switch a.active-language {
    text-decoration: none;
    font-weight: 600;
}



/*---------------Progress bar-----------------*/

.rnib .enWidget {
    padding: 0;
}

.rnib .enWidget__progress {
    border-radius: 0;
    border: none !important;
    background-color: var(--bgTint) !important;
}

.rnib .petition-page__2columns--right .enWidget__progress {
    background-color: var(--bg) !important;
}


.rnib .enWidget__progress .enWidget__fill {
    background-color: var(--pink) !important;
}

.rnib .enWidget__fill__count {
    color: var(--textColorInverse) !important;
}

/*---------------social share icons---------------------*/

@media (prefers-color-scheme: dark) {
    img.en__socialShare__image {
        filter: invert(1);
    }
}

/*---------- Share prompt - designed for WhatsApp to be the centre icon, may need tweaking ------------*/

.share-prompt {
        background-color: var(--bgInverse-2);
        display:flex;
        justify-content: center;
        position:relative;
        margin-top: 1rem;
        padding: 0 1rem;
        align-items: center;
    }
    
.share-prompt p {
        color: var(--textColorInverse-2);
        font-size: 1.125rem;
    }
    
.share-prompt::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--bgInverse-2);
    top: -10px;
    position:absolute;
}
    
@media only screen and (max-width:460px) {
    .en__socialShare {
        width:45px !important;
        height:45px !important;
    }
}

@media only screen and (max-width: 340px) {
    .share-prompt::before {
        border: none;
    }
        
    .share-prompt {
        border-left: 10px solid var(--yellow);
    }
}


/*---------- Hero block ------------*/

.rnib .en__component--advrow.hero-block {
    padding-inline: max(0rem, calc((100vw - 1600px) / 2));
    padding-top: 100px;
    margin-bottom: 80px;
}

@media only screen and (max-width: 1000px) {
    .rnib .en__component--advrow.hero-block {
        margin-bottom: 0;
    }
}

.rnib .en__component--advrow.hero-block .hero-block--left {
    border-left: 60px solid var(--blue);
    padding-left: 3rem;
}

.rnib .en__component--advrow.hero-block.pink-hero .hero-block--left {
    border-color: var(--pink);
}

.rnib .en__component--column.en__component--advcolumn.hero-block--right {
    padding-right: 0;
    padding-left: 2rem;
}

/*@media only screen and (max-width:1023px) {
    .rnib .en__component--advrow.hero-block .hero-block--left {
        border-left: 20px solid var(--blue);
        padding-left: 2rem;
    }

    .rnib .rnib .en__component--advrow.hero-block .hero-block--right {
        padding: 0;
    }
}*/

@media only screen and (max-width: 599px) {
    .rnib .en__component--advrow.hero-block .hero-block--left {
        border-left: none;
        padding-left: 1rem;
    }

    .rnib .hero-block h1::before {
        content: '';
        background-color: var(--blue);
        position: absolute;
        height: 2rem;
        width: calc(100% - 3rem);
        left: -1rem;
        top: -3.5rem;
        padding-left: 3rem;

    }

    .rnib .hero-block.pink-hero h1::before {
        background-color: var(--pink);
    }

    .rnib .en__component--advrow.hero-block {
        padding-top: 40px;
    }
}

.hero-block h1, .hero-block p, .rnib .hero-block .en__field__label {
    margin: 0 0 0.7rem 0;
}

.hero-block h1 {
    margin: 0;
}

/*Hero block images*/

.rnib .en__component--advcolumn.donate-block__image-container--mobile {
    padding: 0;
    display: none;
}


img.donate-block__image.donate-block__image--desktop {
    margin-bottom: -100px;
    padding-top: 80px;
    height: 100%;
    max-width: 100% !important;
    object-fit: cover;
}
    
@media only screen and (max-width: 1000px) {
    .rnib .en__component--advcolumn.donate-block__image-container--mobile {
         display: flex;
    }
        
    .rnib .en__component--advcolumn.hero-block--right {
        display:none;
    }
}

/*----------CTA Banner------------*/

.banner-cta {
    background-color: var(--bgInverse-2);
    position: relative;
    margin: 50px 0;
}

.banner-cta .en__component--advcolumn {
    padding: 5rem 0 3rem 0;
}

.banner-cta .en__component--advcolumn:first-child {
    padding-left: 6rem;
    padding-right: 4rem;
}

.banner-cta .en__component--advcolumn:last-child {
   margin-right: -6rem;
}

@media only screen and (max-width: 899px) {
    .banner-cta .en__component--advcolumn:last-child {
        margin: 0;
        padding: 0;
    }
}

.banner-cta img {
    width:100% !important;
    height: auto !important;
}


.banner-cta h2 {
    position: relative;
}

.banner-cta h2::before { /*need to set the margin on h2 and tweak this*/
    content: '';
    height: calc(100% + 2.075rem + 5rem);
    width: 3.75rem;
    background-color: var(--yellow);
    position: absolute;
    top: -7.075rem;
    left: -6rem;
}

@media screen and (max-width:600px) {
    .banner-cta h2::before {
        height: 3rem;
        width: calc(100% - 3rem);
        top: -6.65rem;
        padding-left: 3rem;
    }
}

@media screen and (max-width:600px) {
    .banner-cta .en__component--advcolumn:first-child {
    padding-left:2.5rem;
    padding-right: 2.5rem;
}
}


/*----------CTA Column ------------*/

.rnib .feature-column { 
    background-color: var(--bgInverse-2);
    padding-left: 3rem;
}

.rnib .feature-column__heading h1 { 
    margin: 40px 0 10px 0;
    color: var(--textColorInverse-2);
}

.rnib .feature-column__heading::before { 
    content: '';
    height: calc(100% + 40px);
    width: 2rem;
    background-color: var(--yellow);
    position: absolute;
    left: -3rem;
    top: -40px;
}

.rnib .feature-column p {
    color: var(--textColorInverse-2);
}

@media only screen and (max-width: 899px) { 

    .rnib .en__component--advrow:has(.feature-column--right) { /*to replace use of .donation-page__2columns */
        flex-direction: column-reverse;
    }

    .rnib .feature-column { /* to replace .donation-page__2columns--right */
        width: 100%; /*this doesn't work, need to override it on the advcolumn*/
    }
}

/*also need to remove padding from the section and add it back just for the text side - is there a way I can do that by combing first child and has(.feature-column--right)?*/

/*---------- Images ------------*/

/*.pageImage to 100% to stop people who forget? */

/*------ Card rows-------*/

.rnib .en__component--row.en__component--advrow.card-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 2rem;
    margin-bottom: 2rem;
}
    
.card {
    border: 1px solid var(--bgTintDark);
    padding: 1rem;
}

.rnib .en__component--advcolumn.card--dark {
    background-color: var(--bgInverse-2);
    padding: 1rem 3rem;
}

.card--dark h2, .card--dark p {
    color: var(--textColorInverse-2);
}

.card--dark h2 {
    position:relative;
}

.card__heading--dark::before {
  content: "";  
  background-color: var(--yellow);
  height: calc(100% + 2.075rem + 1rem);
  width: 30px;
  position: absolute;
  left: -3rem;
  top: -3.075rem;
}

@media only screen and (max-width: 600px ) {
    
    .card__heading--dark h2 {
        margin-top: 1.5rem;
    }
    
    .card__heading--dark::before {
        height: calc(100% + 1.5rem + 1rem);
        top: -2.5rem;
    }
}

img.card__image {
    max-width: 100%;
}

img.card__image--centered {
    display: block;
    margin: auto;
    max-width: 100%;
}

/*-----Button group*/

.button-group {
    display:inline-block;
}

.button-group--left {
    margin-right: 1rem;
}


/*---------- Header rows  ------------*/

.rnib-row.title-block { /*Needs to override max width*/
    background-color: var(--bgInverse-2);
    color: var(--textColorInverse-2);
    border-left: 20px solid var(--yellow);
}

/*---------- ------------*/

/*---------------------------
Petition pages
-------------------------*/

/*--------------------- 
Email to target pages 
-----------------------*/

.rnib .en__component--contactblock {
    background-color: var(--bgTintDark);
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

@media only screen and (max-width: 600px) {
    .rnib .en__component--contactblock {
        font-size: 1.125em;
    }
}

.rnib  .en__contact {
    margin-bottom: 1rem;
}

.rnib .en__contact__detail {
    background-color: var(--bgTintDark);
}

.rnib .en__contactDetails {
    margin-bottom: 1rem;
}

.rnib .en__contactDetails__row--1 {
    font-size: 2rem; /*h3 size*/
}

@media only screen and (max-width: 600px) {
    .rnib .en__contactDetails__row--1 {
    font-size: 1.625rem; /*h3 size*/
}
}

.rnib .en__contactSubject .en__field__input--text {
    max-width: 100%;
}

.rnib .en__component--contactblock label {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.rnib .en__contactMessage__plainText {
    height: 400px;
    border: 2px solid var(--textColor);
}

/*------------------------------- 
        Donation pages
-----------------------------------*/

/* widget - donation-box */

.donation-box .en__field {
    padding-bottom: 0;
}

.donation-box {
    max-width: 500px;
}

.donation-box input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.donation-box .en__field__element--radio .en__field__item  label {
    display: inline-block;
    border: 4px solid #fff;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 1rem 1rem 0.8rem;
    margin: 1rem 1rem 1rem 0;
    flex: 1;
    text-align: center;
}


.donation-box .en__field__input.en__field__input--other {
    width: 100%;
    margin: 0 1rem 1.5rem 0;
}

.rnib .hero-block .en__field--donationAmt .en__field__item.en__field__item--other::before {
    /*should this be .donation-box not .hero-block?*/
    content: '£';
    font-size: 1.5rem;
    color: white;
    margin: 1rem 0.8rem 1rem 0;
}

.donation-box input[type="radio"]:checked + label {
    background-color: #fff;
    color: #111;
}

.donation-box input[type="radio"]:focus + label {
    box-shadow: 0 0 0 4px var(--yellow);
    border-color: #111;
    outline: none;
}

.donation-box input[type="radio"]:hover + label {
    box-shadow: 0 0 0 2px #fff;
}


.donation-box .en__field--donationAmt .en__field__element--radio {
    display: flex;
    flex-flow: wrap;
}

.donation-box .en__field--donationAmt .en__field__element--radio .en__field__item {
    flex: 1 0 25% ;
}

.donation-box .en__field--donationAmt .en__field__element--radio .en__field__item--other {
    flex-basis: 100%;
}

.donation-box .en__field--recurrpay .en__field__element--radio {
    display: flex;
}

.donation-box .en__field--recurrpay .en__field__element--radio .en__field__item {
    flex: 1;
}

/* 
Think this was just for testing
.rnib .en__field__item.en__field__item--hidden {
    display: none;
}
*/

.donation-box .en__submit {
    padding-right: 1rem;
}
.donation-box button {
    width: 100%;
}


/*-----------------Donation prompts---------------*/

body#en__pagebuilder .en__component--copyblock.prompts::before {
    /* This only shows in the page-builder so you can edit the text block */
    content: "Edit donation amount prompts (use Source to set the amount and recurring flags)";
    text-align: center;
    font-weight: bold;
    color: #666;
    background-color: #eee;
    padding: 2em;
    display: block;
}

.en__component--copyblock.prompts ul {
    padding: 0;
}

.en__component--copyblock.prompts li {
    display: none;
    list-style-type: none;
    font-size: 1rem;
    color: var(--textColorInverse-2);
}
    
.donation-box .en__field--donationAmt .en__field__element--radio .en__field__item label {
    margin-bottom: 0;
}

/*form pages*/

.payment-card-details {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 550px;
}
    
.payment-card-details .en__field--ccnumber {
    flex-basis: 100%;
}
    
.payment-card-details .en__field--ccexpire {
    margin-right: 1.5rem;
}
    
.rnib .en__field__element--splitselect .en__field__item {
    padding: 0;
}

.gift-aid-checkbox .en__field__label {
    font-size: 1.125rem;
}

/*---------------Express checkout----------------------*/

#en__pagebuilder .no-express-checkout {
    display: block;
}

.no-express-checkout {
    display: none;
}

.express-checkout-footer {
    width: 50%;
}

@media only screen and (max-width:600px) {
    .express-checkout-footer {
        width: 100%;
    }
}

#en__digitalWallet.has-express-checkout #en__digitalWallet__stripeButtons__container {
    border-style: solid;
    border-radius: 5px;
}

/*-------------------------------------- 
Supporter hub
---------------------------------------*/

 .rnib .en__supporterHubLogin {
    margin: 2rem auto;
    border: none;
    border-radius: 0;
}

.rnib .en__supporterHubLogin__header {
    background: var(--bgInverse-2);
    color: var(--textColorInverse-2);
    font-size: 1.25rem;
    border-bottom: none;
    border-left: 20px solid var(--yellow);
}

.rnib .en__supporterHubLogin__body {
    background: var(--bgInverse-2);
}

.rnib .en__supporterHubLogin__emailAddress {
    flex-direction: column;
}

.rnib .en__supporterHubLogin__body .en__field__label {
    color: var(--textColorInverse-2);
}

.rnib .en__supporterHubLogin button {
    width: 100%;
}

.rnib .en__hubgadget__response {
    padding: 0.5rem;
    font-size: 1.25rem;
    color: var(--textColorInverse-2);
}

.rnib .en__hubgadget__response--failure {
    border: 2px dashed var(--errorText);
}

.rnib .en__hubgadget__response--success {
    border: 2px dashed var(--green);
}

.rnib .en__component.en__component--hubgadget {
        box-shadow: none;
        border-radius: 0;
        background: var(--bg);
        color: var(--textColor);
        border-color: var(--bgTintDark);
    }
    
.rnib .en__component.en__component--hubgadget:hover {
    cursor: pointer;
}

/*
en__hubOverlay en__hubOverlay--supporterdetails
en__hubOverlay__popup
en__hubOverlay__header
*/



/*---------- ------------*/

/*----------------------
Data8 predictive address
------------------------*/

.rnib .data8-pa-loading {
    background-color: var(--bgColor);
}

.rnib .data8-pa-countrylist ul {
    background-color: var(--bg);
}

.rnib .data8-pa-autocomplete {
    background-color: var(--bg);
    border: 1px solid var(--textColor);
    box-shadow: none;
}
.rnib .data8-predictiveaddress.data8-pa-loading {
    background-color: var(--bg);
}

.rnib .data8-pa-autocompleteitemcontainer {
    background-image: url(https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/1670/chevron-dark.png);
    color: var(--grey);
}

@media (prefers-color-scheme: dark) {
    .rnib .data8-pa-autocompleteitemcontainer {
    background-image: url(https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/1670/chevron-light.png);
    }
}
    
.rnib .data8-pa-countrylist ul {
background-color: var(--bg);
}

.rnib .data8-pa-countrylist ul li:hover, 
.rnib .data8-pa-countrylist ul li.data8-pa-focused,
.rnib .data8-pa-autocompleteitem:hover,
.rnib .data8-pa-autocompleteitem.data8-pa-focused {
    background-color: var(--bgTintDark);
}

.rnib .data8-pa-countrydropdowncontainer {
    background-color: var(--bg);
}

.rnib .data8-pa-countrylistcontainer {
    background-color: var(--bg);
}

.rnib .data8-pa-countryselector {
    border: 1px solid var(--textColor);
}

.rnib .data8-pa-countrysearch {
    font-size: 1.25rem;
    background-color: var(--bg);
    border: none;
}
.rnib .data8-pa-countrysearch::placeholder {
    color: var(--textColor);
}

.rnib .data8-pa-countrylistcontainer {
    background-color: var(--bgTintDark);
    color: var(--textColor);
}

.rnib .data8-pa-countrycurrent:hover {
    background-color: var(--bgTint);
}

/*-------------Show/hide address fields-------------*/

.input-address-link a, .input-address-link p {
    padding: 0;
    margin: 0;
}

.address-fields {
    display: none;
}

#en__pagebuilder .address-fields, .address-fields.is-visible {
    display: block;
}


/*-------------------
Cassie CMP styles
-------------------*/

.rnib {
    --banner-submit-preferences-button-color: #e50071;
    --banner-background-color: #000000;
}

.rnib #cassie-widget h1, #cassie-widget h2, #cassie-widget h3, #cassie-widget h4, #cassie-widget h5, #cassie-widget h6, #cassie-widget p {
    color: #fff;
}

.rnib #cassie_accept_all_pre_banner {
    background-color: var(--pink);
}

.rnib .cassie-toggle-switch--slider--active {
    background-color: var(--pink);
}

.rnib .cassie-cookie-modal--group .cassie-cookie-children--container {
    background-color: var(--banner-background-color) ;
}

.rnib .cassie-cookie--child--heading, .rnib .cassie-cookie-group--heading  {
    font-size: 1rem;
    font-weight: 700;
}

.rnib p.cassie-cookie--child--description, .rnib .cassie-cookie--child--description > p, .rnib .cassie-cookie-group--description {
    font-size: 1rem;

}

.rnib #cassie_header_image {
    display: none;
}

.rnib .cassie-cookie-modal--header .cassie-cookie-modal--header--content {
    border-top: none;
}

.rnib .cassie-close-modal-button {
    margin-bottom: 0;
    color: #fff;
}

@media only screen and (min-width: 1200px) {
    .rnib .cassie-cookie-module>.cassie-cookie-modal, .cassie-cookie-module>.cassie-cookie-modal--right {
        width: 35%;
    }
}