:root {
    /* --- colors --- */

    /* brand */
    --horizon: #F6C643;
    --ocean: #0052D1;
    --sediment: #F5F8FA;
    --seafoam: #C7CED9;

    /* functional */
    --danger-red: #FF0000;
    --form-selects: #0088FF;

    /* mono / greys */
    --white: #FFFFFF;
    --light-grey: #F5F5F5;
    --mid-grey: #D8D8D8;
    --dark-grey: #999999;
    --coal: #0D1426;
    --black: #0D1426;

    /* random stuff found in XD */
    --p-color: #525864;
}




/* Brand */
.ocean {
    color: var(--ocean);
}
.ocean_background {
    background-color: var(--ocean);
}

.coal {
    color: var(--coal);
}
.coal_background {
    background-color: var(--coal);
}

.sediment {
    color: var(--sediment);
}
.sediment_background {
    background-color: var(--sediment);
}

.seafoam {
    color: var(--seafoam);
}
.seafoam_background {
    background-color: var(--seafoam);
}

.horizon {
    color: var(--horizon);
}
.horizon_background {
    background-color: var(--horizon);
}



/* 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);
}






/* default fonts */
p, body {
    color: var(--p-color);
}
a:not(.button) {
    color: var(--p-color);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--coal);
}




/* Color Overrides */

/* --- sediment_background --- */
.sediment_background .subheading,
.sediment_background p.accent-text {
    background-color: var(--white);
}
.sediment_background select {
    background-color: var(--white);
}

/* --- black_background --- */
.black_background h1,
.black_background h2,
.black_background h3,
.black_background h4,
.black_background h5,
.black_background h6,
.black_background .h1style,
.black_background .h2style,
.black_background .h3style,
.black_background .h4style,
.black_background .h5style,
.black_background .h6style,
.black_background ul li,
.black_background ul li a {
    color: var(--white);
}
.black_background p {
    color: var(--white);
}
.black_background p.sub-heading,
.black_background div.sub-heading p {
    color: var(--white);
}
/* primary button */
.black_background a.button.primary,
.black_background button.primary {
    background-color: var(--ocean);
    border-color: var(--ocean);
    color: var(--white);
}
.black_background a.button.primary::after,
.black_background button.primary::after {
    background-image: url('../buttons/assets/primary/arrow-white.svg');
}
.black_background a.button.primary:hover,
.black_background button.primary:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--ocean);
}
.black_background a.button.primary:hover::after,
.black_background button.primary:hover::after {
    background-image: url('../buttons/assets/primary/arrow-ocean.svg');
}
/* secondary button */
.black_background a.button.secondary,
.black_background button.secondary {
    border-color: var(--white);
    color: var(--white);
}
.black_background a.button.secondary:hover,
.black_background button.secondary:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--ocean);
}
.black_background a.button.secondary:hover::after,
.black_background button.secondary:hover::after {
    background-image: url('../buttons/assets/primary/arrow-ocean.svg');
}
/* tertiary button */
.black_background a.button.tertiary,
.black_background button.tertiary {
    color: var(--white);
}
.black_background a.button.tertiary:before,
.black_background button.tertiary:before {
    background-color: var(--white);
}
.black_background a.button.tertiary:after,
.black_background button.tertiary:after {
    background-image: url('../buttons/assets/tertiary/white_arrow.svg');
}
/* tab button */
.black_background a.button.tab,
.black_background button.tab,
.black_background .wpcf7 button[type="submit"].tab,
.black_background .wpcf7 input[type="submit"].tab {
    color: var(--white);
}
.black_background a.button.tab::after,
.black_background button.tab::after,
.black_background .wpcf7 button[type="submit"].tab::after,
.black_background .wpcf7 input[type="submit"].tab::after {
    background-color: var(--white);
}
/* arrow */
.black_background a.button.arrow,
.black_background button.arrow,
.black_background .wpcf7 button[type="submit"].arrow,
.black_background .wpcf7 input[type="submit"].arrow {
    border-color: var(--white);
    background-image: url('../buttons/assets/primary/arrow-white.svg');
}





