@charset "UTF-8";
/* CSS Document */

/*Search results placeholder needs to have the same styles as the class row for flexbox to be working. This is a workaround.*/
.search-results-container > div {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}


html {
}

body {
    font-family: 'Montserrat', sans-serif;
    color: #171717;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6
}

img {
    image-rendering: -webkit-optimize-contrast
}

.kr-image {
    opacity: 0;
    transition: opacity .6s;
    background-color: #ededed;
}

    .kr-image.complete-load {
        opacity: 1
    }

a:not([class]) {
    text-decoration: underline;
}

a:hover {
    color: #61389c;
    text-decoration: underline;
}

.form-control {
    padding: 0.625rem 1rem;
    color: #000
}

    .form-control:focus {
        padding: 0.625rem 1rem;
        color: #000;
        box-shadow: 0 0 3px rgba(0,0,0,0.3)
    }


    .form-control:disabled, .form-control[readonly] {
        background-color: #e9ecef;
        opacity: 1;
    }

.field-validation-error {
    color: red;
    padding-top: 5px;
    display: inline-block;
}

h1, .h1, .bodycopy h1 {
    font-size: 2.375rem;
    color: #361f55
}

    .bodycopy h1, .bodycopy .h1, h1.small {
        font-size: 2.188rem
    }

.hero h1, .hero .h1 {
    letter-spacing: -0.5px
}

.hero h1, .hero .h1, .h1, .montserrat-alt {
    font-family: 'Montserrat Alternates', sans-serif;
    font-weight: 600;
    -webkit-font-smoothing: antialiased
}

h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .bodycopy h1, .bodycopy .h1 {
    font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    color: #361f55;
    line-height: 1.3;
    -webkit-font-smoothing: auto
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p {
    margin-bottom: 1.4rem
}

    p.empty {
        margin: 0px !important;
    }

.sr-only {
    color: #171717;
}


.hero h1 {
    margin-bottom: 0
}

    .hero h1 + p {
        margin-top: 20px
    }

.hero a {
    color: #fff
}

.bodycopy a:not([class]) {
    font-weight: 700;
    color: #D92314
}

    .bodycopy a:not([class]):hover {
        color: #ff1c0d
    }

.bodycopy p + h1, .bodycopy p + h2, .bodycopy p + h3, .bodycopy p + h4, .bodycopy p + h5, .bodycopy p + h6, .bodycopy p + .h1, .bodycopy p + .h2, .bodycopy p + .h3, .bodycopy p + .h4, .bodycopy p + .h5, .bodycopy p + .h6 {
    margin-top: 3rem
}

.bodycopy h2.intro, .bodycopy .h2.intro {
    margin-bottom: 40px
}

.bodycopy ul:not([class]) {
    margin-bottom: 3rem;
    position: relative;
    list-style-type: none;
    padding-left: 2rem
}

    .bodycopy ul:not([class]) li {
        position: relative;
        padding: 0;
        margin: 1.5rem 0
    }

        .bodycopy ul:not([class]) li:before {
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 14px 14px 0px 0;
            border-color: transparent #59bdc5 transparent transparent;
            position: absolute;
            left: -2rem;
            top: 6px;
            display: block
        }

.bodycopy ol:not([class]) {
    list-style-type: none;
    padding-left: 1rem;
    margin-bottom: 3rem;
    counter-reset: ol-counter
}

    .bodycopy ol:not([class]) li {
        position: relative;
        padding: 0 0 0 1rem;
        margin: 1.5rem 0
    }

        .bodycopy ol:not([class]) li:before {
            content: counter(ol-counter);
            counter-increment: ol-counter;
            position: absolute;
            font-weight: 700;
            left: -1rem;
            color: #58bdc5
        }

.bodycopy img {
    max-width: 100%;
    margin-bottom: 30px
}

    .bodycopy img[style] {
        height: auto !important
    }

.bodycopy figure {
    margin-bottom: 30px;
    position: relative
}

    .bodycopy figure img {
        margin: 0;
        width: 100%
    }

.bodycopy .leader-image {
    transform: translateY(-3rem);
    margin-bottom: -1rem;
    width: calc(100% + 30px);
    margin-left: -15px
}

h2, .h2 {
    font-size: 1.75rem
}

h3, .h3 {
    font-size: 1.563rem
}

h4, h5, .h4, .h5 {
    font-size: 1.375rem
}

.min-h-100 {
    min-height: 100%
}

input, select, textarea {
    border-radius: 0 !important
}

    input.phone-number {
        max-width: 160px;
    }

    input.post-code {
        max-width: 140px;
    }

    input.cvv {
        max-width: 70px;
    }

    input.sortcode-whole {
        max-width: 100px;
    }

    input.accountnumber {
        max-width: 120px;
    }

label, .EditingFormLabel {
    font-weight: 700;
    color: #666666;
    display: block;
    margin-bottom: 0.5rem
}

.form-check-inline .form-check-label {
    display: block
}

.EditingFormValueCell input[type="checkbox"] + label,
.EditingFormValueCell input[type="radio"] + label {
    display: inline-block;
    margin: 5px;
    font-weight: normal
}

.EditingFormValueCell input[type="checkbox"]:checked + label,
.EditingFormValueCell input[type="radio"]:checked + label {
    color: #000
}

.EditingFormButtonCell {
    text-align: right
}

.EditingFormValueCell label:empty {
    display: none
}

.replace-radios .form-check-inline {
    margin: 0;
}

.replace-radios input {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
    border: 0;
}

.replace-radios label {
    background: #fff;
    color: #000;
    padding: 0.5rem 1.5rem !important;
    display: inline-block;
    border: 1px #959595 solid;
    cursor: pointer;
    margin: 0.5rem 0.5rem 0 0 !important;
    text-transform: none;
    text-shadow: none !important;
}

    .replace-radios label:last-of-type {
        margin-right: 0 !important
    }

.form-question .replace-radios label {
    font-size: 0.9375rem;
    padding: 1rem 1.25rem !important; /*max-width: 185px;*/
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    font-weight: 700
}

.form-question .replace-radios.anonymous-login label {
    flex: 0 0 calc(50% - 0.5rem)
}

    .form-question .replace-radios.anonymous-login label img {
        width: 100%;
        height: auto;
        margin-top: 5px
    }

.form-question .replace-radios.radio-block label {
    margin: 0 !important;
    flex: 1 1 0
}

    .form-question .replace-radios.radio-block label + label {
        margin-left: -1px !important
    }

.form-question .replace-radios.btn-group {
    margin-top: -0.5rem;
    display: flex
}

.replace-radios label:hover {
    border-color: #000;
    color: #000
}

.replace-radios input:checked + label, .replace-radios label.active {
    background-color: #f9aa22;
    border-color: #f9aa22;
    color: #fff
}

.sign-up-form .form-group, .EditingFormTable > div, label, .EditingFormLabel {
    transition: all 0.2s ease
}

    .sign-up-form .form-group:hover,
    .sign-up-form .form-group:active,
    .sign-up-form .form-group:focus,
    .EditingFormTable > div:hover,
    .EditingFormTable > div:focus {
        background-color: #f6f6f6
    }

        .sign-up-form .form-group:focus label:not([class]), .sign-up-form .form-group:hover label:not([class]), .EditingFormTable > div:hover .EditingFormLabel {
            color: #000
        }

.form-group, .EditingFormTable > div {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 0;
    position: relative
}

.EditingFormTable > div {
    align-items: center !important;
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    flex-direction: column
}

    .EditingFormTable > div > div, .ErrorLabel {
        padding: 0 15px;
        width: 100%
    }

.ErrorLabel {
    margin: 0 auto;
    display: block;
    background-color: #D92314;
    color: #fff;
    padding: 0.75rem 1.25rem
}
/*.form-group.dependsOnField {padding: 0; margin: 0; position: static}*/

.form-check-inline .form-check-input {
    position: static;
    margin-top: 0;
    margin-right: .3125rem;
    margin-left: 0;
}

select.form-control:not([size]):not([multiple]) {
    height: 43px
}


.Error input, .Error textarea, .Error select {
    border-color: #D92314
}

.EditingFormErrorLabel {
    width: 100%;
    margin-top: .25rem;
    font-size: 90%;
    color: #dc3545;
    display: block
}

.Error input[type="radio"] + label, .Error input[type="checkbox"] + label {
    color: #dc3545
}

.h4 .EditingFormLabel, .EditingFormTable > div.h4:hover .EditingFormLabel {
    color: #49257D;
    font-weight: 600
}

.EditingFormTable > div.h4, .EditingFormTable > div.question-intro {
    padding: 0
}

    .EditingFormTable > div.h4 .EditingFormLabel {
        margin-bottom: 1.4rem
    }

    .EditingFormTable > div.question-intro .EditingFormLabel {
        font-weight: normal;
        color: #171717 !important
    }

    .EditingFormTable > div.h4:hover, .EditingFormTable > div.question-intro:hover {
        background: none
    }

/* Some out of the box Kentico workarounds for donate form*/
.form-check-input-parent input[type="checkbox"] {
    float: left;
    margin-top: 0.25rem
}

.form-check-input-parent label {
    padding-left: 1.25rem;
    color: #000;
}

.form-check-input-parent br {
    display: none
}

.replace-radios-parent {
    display: flex;
    width: 100%;
    text-align: center
}

.replace-radios > div.EditingFormControlNestedControl {
    width: 100%
}

.form-question .replace-radios .replace-radios-parent input:checked + label {
    color: #fff;
}

.sign-up-form .form-group:hover label.EditingFormLabel {
    color: #000
}

@media (max-width: 767px) {
    .form-question .replace-radios .replace-radios-parent label {
        padding: 1rem .75rem !important;
        font-size: 12px;
    }
}

/* */

strong, .bold {
    font-weight: 700
}


.dropdown-menu {
    border-radius: 0;
    font-size: 0.875rem;
    border: none;
    box-shadow: 0 3px 5px rgba(0,0,0,0.2)
}

    .dropdown-menu.page-jump {
        min-width: 100%;
        padding: 1rem 0
    }

        .dropdown-menu.page-jump .dropdown-item {
            padding: 0.25rem 2rem;
            white-space: normal;
        }

.dropdown-item.active, .dropdown-item:active {
    background: transparent;
    color: #D92314
}

a, button, div.play-button {
    transition: all 0.2s ease
}

div.play-button {
    cursor: pointer
}

button {
    padding: 0;
    border: none
}

    button:hover {
        cursor: pointer
    }

.badge {
    text-transform: uppercase;
    border-radius: 0;
    padding: 5px 12px;
    font-size: 0.625rem;
    margin-bottom: 0.5rem
}

.badge-dark {
    background-color: #171717;
}

a.badge:hover {
    color: #fff;
    text-decoration: none
}

a.badge.bg-red:hover {
    background-color: #ff1c0d
}

.badge.d-md-none {
    position: absolute;
    left: 1rem;
    top: 1rem
}

.tagbox .badge {
    margin: 0.5rem 0.5rem 0.5rem 0
}

.relative {
    position: relative
}

.absolute {
    position: absolute
}

.static {
    position: static
}

.ease {
    transition: all 0.2s ease
}

.boxshadow {
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transform: translate3d(0,0,0);
    background-color: #fff
}

    .boxshadow:hover {
        box-shadow: 0 1px 3px rgba(0,0,0,0.3)
    }

.icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    transition: all 0.2s ease
}

