
/* text formatting */
@font-face
{
	font-family: 'BebasNeue';
	src: url('../Fonts/BebasNeue.otf');
}

@media screen and (max-width: 991px) {
    /* Security Pages VS Main layout*/
    .responsiveLast {
        margin-right: 0;
    }

    div.boxBorderPadding {
        height: auto;
        min-height: 0;
    }

    .noSideMarginResponsive {
        margin-right: 0;
        margin-left: 0;
    }

    div.boxBorderPadding > p > a.button_SecondaryNarrow {
        display: initial;
    }

    .stackedBy2 {
        width: 100%;
        display: block;
    }

    .stackedBy1 {
        width: 50%;
        margin: 0;
        margin-bottom: 30px;
        float: right;
    }
    /* end of Security Pages VS Main layout*/
    .sf_cols.tableContainerDark, .sf_cols.tableContainer {
        padding: 0;
    }

    div.textFeatureBox > div.innerContainer > div.footerSection {
        height: 60px;
    }

    .boxSize div.topSection {
        height: 220px;
    }

    div.iconFeatureBox p {
        height: 64px;
    }

    div.featureBox.iconFeatureBox {
        height: auto;
    }

    div.scrollerContainer.caseStudyCont {
        height: 486px;
    }

    div.boxSize > div.footerSection > div.contentSection {
        height: 185px;
    }

    div.sf_cols.sectionContainer.scrollerContainer.mobScroll {
        height: 407px;
    }
    /* ipad 3 & 4 portrait */
    /*only screen and (min-device-width: 991px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)*/

    /*three slides scroller with arrows*/

    /*END three slides scroller with arrows*/
    body {
        min-width: 0 !important;
    }

    h3 {
        margin: 0 0 20px 0;
    }

    #globalContainer {
        margin: 0 auto;
        width: 700px;
    }

    #masthead {
        padding: 0 0 0 10px;
        height: 80px;
    }

    #mastheadInspire {
        padding-left: 20px;
        padding-right: 0;
        margin-bottom: 50px;
    }

    #companyLogo {
        padding-left: 20px;
        margin: 10px 0;
    }

    #donateNowMob {
        background-color: white;
        border-bottom-color: #E3E3E3;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        box-shadow: none;
        font-family: Open Sans, Arial, Helvetica, sans-serif;
        font-weight: 400;
        font-size: 16px;
        padding-top: 10px;
        padding-bottom: 10px;
        width: 100%;
    }

    a.donateNowTop {
        float: none;
    }

    #button_SecondaryDonate {
        width: 160px;
        margin: 10px 20px;
    }

    #mobileSearchBox img {
        height: 24px;
        margin-bottom: 5px;
    }

    .md_hidden, ul.footerSitemapList {
        display: none;
        visibility: hidden;
    }

    .md_show {
        display: inherit;
        visibility: visible;
    }

    .sf_cols.sectionContainer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .sf_cols.noTopPan {
        padding-top: 0;
    }

    .sf_cols.noLowerPan {
        padding-bottom: 0;
    }

    .sf_cols .rightPadding10 {
        width: 100%;
        padding-right: 0;
    }
    /* column stacking for responsvie mode */
    .sf_2cols_1_50, .sf_2cols_2_50, .sf_2cols_1_25, .sf_2cols_2_75, .sf_2cols_1_75, .sf_2cols_2_25, .sf_2cols_1_67, .sf_2cols_2_33, .sf_2cols_1_33, .sf_2cols_2_67, .sf_3cols_1_33, .sf_3cols_2_34, .sf_3cols_3_33, .sf_4cols_1_25, .sf_4cols_2_25, .sf_4cols_3_25, .sf_4cols_4_25, .sf_5cols_1_20, .sf_5cols_2_20, .sf_5cols_3_20, .sf_5cols_4_20, .sf_5cols_5_20 {
        float: none !important;
        width: auto !important;
        padding-right: 0 !important;
    }

        .sf_2cols_1_50.same2Column > .sf_2cols_1in_50 {
            margin-right: 0 !important;
            margin-top: 0 !important;
        }

        .sf_2cols_2_50.same2Column > .sf_2cols_2in_50 {
            margin-left: 0 !important;
        }

        .sf_2cols_2_50.rightTextContent > .sf_2cols_2in_50, .sf_2cols_2_50.rightTextContent20 > .sf_2cols_2in_50, .margin20, .margin40, .marginLeft20, .marginLeft40 {
            padding-left: 0;
            margin-left: 0;
        }

    .marginRight20, .marginRight40 {
        padding-right: 0;
        margin-right: 0;
    }

    .sf_3cols_2in_34, .sf_3cols_3in_33 {
        margin-left: 0 !important;
    }

    .sf_2cols_2in_75 {
        padding-left: 0;
    }

    .md_hide_background {
        background-image: none !important;
        height: 100px !important;
        padding-top: 0 !important;
    }

    .featureBox.iconFeatureBox {
        width: 100%;
        height: auto;
    }

    /* homepage formatting */

    div.selectorContentSection .innerContent {
        padding: 10px;
    }

    .selectorBox {
        margin-right: 0;
    }


    .innerBottom {
        margin-top: 20px;
    }

    #selectorBox1Open, #selectorBox2Open, #selectorBox1Closed, #selectorBox2Closed {
        margin-right: 12px;
    }

    a.vs_button.rightActionButton, a.vs_link.rightActionButton, .md_hidden a.vs_toggle_link.rightActionButton, a.button_Secondary.rightActionButton, a.button_SecondaryNarrow.rightActionButton {
        float: none;
    }

    a.button_Secondary.rightActionButton, a.button_SecondaryNarrow.rightActionButton, a.button.vs_roundCornerButton.rightActionButton {
        float: left;
    }

    div.twoButtonContainer {
        padding-bottom: 20px;
        margin-top: 0;
        width: 25%;
        float: right;
        margin-right: 0;
    }

        div.twoButtonContainer > a.button_Secondary.rightActionButton, div.twoButtonContainer > a.button_SecondaryNarrow.rightActionButton {
            float: right;
        }

    div.featureContent > a > div.infoContent {
        padding: 20px;
        width: calc(100% - 40px);
    }



    div.homeInfo h4 {
        line-height: 20px;
    }

    /* end homepage formatting */
    .homeContact {
        width: 60%;
        float: left;
    }

    #logo {
        display: none;
        visibility: hidden;
    }

    #mobileLogo {
        margin-top: 14px;
        height: 45px;
        background-repeat: no-repeat;
        visibility: visible;
        width: 100px;
        display: inline-block;
        float: left;
    }
    /* hamburger */
    .mobileToolbar {
        float: right;
    }

    div.mobileToolbar > div.mobileIconContainer
    /* div#rightButtons > #mobileSearchBox */ {
        display: inline-block;
        padding-top: 18px;
        height: 52px;
        width: 58px;
        text-align: center;
    }

        div.mobileToolbar > div.mobileIconContainer p {
            font-size: 12px;
            font-family: Open Sans, Arial Semibold, Helvetica, sans-serif;
            font-weight: 600;
            color: #d24508;
            line-height: 14px;
            margin-top: 0;
            margin-bottom: 0;
            float: none;
        }

    a#mobileSearchBox {
        font-size: 12px;
        font-family: Open Sans, Arial Semibold, Helvetica, sans-serif;
        font-weight: 600;
        color: #d24508;
    }

    div.mobileToolbar > div.mobileIconContainer span {
        font-size: 12px;
        font-family: Open Sans, Arial Semibold, Helvetica, sans-serif;
        font-weight: 600;
        color: #d24508;
        line-height: 14px;
        margin-top: 0;
        margin-bottom: 0;
    }

        div.mobileToolbar > div.mobileIconContainer span.open {
            display: block;
        }

    div.mobileToolbar > div.mobileIconContainer a.hamburgerIcon.menu-open > span.open {
        display: none;
    }

    a.hamburgerIcon {
        visibility: visible;
        display: block;
    }

        a.hamburgerIcon > img.openIcon, a.hamburgerIcon > img.closeIcon {
            height: 24px;
            margin-bottom: 5px;
        }

        a.hamburgerIcon > img.openIcon {
            display: inline-block;
            visibility: visible;
        }

        a.hamburgerIcon > p.open {
            display: block;
            visibility: visible;
        }

        a.hamburgerIcon > img.closeIcon, a.hamburgerIcon.menu-open > img.openIcon, a.hamburgerIcon > p.close, a.hamburgerIcon.menu-open > p.open, a.hamburgerIcon > span.close, a.hamburgerIcon.menu-open > span.open {
            display: none;
            visibility: hidden;
        }

        a.hamburgerIcon.menu-open > img.closeIcon {
            display: inline-block;
            visibility: visible;
        }

        a.hamburgerIcon.menu-open > p.close {
            display: block;
            visibility: visible;
        }

        a.hamburgerIcon.menu-open > span.close {
            display: block;
            visibility: visible;
        }
    /* End hamburger*/

    /* login popup */
    div#mobileUserLogin.menu-open {
        display: block;
        visibility: visible;
        min-height: 50px;
        position: relative;
        margin-bottom: 60px;
    }

    #mobileUserLogin.menu-open > div.separator {
        display: block;
        visibility: visible;
        height: 5px;
        clear: both;
        background-color: #f7f7f7;
    }

    div.vs_mobileLoginPopupContentDiv.open {
        display: block;
        visibility: visible;
        width: 100%;
        padding-top: 10px;
        position: absolute;
        z-index: 25;
        background-color: white;
    }

    div.vs_mobileLoginPopupContentDiv > div.linkLineContainer {
        padding: 20px 40px;
        border-bottom: 3px solid #f7f7f7;
    }

    .linkLineContainer:last-of-type {
        margin: 0;
        padding: 25px 40px !important;
    }


    div .vs_mobileLoginPopupContentDiv > div.linkLineContainer > a.vs_button,
    div.vs_mobileLoginPopupContentDiv > div.linkLineContainer > a.vs_button:link,
    div.vs_mobileLoginPopupContentDiv > div.linkLineContainer > a.vs_button:visited {
        width: calc(100% - 50px);
        margin-bottom: 10px;
        text-align: center;
        font-size: 15px;
        font-family: Open Sans, Arial Semibold, Helvetica, sans-serif;
        font-weight: 600;
        background-color: #fff;
        color: #007f99;
        border: 1px solid #007f99;
    }

    div.vs_mobileLoginPopupContentDiv > div.linkLineContainer > a.vs_link.vs_registerButton {
        font-family: Open Sans, Arial Semibold, Helvetica, sans-serif;
        font-weight: 600;
        font-size: 16px;
        color: #444;
        line-height: 17px;
        margin-left: 0;
        float: left;
        margin-top: -22px;
        width: calc(100% - 50px);
        margin-bottom: 10px;
        text-align: center;
        font-size: 15px;
        padding: 13px 25px;
    }

    div.vs_mobileLoginPopupContentDiv > div.linkLineContainer > span {
        display: block;
        color: #444444;
        font-size: 14px;
        font-family: Open Sans, Arial Semibold, Helvetica, sans-serif;
        font-weight: 400;
    }

    /* End login popup*/
    div.breadcrumb-nav-container > div.breadcrumb-nav {
        padding-left: 20px;
    }

    div.contentBlockHeaderSection {
        position: relative;
    }

        div.contentBlockHeaderSection > h1 {
            display: inline-block;
        }

        div.contentBlockHeaderSection > a.headerLink {
            float: right;
            margin-top: 20px;
        }

    div.verticalMiddleAlign {
        display: inherit;
    }
    /* Hero Banner */
    div.heroBanner > div.heroContent,
    div.heroBanner.projNav > div.heroContent,
    div.heroBanner > div.heroContent.tillEdge,
    div.heroBanner.leftPositioning > div.heroContent {
        float: none;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        background-color: rgba(255, 255, 255, 0.9);
        width: 100%;
        float: left;
        position: absolute;
        bottom: 0;
    }

        div.heroBanner.projNav > div.heroContent > div.innerContent {
            margin-left: 0;
        }

    /* End Hero Banner */
    #breadcrumbs {
        margin-left: 20px;
        width: auto;
    }

    div.sectionContainer.fourItems div.featureBox {
        margin-right: 20px;
        width: 380px;
    }

    div.sectionContainer.fourItems div.iconFeatureBox, div.iconFeatureBox, div.iconFeatureBox.lastItem, div.imageFeatureBox.singleBox {
        float: none;
        margin: 0 auto;
        margin-bottom: 20px;
    }

        div.iconFeatureBox.lastItem {
            margin-bottom: 0;
        }

        div.iconfeatureBox.wideBox, div.iconfeatureBox.wideBox.lastItem {
            margin-right: 40px;
            width: 100%;
            height: auto;
        }

    div.scrollerContainer, div.textScrollerContainer {
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        height: 460px;
        -webkit-overflow-scrolling: touch;
    }

    div.scrollerContainer {
        height: 500px;
    }

    div.textScrollerContainer {
        height: 320px;
    }

        div.scrollerContainer ::-webkit-scrollbar,
        div.textScrollerContainer ::-webkit-scrollbar {
            -webkit-appearance: none;
            width: 10px;
        }

        div.scrollerContainer ::-webkit-scrollbar-track,
        div.textScrollerContainer ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
            box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
            border-radius: 8px;
        }

        div.scrollerContainer ::-webkit-scrollbar-thumb,
        div.textScrollerContainer ::-webkit-scrollbar-thumb {
            -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
            box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
            border-radius: 8px;
        }

    div.scrollerContainerAutoHeight {
        width: 100%;
        overflow-x: scroll;
        height: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
    }

    div.textFeatureBox {
        height: 286px;
    }

    div.scrollerContainer > div {
        width: 1200px;
    }

    div.articlePhotoBox > div.footerSection {
        left: 0;
        width: 100%;
    }

    div.infoBox.noImage > div.innerContainer {
        padding-left: 0px;
    }

    div.infoBox {
        width: auto;
        padding: 0 20px;
    }

    div.iconFeatureBoxDouble > div.innerContainer > div.imageSection {
        float: none;
        width: 100%;
        margin-top: 25px;
        margin-bottom: 25px;
    }

    div.iconFeatureBoxDouble > div.innerContainer > div.contentSection {
        float: none;
        width: calc(100% - 60px);
    }
    /* CTA Banner */
    div.CTABanner {
        height: auto;
        background-image: none !important;
    }

        div.CTABanner > div.CTABannerContent {
            width: 100%;
            float: left;
            position: initial;
        }

            div.CTABanner > div.CTABannerContent > div.innerContent {
                padding-left: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
            }
    /* End CTA Banner */
    /* Team Member Box */

    div.teamMemberBox {
        min-height: auto;
        min-height: initial;
    }

        div.teamMemberBox > div.headerSection {
            float: none;
            min-height: auto;
            min-height: initial;
            width: 100%;
        }

            div.teamMemberBox > div.headerSection > div.innerSection {
                padding-bottom: 0;
            }

                div.teamMemberBox > div.headerSection > div.innerSection > img {
                    float: right;
                }

        div.teamMemberBox > div.contentSection {
            float: none;
            width: auto;
        }

            div.teamMemberBox > div.contentSection > div.innerSection {
                padding: 10px 20px 35px 20px;
            }

                div.teamMemberBox > div.contentSection > div.innerSection p + p {
                    margin-bottom: 1em;
                }
    /* End Team Member Box */
    div.fundItemBox.contentClose .open, div.fundItemBox.contentClose > div.innerContent > div.closable.open, div.contentSection.contentClose .open {
        display: block;
        visibility: visible;
    }

    div.fundItemBox.contentClose .vs_link.open, div.fundItemBox.contentClose .vs_toggle_link.open, div.contentSection.contentClose .vs_link.open, div.contentSection.contentClose .vs_toggle_link.open {
        display: inline;
    }

    div.fundItemBox.contentClose .close, div.contentSection.contentClose .close {
        display: none;
        visibility: hidden;
    }

    div.fundItemBox.contentOpen .close, div.contentSection.contentOpen .close {
        display: block;
        visibility: visible;
    }

    div.fundItemBox.contentOpen .vs_link.close, div.fundItemBox.contentOpen .vs_toggle_link.close, div.contentSection.contentOpen .vs_link.close, div.contentSection.contentOpen .vs_toggle_link.close {
        display: inline;
    }

    div.fundItemBox.contentOpen .open, div.contentSection.contentOpen .open {
        display: none;
        visibility: hidden;
    }
    /* Fund Item */
    div.fundItemBox div.linkContent > ul.fundUrlList > li.fundUrlItem {
        float: none;
    }

        div.fundItemBox div.linkContent > ul.fundUrlList > li.fundUrlItem + li {
            margin-top: 13px;
        }

    div.fundItemBox > div.innerContent > div.closable {
        width: 100%;
    }

    div.fundItemBox h3 {
        max-width: 70%;
    }

    
    /* End Fund Item */
    /* Form with details box*/
    .sf_cols.tableContainer {
        display: block;
    }

        .sf_cols.tableContainer > div > div > div.cellContainer {
            display: block;
            width: 100%;
            margin: 0 auto 20px auto;
            border: 1px solid #d8d8d8;
        }

        .sf_cols.tableContainer > div > div > div.formContainer > div {
            padding-left: 20px;
        }

    div.formContainer .sf_2cols_1_50, div.formContainer .sf_2cols_2_50 {
        width: 100%;
        margin: 0;
    }

    div.formContainer input.sfTxt, div.formContainer textarea.sfTxt {
        max-width: none;
        min-width: auto;
    }
    /* End Form with details box*/
    /* Circle numbered list */
    .sfContentBlock ol.circleOL > li {
        background-image: url('../Images/bg-numbered-circle-md.png');
    }

    ol.circleOL div.numberedCircleIcon {
        background: url('../Images/icons-circle-li-md-sprite.png') no-repeat;
        width: 36px;
        height: 35px;
    }

        ol.circleOL div.numberedCircleIcon.numbered-icon-2 {
            background-position: -35px 0;
        }

        ol.circleOL div.numberedCircleIcon.numbered-icon-3 {
            background-position: -71px 0;
        }

    ol.circleOL div.paddingCell {
        width: 14px;
    }

    ol.circleOL div.contentSection > h1 {
        line-height: 35px;
        margin-bottom: 10px;
    }
    /* End Circle numbered list */
    /* Testimonial */
    div.testimonialContainer {
        background-image: none !important;
        min-height: auto;
    }

        div.testimonialContainer > div.imageContainer {
            text-align: center;
        }

        div.testimonialContainer > div.messageContainer {
            position: relative;
            width: 100%;
            float: none;
            padding-top: 20px;
            padding-bottom: 50px;
        }

            div.testimonialContainer > div.messageContainer > div.testifierDetailsContainer {
                margin-top: 30px;
                margin-left: 50px;
            }

            div.testimonialContainer > div.messageContainer > p.testifierMessage {
                font-size: 18px;
                line-height: 32px;
                padding-right: 50px;
                left: 0;
            }

            div.testimonialContainer > div.messageContainer > div.testifierDetailsContainer > span.testifier, div.testimonialContainer > div.messageContainer > div.testifierDetailsContainer > span.testifierCompany {
                font-size: 18px;
            }

            div.testimonialContainer > div.messageContainer > p.testifierMessage:after {
                position: absolute;
                width: 50px;
                height: 50px;
                font-family: Open Sans, Arial Semibold, Helvetica, sans-serif;
                font-weight: 600;
                font-size: 35px;
                line-height: 1;
                bottom: -50px;
                right: 0;
                content: "\201D";
            }

            div.testimonialContainer > div.messageContainer > p.testifierMessage:before, h3.testifierMessage:before {
                font-size: 35px;
            }

            div.testimonialContainer > div.messageContainer > a.vs_button {
                margin-top: 20px;
                margin-left: 50px;
            }

        div.testimonialContainer img {
            width: 60%;
        }
    /* End Testimonial */
    /* Icon tabs */
    .sfContentBlock ul.iconTabs {
        height: 85px;
    }

    ul.iconTabs > li.iconTab {
        padding-top: 10px;
        padding-left: 5px;
        padding-right: 5px;
        height: 63px;
        background-color: #F7F7F7;
    }

        ul.iconTabs > li.iconTab a {
            font-size: 12px;
        }

    li.iconTab > div.iconTab-icon {
        width: 27px;
        height: 27px;
        margin: auto;
        margin-bottom: 6px;
    }

    li.iconTab > div.iconTab-icon-contact {
        background: url('../Images/icons-contact-us-sprite-sm.png') no-repeat;
    }

    li.iconTab > div.iconTab-icon-aboutInvesting {
        background-position: 0 0;
    }

    li.iconTab > div.iconTab-icon-applying {
        background-position: -27px 0;
    }

    li.iconTab > div.iconTab-icon-makingTrades {
        background-position: -54px 0;
    }

    li.iconTab > div.iconTab-icon-authoriseTransaction {
        background-position: -81px 0;
    }

    li.iconTab > div.iconTab-icon-account {
        background-position: -108px 0;
    }
    /* Tax Calculator */
    div.taxCalculator.taxCalculator_LoanCalculation ul.rateSelectionContainer > li.rateSelectionBox {
        width: 18%;
        margin-right: calc(2% - 3px);
    }
    /* End Tax Calculator */
    /* bank sprite */
    li.iconTab > div.iconTab-icon-caf-bank {
        background: url('../Images/icons-caf-bank-sprite-sm.png') no-repeat;
    }

    li.iconTab > div.iconTab-icon-opening {
        background-position: 0 0;
    }

    li.iconTab > div.iconTab-icon-about {
        background-position: -27px 0;
    }

    li.iconTab > div.iconTab-icon-online {
        background-position: -55px 0;
    }

    li.iconTab > div.iconTab-icon-management {
        background-position: -81px 0;
    }

    li.iconTab > div.iconTab-dormant {
        background-position: -108px 0;
    }

    li.iconTab > div.iconTab-bank-complaints {
        background-position: -135px 0;
    }
    /* individuals sprite */
    li.iconTab > div.iconTab-icon-individuals-faq {
        background: url('../Images/icons-individuals-faq-sprite-sm.png') no-repeat;
    }

    li.iconTab > div.iconTab-icon-timesaving {
        background-position: 0 0;
    }

    li.iconTab > div.iconTab-icon-charityAccount {
        background-position: -27px 0;
    }

    li.iconTab > div.iconTab-icon-simpleStressFrees {
        background-position: -55px 0;
    }

    li.iconTab > div.iconTab-icon-charitableTrust {
        background-position: -82px 0;
    }

    li.iconTab > div.iconTab-icon-consultancy {
        background-position: -108px 0;
    }

    li.iconTab > div.iconTab-icon-handshake2 {
        background-position: -135px 0;
    }

    li.iconTab > span.iconTabText {
        font-size: 12px;
        font-weight: normal;
        line-height: 10px;
    }

        li.iconTab > span.iconTabText a {
            font-size: 12px;
        }
    /* End Icon tabs */
    .globalFooterSectionContainer .sf_5cols_5_20 {
        width: 100%;
    }

    div.sampleBox {
        margin: 0;
        max-width: 100%;
    }

    div.sf_cols.whiteSectionContainer {
        background-color: #ffffff;
        padding: 20px;
        width: auto;
    }

    div.blogSummaryImage {
        display: none;
    }

    div.blogSummary {
        padding: 20px;
        height: auto;
        width: 88%;
    }

        div.blogSummary > div.contentSection {
            width: 100%;
        }

            div.blogSummary > div.contentSection > div.innerSection {
                height: auto;
                padding: 0 0 20px 0;
            }

    .greyInformationBox {
        height: auto;
    }

    .blogContainer {
        flex-direction: column-reverse;
    }

    .sf_2cols_2_75.rightTextContent > .sf_2cols_2in_75 {
        padding-left: 0;
    }

    .paddingRight20, .paddingRight40 {
        padding: 0;
    }

    div.presentationBox.caseStudy {
        height: auto;
        width: 100%;
        overflow: hidden;
        margin-bottom: 20px;
    }

    div.presentationBox > img {
        width: 100%;
        height: auto;
        text-align: center;
    }

    div.presentationBox > div.footerSection > div.contentSection {
        padding-left: 20px;
        padding-right: 20px;
    }
    /* Hero Banners (plural) */
    div.heroBanners {
        width: 700px;
        height: 450px;
    }

        div.heroBanners div.externalNavBar {
            right: 0px;
            top: 0px;
            width: 230px;
            height: 450px;
        }

            div.heroBanners div.externalNavBar div.shortCutBox {
                height: 110px;
            }

                div.heroBanners div.externalNavBar div.shortCutBox > div.innerContent {
                    padding-left: 15px;
                    padding-right: 15px;
                }

                div.heroBanners div.externalNavBar div.shortCutBox.selected > div.innerContent::before {
                    top: 45px;
                }

                div.heroBanners div.externalNavBar div.shortCutBox > div.innerContent > h2 {
                    font-size: 16px;
                    line-height: 19px;
                }

                div.heroBanners div.externalNavBar div.shortCutBox > div.innerContent > p {
                    font-size: 14px;
                    line-height: 140%;
                }

    ul#HeroBannersList > li.heroBannersListItem > div.heroBannersItem > div.heroBannersItemContent {
        margin-left: 20px;
        width: calc(65% - 20px);
        margin-bottom: 20px;
    }

        ul#HeroBannersList > li.heroBannersListItem > div.heroBannersItem > div.heroBannersItemContent > div.innerContent > div.innerHeader {
            margin-bottom: 15px;
            margin-top: 15px;
        }

            ul#HeroBannersList > li.heroBannersListItem > div.heroBannersItem > div.heroBannersItemContent > div.innerContent > div.innerHeader > h1 {
                font-size: 50px;
                line-height: 1;
            }

            ul#HeroBannersList > li.heroBannersListItem > div.heroBannersItem > div.heroBannersItemContent > div.innerContent > div.innerHeader > h2 {
                font-size: 18px;
                line-height: 1.8;
                padding-bottom: 4px;
                margin-bottom: 0px;
            }

        ul#HeroBannersList > li.heroBannersListItem > div.heroBannersItem > div.heroBannersItemContent.highlightedText > div.innerContent > div.innerHeader > h1 > mark {
            line-height: 1;
        }

        ul#HeroBannersList > li.heroBannersListItem > div.heroBannersItem > div.heroBannersItemContent.highlightedText > div.innerContent > div.innerHeader > h2 {
            margin-bottom: 1px;
        }

            ul#HeroBannersList > li.heroBannersListItem > div.heroBannersItem > div.heroBannersItemContent.highlightedText > div.innerContent > div.innerHeader > h2 > mark {
                line-height: 1.7;
            }

    div.heroBanners div.imageNavBar {
        left: 20px;
        top: 35px;
    }

    /* Trust Hero banner */
    div.heroBanner.heroBannerTrust > div.heroContent {
        width: calc(100% - 40px);
        margin-left: 20px;
    }

        div.heroBanner.heroBannerTrust > div.heroContent > div.innerContent > div.innerHeader h1 {
            margin-top: 25px;
            margin-bottom: 5px;
        }

        div.heroBanner.heroBannerTrust > div.heroContent > div.innerContent > div.innerBody h4 {
            float: right;
            width: 450px;
            margin-top: 0px;
            margin-bottom: 15px;
        }

        div.heroBanner.heroBannerTrust > div.heroContent > div.innerContent > div.innerBody > div.trustManagerName {
            margin-right: 24px;
        }
    /* End Trust Hero banner */
    /* homepage feature panels */

    #globalNavBarWrapper.searchBoxMobile.menu-open > .sfContentBlock {
        visibility: hidden;
        display: none;
    }

        #globalNavBarWrapper.searchBoxMobile.menu-open > .sfContentBlock > #VSContentMenu {
            visibility: hidden;
            display: none;
        }

    #globalNavBarWrapper > div.vs_searchwidget {
        visibility: hidden;
    }

    #globalNavBarWrapper.searchBoxMobile.menu-open > div.vs_searchwidget {
        display: block;
        visibility: visible;
        position: absolute;
        top: 100px;
        left: 20px;
        width: 100%;
    }

    div.mobileToolbar > div.mobileIconContainer.selected {
        height: 62px;
        background-color: #f7f7f7;
    }

    #VSMegaMenu.menu-open, #globalNavBarWrapper.searchBoxMobile.menu-open {
        display: block;
        visibility: visible;
        background-color: #f7f7f7;
        height: 80px !important;
    }

        #globalNavBarWrapper.searchBoxMobile.menu-open > .vs_searchwidget .sfsearchBox input[type="text"] {
            background-color: #ffffff;
        }

        #globalNavBarWrapper.searchBoxMobile.menu-open > .vs_searchwidget .sfsearchBox {
            width: 93%;
            margin-right: 0;
            float: none;
        }

    #mainHeaderPlaceholder_globalNavBarPlaceHolder_T226AAC11021 {
        background-color: transparent !important;
    }

    #globalNavBarWrapper.menu-open {
        background-color: #f7f7f7;
        height: 80px !important;
    }

    .setUpRegDonation .sf_colsIn.sf_2cols_2in_33 {
        margin-left: 0;
    }

    .setUpRegDonation .textBlock {
        margin-right: 30px;
    }

    .customTable {
        display: block;
    }

    .customHeaderRow {
        display: none;
    }

    .headerMobile {
        display: block;
    }

    .customRow {
        border: 1px solid #e3e3e3;
        border-collapse: collapse;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 24px;
        max-width: 720px;
        padding: 15px 20px 0px 20px;
    }

    .customTableCell {
        box-sizing: border-box;
        display: block;
        padding: 0px 15px 15px 0;
    }

        .customTableCell.md_hidden {
            display: none;
        }

    .tabletAndMobileOptional {
        display: none !important;
    }

    .onlyMobileAndTablet {
        display: block;
    }

    div.onlyBigTablet {
        display: block;
    }

    div.bigTabletOptional {
        display: none;
    }

    .mainList .categoryImageBox {
        width: 35px;
    }
    /* DPC */

    .DPCAccountOverview.donations .mediumContainer {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

        .DPCAccountOverview.donations .mediumContainer h3 {
            margin-right: 15px;
            order: 0;
        }

        .DPCAccountOverview.donations .mediumContainer a {
            align-self: flex-start;
            margin-bottom: 15px;
        }

    .DPCAccountOverview.donations a.vs_button.donate {
        margin-right: 5px;
        order: 1;
    }

    .DPCAccountOverview.donations a.vs_button.donateOverseas {
        margin-left: 0;
        order: 2;
    }

    .DPCAccountOverview.donations .smallContainer {
        order: 3;
        width: 100%;
    }

    .DPCAccountOverview.donations p.smallNote {
        order: 4;
    }

    .DPCAccountOverview.horizontalFlow > .mediumContainer > .content-container > div,
    .DPCAccountOverview.horizontalFlow > .mediumContainer > .content-container > div.savingsInvestmentBlock {
        max-width: 33%;
    }

    .DPCAccountOverview.investments .smallContainer {
        min-width: 0;
        max-width: 300px;
    }

    .DPCAccountSummaryTable .customTable > div.customRow:nth-child(even) {
        background-color: rgba(0, 142, 214, 0.05);
    }

        .DPCAccountSummaryTable .customTable > div.customRow:nth-child(even) .customTableCell {
            background-color: transparent;
        }

    .DPCAccountSummaryTable .customTable .firstColumn, .DPCAccountSummaryTable .customTable .secondColumn, .DPCAccountSummaryTable .customTable .thirdColumn {
        width: 50%;
    }

    .DPCAccountSummaryTable .customTable .thirdColumn, .DPCAccountSummaryTable .customTable .fourthColumn, .DPCAccountSummaryTable .customTable .fifthColumn {
        text-align: left;
    }

    .DPCAccountSummaryTable .customTable .thirdColumn, .DPCAccountSummaryTable .customTable .fourthColumn, .DPCAccountSummaryTable .customTable .fifthColumn, .DPCAccountSummaryTable .customTable > div.customRow .specialBlock, .DPCAccountSummaryTable .customTable .investmentsRow .secondColumn {
        display: none;
    }

    .DPCAccountSummaryTable .customTable .investmentsRow .thirdColumn {
        display: block;
    }

    .DPCAccountSummaryTable .headerMobile {
        margin: 0;
    }

    .DPCAccountSummaryTable .customTable .customTableCell .accountBox {
        margin-bottom: 25px;
    }

        .DPCAccountSummaryTable .customTable .customTableCell .accountBox:last-child {
            margin-bottom: 0;
        }

        .DPCAccountSummaryTable .customTable .customTableCell .accountBox > div:first-child {
            margin-bottom: 15px;
        }

    .CPRCollapsibleLinkList .mainList .categoryImageBox {
        margin-right: 16px;
    }

    .DPCDonationsTable .customTable .secondColumn,
    .DPCDonationsTable .customTable .fifthColumn,
    .DPCRegularDonationsTable .customTable .thirdColumn,
    .DPCRegularDonationsTable .customTable .fourthColumn,
    .DPCRegularDonationsTable .customTable .fifthColumn,
    .DPCRegularDonationsTable .customTable .sixthColumn,
    .DPCRegularDonationsTable .customTable .seventhColumn,
    .DPCInvestmentsTable .customTable .thirdColumn,
    .DPCInvestmentsTable .customTable .fourthColumn,
    .DPCInvestmentsTable .customTable .fifthColumn,
    .DPCInvestmentsTable .customTable .sixthColumn,
    .DPCInvestmentsTable .customTable .seventhColumn,
    .DPCInvestmentsTable .customTable .eighthColumn,
    .DPCTransactionsTable .customTable .firstColumn,
    .DPCTransactionsTable .customTable .secondColumn,
    .DPCTransactionsTable .customTable .thirdColumn,
    .DPCTransactionsTable .customTable .fourthColumn,
    .DPCTransactionsTable .customTable .fifthColumn {
        width: 50%;
    }

    .DPCRegularDonationsTable .customTable .secondColumn,
    .DPCInvestmentsTable .customTable .firstColumn,
    .DPCInvestmentsTable .customTable .secondColumn {
        width: 100%;
    }

    .DPCDonationsTable .customTable .firstColumn {
        margin-bottom: 15px;
        width: 100%;
    }

    .DPCDonationsTable .customTable .thirdColumn,
    .DPCDonationsTable .customTable .fourthColumn,
    .DPCRegularDonationsTable .customTable .sixthColumn {
        text-align: left;
        width: 50%;
    }

    .DPCDonationsTable .customTable .sixthColumn {
        text-align: left;
    }

    .DPCRegularDonationsTable .customTable .firstColumn {
        align-self: center;
        width: 52px;
    }

    .DPCRegularDonationsTable .customTable .eighthColumn {
        align-self: center;
        width: 155px;
    }

    .DPCTransactionsTable .advancedFilters {
        max-width: 305px;
    }

    .DPCTransactionsTable .datesBox .unwrappedFlex {
        flex-wrap: wrap;
    }

    .DPCTransactionsTable .radioCurrency {
        display: block;
    }

        .DPCTransactionsTable .radioCurrency .radioCurrencyChoice {
            display: inline-block;
            margin-bottom: 15px;
            margin-right: 15px;
        }

            .DPCTransactionsTable .radioCurrency .radioCurrencyChoice:first-child {
                margin-right: calc(100% - 75px);
            }

    .DPCTransactionsTable .unwrappedFlex .applyFiltersContainer {
        align-self: flex-end;
        padding-top: 0;
    }

    .DPCTransactionsTable .customTable .customHeaderRow .fourthColumn,
    .DPCTransactionsTable .customTable .customHeaderRow .fifthColumn {
        text-align: left;
    }

    .DPCTransactionsTable .customTable .customRow .fourthColumn,
    .DPCTransactionsTable .customTable .customRow .fifthColumn {
        padding-right: 5px;
        text-align: left;
    }

    .DPCDonationsTable .customTable .customRow .firstColumn > div, .DPCInvestmentsTable .customTable .customRow .firstColumn > div, .DPCRegularDonationsTable .customTable .customRow .secondColumn > div {
        font-size: 22px;
        font-weight: 600;
        line-height: 25px;
    }

    .DPCRegularDonationsTable .customTable .sixthColumn {
        order: 0;
    }

    .DPCDonationsTable .customTable .fourthColumn, .DPCInvestmentsTable .customTable .sixthColumn, .DPCRegularDonationsTable .customTable .fifthColumn {
        order: 1;
    }

    .DPCDonationsTable .customTable .thirdColumn, .DPCInvestmentsTable .customTable .thirdColumn, .DPCRegularDonationsTable .customTable .thirdColumn {
        order: 2;
    }

    .DPCDonationsTable .customTable .secondColumn, .DPCInvestmentsTable .customTable .seventhColumn, .DPCRegularDonationsTable .customTable .seventhColumn {
        order: 3;
    }

    .DPCDonationsTable .customTable .fifthColumn, .DPCInvestmentsTable .customTable .fourthColumn, .DPCRegularDonationsTable .customTable .fourthColumn {
        order: 4;
    }

    .DPCRegularDonationsTable .customTable .firstColumn, .DPCInvestmentsTable .customTable .eighthColumn {
        order: 5;
    }

    .DPCInvestmentsTable .customTable .fifthColumn, .DPCRegularDonationsTable .customTable .eighthColumn {
        order: 6;
    }

    .DPCInvestmentsTable .customTable .secondColumn, .DPCInvestmentsTable .customTable .thirdColumn, .DPCInvestmentsTable .customTable .fourthColumn, .DPCInvestmentsTable .customTable .fifthColumn, .DPCInvestmentsTable .customTable .sixthColumn, .DPCInvestmentsTable .customTable .seventhColumn, .DPCInvestmentsTable .customTable .eighthColumn {
        text-align: left;
    }

    .DPCDonationsTable .customTable .fifthColumn a, .DPCRegularDonationsTable .customTable .sixthColumn a {
        font-size: 16px;
        line-height: 19px;
    }

    .DPCDonationsTable .customTable .fifthColumn .unwrappedFlex > div > div:last-child {
        margin-top: 15px;
    }

    .DPCInvestmentsTable .simpleTable div.column-2:last-child {
        padding-left: 10px;
    }

    .DPCDonationsTable .imgBox {
        margin-top: 13px;
    }

    .DPCDonationsTable .simpleTable .column-2 select, .DPCRegularDonationsTable .simpleTable .column-2 select {
        border-radius: 4px;
        border: 1px solid #E3E3E3;
        height: 40px;
        font-size: 16px;
    }

    .DPCRightContentBlock {
        padding-left: 0;
    }

    /* END DPC */
    /* CPR */
    .CPRMyLastDonation .wrappedFlex > div.title-container {
        margin-bottom: 10px;
        margin-left: 15px;
        margin-top: 30px;
        width: 100%;
    }

    .DPCDonationsDashboard ul.indexDotsContainer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        border-bottom: 1px solid #e3e3e3;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

        .DPCDonationsDashboard ul.indexDotsContainer > li > div.disc {
            background-color: #D24508;
            border-radius: 100%;
            opacity: 0.5022644927536232;
            width: 7px;
            height: 7px;
            margin-right: 9px;
        }

        .DPCDonationsDashboard ul.indexDotsContainer > li.active > div.disc {
            opacity: 1;
        }

    .DPCDonationsDashboard div.list-container > div.window-list {
        text-align: center;
        position: relative;
        min-width: 180px;
    }

    .DPCDonationsDashboard .toolTip-container.block {
        display: none;
    }

    .DPCDonationsDashboard div.donutChart > svg > path {
        opacity: 0.5;
    }

        .DPCDonationsDashboard div.donutChart > svg > path.opacity {
            opacity: 1;
        }

    .DPCDonationsDashboard .title-container h3 + a.evidence {
        display: none;
    }

    .DPCDonationsDashboard div.list-container > div.window-list > div.favouriteElement {
        display: none;
        visibility: hidden;
        border-bottom: none;
    }

        .DPCDonationsDashboard div.list-container > div.window-list > div.favouriteElement.active {
            display: inherit;
            visibility: visible;
        }

        .DPCDonationsDashboard div.list-container > div.window-list > div.favouriteElement > h5 {
            max-width: calc(100% - 40px);
        }

        .DPCDonationsDashboard div.list-container > div.window-list > div.favouriteElement > div.innerContainer {
            position: relative;
            display: block;
            text-align: center;
        }

        .DPCDonationsDashboard div.list-container > div.window-list > div.favouriteElement a.urlLink {
            float: none;
            display: block;
            margin-top: 17px;
        }

    .DPCDonationsDashboard div.list-container a.arrowLink {
        position: absolute;
        top: calc(50% - 20px);
        display: inline-block;
        height: 40px;
        width: 24px;
    }

        .DPCDonationsDashboard div.list-container a.arrowLink:hover {
            cursor: pointer;
        }

    .DPCDonationsDashboard .content-container.donut-container .totalDonated-container {
        top: calc(50% - 27px);
    }

    .DPCDonationsDashboard .content-container .favouriteElement {
        margin-left: 24px;
        margin-right: 24px;
    }

    .DPCDonationsDashboard a.arrowLink.leftArrow {
        background: url(/svg/arrow_left_grey.svg) no-repeat;
        left: 0px;
    }

    .DPCDonationsDashboard a.arrowLink.rightArrow {
        background: url(/svg/arrow_right_grey.svg) no-repeat;
        right: 0px;
    }

    .DPCEditRegularDonation div.mediumContainer {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 20px 24px;
    }

    .DPCEditRegularDonation .mediumContainer > h3 {
        width: 100%;
    }

    .DPCEditRegularDonation .mediumContainer .smallContainer {
        margin-bottom: 15px;
        margin-right: 10px;
        width: 355px;
    }

    .DPCEditRegularDonation textarea {
        width: 100%;
    }

    .DPCEditRegularDonation .submitBox a.vs_button {
        margin-bottom: 15px;
    }

    .DPCEditRegularDonation .submitBox span.requiredWording {
        white-space: nowrap;
    }

    .DPCOverseasDonation {
        max-width: none;
    }

    .DPCOverseasDonationLayout .sf_2cols_2_67 .sf_2cols_2in_67 {
        margin-right: 0;
    }

    .DPCAccountOverview .mediumContainer {
        padding-left: 24px;
        padding-right: 24px;
    }

    .DPCAccountOverview.verticalFlow .smallContainer {
        flex-direction: column;
    }

        .DPCAccountOverview.verticalFlow .smallContainer > a.vs_link.urlLink {
            margin-bottom: 0;
            margin-top: 15px;
            order: 1;
        }

    .DPCAccountOverview.horizontalFlow div.overallBox, .DPCAccountOverview.horizontalFlow div.cashBox, .DPCAccountOverview.horizontalFlow div.compoundContainer {
        width: calc(((100% - 62px) * 0.30) - 4px);
    }

    .DPCAccountOverview.horizontalFlow div.savingsBox, .DPCAccountOverview.horizontalFlow div.investmentsBox {
        width: calc(100% - 2px);
        margin-right: 0px;
    }

    .CPRMyLastDonation div.totalAmountBlock > a.vs_link.urlLink {
        float: none;
        display: block;
        margin-top: 30px;
    }

    .DPCTrustCharitySearch .cafPluginCharityProfile .cafCharityProfileLogo {
        float: none;
        margin-left: 0;
    }

    /* END CPR */

    /* Project navigator   */

    .sf_cols.sectionContainer.pageBarContainer {
        padding-left: 0;
        padding-right: 0;
    }

    div.sf_cols.whiteSectionContainer.actOn-form {
        margin-left: 0;
        margin-top: 40px;
        max-width: 100%;
        padding: 20px 10px 0;
    }

    .sf_cols.sectionContainer > ul.pagebar {
        padding-left: 0;
        padding-right: 0;
    }

    .sfContentBlock ul.pagebar {
        padding-left: 0;
    }

    li.pagebar {
        height: 75px;
    }

    ul.pagebar > li.tab1,
    ul.pagebar > li.tab2,
    ul.pagebar > li.tab3 {
        line-height: 150%;
        font-size: 12px;
        margin-left: 0;
        width: calc((100% - 120px) / 3);
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.33);
    }

        ul.pagebar > li.tab3.selected::before,
        ul.pagebar > li.tab3.selected::before {
            top: 125px;
        }

    ul.pagebar > span#arrowRight,
    ul.pagebar > span#arrowRightWhite {
        display: none;
        visibility: hidden;
    }

    ul.pagebar > li > a,
    ul.pagebar > li > a:visited {
        font-size: 14px;
    }

    #tryIcon,
    #learnIcon,
    #growIcon {
        text-align: center;
        height: 20px;
        width: 0;
        display: block;
        margin: -5px auto 5px;
        padding: 5px 17px 6px;
    }



    ul.pagebar > li.tab1.selected::before,
    ul.pagebar > li.tab2.selected::before,
    ul.pagebar > li.tab3.selected::before {
        border-width: 15px 15px 0 15px;
        top: 125px;
    }

    .downArrowShadow.shadow1,
    .downArrowShadow.shadow2,
    .downArrowShadow.shadow3 {
        top: 125px;
        margin-left: -5px;
    }



    /* Start E2E */

    /* Start E2E Controls */

    .E2EGeaLayout .sfContentBlock {
        position: static;
        margin-top: 0;
    }

        .E2EGeaLayout .sfContentBlock > #GeaNavigation,
        .E2EGeaLayout .sfContentBlock > #GeaNavigation.top {
            position: static;
        }

    .customNavigation {
        display: inline-flex;
        min-height: 32px;
        width: 100%;
    }

    .E2EGeaLayout .sfContentBlock ul {
        padding-left: 0;
    }

    .customNavigation .navItem,
    .E2EGeaLayout .sfContentBlock .customNavigation .navItem {
        background: url('/svg/horizontal-grey-line.svg') no-repeat;
        background-position-x: 0;
        background-position-y: 50%;
        padding: 0;
        width: 100%;
    }

        .customNavigation .navItem.active,
        .customNavigation .navItem.completed,
        .E2EGeaLayout .sfContentBlock .customNavigation .navItem.active,
        .E2EGeaLayout .sfContentBlock .customNavigation .navItem.completed {
            background-image: url('/svg/horizontal-blue-line.svg');
        }

        .customNavigation .navItem:first-child,
        .E2EGeaLayout .sfContentBlock .customNavigation .navItem:first-child {
            background-position-y: 50%;
            max-width: 16px;
        }

        .customNavigation .navItem.active:first-child,
        .E2EGeaLayout .sfContentBlock .customNavigation .navItem.active:first-child {
            max-width: 32px;
        }

        .customNavigation .navItem:last-child,
        .E2EGeaLayout .sfContentBlock .customNavigation .navItem:last-child {
            padding: 0;
        }

        .customNavigation .navItem .navItemContent {
            float: right;
            min-height: 16px;
            padding: 0;
            min-width: 16px;
            top: 50%;
            transform: translateY(-50%);
        }

        .customNavigation .navItem.active .navItemContent {
            min-height: 32px;
            min-width: 32px;
        }

        .customNavigation .navItem:last-child .navItemContent {
            line-height: inherit;
        }

        .customNavigation .navItem .navIcon {
            height: 100%;
            left: 0;
            width: 100%;
        }

        .customNavigation .navItem .navText {
            display: none;
        }

    /* End E2E Controls */

    .E2EGeaLayout > .formColumn > div {
        margin-left: 0;
        margin-top: 40px;
    }

    /* End E2E */

    div.heroBanner > img {
        float: right;
    }

    #globalHeroBanner {
        z-index: 10;
        position: relative;
        overflow: hidden;
    }

    div.CTABanner {
        overflow: hidden;
    }

    div.heroBanners div.externalNavBar div.shortCutBox > div.innerContent > h3 {
        font-size: 14px;
        line-height: 140%;
    }


    div.vs_mobileLoginPopupContentDiv > div.linkLineContainer > span {
        font-weight: 400;
    }
}
}