/**
 * RSX Framework
 * Copyright 2015 Bell Canada
 * 
 * Background image helper classes.
 *
 *
 * Contents:
 *  1. Colors
 *  2. Positioning
 *  3. Sizing
 */

.rsx-no-background {
    background: none !important;
}


@media (max-width: 519px) {
    .rsx-no-background-xs {
        background: none !important;
    }
}


@media (min-width: 520px) and (max-width: 999px) {
    .rsx-no-background-sm {
        background: none !important;
    }
}


@media (min-width: 1000px) and (max-width: 1239px) {
    .rsx-no-background-md {
        background: none !important;
    }
}


@media (min-width: 1240px) {
    .rx-no-background-lg {
        background: none !important;
    }
}




/* 1. Colors */
.rsx-bg-transparent {
    background-color: transparent !important;
}

.rsx-bg-white {
    background-color: #fff !important;
}

.rsx-bg-grey-lightest {
    background-color: #f7f7f7 !important;
}

.rsx-bg-grey-light {
    background-color: #f0f0f0 !important;
}

.rsx-bg-grey {
    background-color: #e1e1e1 !important;
}

.rsx-bg-grey-dark {
    background-color: #ddd !important;
}

.rsx-bg-grey-darker {
    background-color: #bdbebf !important;
}

.rsx-bg-grey-darkest {
    background-color: #2d2e33 !important;
}

.rsx-bg-black-light {
    background-color: #1a1a1e !important;
}

.rsx-bg-blue {
    background-color: #00549a !important;
}

.rsx-bg-blue-light {
    background-color: #00549a !important;
}

.rsx-bg-blue-dark {
    background-color: #003778 !important;
}

.rsx-bg-blue-darker {
    background-color: #01215e !important;
}

.rsx-bg-blue *,
.rsx-bg-blue-dark *,
.rsx-bg-blue-light *,
.rsx-bg-grey-dark *,
.rsx-bg-blue-darker *,
.rsx-bg-blue a:hover,
.rsx-bg-blue-dark a:hover,
.rsx-bg-blue-light a:hover,
.rsx-bg-grey-dark a:hover,
.rsx-bg-grey-darker a:hover{
    color: #fff;
}


@media (max-width: 519px) {
    .rsx-bg-transparent-xs {
        background-color: transparent !important;
    }

    .rsx-bg-white-xs {
        background-color: #fff !important;
    }

    .rsx-bg-grey-lightest-xs {
        background-color: #f7f7f7 !important;
    }

    .rsx-bg-grey-light-xs {
        background-color: #ededed !important;
    }

    .rsx-bg-grey-xs {
        background-color: #e1e1e1 !important;
    }

    .rsx-bg-grey-dark-xs {
        background-color: #ddd !important;
    }

    .rsx-bg-grey-darker-xs {
        background-color: #bebebf !important;
    }

    .rsx-bg-grey-darkest-xs {
        background-color: #2d2e33 !important;
    }

    .rsx-bg-blue-xs {
        background-color: #00549a !important;
    }

    .rsx-bg-blue-dark-xs {
        background-color: #003778 !important;
    }

    .rsx-bg-blue-xs *,
    .rsx-bg-blue-dark-xs *,
    .rsx-bg-blue-light-xs *,
    .rsx-bg-grey-dark-xs * {
        color: #fff;
    }
}