.btn .icon {
    vertical-align: middle;
    margin-top: -3px;
}

button:not(.btn-purple-dark):hover .icon, a:hover .icon {
    color: #61389c
}

.modal-dialog.modal-dialog-centered {
    min-height: calc(100vh - 60px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    transform: none !important
}

.modal-content {
    border-radius: 0;
    background: none;
    box-shadow: none;
    border: none;
    width: 100%;
    margin: 0 1rem
}

.modal-title {
    margin-bottom: 1rem;
    margin-right: 2.5rem
}

.modal-content .form-control {
    border-color: #fff;
    display: block;
}

button.close {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0rem;
    right: 0rem;
    display: block;
    padding: 0;
    margin: 0;
    z-index: 9999;
}

#searchmodal button[type="submit"] {
    width: 100%
}

.modal-backdrop.show {
    opacity: 0.8;
}

/*----------Google Translate Styles-----------------*/
body {
    top: auto !important;
}

.goog-te-banner-frame,
.goog-tooltip {
    display: none !important;
}

.goog-text-highlight {
    background-color: unset !important;
    box-shadow: unset !important;
}

.goog-te-combo {
    padding: 0.625rem 1rem !important;
    color: #000 !important;
    width: 100% !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
    color: #495057 !important;
    background-color: #fff !important;
    background-image: none !important;
    background-clip: padding-box !important;
    border: 1px solid #959595 !important;
    border-radius: 0 !important;
}

/* ==========================================
Single-colored icons can be modified like so:
.icon-name {
  font-size: 32px;
  color: red;
}
========================================== */


.container-fluid {
    max-width: 1188px;
    margin: 0 auto
}

    .container-fluid.stat-container {
        max-width: 1288px
    }


.text-black {
    color: #171717 !important
}

.text-white {
    color: #fff !important
}

    .text-white a {
        color: #fff !important
    }

.text-purple, .text-purple a {
    color: #49257D !important
}

    .text-purple a:hover {
        color: #61389c !important
    }

.text-purple-dark {
    color: #361F55 !important
}

.text-red {
    color: #D92314 !important
}

.wanted-intro a {
    color: #FFF !important
}

.text-teal {
    color: #5ABDC5 !important;
    fill: #5ABDC5
}

.text-grey {
    color: #676767 !important
}


.btn {
    cursor: pointer
}

.bg-purple-hero {
    background-color: #281444;
    color: #fff
}

.bg-purple {
    background-color: #49257D;
    color: #fff
}

.bg-purple-dark, .btn-purple-dark, .btn-primary {
    background-color: #361F55;
    color: #fff
}

    .btn-purple-dark:hover, .btn-primary:hover {
        background-color: #49257D
    }

.bg-purple-mid {
    background-color: #625EB7;
    color: #fff
}

.bg-purple-light {
    background-color: #D9D8F2
}

.bg-teal, .btn-teal {
    background-color: #5ABDC5
}

    .btn-teal:hover {
        background-color: #59c9d2
    }

.bg-teal-mid {
    background-color: #6ACFD7
}

.bg-teal-light {
    background-color: #CDF0F4
}

.text-mustard {
    color: #f9aa22
}

.bg-mustard, .btn-mustard {
    background-color: #F9AA22
}

    .btn-mustard:hover {
        background-color: #ffb300
    }

.bg-mustard-mid {
    background-color: #FBC36C
}

.bg-mustard-light {
    background-color: #FDE4BA
}

.bg-red, .btn-red, .alert-danger {
    background-color: #D92314
}

    .btn-red:hover {
        background-color: #E62C20
    }

.bg-grey {
    background-color: #ededed
}

.btn-ghost {
    background-color: rgba(0,0,0,0);
    border: 2px #fff solid
}

    .btn-ghost:hover {
        background-color: rgba(0,0,0,0.2);
        text-shadow: none
    }

    .btn-ghost.fill:hover {
        background-color: rgba(255,255,255,1);
        color: #171717
    }

.btn-white {
    background: #fff;
    color: #171717 !important;
}

    .btn-white:hover {
        background: #ededed !important;
    }


.triangle.purple-dark {
    fill: #361F55
}

.triangle.teal {
    fill: #5ABDC5
}

.triangle.grey {
    fill: #ededed
}

.triangle.red {
    fill: #D92314
}

.triangle.white {
    fill: #fff
}

.text-purple a {
    text-decoration: underline
}

.alert {
    text-shadow: none
}

.alert-danger {
    border: none;
    border-radius: 0;
    color: #fff
}

.tip-bubble {
    display: inline-block;
    background-color: #49257d;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin: 0 5px
}

.form-question .tip-bubble {
    cursor: pointer
}

.tip-bubble svg {
    display: block;
    width: 0.875rem;
    height: 0.875rem;
    color: #fff;
    margin: 3px auto
}

.btn {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
    text-transform: uppercase;
    padding: 1.125rem 3rem;
    white-space: normal
}

input[type="Submit"].btn {
    border-color: transparent
}

.btn:not(.fill) {
    text-shadow: 0px 1px 5px rgba(0,0,0,0.1)
}

.btn-sm {
    padding: 0.625rem 1.5rem
}

.btn:hover {
    color: #fff
}

.btn.multiline {
    line-height: 1.1;
    padding: 0.6875rem 3rem
}

.padding-md, .padding-sm {
    padding-top: 3rem;
    padding-bottom: 3rem
}


.navbar {
    padding: 0;
    box-shadow: inset 0 1px 0 #e3e3e3
}

.navbar-nav {
    width: 100%
}

.mega-dropdown {
    position: static
}

    .mega-dropdown .dropdown-menu {
        width: 100%;
        padding: 15px 0;
        background-color: #49257D;
        border-radius: 0;
        margin: 0;
        border: none
    }

        .mega-dropdown .dropdown-menu p, .mega-dropdown .dropdown-menu a, .mega-dropdown .dropdown-menu .h3 {
            color: #fff
        }

        .mega-dropdown .dropdown-menu svg {
            display: inline-block;
            width: 13px;
            vertical-align: middle;
            margin-right: 5px;
            color: #5abdc5
        }

            .mega-dropdown .dropdown-menu svg.icon-right-arrow {
                stroke-width: 2
            }

        .mega-dropdown .dropdown-menu svg {
            color: #5abdc5;
            margin-left: -20px
        }

        .mega-dropdown .dropdown-menu p {
            font-size: 1.063rem;
            line-height: 1.6;
            margin-bottom: 1.72rem
        }

    .mega-dropdown .dropdown-toggle::after {
        display: none
    }

.navbar-collapse > ul {
    background-color: #ededed
}

.navbar-nav .nav-link {
    padding: 1.25rem 1rem !important;
    color: #171717;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1;
    font-size: 0.9375rem;
    position: relative;
    border-bottom: 1px #fff solid
}

.mega-dropdown.show .nav-link {
    border-color: transparent
}

.navbar-nav .nav-link svg {
    transition: all 0.2s ease-in-out;
    position: absolute;
    right: 1.483rem;
    transform: rotate(90deg);
    width: 0.75rem;
    height: 0.75rem;
}

