/*
This SiteBranding.css file should be used to house styles which are defined in a Branding 
Guidelines type document, this should detail major company colours, background colours, font
sizes, standard images, etc
*/

/*
    colour 1 = #D3203D
    colour 2 = #D4D4D4
    colour 3 = #FFFFFF
    Header 1 = #D3203D
    Copy     = #414042
*/

* {
    --var-colour-black: #000;
    --var-colour-white: #FFF;
    --var-colour-silver: #C5C5C4;
    --var-colour-flag_red: #D71920;
    --var-colour-space_indigo: #22223B;
    --var-colour-dusty_grape: #4A4E69;
    --var-colour-teal: #218380;
}

    *[data-background-colour="white"] {
        background-color: var(--var-colour-white);
    }

    *[data-background-colour="black"] {
        background-color: var(--var-colour-black);
    }

    *[data-background-colour="silver"] {
        background-color: var(--var-colour-silver);
    }

    *[data-background-colour="flag-red"] {
        background-color: var(--var-colour-flag_red);
    }

    *[data-background-colour="space-indigo"] {
        background-color: var(--var-colour-space_indigo);
    }

    *[data-background-colour="dusty-grape"] {
        background-color: var(--var-colour-dusty_grape);
    }

    *[data-background-colour="teal"] {
        background-color: var(--var-colour-teal);
    }

    *[data-text-colour="white"] {
        color: var(--var-colour-white);
    }

    *[data-text-colour="black"] {
        color: var(--var-colour-black);
    }

    *[data-text-colour="silver"] {
        color: var(--var-colour-silver);
    }

    *[data-text-colour="flag-red"] {
        color: var(--var-colour-flag_red);
    }

    *[data-text-colour="space-indigo"] {
        color: var(--var-colour-space_indigo);
    }

    *[data-text-colour="dusty-grape"] {
        color: var(--var-colour-dusty_grape);
    }

    *[data-text-colour="teal"] {
        color: var(--var-colour-teal);
    }

html {
    overflow-x: hidden !important;
}

body {
    color: #414042;
    font-family: "Avenir LT Std", sans-serif;
    font-weight: 400;
}

h1 {
    font-weight: 500;
}

#BlogLayout h1 {
    color: #D3203D;
}

h2 {
    color: #D3230D;
}

h2, h3, h4, b {
    font-weight: 500;
}

.text-light h4 {
    color:#f8f9fa!important;
    font-size: 1.5rem;
    font-weight: 500;
}

strong {
    font-weight: 600;
}

.intro {
    font-size: 22px;
}

footer a {
    color: #FFF;
}

footer address a {
    /*word-break: break-word;*/
}

footer a:hover {
    color: #D3203D;
}

.bg-primary {
    background-color: #D3203D !important;
}

.btn-primary,
.btn.primary {
    background-color: #D3203D !important;
    border-color: #D3203D !important;
    color: #FFF !important;
}

    .btn-primary:hover,
    .btn.primary:hover {
        background-color: #CC0130 !important;
        border-color: #AC0130 !important;
    }

.btn-outline-primary {
    /*background-color: #FFF !important;*/
    border-color: #D3203D !important;
    border-width: 2px;
    color: #D3203D;
}

    .btn-outline-primary:hover {
        background-color: #D3203D !important;
    }

    .bg-main {
        background-color: #D3203D;
        color: #FFF;
    }

.btn-outline {
    border: 2px solid #FFF;
    color: #FFF;
    font-weight: 700;
}

    .btn-outline:hover {
        background-color: #FFF;
        color: #D3203D;
    }

.bg-secondary {
    /*background-color: rgba(106,158,155,0.57) !important;*/
    background-color: #D4D4D4 !important;
    /*color: #FFF;*/
}

    .bg-grey {
        background-color: #F8F8F8 !important;
    }

.text-main {
    color: #D3203D;
}

a,
.footer-bottom a {
    color: #D3203D;
}

a:hover,
.footer-bottom a:hover {
    text-decoration: none;
    color: #000;
}

.footer-bottom .links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-bottom .links .link::before {
    content: "\25AA";
    display: inline-block;
    margin-left: 0.5em;
    color: #D3203D;
}

@media (max-width: 994px) {
    .footer-bottom .links {
        margin-left: 1rem;
    }

    .footer-bottom .links .link::before {
        display: contents;
    }
}

.dropdown-item {
    color: #F8F9FA;
}

.dropdown-item:hover {
    color: #D3203D;
}

    .dropdown-item:active,
    .dropdown-item.active {
        background-color: #FFF;
        color: #D3203D;
    }


a.text-light.active {
    color: #CBD3DA!important;
}