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

    /* brand */
    --evergreen: #002D28;
    --bottle: #006F3D;
    --mindaro: #CEE86B;
    --peppermint: #E5F2B3;
    --alabaster: #F5F2E9;

    /* functional */
    --sale-red: #D33F49;
    --form-selects: #0088FF;

    /* mono / greys */
    --white: #FFFFFF;
    --light-grey: #f2f2f2;
    --mid-grey: #D9D9D9;
    --dark-grey: #808080;
    --text-black: #2A2A2A;
    --black: #000000;
}




/* Brand */
.evergreen {
    color: var(--evergreen);
}
.evergreen_background {
    background-color: var(--evergreen);
}

.bottle {
    color: var(--bottle);
}
.bottle_background {
    background-color: var(--bottle);
}

.mindaro {
    color: var(--mindaro);
}
.mindaro_background {
    background-color: var(--mindaro);
}

.peppermint {
    color: var(--peppermint);
}
.peppermint_background {
    background-color: var(--peppermint);
}

.alabaster {
    color: var(--alabaster);
}
.alabaster_background {
    background-color: var(--alabaster);
}






/* Functional */
.sale-red {
    color: var(--sale-red);
}
.sale-red_background {
    background-color: var(--sale-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 {
    color: var(--dark-grey);
}
a:not(.button) {
    color: var(--bottle);
}
p.sub-heading,
div.sub-heading p {
    color: var(--bottle);
}
p.accent-text,
div.accent-text p {
    color: var(--bottle);
}
p.accent-text:before,
div.accent-text p:before {
    background-color: var(--bottle);
}

/* Color Overrides */
/* --- 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);
}
.black_background p.accent-text,
.black_background div.accent-text p {
    color: var(--white);
}
.black_background p.accent-text:before,
.black_background div.accent-text p:before {
    background-color: var(--white);
}
/* primary button */
.black_background a.button.primary,
.black_background button.primary {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--evergreen);
}
.black_background a.button.primary:hover,
.black_background button.primary:hover {
    background-color: var(--mindaro);
    border-color: var(--mindaro);
    color: var(--black);
}
/* 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(--black);
}
/* 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);
}
/* tag button */
.black_background a.button.tag,
.black_background button.tag,
.black_background .wpcf7 button[type="submit"].tag,
.black_background .wpcf7 input[type="submit"].tag,
.black_background a.button.tag:hover,
.black_background button.tag:hover,
.black_background .wpcf7 button[type="submit"].tag:hover,
.black_background .wpcf7 input[type="submit"].tag:hover {
    background-color: var(--black);
    border-color: var(--mid-grey);
    color: var(--white);
}
.black_background a.button.tag.active,
.black_background button.tag.active,
.black_background .wpcf7 button[type="submit"].tag.active,
.black_background .wpcf7 input[type="submit"].tag.active,
.black_background a.button.tag.active:hover,
.black_background button.tag.active:hover,
.black_background .wpcf7 button[type="submit"].tag.active:hover,
.black_background .wpcf7 input[type="submit"].tag.active:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--black);
}




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




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

.bottle_background a.button.tag.active:hover,
.bottle_background button.tag.active:hover,
.bottle_background .wpcf7 button[type="submit"].tag.active:hover,
.bottle_background .wpcf7 input[type="submit"].tag.active:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--black);
}
.bottle_background a.button.arrow,
.bottle_background button.arrow {
    background-color: white;
    background-image: url('buttons/assets/arrow/evergreen_arrow.svg');
}
.bottle_background p.accent-text:before,
.bottle_background div.accent-text p:before {
    background-color: var(--white);
}





