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

/* Colors */

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

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

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

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

.color-secondary {
    color: $color-secondary !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-primary {
    background-color: $color-primary !important;
}

.bg-secondary {
    background-color: $color-secondary !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, 0.25);
}

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

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

.bg-overlay-gradient:before {
    background-color: transparent;
    background: linear-gradient(180deg, rgba(4, 17, 39, .6) 0%, rgba(4, 17, 39, .9) 100%);
}

.bg-overlay-primary:before {
    background-color: rgba($color-primary, 0.85);
}