@media (min-width: 520px) and (max-width: 999px) {
    .rsx-bg-transparent-sm {
        background-color: transparent !important;
    }

    .rsx-bg-white-sm {
        background-color: #fff !important;
    }

    .rsx-bg-grey-lightest-sm {
        background-color: #f7f7f7 !important;
    }

    .rsx-bg-grey-light-sm {
        background-color: #ededed !important;
    }

    .rsx-bg-grey-sm {
        background-color: #e1e1e1 !important;
    }

    .rsx-bg-grey-dark-sm {
        background-color: #ddd !important;
    }

    .rsx-bg-grey-darker-sm {
        background-color: #bebebf !important;
    }

    .rsx-bg-grey-darkest-sm {
        background-color: #2d2e33 !important;
    }

    .rsx-bg-blue-sm {
        background-color: #00549a !important;
    }

    .rsx-bg-blue-dark-sm {
        background-color: #003778 !important;
    }

    .rsx-bg-blue-sm *,
    .rsx-bg-blue-dark-sm *,
    .rsx-bg-blue-light-sm *,
    .rsx-bg-grey-dark-sm * {
        color: #fff;
    }
}


@media (min-width: 1000px) and (max-width: 1239px) {
    .rsx-bg-transparent-md {
        background-color: transparent !important;
    }

    .rsx-bg-white-md {
        background-color: #fff !important;
    }

    .rsx-bg-grey-lightest-md {
        background-color: #f7f7f7 !important;
    }

    .rsx-bg-grey-light-md {
        background-color: #ededed !important;
    }

    .rsx-bg-grey-md {
        background-color: #e1e1e1 !important;
    }

    .rsx-bg-grey-dark-md {
        background-color: #ddd !important;
    }

    .rsx-bg-grey-darker-md {
        background-color: #bebebf !important;
    }

    .rsx-bg-grey-darkest-md {
        background-color: #2d2e33 !important;
    }

    .rsx-bg-blue-md {
        background-color: #00549a !important;
    }

    .rsx-bg-blue-dark-md {
        background-color: #003778 !important;
    }

    .rsx-bg-blue-md *,
    .rsx-bg-blue-dark-md *,
    .rsx-bg-blue-light-md *,
    .rsx-bg-grey-dark-md * {
        color: #fff;
    }
}


@media (min-width: 1240px) {
    .rsx-bg-transparent-lg {
        background-color: transparent !important;
    }

    .rsx-bg-white-lg {
        background-color: #fff !important;
    }

    .rsx-bg-grey-lightest-lg {
        background-color: #f7f7f7 !important;
    }

    .rsx-bg-grey-light-lg {
        background-color: #ededed !important;
    }

    .rsx-bg-grey-lg {
        background-color: #e1e1e1 !important;
    }

    .rsx-bg-grey-dark-lg {
        background-color: #ddd !important;
    }

    .rsx-bg-grey-darker-lg {
        background-color: #bebebf !important;
    }

    .rsx-bg-grey-darkest-lg {
        background-color: #2d2e33 !important;
    }

    .rsx-bg-blue-lg {
        background-color: #00549a !important;
    }

    .rsx-bg-blue-dark-lg {
        background-color: #003778 !important;
    }

    .rsx-bg-blue-lg *,
    .rsx-bg-blue-dark-lg *,
    .rsx-bg-blue-light-lg *,
    .rsx-bg-grey-dark-lg * {
        color: #fff;
    }
}




/* 2. Positioning */
.rsx-bg_bottom_left-pad-responsive {
    background-position: left 40px bottom !important;
}

.rsx-bg_bottom-left {
    background-repeat: no-repeat;
    -moz-background-position-y: 100%;
    -o-background-position-y: 100%;
    background-position-y: 100%;
}

.rsx-bg_middle-right {
    background-repeat: no-repeat;
    -moz-background-position-x: 150%;
    -o-background-position-x: 150%;
    background-position-x: 150%;
    -moz-background-position-y: 50%;
    -o-background-position-y: 50%;
    background-position-y: 50%;
}

.rsx-bg_middle-top {
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: -50%;
}


@media (min-width: 520px) and (max-width: 639px), (min-width: 1000px) and (max-width: 1239px) {
    .rsx-bg_bottom_left-pad-responsive {
        background-position: left 20px bottom !important;
    }
}




/* 3. Sizing */
.rsx-bg_max-height {
    background-size: auto calc(100% - 40px) !important;
}