/* --- mindaro_background --- */
/* secondary button */
.mindaro_background a.button.secondary,
.mindaro_background button.secondary {
    border-color: var(--evergreen);
    color: var(--evergreen);
}
.mindaro_background a.button.secondary:hover,
.mindaro_background button.secondary:hover {
    background-color: var(--evergreen);
    border-color: var(--evergreen);
    color: var(--white);
}
.mindaro_background a.button.tertiary,
.mindaro_background button.tertiary {
    color: var(--evergreen);
}
.mindaro_background a.button.tertiary:before,
.mindaro_background button.tertiary:before {
    background-color: var(--evergreen);
}
.mindaro_background a.button.tertiary:after,
.mindaro_background button.tertiary:after {
    background-image: url('buttons/assets/tertiary/evergreen_arrow.svg');
}
/* tag button */
.mindaro_background a.button.tag,
.mindaro_background button.tag,
.mindaro_background .wpcf7 button[type="submit"].tag,
.mindaro_background .wpcf7 input[type="submit"].tag,
.mindaro_background a.button.tag:hover,
.mindaro_background button.tag:hover,
.mindaro_background .wpcf7 button[type="submit"].tag:hover,
.mindaro_background .wpcf7 input[type="submit"].tag:hover {
    background-color: var(--mindaro);
    border-color: var(--evergreen);
    color: var(--evergreen);
}
.mindaro_background a.button.tag.active,
.mindaro_background button.tag.active,
.mindaro_background .wpcf7 button[type="submit"].tag.active,
.mindaro_background .wpcf7 input[type="submit"].tag.active,

.mindaro_background a.button.tag.active:hover,
.mindaro_background button.tag.active:hover,
.mindaro_background .wpcf7 button[type="submit"].tag.active:hover,
.mindaro_background .wpcf7 input[type="submit"].tag.active:hover {
    background-color: var(--evergreen);
    border-color: var(--evergreen);
    color: var(--white);
}
.mindaro_background a.button.arrow,
.mindaro_background button.arrow {
    background-color: var(--evergreen);
    border-color: var(--evergreen);
    background-image: url('buttons/assets/arrow/white_arrow.svg');
}




/* --- peppermint_background --- */
/* tag button */
.peppermint_background p {
    color: var(--evergreen);
}
.peppermint_background a.button.tag,
.peppermint_background button.tag,
.peppermint_background .wpcf7 button[type="submit"].tag,
.peppermint_background .wpcf7 input[type="submit"].tag,
.peppermint_background a.button.tag:hover,
.peppermint_background button.tag:hover,
.peppermint_background .wpcf7 button[type="submit"].tag:hover,
.peppermint_background .wpcf7 input[type="submit"].tag:hover {
    background-color: var(--peppermint);
    border-color: var(--evergreen);
    color: var(--evergreen);
}
.peppermint_background a.button.tag.active,
.peppermint_background button.tag.active,
.peppermint_background .wpcf7 button[type="submit"].tag.active,
.peppermint_background .wpcf7 input[type="submit"].tag.active,

.peppermint_background a.button.tag.active:hover,
.peppermint_background button.tag.active:hover,
.peppermint_background .wpcf7 button[type="submit"].tag.active:hover,
.peppermint_background .wpcf7 input[type="submit"].tag.active:hover {
    background-color: var(--evergreen);
    border-color: var(--evergreen);
    color: var(--white);
}




/* --- alabaster_background --- */
/* tag button */
.alabaster_background a.button.tag,
.alabaster_background button.tag,
.alabaster_background .wpcf7 button[type="submit"].tag,
.alabaster_background .wpcf7 input[type="submit"].tag,
.alabaster_background a.button.tag:hover,
.alabaster_background button.tag:hover,
.alabaster_background .wpcf7 button[type="submit"].tag:hover,
.alabaster_background .wpcf7 input[type="submit"].tag:hover {
    background-color: var(--alabaster);
    border-color: var(--evergreen);
    color: var(--evergreen);
}
.alabaster_background a.button.tag.active,
.alabaster_background button.tag.active,
.alabaster_background .wpcf7 button[type="submit"].tag.active,
.alabaster_background .wpcf7 input[type="submit"].tag.active,
.alabaster_background a.button.tag.active:hover,
.alabaster_background button.tag.active:hover,
.alabaster_background .wpcf7 button[type="submit"].tag.active:hover,
.alabaster_background .wpcf7 input[type="submit"].tag.active:hover {
    background-color: var(--evergreen);
    border-color: var(--evergreen);
    color: var(--white);
}