.mega-dropdown.show > a svg {
    color: #fff;
    transform: rotate(270deg);
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.active:hover {
    color: #D92314 !important
}

.mega-dropdown:not(.show) .nav-link:hover {
    color: #61389c
}

.mega-dropdown.show > a, .mega-dropdown.show > a.nav-link.active, .mega-dropdown.show > a.nav-link.active:hover {
    background-color: #49257D;
    color: #fff !important
}

.mega-dropdown div[class^="col-"] + div[class^="col-"], .section .row div[class^="col-"] + div[class^="col-"] {
    margin-top: 2rem
}

.mega-dropdown .subnav {
    font-size: 0.9375rem
}

    .mega-dropdown .subnav li a {
        display: block;
        padding: 8px 10px 8px 20px;
        text-decoration: none;
        line-height: 1.3rem;
    }

        .mega-dropdown .subnav li a:hover {
            text-decoration: underline
        }

.mega-dropdown .page-intro {
    padding-top: 7px
}

.mega-signpost {
    min-height: 100%;
    padding: 1.5rem
}

    .mega-signpost p {
        margin: 0;
        color: #171717 !important;
        font-size: 1rem
    }

    .mega-signpost.info p {
        padding-right: 1rem
    }

    .mega-signpost.info .info-corner {
        content: "";
        position: absolute;
        width: 84px;
        height: 84px;
        overflow: hidden;
        right: 0;
        bottom: 0
    }

    .mega-signpost.info svg.triangle {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        margin: 0
    }

    .mega-signpost.info .info-corner .icon-bubble {
        background: #49257D;
        border-radius: 50%;
        width: 25px;
        height: 25px;
        text-align: center
    }

        .mega-signpost.info .info-corner .icon-bubble svg {
            margin: 0;
            color: #fff;
            height: 100%
        }

    .mega-signpost a {
        color: #D92314
    }

.tertiary-nav {
    vertical-align: middle;
    font-size: 0
}

    .tertiary-nav > button, .tertiary-nav > .button {
        background: #ededed;
        border: none;
        padding: 0.375rem 0.625rem
    }

    .tertiary-nav > a {
        padding: 0.375rem 0.625rem
    }

    .tertiary-nav > a, .tertiary-nav > button, .tertiary-nav > a, .tertiary-nav > .button {
        font-size: 0.75rem;
        color: inherit;
        display: inline-block;
        text-align: left
    }

    .tertiary-nav svg {
        width: 1rem;
        height: 1rem;
        margin-bottom: -2px
    }

    .tertiary-nav .anonymous-login, .tertiary-nav .language {
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }

    .tertiary-nav > button:hover, .tertiary-nav > button:active, .phonebutton:hover {
        background: #e2e2e2;
        outline: none
    }

    .tertiary-nav .anonymous-login, .tertiary-nav .language {
        width: 50%
    }

        .tertiary-nav .language:after {
            position: absolute;
            right: 10px;
            top: 13px
        }

        .tertiary-nav .language svg {
            margin-right: 10px
        }

    .tertiary-nav .search, .phonebutton {
        position: absolute;
        right: 15px;
        top: 50px;
        padding: 0.6875rem
    }

.logo {
    margin-left: 15px
}

    .logo img {
        width: 179px;
        height: 40px
    }

header.minimal {
    box-shadow: 0 0px 3px rgba(0,0,0,0.2)
}

    header.minimal .logo img {
        width: 160px;
        height: 36px;
    }


.cta-nav {
    padding: 18px 0
}

    .cta-nav .btn {
        padding-left: 2rem;
        padding-right: 2rem
    }

    .cta-nav .phone button {
        display: block;
        border: none
    }

    .cta-nav .phone a:hover {
        color: #61389c;
        text-decoration: none
    }

    .cta-nav .phone a span {
        display: block;
        font-size: 1rem;
        margin-top: -5px
    }

.phonebutton {
    background: #ededed;
    display: inline-block;
    right: 65px
}

.navbar-toggler {
    font-size: 0.75rem;
    text-transform: uppercase
}

.nav-text {
    display: inline-block
}

.navbar-toggler-icon {
    width: 20px;
    height: 2px;
    background: transparent;
    margin-right: 10px;
    position: relative;
    top: -1px;
    transition: all 0.2s ease
}

.navbar-toggler {
    color: #48267d
}

    .navbar-toggler.collapsed {
        color: #171717
    }

        .navbar-toggler.collapsed .navbar-toggler-icon {
            background: #171717
        }

    .navbar-toggler .navbar-toggler-icon {
        background: #fff
    }

.navbar-toggler-icon:before,
.navbar-toggler-icon:after {
    width: 20px;
    height: 2px;
    background: #48267d;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    transition: all 0.2s ease
}

.navbar-toggler.collapsed .navbar-toggler-icon:before, .navbar-toggler.collapsed .navbar-toggler-icon:after {
    background: #171717
}

.navbar-toggler.collapsed .navbar-toggler-icon:before {
    transform: translateY(-6px) rotate(0deg)
}

.navbar-toggler.collapsed .navbar-toggler-icon:after {
    transform: translateY(6px) rotate(0deg)
}

.navbar-toggler .navbar-toggler-icon:before {
    transform: translateY(-0px) rotate(45deg)
}

.navbar-toggler .navbar-toggler-icon:after {
    transform: translateY(0px) rotate(-45deg)
}

.cta-nav .button-block {
    width: 66%;
    position: absolute;
    right: 0;
    z-index: 999;
    top: 107px
}

.heroslider .slide {
    min-height: 410px;
    height: 410px;
    overflow: hidden;
    position: relative;
    padding: 2rem 0.5rem
}

    .heroslider .slide img {
        opacity: 0;
        transition: opacity .6s;
    }

        .heroslider .slide img.loaded {
            opacity: 1
        }

    .heroslider .slide .container-fluid {
        height: 100%
    }

.hero .text-wrap {
    max-width: 520px;
    position: relative
}

    .hero .text-wrap.col-md-12 {
        max-width: none
    }

.hero.generic-header .text-wrap {
    max-width: none
}


.hero.sub-page {
    text-shadow: 0 0 10px rgba(0,0,0,0.3)
}

.slide-img img {
    position: absolute;
    display: block;
    left: auto;
    right: 0;
    top: 0;
    transform: translate(11%, 0);
    height: 100%
}

.slide-img {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

    .slide-img.bg-version {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center
    }

    .slide-img:after {
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 5%, rgba(0,0,0,0.65) 70%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.2) 5%,rgba(0,0,0,0.65) 70%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.2) 5%,rgba(0,0,0,0.65) 70%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#bf000000',GradientType=0 ); /* IE6-9 */
    }

.generic-header .slide-img:after {
    background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#00000000',GradientType=0 );
    height: 400px
}

.heroslider .hero-pagination {
    position: relative
}

.heroslider .pager-item {
    width: 25%;
    cursor: pointer;
    padding: 2rem 0.5rem;
    position: relative;
    border-left: 1px #d2d2d2 solid
}

    .heroslider .pager-item:last-of-type {
        width: calc(25% - 1px);
        border-right: 1px #d2d2d2 solid
    }

    .heroslider .pager-item:hover, .heroslider .pager-item.active {
        /*color: #D92314*/
    }

    .heroslider .pager-item.active {
        background: #fff;
        box-shadow: 0 3px 5px rgba(0,0,0,0.2)
    }

        .heroslider .pager-item.active:before {
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 9.5px 12px 9.5px;
            border-color: transparent transparent #ffffff transparent;
            position: absolute;
            left: 50%;
            bottom: 100%;
            transform: translateX(-50%)
        }

        .heroslider .pager-item.active:after {
            content: "";
            position: absolute;
            background: #D92314;
            height: 5px;
            width: 100%;
            left: 0;
            bottom: 0
        }

    .heroslider .pager-item .img {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        margin-bottom: 0.5rem;
        transform: translate3d(0,0,0);
    }

        .heroslider .pager-item .img img {
            position: absolute;
            height: 100%;
            width: auto;
            top: 0;
            right: -32%
        }

    .heroslider .pager-item .copy {
        line-height: 1.1;
        text-align: center
    }

.hero.generic-header .form-control {
    border-color: #fff
}

.close-circle {
    opacity: 0.61;
    fill: rgba(255, 255, 255, 0);
    stroke: #FFFFFF;
    stroke-width: 2;
}

.cross {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2;
}

.section-padding-small {
    padding-top: 2rem;
    padding-bottom: 2rem
}

.section-padding {
    padding-top: 3rem;
    padding-bottom: 3rem
}

.content-area > div > .bodycopy + .bodycopy {
    padding-top: 3rem
}

.content-area > div > .bodycopy:not(:last-child) {
    padding-bottom: 0
}

p:last-of-type {
    margin-bottom: 0
}

.intro-signpost {
    padding: 2rem;
    width: 100%;
    overflow: hidden;
}

    .intro-signpost p {
        max-width: 410px
    }

        .intro-signpost p:last-of-type {
            max-width: 130px;
            min-height: 73px
        }

.section a:not([class]) {
    text-decoration: underline
}

    .section a:not([class]):hover, .back-link:hover, .news-article:hover {
        color: #61389c
    }


.intro-signpost .triangle-image, .sub-page-signpost .triangle-image {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 130px;
    height: 130px;
    overflow: hidden;
    text-align: right
}

    .intro-signpost .triangle-image img, .sub-page-signpost .triangle-image img {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100%;
        width: auto;
        max-width: none
    }

    .intro-signpost .triangle-image svg, .sub-page-signpost .triangle-image svg {
        position: absolute;
        top: -1px;
        left: -1px;
        width: calc(100% + 2px);
        height: calc(100% + 2px)
    }

    .intro-signpost .triangle-image img.red-icon, .sub-page-signpost .triangle-image img.red-icon {
        width: 38%;
        height: 38%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%)
    }

.intro-signpost.bg-purple-dark a:not([class]) {
    color: #fff
}

.campaign-image {
    background-size: cover;
    height: 33vh
}
/*.campaign-image:before {content: ""; width: 100%; height: 33vh; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.1)}*/


.featured-campaign {
    overflow: hidden
}

    .featured-campaign .triangle-parent {
        display: none;
        position: absolute;
        height: 100%;
        width: 50%;
        left: 0;
        z-index: 1;
        transform: skew(-45deg) translate3d(0,0,0);
        box-shadow: 0 0 70px 50px rgba(0,0,0,0.4)
    }

    .featured-campaign .padding-sides-ipad {
        z-index: 2
    }

    .featured-campaign .triangle {
        display: block;
        height: 100%;
        width: auto;
        position: relative
    }

    .featured-campaign .triangle-parent:before {
        content: "";
        background: inherit;
        position: absolute;
        right: 100%;
        height: 100%;
        width: 100vw;
        transform: translateX(1px)
    }

.play-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 100;
    background: #fff;
    outline: none;
    text-indent: -9999px
}

    .play-button:before {
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-4px, -13px);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 13px 0 13px 14px;
        border-color: transparent transparent transparent #5ABDC5;
        transition: all 0.2s ease
    }

    .play-button:hover:before {
        border-color: transparent transparent transparent #59c9d2
    }

