:root {
    /* --- colors --- */

    /* brand */
    --brand-blue: #0B6DFF;

    --off-white: #F4F2EC;
    --sand: #EBE8E1;
    --gold: #BAAD86;
    --shale: #78888D;
    --deep-cove: #1E353D;
    --slate: #162428;

    /* functional */
    --danger-red: #FF0000;
    --form-selects: #0088FF;

    /* mono / greys */
    --white: #FFFFFF;
    --light-grey: #F5F5F5;
    --mid-grey: #D8D8D8;
    --dark-grey: #797979;
    --text-black: #354A51;
    --black: #000000;

    /*** === BORDER COLOURS === ***/
    --grey-border: #BCBAB4;
}




/* Brand */
.brand-blue {
    color: var(--brand-blue);
}
.brand-blue_background {
    background-color: var(--brand-blue);
}


/* Off White */
.off-white {
    color: var(--off-white);
}
.off-white_background {
    background-color: var(--off-white);
}

/* Sand */
.sand {
    color: var(--sand);
}
.sand_background {
    background-color: var(--sand);
}

/* Gold */
.gold {
    color: var(--gold);
}
.gold_background {
    background-color: var(--gold);
}

/* Shale */
.shale {
    color: var(--shale);
}
.shale_background {
    background-color: var(--shale);
}

/* Deep Cove */
.deep-cove {
    color: var(--deep-cove);
}
.deep-cove_background {
    background-color: var(--deep-cove);
}

/* Slate */
.slate {
    color: var(--slate);
}
.slate_background {
    background-color: var(--slate);
}




/* Functional */
.danger-red {
    color: var(--danger-red);
}
.danger-red_background {
    background-color: var(--danger-red);
}



/* Monotones */
.white {
    color: var(--white);
}
.white_background {
    background-color: var(--white);
}

.light-grey {
    color: var(--light-grey);
}
.light-grey_background {
    background-color: var(--light-grey);
}

.mid-grey {
    color: var(--mid-grey);
}
.mid-grey_background {
    background-color: var(--mid-grey);
}

.dark-grey {
    color: var(--dark-grey);
}
.dark-grey_background {
    background-color: var(--dark-grey);
}

.black {
    color: var(--black);
}
.black_background {
    background-color: var(--black);
}






/* Text Color Selection */
::selection {
    background: var(--black); /* WebKit/Blink Browsers */
    color: var(--white);
}
::-moz-selection {
    background: var(--black); /* Gecko Browsers */
    color: var(--white);
}



body {
    background-color: var(--off-white);
}


/* default fonts */
p {
    color: var(--text-black);
}
a:not(.button) {
    color: var(--text-black);
}

/* default headings */
h1, h2, h3, h4 {
    color: var(--deep-cove);
}
h5, h6 {
    color: var(--text-black);
}
p.accent-text {
    color: var(--gold);
}
p.subheading {
    color: var(--deep-cove);
}

/* default border colour class */
.border-color {
    border-color: var(--grey-border);
}


/* Color Overrides */



/* --- sand_background --- */
/* tag button */
.sand_background a.button.tag,
.sand_background button.tag,
.sand_background .wpcf7 button[type="submit"].tag,
.sand_background .wpcf7 input[type="submit"].tag {
    background-color: var(--sand);
    border-color: var(--deep-cove);
    color: var(--deep-cove);
}
.sand_background a.button.tag:hover,
.sand_background button.tag:hover,
.sand_background .wpcf7 button[type="submit"].tag:hover,
.sand_background .wpcf7 input[type="submit"].tag:hover {
    border-color: var(--deep-cove);
    background-color: var(--sand);
}
.sand_background a.button.tag.active,
.sand_background button.tag.active,
.sand_background .wpcf7 button[type="submit"].tag.active,
.sand_background .wpcf7 input[type="submit"].tag.active,

.sand_background a.button.tag.active:hover,
.sand_background button.tag.active:hover,
.sand_background .wpcf7 button[type="submit"].tag.active:hover,
.sand_background .wpcf7 input[type="submit"].tag.active:hover {
    background-color: var(--deep-cove);
    border-color: var(--deep-cove);
    color: var(--off-white);
}





