/* Vars */

:root {
    --white: #fff;
    --pure-black: #000;
    --black: #062a2e;
    --gray: #3b6d72;
    --light-gray: #aaa;
    --dark-gray: #224143;
    --beige: #d4c5b8;
    --cream: #ebe4df;
    --orange: #f89a38;
    --red: #9d3c21;
    --cyan: #4f9f9a;
    --pink: #b44a6a;
    --blue: #3e6f87;
    --green: #2f9961;
}


/* Colors */

.white {
    color: var(--white)
}
.pure-black {
    color: var(--pure-black)
}
.black {
    color: var(--black)
}
.gray {
    color: var(--gray)
}
.light-gray {
    color: var(--light-gray)
}
.beige {
    color: var(--beige)
}
.cream {
    color: var(--cream)
}
.orange {
    color: var(--orange)
}
.red {
    color: var(--red)
}

.bg-white {
    background-color: var(--white)
}
.bg-pure-black {
    background-color: var(--pure-black)
}
.bg-black {
    background-color: var(--black)
}
.bg-cream {
    background-color: var(--cream)
}
.bg-beige {
    background-color: var(--beige)
}

.bg-orange {
    background-color: var(--orange)
}
.bg-red {
    background-color: var(--red)
}
.bg-cyan {
    background-color: var(--cyan)
}
.bg-pink {
    background-color: var(--pink)
}
.bg-blue {
    background-color: var(--blue)
}
.bg-green {
    background-color: var(--green)
}

.border-white {
    border-color: var(--white)
}
.border-black {
    border-color: var(--black)
}
.border-dark-gray {
    border-color: var(--dark-gray)
}
.black .border-dark-gray {
    border-color: #e2d3c1
}
.border-gray {
    border-color: var(--gray)
}
.black .border-gray {
    border-color: #d4c7b7
}
.border-light-gray {
    border-color: var(--light-gray)
}
.border-beige {
    border-color: var(--beige)
}
.border-orange {
    border-color: var(--orange)
}
.border-red {
    border-color: var(--red)
}

.fill-white {
    fill: var(--white)
}
.fill-black {
    fill: var(--black)
}
.fill-gray {
    fill: var(--gray)
}
.fill-orange {
    fill: var(--orange)
}
.fill-red {
    fill: var(--red)
}


/* Image overlays */

[class*="overlay-"] .beige {
    text-shadow: 2px 2px 3px rgba(0, 0, 0, .2);
}

[class*="overlay-"]:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    mix-blend-mode: multiply;
    background: var(--blue);
}

[class*="overlay-"] img {
    -webkit-filter: grayscale(100%) contrast(30%) brightness(90%);
    filter: grayscale(100%) contrast(45%) brightness(90%);
}

.overlay-red:after {
    background: var(--red);
    mix-blend-mode: overlay;
}

.overlay-red img {
    -webkit-filter: grayscale(100%) contrast(40%) brightness(75%);
    filter: grayscale(100%) contrast(45%) brightness(75%);
}

.overlay-orange:after {
    background: var(--orange);
    mix-blend-mode: overlay;
}

.overlay-orange img {
    -webkit-filter: grayscale(100%) contrast(10%) brightness(90%);
    filter: grayscale(100%) contrast(10%) brightness(90%);
}