.featured-campaign .play-button {
    left: 50%;
    top: 33vh;
    transform: translate(-50%, -50%)
}

.play-button.centred {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

    .play-button.centred.bottom {
        top: 100%;
        left: 50%
    }

.play-button:hover {
    transform: translate(-50%, -47%) !important
}

.latest-news article {
    width: 100%
}

.news-article {
    display: block;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 100%
}

    .news-article:hover {
        text-decoration: none;
        color: #49257D;
        transform: translateY(3px)
    }

        .news-article:hover .h3 {
            color: #61389c
        }

    .news-article figure, .donations-box figure {
        height: 160px;
        overflow: hidden;
        margin: 0
    }

    .news-article.featured figure {
        height: 300px
    }

    .news-article .h3 + p {
        margin-top: 1rem;
        font-size: 1rem
    }

    .news-article .article-title {
        padding: 1.5rem;
        font-size: 0.9375rem;
        width: 100%
    }

    .news-article figure img, .donations-box figure img {
        display: block;
        height: auto;
        width: 100%;
        margin: 0 auto
    }

    .news-article time, .news-article:hover time {
        display: block;
        font-size: 0.875rem;
        color: #676767;
        margin-bottom: 5px
    }

    .news-article .icon {
        margin-right: 5px;
        vertical-align: middle
    }

.news-signpost {
    overflow: hidden;
    width: 100%
}

    .news-signpost figure {
        height: calc(100% - 30px);
        overflow: hidden;
        margin-bottom: 0px;
        top: 0;
        left: 0;
        position: absolute;
        width: 100%
    }

        .news-signpost figure img {
            height: 100%;
            width: auto
        }

.badge.blog {
    margin: 0;
    top: 1rem;
    left: 1rem;
    text-shadow: none;
    margin-bottom: 1rem
}

.news-signpost > div {
    width: 100%;
    max-width: none;
    padding: 2rem 2rem 30px 2rem;
    margin-top: 70%;
    position: relative;
    bottom: 30px
}

    .news-signpost > div p {
        font-size: 0.9375rem
    }

    .news-signpost > div p, .news-signpost > div .h2 {
        padding-left: 20%
    }

    .news-signpost > div .h2 {
        margin-left: 35px
    }


.news-signpost .triangle {
    bottom: 30px;
    right: -5rem;
    height: calc(100% - 30px);
    width: auto;
    transition: all 0.4s ease
}

@media (max-width: 767px) {
    .news-signpost .triangle {
        display: none;
    }

    .news-signpost .text-right {
        background: #361f55;
    }
}

.slick-list {
    width: 100%
}


.donations-box svg {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70px;
    height: 70px
}

.donations-box span.montserrat-alt {
    line-height: 1.3em
}

.wanted-gallery {
    overflow: hidden;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 1rem;
}

    .wanted-gallery .boxshadow {
        padding: 1rem;
        transition: all 0.3s ease
    }

        .wanted-gallery .boxshadow:hover {
            transform: translateY(3px)
        }

    .wanted-gallery div.boxshadow {
        background: #fff;
        margin: 2rem 1rem;
        width: calc(33% - 2rem);
        flex-shrink: 0
    }

    .wanted-gallery .tag, .wanted-gallery .location {
        font-size: 0.875rem
    }

    .wanted-gallery .tag {
        margin-right: 0.5rem;
        display: inline-block
    }

        .wanted-gallery .tag:last-of-type {
            margin-bottom: 0.5rem
        }

    .wanted-gallery figure {
        height: 230px;
        width: 100%;
        overflow: hidden;
    }

        .wanted-gallery figure img {
            display: block;
            margin: 0 auto;
            width: auto;
            max-width: 100%;
            max-height: 230px;
        }

        .wanted-gallery figure a {
            display: block;
            width: 100%
        }


.row.wanted-gallery.gallery-page {
    margin-top: -2rem
}

    .row.wanted-gallery.gallery-page > div[class^="col-"] {
        margin-top: 2rem !important
    }

.slick-track {
    display: flex;
}

.slick-dots {
    position: absolute;
    bottom: -30px;
    display: block;
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center;
}

    .slick-dots li {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 0 5px;
        padding: 0;
        cursor: pointer;
    }

        .slick-dots li.slick-active button:before {
            opacity: .75;
            color: black;
        }

        .slick-dots li button:hover, .slick-dots li button:focus {
            outline: none;
        }

        .slick-dots li button {
            font-size: 0;
            line-height: 0;
            display: block;
            width: 20px;
            height: 20px;
            padding: 5px;
            cursor: pointer;
            color: transparent;
            border: 0;
            outline: none;
            background: transparent;
        }

            .slick-dots li button:before {
                font-size: 30px;
                line-height: 20px;
                position: absolute;
                top: 0;
                left: 0;
                width: 20px;
                height: 20px;
                content: '•';
                text-align: center;
                opacity: .25;
                color: black;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

.bg-purple-dark .slick-dots li button:before {
    color: #fff
}

.slick-dots li button:hover:before, .slick-dots li button:focus:before {
    opacity: 1;
}

.slick-next {
    right: -25px;
}

.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 18px;
    height: 34px;
    margin-top: -10px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    opacity: 0.75
}

.slick-prev {
    left: -25px;
}

    .slick-prev:hover, .slick-next:hover {
        opacity: 1
    }

    .slick-prev:before, .slick-next:before {
        content: "";
        border-width: 17px 0 17px 18px;
        display: block;
        border-color: transparent transparent transparent #fff;
        width: 0;
        height: 0;
        border-style: solid;
    }

    .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
        opacity: .25;
    }

    .slick-prev:before {
        border-width: 17px 18px 17px 0;
        display: block;
        border-color: transparent #fff transparent transparent;
    }

    .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
        opacity: .25;
    }

    .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
        opacity: 1;
    }

.general-signpost-row {
    margin-top: -2rem
}

.general-signpost, .sub-page-signpost {
    min-height: 250px;
    margin-top: 1rem;
    transition: all 0.3s ease;
    overflow: hidden
}

.sub-page-signpost {
    min-height: 150px
}

.general-signpost > div {
    padding: 1rem;
    background-color: #361f55;
    width: 100%;
    overflow: hidden
}

.sub-page-signpost > div {
    padding: 1rem;
    width: 100%;
    overflow: hidden
}

    .sub-page-signpost > div.bg-purple-dark h4 {
        color: #fff
    }

.general-signpost *, .sub-page-signpost * {
    position: relative
}

.sub-page-signpost .h4 {
    max-width: 70%
}

.sub-page-signpost .bg-grey h4 {
    text-shadow: 0 0 6px #fff, 0 0 4px #fff
}

.sub-page-signpost .bg-purple-dark h4 {
    text-shadow: 0 0 6px #000
}


.general-signpost figure {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden
}

    .general-signpost figure:after {
        content: "";
        background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0
    }

    .general-signpost figure img {
        height: 100%;
        width: auto;
        max-width: none;
        margin: 0 auto;
        display: block;
    }

.general-signpost:hover, .sub-page-signpost:hover {
    color: #fff;
    text-decoration: none
}

    .general-signpost:hover .h4, .sub-page-signpost:hover h4 {
        text-decoration: underline
    }


a.general-signpost[href^="http://"] h4:before {
    content: "";
    width: 18px;
    height: 18px;
    display: inline-block;
    background: url("/getmedia/79d4354f-01b8-4bec-bba2-5f8f34757915/external-link") no-repeat center center;
    background-size: 18px;
    margin-right: 10px
}


.general-signpost svg {
    position: absolute;
    width: 90px;
    height: 90px;
    right: 0;
    bottom: 0
}

.general-signpost .intro-copy {
    transition: all 0.3s ease-in;
    position: absolute;
    display: block;
    width: 100%;
    left: 0;
    bottom: 0;
    opacity: 0;
    padding: 2rem;
    transform: translateY(60px)
}

.general-signpost:hover .intro-copy {
    transition: all 0.5s cubic-bezier(.05,.16,.22,.98);
    opacity: 1;
    transform: none;
    transition-delay: 0.1s;
}

.general-signpost .triangle {
    transition: all 0.4s cubic-bezier(.78,.02,.44,.96);
    position: absolute;
    width: 800px;
    height: 800px;
    left: 50%;
    top: 50%;
    transform: rotate(45deg) translate(0%, 0%);
    display: block
}

.general-signpost:hover .triangle {
    transform: rotate(45deg) translate(-50%, 0%)
}

.footer-logo {
    width: 214px;
    height: 81px;
    display: inline-block;
    margin-right: 1rem
}

.pre-footer input[type="text"] {
    border-color: #ffffff
}

footer a {
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.875rem
}

    footer a:hover {
        color: #fff !important;
        text-decoration: underline !important
    }

footer ul li a {
    line-height: 1.2rem;
    display: inline-block;
    padding: 0.25rem 0;
}

.social-link {
    width: 56px;
    height: 56px;
    margin: 0.25rem;
    border-radius: 50%;
    text-align: center;
    padding: 12px
}

    .social-link svg {
        width: 2rem;
        height: 2rem;
        color: #fff
    }

footer .triangle, .hero .triangle {
    width: 360px;
    height: 360px;
    bottom: 0;
    right: 0;
    display: block;
    fill: #301c4c
}

footer .small-print * {
    font-size: 0.75rem
}

footer .small-links {
    padding: 3rem 0 1rem 0;
    margin-left: -1rem
}

    footer .small-links a {
        margin: 0 1rem;
        display: inline-block
    }

.breadcrumb {
    padding: 1.5rem 0 0 0;
    margin: 0 0 0 0;
    position: relative;
    z-index: 10;
    font-size: 0.875rem
}

    .breadcrumb a {
        text-decoration: underline;
        color: #fff
    }

.breadcrumb-item + .breadcrumb-item::before {
    display: none
}

.breadcrumb-item svg {
    display: none
}