/* --- gold_background --- */
/* tag button */
.gold_background a.button.tag,
.gold_background button.tag,
.gold_background .wpcf7 button[type="submit"].tag,
.gold_background .wpcf7 input[type="submit"].tag {
    background-color: var(--gold);
    border-color: var(--deep-cove);
    color: var(--deep-cove);
}
.gold_background a.button.tag:hover,
.gold_background button.tag:hover,
.gold_background .wpcf7 button[type="submit"].tag:hover,
.gold_background .wpcf7 input[type="submit"].tag:hover {
    border-color: var(--deep-cove);
    background-color: var(--gold);
}
.gold_background a.button.tag.active,
.gold_background button.tag.active,
.gold_background .wpcf7 button[type="submit"].tag.active,
.gold_background .wpcf7 input[type="submit"].tag.active,

.gold_background a.button.tag.active:hover,
.gold_background button.tag.active:hover,
.gold_background .wpcf7 button[type="submit"].tag.active:hover,
.gold_background .wpcf7 input[type="submit"].tag.active:hover {
    background-color: var(--deep-cove);
    border-color: var(--deep-cove);
    color: var(--off-white);
}









/* --- deep-cove_background --- */
.deep-cove_background h1,
.deep-cove_background h2,
.deep-cove_background h3,
.deep-cove_background h4,
.deep-cove_background h5,
.deep-cove_background h6,
.deep-cove_background .h1style,
.deep-cove_background .h2style,
.deep-cove_background .h3style,
.deep-cove_background .h4style,
.deep-cove_background .h5style,
.deep-cove_background .h6style,
.deep-cove_background ul li,
.deep-cove_background ul li a {
    color: var(--off-white);
}
.deep-cove_background p {
    color: var(--off-white);
}
.deep-cove_background p.sub-heading,
.deep-cove_background div.sub-heading p {
    color: var(--off-white);
}
.deep-cove_background p.accent-text,
.deep-cove_background div.accent-text p {
    color: var(--off-white);
}
/* primary button */
.deep-cove_background a.button.primary,
.deep-cove_background button.primary {
    background-color: var(--off-white);
    border-color: var(--off-white);
    color: var(--deep-cove);
}
.deep-cove_background a.button.primary::after,
.deep-cove_background button.primary::after {
    background-image: url('../buttons/assets/primary/deep-cove_arrow.svg');
}
.deep-cove_background a.button.primary:hover,
.deep-cove_background button.primary:hover {
    background-color: var(--shale);
    border-color: var(--shale);
    color: var(--off-white);
}
.deep-cove_background a.button.primary:hover::after,
.deep-cove_background button.primary:hover::after {
    background-image: url('../buttons/assets/primary/off-white_arrow.svg');
}

/* secondary button */
.deep-cove_background a.button.secondary,
.deep-cove_background button.secondary {
    border-color: var(--off-white);
    color: var(--off-white);
}
.deep-cove_background a.button.secondary::after,
.deep-cove_background button.secondary::after {
    background-image: url('../buttons/assets/primary/off-white_arrow.svg');
}
.deep-cove_background a.button.secondary:hover::after,
.deep-cove_background button.secondary:hover::after {
    background-image: url('../buttons/assets/primary/off-white_arrow.svg');
}
.deep-cove_background a.button.secondary:hover,
.deep-cove_background button.secondary:hover {
    background-color: var(--shale);
    border-color: var(--shale);
    color: var(--off-white);
}
/* tertiary button */
.deep-cove_background a.button.tertiary,
.deep-cove_background button.tertiary {
    color: var(--off-white);
}
.deep-cove_background a.button.tertiary:before,
.deep-cove_background button.tertiary:before {
    background-color: var(--off-white);
}
.deep-cove_background a.button.tertiary:after,
.deep-cove_background button.tertiary:after {
    background-image: url('../buttons/assets/tertiary/white_arrow.svg');
}
/* tab button */
.deep-cove_background a.button.tab,
.deep-cove_background button.tab,
.deep-cove_background .wpcf7 button[type="submit"].tab,
.deep-cove_background .wpcf7 input[type="submit"].tab {
    color: var(--off-white);
}
.deep-cove_background a.button.tab::after,
.deep-cove_background button.tab::after,
.deep-cove_background .wpcf7 button[type="submit"].tab::after,
.deep-cove_background .wpcf7 input[type="submit"].tab::after {
    background-color: var(--off-white);
}
/* tag button */
.deep-cove_background a.button.tag,
.deep-cove_background button.tag,
.deep-cove_background .wpcf7 button[type="submit"].tag,
.deep-cove_background .wpcf7 input[type="submit"].tag {
    background-color: var(--deep-cove);
    border-color: var(--mid-grey);
    color: var(--off-white);
}
.deep-cove_background a.button.tag:hover,
.deep-cove_background button.tag:hover,
.deep-cove_background .wpcf7 button[type="submit"].tag:hover,
.deep-cove_background .wpcf7 input[type="submit"].tag:hover {
    background-color: var(--deep-cove);
}
.deep-cove_background a.button.tag.active,
.deep-cove_background button.tag.active,
.deep-cove_background .wpcf7 button[type="submit"].tag.active,
.deep-cove_background .wpcf7 input[type="submit"].tag.active,

