$essa-blue: #0099cc;
$essa-green: #006666;
$essa-tealdark: #003333;
$essa-tealblue: #067d94;
$essa-darkgray: #333333;
$essa-lightgray: #b0b2b4;
$essa-lightestgray: #cccccc;
$essa-background-blue: #0099cc;
$essa-background-green: #006666;
$essa-background-tealdark: #003333;
$essa-background-tealblue: #067d94;
$essa-background-darkgray: #333333;
$essa-background-lightgray: #b0b2b4;
$essa-background-lightestgray: #cccccc;

.essa-blue {
    color: $essa-blue;
}

.essa-green {
    color: $essa-green;
}

.essa-tealdark {
    color: $essa-tealdark;
}

.essa-tealblue {
    color: $essa-tealblue;
}

.essa-darkgray {
    color: $essa-darkgray;
}

.essa-lightgray {
    color: $essa-lightgray;
}

.essa-lightestgray {
    color: $essa-lightestgray;
}

.essa-background-blue {
    background-color: $essa-background-blue;
}

.essa-background-green {
    background-color: $essa-background-green;
}

.essa-background-tealdark {
    background-color: $essa-background-tealdark;
}

.essa-background-tealblue {
    background-color: $essa-background-tealblue;
}

.essa-background-darkgray {
    background-color: $essa-background-darkgray;
}

.essa-background-lightgray {
    background-color: $essa-background-lightgray;
}

.essa-background-lightestgray {
    background-color: $essa-background-lightestgray;
}

.essa-grayscale {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}

.essa-grayscale-to-color {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}

.essa-grayscale-to-color:hover {
    -webkit-filter: grayscale(0);
    -moz-filter: none;
    filter: none;
}