.breadcrumb-item + .breadcrumb-item svg {
    display: inline-block;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    color: #ffffff;
    width: 0.75rem;
    height: 1rem;
    vertical-align: middle;
    stroke-width: 2
}

.back-link {
    text-decoration: underline
}

    .back-link svg {
        stroke-width: 2;
        transform: rotate(180deg);
        vertical-align: middle
    }

.campaign-signpost {
    margin: 2em 0
}

    .campaign-signpost:last-of-type {
        margin-bottom: 0
    }

    .campaign-signpost .row div[class^="col-"] + div[class^="col-"] {
        margin: 0 !important
    }

    .campaign-signpost figure {
        overflow: hidden;
        max-height: 250px;
        width: 100%
    }

        .campaign-signpost figure img {
            height: 100%
        }

    .campaign-signpost .triangle {
        bottom: 0;
        right: 0;
        width: 100px;
        height: 100px
    }

.stats {
    width: 100%;
    overflow: hidden
}

    .stats span {
        font-size: 3rem;
        display: block;
        line-height: 1.3
    }

.stat-item:nth-of-type(1):before {
    background-color: #49306c
}

.stat-item:nth-of-type(2):before {
    background-color: #3f2760
}

.stat-item p,
.stat-item div {
    position: relative
}

.blog-nav {
    width: 100%;
    overflow: hidden
}

    .blog-nav ul {
        margin: 0;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .blog-nav li {
        flex-shrink: 0
    }

        .blog-nav li + li {
            border-left: 1px #d2d2d2 solid
        }

        .blog-nav li > a, .blog-nav li button {
            display: block;
            padding: 1.25rem 0.75rem;
            font-weight: 700;
            color: #171717;
            text-align: center;
            height: 100%;
            background: transparent;
            margin: 0;
            text-decoration: none
        }

            .blog-nav li > a:hover, .blog-nav li button:hover {
                text-decoration: none;
                color: #61389c
            }

        .blog-nav li.active {
            order: 0
        }

            .blog-nav li.active > a {
                background: #fff;
                color: #D92314
            }

.nav-pills .nav-link {
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: 0;
    background-color: #ededed;
    color: #666666;
    text-shadow: none;
    line-height: 1.1
}

.nav-pills.generic-form .nav-link {
    display: block;
    padding: 1rem;
    font-size: 0.875rem
}

    .nav-pills.generic-form .nav-link.active, .show > .nav-pills.generic-form .nav-link {
        background-color: #f9aa22;
    }

        .nav-pills.generic-form .nav-link.active:after, .show > .nav-pills.generic-form .nav-link:after {
            content: "";
            display: block;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 11px 11px 0 11px;
            border-color: #f9aa22 transparent transparent transparent;
        }

.nav-pills.generic-form li {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

.nav-pills.generic-form.give-info-pills li {
    margin-left: -1px
}

    .nav-pills.generic-form.give-info-pills li .nav-link:not(.active) {
        background: #fff;
        box-shadow: inset 0 0 0 1px #d8d3d3
    }

    .nav-pills.generic-form.give-info-pills li .nav-link.incomplete {
        cursor: not-allowed
    }

.blog-pills li {
    flex-grow: 1
}

.latest-news .mini-feed article {
    padding: 0
}

.blog-feed-minimal {
    padding: 1rem 0.5rem 1rem 0;
    display: block;
    overflow: auto
}

.mini-feed article + article .blog-feed-minimal {
    border-top: 1px #ededed solid
}

.mini-feed .tab-content {
    padding-bottom: 30px
}

    .mini-feed .tab-content > .tab-pane {
        max-height: 470px;
        overflow: auto;
    }

.blog-feed-minimal figure {
    width: 60px;
    height: 60px;
    overflow: hidden;
    float: left;
    margin: 0 1rem 0 0
}

    .blog-feed-minimal figure img {
        height: 100%
    }

.page-link {
    border-radius: 0 !important
}

.page-item {
    margin: 0.25rem
}

    .page-item svg {
        vertical-align: middle;
        stroke-width: 2;
        width: 0.75rem;
        height: 0.75rem
    }

    .page-item.prev-item svg {
        transform: rotate(180deg)
    }

.blockquote {
    margin-bottom: 40px
}

.blockquote-footer {
    margin-top: 30px;
    max-width: 70%;
    color: #9098a2;
}

.blockquote .blockquote-footer::before {
    content: "― ";
}

.blockquote svg {
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px
}

.blockquote .quote-image {
    width: 70px;
    height: 70px;
    border-radius: 200px;
    bottom: 25px;
    right: 25px;
    margin: 0
}

.bodycopy .fr-view blockquote:not([class]) {
    background: #361F55;
    font-size: 1.25rem;
    color: #fff;
    padding: 2rem;
    margin-bottom: 40px;
    position: relative;
}

    .bodycopy .fr-view blockquote:not([class]):after {
        content: "";
        border-color: transparent #5ABDC5 #5ABDC5 transparent;
        border-width: 30px;
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        position: absolute;
        bottom: 0;
        right: 0;
    }

.hero .text-wrap {
    text-shadow: 0 0 15px rgba(0,0,0,0.6);
}

.donate-hero {
    text-shadow: none
}

.tab-content > .tab-pane {
    min-height: 280px
}

.secure-copy {
    font-size: 0.9375rem;
    max-width: 400px;
    line-height: 1.4
}

    .secure-copy br {
        display: none
    }

.header-icon {
    width: 30px;
    height: 30px;
    margin-right: 15px;
    display: block
}

.dependsOnField {
    display: none;
}

    .dependsOnField.active {
        display: flex;
    }

.form-group.is-invalid .invalid-feedback {
    display: block;
}

.form-group.is-invalid .form-control,
.form-question .form-group.is-invalid .replace-radios label {
    border-color: #D92314;
    background-color: #fff3f3
}

.form-group.is-invalid .tip-bubble {
    background-color: #D92314
}


.anon-form section.form-page {
    display: none;
}

    .anon-form section.form-page.active {
        display: block;
    }

.info-tip {
    position: absolute;
    top: 57px;
    right: 8%;
    z-index: 999;
    display: block
}


    .info-tip span {
        display: none;
        font-size: 0.875rem;
        position: absolute;
        top: -30px;
        left: calc(100% + 20px);
        padding: 1rem;
        background: #fff;
        border: 2px #49257d solid;
        width: 200px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3)
    }

        .info-tip span:before, .info-tip span:after {
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 17px 17px;
            border-color: transparent transparent #49257d transparent;
            position: absolute;
            left: -17px;
            top: 25px;
            display: block;
        }

        .info-tip span:after {
            border-color: transparent transparent #fff transparent;
            border-width: 0 0 12px 12px;
            left: -12px;
            top: 28px;
        }

.form-group:hover {
    z-index: 10
}

.info-tip.active span {
    display: block
}

.form-question {
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    background: #fff;
    margin-bottom: 1rem
}

.flatpickr-input[readonly], .flatpickr-input[type="date"], .flatpickr-input[type="time"] {
    max-width: 210px;
    padding-right: 2rem;
    display: inline-block;
    background-color: #fff;
    min-height: 42px;
    vertical-align: middle
}

.flatpickr-input + svg {
    pointer-events: none;
    margin-left: -2rem;
    vertical-align: middle;
}

.wanted-nav {
    padding: 0.75rem 0 1.25rem 0
}

    .wanted-nav svg {
        stroke-width: 1;
        transform: rotate(90deg);
        margin: 0 0.5rem 0 0;
        vertical-align: middle;
        display: inline-block
    }

    .wanted-nav .wanted-toggler {
        text-shadow: none;
        background: none;
        padding: 0;
        display: block
    }

    .wanted-nav .badge {
        margin: 0.5rem 0.5rem 0 0
    }



.form-check-input {
    margin-left: 0
}

span.form-check-input {
    margin-top: -1px
}

.sub-filter-heading {
    border-top: 1px #cccccc solid;
}

    .sub-filter-heading:first-of-type {
        border: none;
        margin-top: 0 !important;
        padding-top: 0 !important
    }



.wanted-nav .wanted-filters {
    margin: 2rem 0 1rem 0;
    display: none
}

.wanted-nav .wanted-main-toggle {
    display: block;
    position: absolute;
    right: 0;
    top: 0px;
    margin: 0;
    cursor: pointer;
    width: 38px;
    height: 38px;
    background: transparent;
}

    .wanted-nav .wanted-main-toggle svg {
        display: block;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

        .wanted-nav .wanted-main-toggle svg * {
            color: #000;
            stroke: #000;
            opacity: 1
        }

    .wanted-nav .wanted-main-toggle:hover svg, .wanted-nav .wanted-main-toggle:hover svg * {
        color: #482974;
        stroke: #482974
    }

    .wanted-nav .wanted-main-toggle svg:first-child {
        transform: rotate(90deg) translate(-50%, 50%)
    }

    .wanted-nav .wanted-main-toggle svg:last-child {
        display: none
    }

    .wanted-nav .wanted-main-toggle.opened svg {
        display: none
    }

        .wanted-nav .wanted-main-toggle.opened svg:last-child {
            display: block
        }

.wanted-intro figure {
    margin: 0;
    padding: 0.5rem
}

.wanted-intro .thumbs figure {
    padding: 0 0.25rem 0.5rem 0.25rem
}

    .wanted-intro .thumbs figure:first-child {
        padding-left: 0.5rem
    }

    .wanted-intro .thumbs figure:last-child {
        padding-right: 0.5rem
    }

.info-process-ul li {
    width: 100%
}

.giftaid-logo {
    max-width: 200px
}

.message-thread .message {
    border-radius: 20px;
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
    font-size: 0.9375rem;
    width: 80%
}

    .message-thread .message:last-of-type {
        margin: 0
    }

    .message-thread .message span {
        vertical-align: middle;
        margin: 0 0 1rem 0;
        display: inline-block;
        font-size: 0.75rem
    }

    .message-thread .message.my-message span {
        color: #48267d
    }

    .message-thread .message img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        vertical-align: middle;
        margin: 0 1rem 1rem 0
    }

.toggle-question {
    padding: 1.25rem 0;
    border-bottom: 1px #ededed solid
}

    .toggle-question:last-of-type {
        border-bottom: none;
        padding-bottom: 0
    }

    .toggle-question svg, .faq-box svg {
        transform: rotate(90deg);
        vertical-align: middle;
        transition: all 0.3s ease
    }

    .toggle-question.active svg, .faq-box.active svg {
        transform: rotate(270deg)
    }

    .toggle-question:not(.active) > div {
        display: none
    }

    .toggle-question > div {
        padding-top: 20px
    }

.breadcrumb-item .badge {
    text-decoration: none
}

.read span:first-child:before {
    content: "Read";
    font-weight: 700
}

.read.unread span:first-child:before {
    content: "Unread";
    color: #efefef
}

.read.unread span:last-child {
    display: none
}

.faq-box {
    padding-left: 80px !important;
    min-height: 60px;
    overflow: hidden
}

    .faq-box .q {
        width: 60px;
        height: 100%;
        line-height: 42px;
        text-align: center;
        top: 0;
        left: 0
    }

    .faq-box .a {
        width: 60px;
        height: 100%;
        top: 0px;
        left: 0;
        text-align: center
    }

    .faq-box.answerbox {
        display: none;
        padding-top: 0 !important
    }

        .faq-box.answerbox.active {
            display: block
        }

    .faq-box svg {
        position: absolute;
        right: 1rem;
        top: 2.3rem;
        margin: 0
    }

#hintbox button.close, #cookiebanner button.close {
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #49257D;
    border-radius: 50%;
    opacity: 1;
    border: 3px #49257D solid;
    width: 50px;
    height: 50px;
    top: 0;
    box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}

    #hintbox button.close:hover svg {
        opacity: 0.7
    }