.deep-cove_background a.button.tag.active:hover,
.deep-cove_background button.tag.active:hover,
.deep-cove_background .wpcf7 button[type="submit"].tag.active:hover,
.deep-cove_background .wpcf7 input[type="submit"].tag.active:hover {
    background-color: var(--off-white);
    border-color: var(--off-white);
    color: var(--deep-cove);
}









/* --- shale_background --- */
.shale_background h1,
.shale_background h2,
.shale_background h3,
.shale_background h4,
.shale_background h5,
.shale_background h6,
.shale_background .h1style,
.shale_background .h2style,
.shale_background .h3style,
.shale_background .h4style,
.shale_background .h5style,
.shale_background .h6style,
.shale_background ul li,
.shale_background ul li a {
    color: var(--off-white);
}
.shale_background p {
    color: var(--off-white);
}
.shale_background p.sub-heading,
.shale_background div.sub-heading p {
    color: var(--off-white);
}
.shale_background p.accent-text,
.shale_background div.accent-text p {
    color: var(--off-white);
}
/* primary button */
.shale_background a.button.primary,
.shale_background button.primary {
    background-color: var(--off-white);
    border-color: var(--off-white);
    color: var(--deep-cove);
}
.shale_background a.button.primary::after,
.shale_background button.primary::after {
    background-image: url('../buttons/assets/primary/deep-cove_arrow.svg');
}
.shale_background a.button.primary:hover,
.shale_background button.primary:hover {
    background-color: var(--deep-cove);
    border-color: var(--deep-cove);
    color: var(--off-white);
}
.shale_background a.button.primary:hover::after,
.shale_background button.primary:hover::after {
    background-image: url('../buttons/assets/primary/off-white_arrow.svg');
}

/* secondary button */
.shale_background a.button.secondary,
.shale_background button.secondary {
    border-color: var(--off-white);
    color: var(--off-white);
}
.shale_background a.button.secondary::after,
.shale_background button.secondary::after {
    background-image: url('../buttons/assets/primary/off-white_arrow.svg');
}
.shale_background a.button.secondary:hover::after,
.shale_background button.secondary:hover::after {
    background-image: url('../buttons/assets/primary/off-white_arrow.svg');
}
.shale_background a.button.secondary:hover,
.shale_background button.secondary:hover {
    background-color: var(--deep-cove);
    border-color: var(--deep-cove);
    color: var(--off-white);
}
/* tertiary button */
.shale_background a.button.tertiary,
.shale_background button.tertiary {
    color: var(--off-white);
}
.shale_background a.button.tertiary:before,
.shale_background button.tertiary:before {
    background-color: var(--off-white);
}
.shale_background a.button.tertiary:after,
.shale_background button.tertiary:after {
    background-image: url('../buttons/assets/tertiary/white_arrow.svg');
}
/* tab button */
.shale_background a.button.tab,
.shale_background button.tab,
.shale_background .wpcf7 button[type="submit"].tab,
.shale_background .wpcf7 input[type="submit"].tab {
    color: var(--off-white);
}
.shale_background a.button.tab::after,
.shale_background button.tab::after,
.shale_background .wpcf7 button[type="submit"].tab::after,
.shale_background .wpcf7 input[type="submit"].tab::after {
    background-color: var(--off-white);
}
/* tag button */
.shale_background a.button.tag,
.shale_background button.tag,
.shale_background .wpcf7 button[type="submit"].tag,
.shale_background .wpcf7 input[type="submit"].tag {
    background-color: var(--shale);
    border-color: var(--mid-grey);
    color: var(--off-white);
}
.shale_background a.button.tag:hover,
.shale_background button.tag:hover,
.shale_background .wpcf7 button[type="submit"].tag:hover,
.shale_background .wpcf7 input[type="submit"].tag:hover {
    background-color: var(--shale);
}
.shale_background a.button.tag.active,
.shale_background button.tag.active,
.shale_background .wpcf7 button[type="submit"].tag.active,
.shale_background .wpcf7 input[type="submit"].tag.active,