/* --- coal_background --- */
.coal_background h1,
.coal_background h2,
.coal_background h3,
.coal_background h4,
.coal_background h5,
.coal_background h6,
.coal_background .h1style,
.coal_background .h2style,
.coal_background .h3style,
.coal_background .h4style,
.coal_background .h5style,
.coal_background .h6style,
.coal_background ul li,
.coal_background ul li a {
    color: var(--white);
}
.coal_background p {
    color: var(--white);
}
.coal_background p.sub-heading,
.coal_background div.sub-heading p {
    color: var(--white);
}
/* primary button */
.coal_background a.button.primary,
.coal_background button.primary {
    background-color: var(--ocean);
    border-color: var(--ocean);
    color: var(--white);
}
.coal_background a.button.primary::after,
.coal_background button.primary::after {
    background-image: url('../buttons/assets/primary/arrow-white.svg');
}
.coal_background a.button.primary:hover,
.coal_background button.primary:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--ocean);
}
.coal_background a.button.primary:hover::after,
.coal_background button.primary:hover::after {
    background-image: url('../buttons/assets/primary/arrow-ocean.svg');
}
/* secondary button */
.coal_background a.button.secondary,
.coal_background button.secondary {
    border-color: var(--white);
    color: var(--white);
}
.coal_background a.button.secondary::after,
.coal_background button.secondary::after {
    background-image: url('../buttons/assets/primary/arrow-white.svg');
}
.coal_background a.button.secondary:hover,
.coal_background button.secondary:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--ocean);
}
.coal_background a.button.secondary:hover::after,
.coal_background button.secondary:hover::after {
    background-image: url('../buttons/assets/primary/arrow-ocean.svg');
}
/* tertiary button */
.coal_background a.button.tertiary,
.coal_background button.tertiary {
    color: var(--white);
}
.coal_background a.button.tertiary:before,
.coal_background button.tertiary:before {
    background-color: var(--white);
}
.coal_background a.button.tertiary:after,
.coal_background button.tertiary:after {
    background-image: url('../buttons/assets/tertiary/white_arrow.svg');
}
/* tab button */
.coal_background a.button.tab,
.coal_background button.tab,
.coal_background .wpcf7 button[type="submit"].tab,
.coal_background .wpcf7 input[type="submit"].tab {
    color: var(--white);
}
.coal_background a.button.tab::after,
.coal_background button.tab::after,
.coal_background .wpcf7 button[type="submit"].tab::after,
.coal_background .wpcf7 input[type="submit"].tab::after {
    background-color: var(--white);
}
/* arrow */
.coal_background a.button.arrow,
.coal_background button.arrow,
.coal_background .wpcf7 button[type="submit"].arrow,
.coal_background .wpcf7 input[type="submit"].arrow {
    border-color: var(--white);
    background-image: url('../buttons/assets/primary/arrow-white.svg');
}





/* --- ocean_background --- */
.ocean_background h1,
.ocean_background h2,
.ocean_background h3,
.ocean_background h4,
.ocean_background h5,
.ocean_background h6,
.ocean_background .h1style,
.ocean_background .h2style,
.ocean_background .h3style,
.ocean_background .h4style,
.ocean_background .h5style,
.ocean_background .h6style,
.ocean_background ul li,
.ocean_background ul li a {
    color: var(--white);
}
.ocean_background p {
    color: var(--white);
}
.ocean_background p.sub-heading,
.ocean_background div.sub-heading p {
    color: var(--white);
}
/* primary button */
.ocean_background a.button.primary,
.ocean_background button.primary {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--ocean);
}
.ocean_background a.button.primary::before,
.ocean_background button.primary::before {
    background-image: url('../buttons/assets/primary/arrow-ocean.svg')!important;
}
.ocean_background a.button.primary:hover,
.ocean_background button.primary:hover {
    background-color: var(--coal);
    border-color: var(--coal);
    color: var(--white);
}
/*.ocean_background a.button.primary:hover::after,*/
/*.ocean_background button.primary:hover::after {*/
/*    background-image: url('../buttons/assets/primary/arrow-white.svg');*/
/*}*/
/* secondary button */
.ocean_background a.button.secondary,
.ocean_background button.secondary {
    border-color: var(--white);
    color: var(--white);
}
.ocean_background a.button.secondary::after,
.ocean_background button.secondary::after {
    background-image: url('../buttons/assets/primary/arrow-white.svg');
}
.ocean_background a.button.secondary:hover,
.ocean_background button.secondary:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--ocean);
}
.ocean_background a.button.secondary:hover::after,
.ocean_background button.secondary:hover::after {
    background-image: url('../buttons/assets/primary/arrow-ocean.svg');
}
/* tertiary button */
.ocean_background a.button.tertiary,
.ocean_background button.tertiary {
    color: var(--white);
}
.ocean_background a.button.tertiary:before,
.ocean_background button.tertiary:before {
    background-color: var(--white);
}
.ocean_background a.button.tertiary:after,
.ocean_background button.tertiary:after {
    background-image: url('../buttons/assets/tertiary/white_arrow.svg');
}
/* tab button */
.ocean_background a.button.tab,
.ocean_background button.tab,
.ocean_background .wpcf7 button[type="submit"].tab,
.ocean_background .wpcf7 input[type="submit"].tab {
    color: var(--white);
}
.ocean_background a.button.tab::after,
.ocean_background button.tab::after,
.ocean_background .wpcf7 button[type="submit"].tab::after,
.ocean_background .wpcf7 input[type="submit"].tab::after {
    background-color: var(--white);
}
/* tag button */
.ocean_background a.button.tag,
.ocean_background button.tag,
.ocean_background .wpcf7 button[type="submit"].tag,
.ocean_background .wpcf7 input[type="submit"].tag {
    background-color: var(--coal);
    border-color: var(--mid-grey);
    color: var(--white);
}
.ocean_background a.button.tag.active,
.ocean_background button.tag.active,
.ocean_background .wpcf7 button[type="submit"].tag.active,
.ocean_background .wpcf7 input[type="submit"].tag.active {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--coal);
}
/* arrow */
.ocean_background a.button.arrow,
.ocean_background button.arrow,
.ocean_background .wpcf7 button[type="submit"].arrow,
.ocean_background .wpcf7 input[type="submit"].arrow {
    border-color: var(--white);
    background-image: url('../buttons/assets/primary/arrow-white.svg');
}