#hintbox {
    transition: all 0.6s ease;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999
}

#hintbox {
    transform: translateY(calc(100% + 50px));
    opacity: 0
}

    #hintbox.active {
        transform: translateY(0);
        opacity: 1
    }

    #hintbox a {
        color: #fff;
        text-decoration: underline
    }

.section-padding.with-hintbox {
    padding-bottom: 15rem
}

#cookiebanner {
    transition: all 0.5s ease;
    position: fixed;
    bottom: 0rem;
    right: 0rem;
    width: 100%;
    border: 2px #49257d solid;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    z-index: 999;
    transform: translateY(calc(100% + 20px));
    opacity: 0
}

    #cookiebanner.active {
        transform: translateY(0);
        opacity: 1
    }

    #cookiebanner button.close:hover svg {
        opacity: 0.7
    }

.card-header {
    background-color: rgba(237, 237, 237, 1);
    position: relative;
    padding: 0.75rem 0rem;
    transition: all 0.2s ease;
    z-index: 99
}

.card, .card-header {
    border-radius: 0 !important
}

    .card-header:after {
        content: "";
        border-color: transparent #5ABDC5 #5ABDC5 transparent;
        border-width: 30px;
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        position: absolute;
        bottom: -1px;
        right: -1px;
        z-index: -1
    }

.accordion.teal .card-header:after {
    border-color: transparent #625EB7 #625EB7 transparent
}

.accordion.teal .card-header {
    background-color: rgba(89, 189, 197, 1)
}

.accordion.teal svg {
    fill: #fff
}

.accordion.teal .card:hover svg {
    fill: #61389c
}

.card:hover .card-header {
    background-color: rgba(237, 237, 237, 0.5)
}

.accordion.teal .card:hover .card-header {
    background-color: rgb(146, 217, 222)
}

.card {
    border-color: #ededed;
}

    .card:not(:first-of-type) {
        border-top: none
    }

.accordion.teal .card {
    border-color: rgba(89, 189, 197, 1)
}

    .card-header .btn-link,
    .card:hover .card-header .btn-link.collapsed,
    .accordion.teal .card:hover .card-header .btn-link.collapsed {
        display: block;
        width: 100%;
        text-align: left;
        color: #615db8
    }

        .card-header .btn-link.collapsed {
            color: #120b1d
        }

.accordion.teal .card-header .btn-link.collapsed {
    color: #fff
}

.card-header .btn-link svg {
    transition: all 0.2s ease-in-out;
    position: absolute;
    left: 1.483rem;
    transform: rotate(270deg);
    width: 0.75rem;
    height: 0.75rem;
    top: calc(50% - 6px)
}

.card-header .btn-link.collapsed svg {
    transform: rotate(90deg)
}

.card-header h5, .card-header h5 button {
    text-shadow: none !important
}

.card-body {
    padding: 1.125rem
}


nav[aria-label="breadcrumb"] ol {
    display: flex;
    flex-wrap: wrap
}

    nav[aria-label="breadcrumb"] ol li {
        float: none
    }

.blog-nav li {
    flex-grow: 0;
}

.badge.badge-cyan.badge-light {
    background-color: #BFE2E8;
    color: #361f55
}

/* partner section.
I've had to tweak some existing styles so they can be used with this new section.
Search for 'partner' in stylesheet to find them all */

nav[aria-label="breadcrumb"] ol {
    display: flex;
    flex-wrap: wrap
}

    nav[aria-label="breadcrumb"] ol li {
        float: none
    }

.blog-nav li {
    flex-grow: 0
}

.badge.badge-cyan.badge-light {
    background-color: #BFE2E8;
    color: #361f55
}

.partner-box-list {
    list-style-type: none;
    padding: 0;
    margin: 0
}

.partner-box {
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    padding: 2rem;
    display: inline-flex;
    width: 100%;
    flex-direction: column;
    margin-bottom: 1rem;
}

.partner-box-list .partner-box {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-top: 10px;
}

.partner-rotator {
    margin-bottom: 3rem;
}

    .partner-rotator .partner-box {
        width: 100%;
        margin: 0
    }

.partner-logo img {
    max-width: 100%;
    max-height: 90px;
    margin: 0;
    flex-grow: 0;
}

.partner-tags {
    padding: 1rem 1.75rem;
    margin-right: -2rem;
    margin-left: -2rem;
    margin-bottom: -2rem;
    display: flex;
    flex-wrap: wrap;
    background-color: #BFE2E8;
}

.partner-box.horizontal .partner-copy.testimonial-version .partner-tags {
    margin-top: 2rem
}

.partner-box.horizontal .partner-copy.testimonial-version blockquote footer + .partner-tags {
    margin-top: .5rem
}

.partner-tags .tag {
    background: #49257D;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: .25rem .75rem;
    margin: .25rem
}

    .partner-tags .tag:hover {
        text-decoration: none;
        background: #6635ad
    }

.partner-copy blockquote {
    margin: 0
}

    .partner-copy blockquote footer {
        background: #BFE2E8;
        margin-top: calc(2rem + 35px);
        margin-right: -2rem;
        margin-left: -2rem;
        margin-bottom: -2rem;
        padding: 1.5rem 2rem;
        display: flex;
        font-size: 0.9375rem;
        font-style: normal;
        font-weight: 500;
    }

        .partner-copy blockquote footer + .partner-tags {
            padding-top: 1.5rem;
            margin-top: 0
        }

        .partner-copy blockquote footer img {
            margin-top: calc( -35px - 1.5rem);
            height: 70px;
            width: 70px;
            flex-shrink: 0;
            object-fit: cover;
            border-radius: 999px;
            margin-right: 1rem
        }

        .partner-copy blockquote footer cite {
            display: block;
            font-style: normal;
            font-weight: 600;
        }

.partner-box {
    width: calc(100% - 2rem);
    margin: 10px 1rem 2rem 1rem;
}

    .partner-box > * + * {
        margin-top: 2rem
    }

    .partner-box.horizonal > .partner-copy {
        margin-top: 0;
        margin-left: 2rem
    }


.partner-slider {
    padding: 0;
    margin: 0 2rem
}

    .partner-slider .slick-slide {
        overflow: hidden;
        padding: 0 1rem;
        display: flex;
        align-items: center;
    }

    .partner-slider .slick-next, .partner-slider .slick-prev {
        margin-top: -17px
    }

        .partner-slider .slick-next:before, .partner-slider .slick-prev:before {
            border: none;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.746' height='35.248' viewBox='0 0 19.746 35.248'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:%2340bac8;stroke-linecap:round;stroke-width:3px;%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M682.035,903.5l15.5,15.5-15.5,15.5' transform='translate(-679.914 -901.379)'/%3E%3C/svg%3E") no-repeat center;
            width: 100%;
            height: 100%
        }

        .partner-slider .slick-prev:before {
            transform: rotateY(180deg);
        }

    .partner-slider .slick-prev {
        left: -30px
    }

    .partner-slider .slick-next {
        right: -30px
    }

    .partner-slider *:focus {
        outline: none
    }

    .partner-slider img {
        height: 35px;
        width: auto
    }


/* partner section end */


