/*-------------------------
   Background & Colors
--------------------------*/

/* Colors */

.color-white {
    color: $color-white !important;
}

.color-gray {
    color: $color-gray !important;
}

.color-dark {
    color: $color-dark !important;
}

.color-theme {
    color: $color-theme !important;
}

.color-heading {
    color: $color-heading !important;
}

.color-body {
    color: $color-body !important;
}

/* backgrounds */

.bg-white {
    background-color: $color-white !important;
}

.bg-gray {
    background-color: $color-gray !important;
}

.bg-dark {
    background-color: $color-dark !important;
}

.bg-heading {
    background-color: $color-heading !important;
}

.bg-theme {
    background-color: $color-theme !important;
}

.bg-theme2 {
    background-color: #f5570e !important;
}

.bg-img {
    position: relative;
    z-index: 1;
}

.background-size-auto {
    background-size: auto !important;
}

.bg-parallax {
    background-attachment: fixed;
}

.bg-overlay:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: rgba(#1b1a1a, 15%);
}

.bg-overlay-2:before {
    background-color: rgba(#1b1a1a, 10%);
}

.bg-overlay-3:before {
    background-color: rgba(#1b1a1a, 5%);
}

.bg-overlay-gradient:before {
    background-color: transparent;
    background: -moz-linear-gradient(-90deg, rgba(27, 26, 26, 0) 0%, rgba(27, 26, 26, 0) 0%, rgb(27, 26, 26) 85%);
    background: -webkit-linear-gradient(-90deg, rgba(27, 26, 26, 0) 0%, rgba(27, 26, 26, 0) 0%, rgb(27, 26, 26) 85%);
    background: -ms-linear-gradient(-90deg, rgba(27, 26, 26, 0) 0%, rgba(27, 26, 26, 0) 0%, rgb(27, 26, 26) 85%);
}

.bg-overlay-theme:before {
    background-color: rgba($color-theme, 85%);
}