.shale_background a.button.tag.active:hover,
.shale_background button.tag.active:hover,
.shale_background .wpcf7 button[type="submit"].tag.active:hover,
.shale_background .wpcf7 input[type="submit"].tag.active:hover {
    background-color: var(--off-white);
    border-color: var(--off-white);
    color: var(--deep-cove);
}










/* --- slate_background --- */
.slate_background h1,
.slate_background h2,
.slate_background h3,
.slate_background h4,
.slate_background h5,
.slate_background h6,
.slate_background .h1style,
.slate_background .h2style,
.slate_background .h3style,
.slate_background .h4style,
.slate_background .h5style,
.slate_background .h6style,
.slate_background ul li,
.slate_background ul li a {
    color: var(--off-white);
}
.slate_background p {
    color: var(--off-white);
}
.slate_background p.sub-heading,
.slate_background div.sub-heading p {
    color: var(--off-white);
}
.slate_background p.accent-text,
.slate_background div.accent-text p {
    color: var(--off-white);
}
/* primary button */
.slate_background a.button.primary,
.slate_background button.primary {
    background-color: var(--off-white);
    border-color: var(--off-white);
    color: var(--deep-cove);
}
.slate_background a.button.primary::after,
.slate_background button.primary::after {
    background-image: url('../buttons/assets/primary/deep-cove_arrow.svg');
}
.slate_background a.button.primary:hover,
.slate_background button.primary:hover {
    background-color: var(--shale);
    border-color: var(--shale);
    color: var(--off-white);
}
.slate_background a.button.primary:hover::after,
.slate_background button.primary:hover::after {
    background-image: url('../buttons/assets/primary/off-white_arrow.svg');
}

/* secondary button */
.slate_background a.button.secondary,
.slate_background button.secondary {
    border-color: var(--off-white);
    color: var(--off-white);
}
.slate_background a.button.secondary::after,
.slate_background button.secondary::after {
    background-image: url('../buttons/assets/primary/off-white_arrow.svg');
}
.slate_background a.button.secondary:hover::after,
.slate_background button.secondary:hover::after {
    background-image: url('../buttons/assets/primary/off-white_arrow.svg');
}
.slate_background a.button.secondary:hover,
.slate_background button.secondary:hover {
    background-color: var(--shale);
    border-color: var(--shale);
    color: var(--white);
}
/* tertiary button */
.slate_background a.button.tertiary,
.slate_background button.tertiary {
    color: var(--off-white);
}
.slate_background a.button.tertiary:before,
.slate_background button.tertiary:before {
    background-color: var(--off-white);
}
.slate_background a.button.tertiary:after,
.slate_background button.tertiary:after {
    background-image: url('../buttons/assets/tertiary/white_arrow.svg');
}
/* tab button */
.slate_background a.button.tab,
.slate_background button.tab,
.slate_background .wpcf7 button[type="submit"].tab,
.slate_background .wpcf7 input[type="submit"].tab {
    color: var(--off-white);
}
.slate_background a.button.tab::after,
.slate_background button.tab::after,
.slate_background .wpcf7 button[type="submit"].tab::after,
.slate_background .wpcf7 input[type="submit"].tab::after {
    background-color: var(--off-white);
}
/* tag button */
.slate_background a.button.tag,
.slate_background button.tag,
.slate_background .wpcf7 button[type="submit"].tag,
.slate_background .wpcf7 input[type="submit"].tag {
    background-color: var(--slate);
    border-color: var(--mid-grey);
    color: var(--off-white);
}
.slate_background a.button.tag:hover,
.slate_background button.tag:hover,
.slate_background .wpcf7 button[type="submit"].tag:hover,
.slate_background .wpcf7 input[type="submit"].tag:hover {
    background-color: var(--slate);
}
.slate_background a.button.tag.active,
.slate_background button.tag.active,
.slate_background .wpcf7 button[type="submit"].tag.active,
.slate_background .wpcf7 input[type="submit"].tag.active,

.slate_background a.button.tag.active:hover,
.slate_background button.tag.active:hover,
.slate_background .wpcf7 button[type="submit"].tag.active:hover,
.slate_background .wpcf7 input[type="submit"].tag.active:hover {
    background-color: var(--off-white);
    border-color: var(--off-white);
    color: var(--deep-cove);
}