.wanted-widget {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

    .wanted-widget figure img {
        width: auto;
        max-width: 100%;
        height: auto
    }

    .wanted-widget .person-list {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
    }

    .wanted-widget ul {
        font-size: 0.9375rem
    }

        .wanted-widget ul strong {
            display: block
        }

        .wanted-widget ul li {
            flex-basis: 100%;
        }

            .wanted-widget ul li + li {
                margin-top: 1.5rem
            }

            .wanted-widget ul li.two-col {
                flex-basis: 50%
            }


@supports (object-fit: cover) {
    .news-article figure img, .news-signpost figure img, .general-signpost figure img, .campaign-signpost figure img, .blog-feed-minimal figure img, .donations-box figure img {
        object-fit: cover;
        width: 100%;
        height: 100%
    }
}

@media (min-width: 321px) {
    .slide-img img {
        transform: translate(9%, 0)
    }

    h1, .h1 {
        font-size: 2.5rem
    }
}


@media (min-width: 576px) {
    .modal-dialog {
        max-width: 85vw
    }
}

@media (max-width: 767px) {
    .heroslider .pager-item .img {
        width: 32px;
        height: 32px;
        margin-top: -32px
    }

    .mega-signpost.info .info-corner {
        width: 64px;
        height: 64px
    }

    .padding-none-mobile {
        padding: 0
    }

    .btn.multiline {
        padding: 0.6875rem 2rem
    }

    .btn:not(.btn-sm) {
        padding: 1.125rem 2rem
    }

    .modal-content .btn {
        width: 100%
    }

    .dropdown.jumplinks {
        width: 100%;
        margin-top: 2rem
    }

        .dropdown.jumplinks .btn {
            width: 100%
        }

    .full-section-width-mobile {
        margin-left: -15px;
        margin-right: -15px;
    }

    .full-width-mobile {
        width: 100%
    }

    .secure-copy {
        font-size: 0;
        position: absolute;
        right: 0;
        top: 22px;
        width: 140px
    }

        .secure-copy strong {
            font-size: 0.75rem
        }

    .slide-img.bg-version {
        background-position: 90% center
    }

        .slide-img.bg-version.donate-version {
            background-size: auto 80vh;
            background-position: 80% top
        }

    .wanted-nav .col-md-4.active .wanted-filters {
        display: block;
        margin: 1rem 0 1rem 0
    }

    .wanted-nav .col-md-4.active svg {
        color: #482974;
        transform: rotate(-90deg)
    }

    .filter-heading {
        padding-bottom: 0.5rem;
        border-bottom: 1px #cccccc solid;
    }

    .sticky-bottom {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0
    }
    /*.mega-dropdown .dropdown-menu a.btn {display: none}*/
    .card-header button {
        padding: 1.125rem 3rem !important
    }

    .page-item.number-item {
        display: none
    }
}

@media (max-width: 768px) {
    .full-width-tablet-portrait {
        width: 100%
    }

    .mega-dropdown .subnav li a {
        display: block
    }

    .tertiary-container {
        padding: 0
    }

    .tertiary-nav .search svg {
        display: block;
        margin: 0
    }

    .cta-nav .btn.give {
        font-size: 0
    }
        /*.cta-nav .btn.give:before {font-size:0.75rem; content:"Give Info"; display: block}*/
        .cta-nav .btn.give span, .cta-nav .btn.donate span {
            font-size: 0.75rem;
            display: block
        }

    .cta-nav .btn.donate {
        font-size: 0
    }
    /*.cta-nav .btn.donate:before {font-size:0.75rem; content:"Donate"; display: block}*/
    .cta-nav .button-block .btn, .navbar-toggler {
        width: 50%;
        display: inline-block;
        padding: 0.9rem 1rem;
        text-align: center;
        line-height: 1.25
    }

    .logo {
        display: block
    }

    .cta-nav .phone, .cta-nav .phone a span {
        font-size: 0
    }

    .heroslider .slide .btn {
        text-shadow: none
    }

    .heroslider .pager-item .copy {
        font-size: 0.625rem
    }

    .heroslider .pager-item {
        padding: 1rem 0.25rem
    }

        .heroslider .pager-item:first-of-type {
            border-left: 0
        }

        .heroslider .pager-item:last-of-type {
            border-left: 0;
            border-right: 0
        }

    .blog-nav:after {
        content: "";
        background: -moz-linear-gradient(left, rgba(237,237,237,0) 0%, rgba(237,237,237,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, rgba(237,237,237,0) 0%,rgba(237,237,237,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, rgba(237,237,237,0) 0%,rgba(237,237,237,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        position: absolute;
        height: 100%;
        width: 60px;
        top: 0;
        right: 0;
        display: block
    }

    .slide-img.bg-version.donate-version.slide-img:after {
        top: auto;
        bottom: 0;
        height: 120%
    }

    .donate-hero.section-padding {
        padding-top: 0 !important
    }

    .stat-item:nth-of-type(1) {
        background-color: #49306c;
    }

    .stat-item:nth-of-type(2) {
        background-color: #3f2760;
    }
}

@media (min-width: 768px) {

    .EditingFormTable > div > div, .ErrorLabel {
        max-width: 75%
    }

    .btn {
        display: inline-block
    }

    .mega-dropdown h3 {
        display: block
    }

    .mega-dropdown .dropdown-menu p {
        margin-bottom: 1.3rem
    }

    .mega-dropdown .subnav {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
        -webkit-column-gap: 10px; /* Chrome, Safari, Opera */
        -moz-column-gap: 10px; /* Firefox */
        column-gap: 10px;
    }

        .mega-dropdown .subnav li {
            display: inline-block;
            width: 100%;
        }

    .tertiary-nav .anonymous-login, .tertiary-nav .language {
        width: auto;
        min-width: 158px
    }

    h1, .h1 {
        font-size: 4.688rem
    }

        .bodycopy h1, .bodycopy .h1, h1.small {
            font-size: 2.813rem
        }

    h2, .h2 {
        font-size: 2.188rem
    }

    h3, .h3 {
        font-size: 1.875rem
    }

    h4, h5, .h4, .h5 {
        font-size: 1.563rem
    }

    .slide-img:after {
        background: -moz-linear-gradient(left, rgba(0,0,0,0.90) 15%, rgba(0,0,0,0) 60%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, rgba(0,0,0,0.90) 15%,rgba(0,0,0,0) 60%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, rgba(0,0,0,0.90) 15%,rgba(0,0,0,0) 60%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }

    .generic-header .slide-img:after {
        background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }


    .heroslider .slide.no-gradient .slide-img:after {
        display: none
    }

    .heroslider .pager-item .img {
        margin-right: 1rem;
        margin-bottom: 0
    }

    .heroslider .slide {
        padding: 2rem;
        min-height: 510px
    }

    .modal-title {
        margin-right: 0rem
    }

    button.close {
        top: 0rem
    }

    .hero p {
        font-size: 1.313rem
    }

    .section-padding-small {
        padding-top: 3rem;
        padding-bottom: 3rem
    }

    .section-padding {
        padding-top: 5rem;
        padding-bottom: 5rem
    }

    .hero .section-padding {
        padding-top: 7rem;
        padding-bottom: 7rem
    }

    .hero.generic-header .section-padding {
        padding-top: 5rem;
        padding-bottom: 5rem
    }

    .section .row div[class^="col-"] + div[class^="col-"] {
        margin-top: 0
    }

    .latest-news article {
        padding-bottom: 30px;
    }

    .news-signpost > div p, .news-signpost > div .h2 {
        padding-left: 0%
    }

    .news-signpost > div {
        max-width: 66%
    }

    .general-signpost, .sub-page-signpost {
        margin-top: 2em
    }

    .bodycopy .leader-image {
        transform: translateY(-1rem);
        margin-bottom: 35px;
        width: 100%;
        margin-left: 0
    }

    .bodycopy .bleed-out-image {
        width: calc(100% + 6rem);
        margin-left: -3rem;
    }

    .campaign-signpost figure {
        height: 100%;
        max-height: 450px
    }

    .campaign-signpost .triangle {
        width: 150px;
        height: 150px
    }
    /*.breadcrumb {margin: 0 0 -2rem 0}*/
    .header-icon {
        width: 40px;
        height: 40px
    }


    .wanted-nav svg {
        display: none
    }

    .wanted-nav .wanted-filters {
        padding-right: 1rem;
        overflow-Y: scroll;
        max-height: 200px;
    }

        .wanted-nav .wanted-filters.active, .wanted-nav .wanted-submit.active {
            display: block
        }

        .wanted-nav .wanted-filters::-webkit-scrollbar {
            width: 0.4em;
        }

        .wanted-nav .wanted-filters::-webkit-scrollbar-thumb {
            background-color: #cccccc;
        }

        .wanted-nav .wanted-filters::-webkit-scrollbar-track {
            background-color: #fff
        }

    .wanted-nav .wanted-submit {
        display: none
    }

        .wanted-nav .wanted-filters.active, .wanted-nav .wanted-submit.active {
            display: block
        }

    .wanted-nav .col-md-4:last-child .wanted-filters {
        padding-right: 0;
        overflow: visible;
        max-height: none
    }

    .nav-pills.give-info-pills li:first-child {
        margin-left: 1rem
    }

    .nav-pills.give-info-pills li:last-child {
        margin-right: 1rem
    }

    .info-process-ul li {
        width: 25%
    }

    .form-question .replace-radios.anonymous-login label {
        flex: 0 0 calc(33% - 0.5rem)
    }

    .faq-box {
        padding-left: 120px !important;
        min-height: 90px
    }

        .faq-box .q {
            width: 90px;
            height: 100%;
            line-height: 62px
        }

        .faq-box .a {
            width: 90px;
            height: 100%;
            top: 0px;
            left: 0
        }

    #cookiebanner {
        bottom: 2rem;
        right: 2rem;
        width: 250px
    }

    /* partner section */

    .partner-box {
        width: calc(100% - 20px);
        margin: 10px 10px 2rem 10px
    }

    .partner-rotator .partner-box {
        margin-bottom: 0
    }

    .partner-box-list {
        columns: 3;
        column-gap: 1.5rem;
    }

    .partner-box.horizontal {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

        .partner-box.horizontal .partner-logo {
            flex-basis: 300px;
            display: flex;
            align-items: center
        }

            .partner-box.horizontal .partner-logo img {
                max-height: none;
                width: 100%
            }

        .partner-box.horizontal .partner-copy:not(.testimonial-version) {
            flex-basis: calc(100% - 140px - 2rem)
        }

        .partner-box.horizontal .partner-tags {
            width: calc(100% + 4rem)
        }

        .partner-box.horizontal .partner-copy.testimonial-version {
            width: 100%;
            margin-bottom: -2rem
        }

            .partner-box.horizontal .partner-copy.testimonial-version blockquote {
                display: flex;
                flex-wrap: wrap;
            }

                .partner-box.horizontal .partner-copy.testimonial-version blockquote footer {
                    width: calc(100% + 4rem);
                    margin: calc(2rem + 35px) -2rem -2rem -2rem;
                }

                    .partner-box.horizontal .partner-copy.testimonial-version blockquote footer + .partner-tags {
                        width: calc(35% + 2rem);
                        margin: calc(2rem + 35px) 0 0 0;
                        padding-left: 0.5rem;
                        margin-right: -2rem;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: flex-start;
                        align-content: flex-start;
                        position: relative;
                    }

                .partner-box.horizontal .partner-copy.testimonial-version blockquote footer {
                    width: calc(65% + 2rem);
                    margin: calc(2rem + 35px) 0 0 -2rem;
                }

    .partner-slider {
        margin: 0;
        display: flex;
        list-style-type: none;
        margin-top: 5px;
        padding: 0 1rem
    }

        .partner-slider .slick-slide {
            padding: 0 2rem
        }

        .partner-slider img {
            height: 50px
        }

        .partner-slider .slick-prev {
            left: -25px
        }

        .partner-slider .slick-next {
            right: -25px
        }
    /* partner section end */


    .card-body {
        padding: 2rem 3rem
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .section-padding.padding-sides-ipad {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .general-signpost .triangle {
        left: 20%
    }

    .donations-box {
        margin-top: 2rem
    }
}


@media (min-width: 769px) {
    .cta-nav .btn.give span, .cta-nav .btn.donate span {
        display: none
    }

    .mega-dropdown div[class^="col-"] + div[class^="col-"] {
        margin-top: 0
    }

    .cta-nav {
        padding: 28px 0;
        min-height: 135px
    }

    header.minimal .cta-nav {
        min-height: 0
    }

    .padding-md {
        padding-top: 5rem;
        padding-bottom: 5rem
    }

    .padding-sm {
        padding-top: 3.125rem;
        padding-bottom: 3.125rem
    }

    .navbar-nav .nav-link {
        padding: 1.438rem 1.438rem !important
    }

    .mega-dropdown .dropdown-menu {
        padding: 3.75rem 15px;
        min-height: 385px
    }

    .tertiary-nav .search {
        position: static;
        padding: 0.375rem 0.625rem
    }

    .cta-nav .phone {
        font-size: 2.25rem;
        position: relative
    }

        .cta-nav .phone a {
            display: block
        }

        .cta-nav .phone button.phonebutton {
            display: none
        }

    header:not(.minimal) .logo {
        margin-left: 0;
        margin-top: -10px
    }

    .navbar-toggler {
        padding: 1.125rem 2rem;
        font-size: 0.9375rem;
        min-height: 56px
    }

    .cta-nav .button-block {
        top: 167px;
        width: 44%
    }

    .heroslider .slide .text-wrap {
        margin-top: -1.5rem
    }

    .slide-img img {
        left: 50%;
        right: auto;
        top: 0;
        transform: translate(-50%, 0)
    }

    .heroslider .slide {
        min-height: 580px
    }

    .intro-signpost p:last-of-type {
        max-width: none;
        margin: 0;
        min-height: 0
    }

    .play-button {
        width: 96px;
        height: 96px
    }

    .featured-campaign .play-button {
        top: 50%
    }

    .play-button:before {
        transform: translate(-7px, -17px);
        border-width: 17px 0 17px 18px
    }

    .wanted-gallery figure {
        height: 250px;
    }

        .wanted-gallery figure img {
            max-height: 250px
        }

    .general-signpost {
        min-height: 290px
    }

    .sub-page-signpost {
        min-height: 220px
    }

    .modal-dialog {
        max-width: 800px
    }

    .intro-signpost {
        padding: 3rem 2rem
    }

    header.minimal .logo img {
        width: 308px;
        height: 69px
    }

    header:not(.minimal) .logo img {
        width: 340px;
        height: 76px
    }

    .stat-item {
        position: relative
    }

        .stat-item p {
            padding: 0 3rem
        }

        .stat-item:nth-of-type(1):after {
            background-color: #49306c;
            content: "";
            position: absolute;
            display: block;
            right: 90%;
            top: 0;
            width: 50vw;
            height: 100%;
            transform: skewX(-35deg);
        }


        .stat-item:before {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            background-color: inherit;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-44%) skewX(-35deg);
        }


    .blog-nav li {
        flex-grow: 0;
        flex-shrink: 1
    }

        .blog-nav li > a, .blog-nav li button {
            padding: 1.25rem 1.25rem
        }

    .blog-nav ul {
        overflow: auto
    }

    .header-icon {
        width: 70px;
        height: 70px
    }

    .secure-copy br {
        display: block
    }

    .form-question {
        margin-bottom: 2rem
    }

    .sub-page-signpost > div {
        padding: 2rem
    }

    .intro-signpost .triangle-image {
        width: 220px;
        height: 220px
    }

    .bodycopy .fr-view blockquote:not([class]) {
        padding: 3rem;
    }

        .bodycopy .fr-view blockquote:not([class]):after {
            border-width: 50px
        }
}




@media (min-width: 991px) {
    .campaign-image {
        height: 100%;
        position: absolute;
        width: 80%;
        right: 0
    }

        .campaign-image:before {
            display: none
        }

    .featured-campaign .triangle-parent {
        display: block
    }

    .news-signpost > div {
        margin-top: 0
    }

    .slide-img.white-shadow:after {
        background: -moz-linear-gradient(left, rgba(211,221,227,0.80) 15%, rgba(211,221,227,0) 60%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, rgba(211,221,227,0.80) 15%,rgba(211,221,227,0) 60%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, rgba(211,221,227,0.80) 15%,rgba(211,221,227,0) 60%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }

    .slide.white-shadow *,
    .hero.white-shadow * {
        color: #49257d !important;
        text-shadow: none !important
    }

    .slide.white-shadow .btn, .hero.white-shadow .btn {
        border-color: #49257d
    }

        .slide.white-shadow .btn:hover, .hero.white-shadow .btn:hover {
            background-color: #49257d;
            color: #fff !important
        }

    .general-signpost .h4 {
        z-index: 2
    }
}



@media (max-width: 1023px) {
    .info-tip {
        position: relative;
        top: 0;
        right: 0;
        display: block;
        width: 100%;
        text-align: right;
        margin-top: -35px;
        margin-bottom: 0.75rem;
    }

        .info-tip.active span {
            display: block;
            width: 100%;
            margin: 20px 0;
            position: relative;
            top: 0;
            left: 0;
            text-align: left
        }

            .info-tip.active span:before {
                top: -17px;
                left: calc(100% - 30px)
            }

            .info-tip.active span:after {
                top: -12px;
                left: calc(100% - 27px)
            }

    .form-question label {
        margin-right: 30px
    }
}


@media (max-width: 1024px) {
    .container-fluid {
        max-width: 990px
    }

    .hero-pagination .container-fluid {
        max-width: 960px
    }

    header .container-fluid {
        max-width: 1188px
    }
}

@media (min-width: 1024px) {
    .info-tip-active .info-tip span {
        display: block
    }
}

@media (min-width: 1025px) {
    .sub-page-signpost .triangle-image {
        width: 220px;
        height: 220px
    }

    .wanted-gallery {
        overflow: visible;
        padding-bottom: 0
    }

    .heroslider .slide, .heroslider .hero-inner {
        height: 640px;
        overflow: hidden
    }

    .stats span {
        font-size: 4.375rem
    }
}

@media (min-width: 769px) and (max-width: 1199px) {
    .cta-nav .btn {
        width: 50%
    }

    .tertiary-nav {
        position: relative;
        right: -15px
    }

    .cta-nav .button-block {
        min-width: 470px
    }
}

@media (max-width: 1199px) {
    .navbar-toggler {
        width: 100%;
        text-align: left
    }

    .mobile-nav {
        width: 33%
    }

    .blog-nav .container-fluid {
        padding: 0
    }
}

@media (min-width: 1200px) {
    .logo img {
        width: 400px;
        height: 90px
    }

    header.minimal .logo img {
        width: 310px;
        height: 70px
    }

    .button-block .btn + .btn {
        margin-left: 1rem
    }

    .cta-nav .button-block {
        width: auto;
        position: static
    }

    .navbar-nav .nav-link {
        text-align: center
    }

    .nav-text, .navbar-toggler {
        font-size: 0.9375rem
    }

    .hero-pagination .p-0 {
        padding: 0 15px !important
    }

    .cta-nav .phone {
        top: -13px
    }

    .slide-img img {
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .navbar-nav .nav-link {
        border: none
    }

    .navbar-collapse > ul {
        background-color: transparent
    }

    .replace-radios label {
        padding: 0.5rem 1.75rem
    }
}

@media (min-width: 1600px) {
}

/* For the purposes of IE with the anonymous login */
.InternetExplorer .form-question .replace-radios.anonymous-login label {
    flex: 0 0 36% !important
}

@media (min-width:768px) {
    .InternetExplorer .form-question .replace-radios.anonymous-login label {
        flex: 0 0 22% !important
    }
}

.purplebackground {
    background: #361F55
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.validation-summary-errors ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sandbox-details {
    background: #fb6666;
    padding: 20px;
    color: white;
    position: fixed;
    bottom: 20px;
    left: 20px;
    font-size: 0.8em;
}

.list-unstyled ul {
    padding-left: 0;
    list-style: none;
}

@media (min-width: 1600px) {
    .sandbox-details {
        position: absolute;
        left: -450px;
        bottom: 130px;
        font-size: 1em;
    }
}

label[for*=SectionHeadingFormComponent] {
    font-size: 1.875rem;
    font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    color: #361f55;
    line-height: 1.3;
    -webkit-font-smoothing: auto;
}