/**
 * RSX Framework
 * Copyright 2015 Bell Canada
 * 
 * Helper classes to align elements.
 * Reference: http://rsxdeployment.azurewebsites.net/docs/cheatsheet.html#helper
 *
 *
 *  1. Basic Block Alignment
 *  2. Vertical Alignment
 *  3. Absolute
 *  4. Float
 */

/* 1. Basic Block Alignment */
.rsx-align-center {
    margin: auto !important;
}

.rsx-align-h-center {
    margin-right: auto !important;
    margin-left: auto !important;
}

.rsx-align-h-right {
    margin-right: 0 !important;
    margin-left: auto !important;
}

.rsx-align-h-left {
    margin-right: auto !important;
    margin-left: 0 !important;
}

.rsx-list-inside {
    list-style-position: inside;
}

@media (max-width: 519px) {
    .rsx-align-center-xs {
        margin: auto !important;
    }

    .rsx-align-h-center-xs {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .rsx-align-h-right-xs {
        margin-right: 0 !important;
        margin-left: auto !important;
    }

    .rsx-align-h-left-xs {
        margin-right: auto !important;
        margin-left: 0 !important;
    }
}


@media (min-width: 520px) and (max-width: 999px) {
    .rsx-align-center-sm {
        margin: auto !important;
    }

    .rsx-align-h-center-sm {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .rsx-align-h-right-sm {
        margin-right: 0 !important;
        margin-left: auto !important;
    }

    .rsx-align-h-left-sm {
        margin-right: auto !important;
        margin-left: 0 !important;
    }
}


@media (min-width: 1000px) and (max-width: 1239px) {
    .rsx-align-center-md {
        margin: auto !important;
    }

    .rsx-align-h-center-md {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .rsx-align-h-right-md {
        margin-right: 0 !important;
        margin-left: auto !important;
    }

    .rsx-align-h-left-md {
        margin-right: auto !important;
        margin-left: 0 !important;
    }
}


@media (min-width: 1240px) {
    .rsx-align-center-lg {
        margin: auto !important;
    }

    .rsx-align-h-center-lg {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .rsx-align-h-right-lg {
        margin-right: 0 !important;
        margin-left: auto !important;
    }

    .rsx-align-h-left-lg {
        margin-right: auto !important;
        margin-left: 0 !important;
    }
}




/* 2. Vertical Alignment */
.rsx-valign-middle {
    vertical-align: middle !important;
}

.rsx-valign-top {
    vertical-align: top !important;
}

.rsx-valign-bottom {
    vertical-align: bottom !important;
}

.rsx-valign-baseline {
    vertical-align: baseline !important;
}


@media (max-width: 519px) {
    .rsx-valign-middle-xs {
        vertical-align: middle !important;
    }

    .rsx-valign-top-xs {
        vertical-align: top !important;
    }

    .rsx-valign-bottom-xs {
        vertical-align: bottom !important;
    }

    .rsx-valign-baseline-xs {
        vertical-align: baseline !important;
    }
}


@media (min-width: 520px) and (max-width: 999px) {
    .rsx-valign-middle-sm {
        vertical-align: middle !important;
    }

    .rsx-valign-top-sm {
        vertical-align: top !important;
    }

    .rsx-valign-bottom-sm {
        vertical-align: bottom !important;
    }

    .rsx-valign-baseline-sm {
        vertical-align: baseline !important;
    }
}


@media (min-width: 1000px) and (max-width: 1239px) {
    .rsx-valign-middle-md {
        vertical-align: middle !important;
    }

    .rsx-valign-top-md {
        vertical-align: top !important;
    }

    .rsx-valign-bottom-md {
        vertical-align: bottom !important;
    }

    .rsx-valign-baseline-md {
        vertical-align: baseline !important;
    }
}


@media (min-width: 1240px) {
    .rsx-valign-middle-lg {
        vertical-align: middle !important;
    }

    .rsx-valign-top-lg {
        vertical-align: top !important;
    }

    .rsx-valign-bottom-lg {
        vertical-align: bottom !important;
    }

    .rsx-valign-baseline-lg {
        vertical-align: baseline !important;
    }
}




/* 3. Absolute */
.rsx-top,
.rsx-right,
.rsx-bottom,
.rsx-left,
.rsx-center,
.rsx-middle,
.rsx-center-middle {
    position: absolute !important;
}

.rsx-top {
    top: 0 !important;
}

.rsx-right {
    right: 0 !important;
}

.rsx-bottom {
    bottom: 0 !important;
}

.rsx-left {
    left: 0 !important;
}

.rsx-center,
.rsx-center-middle {
    left: 50% !important;
}

.rsx-middle,
.rsx-center-middle {
    top: 50% !important;
}

.rsx-center {
    -webkit-transform: translateX(-50%) !important;
        -ms-transform: translateX(-50%) !important;
            transform: translateX(-50%) !important;
}

.rsx-middle {
    -webkit-transform: translateY(-50%) !important;
        -ms-transform: translateY(-50%) !important;
            transform: translateY(-50%) !important;
}

.rsx-center-middle {
    -webkit-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
            transform: translate(-50%, -50%) !important;
}


@media (max-width: 519px) {
    .rsx-top-xs,
    .rsx-right-xs,
    .rsx-bottom-xs,
    .rsx-left-xs,
    .rsx-center-xs,
    .rsx-middle-xs,
    .rsx-center-middle-xs {
        position: absolute !important;
    }

    .rsx-top-xs {
        top: 0 !important;
    }

    .rsx-right-xs {
        right: 0 !important;
    }

    .rsx-bottom-xs {
        bottom: 0 !important;
    }

    .rsx-left-xs {
        left: 0 !important;
    }

    .rsx-center-xs,
    .rsx-center-middle-xs {
        left: 50% !important;
    }

    .rsx-middle-xs,
    .rsx-center-middle-xs {
        top: 50% !important;
    }

    .rsx-center-xs {
        -webkit-transform: translateX(-50%) !important;
            -ms-transform: translateX(-50%) !important;
                transform: translateX(-50%) !important;
    }

    .rsx-middle-xs {
        -webkit-transform: translateY(-50%) !important;
            -ms-transform: translateY(-50%) !important;
                transform: translateY(-50%) !important;
    }

    .rsx-center-middle-xs {
        -webkit-transform: translate(-50%, -50%) !important;
            -ms-transform: translate(-50%, -50%) !important;
                transform: translate(-50%, -50%) !important;
    }
}


@media (min-width: 520px) and (max-width: 999px) {
    .rsx-top-sm,
    .rsx-right-sm,
    .rsx-bottom-sm,
    .rsx-left-sm,
    .rsx-center-sm,
    .rsx-middle-sm,
    .rsx-center-middle-sm {
        position: absolute !important;
    }

    .rsx-top-sm {
        top: 0 !important;
    }

    .rsx-right-sm {
        right: 0 !important;
    }

    .rsx-bottom-sm {
        bottom: 0 !important;
    }

    .rsx-left-sm {
        left: 0 !important;
    }

    .rsx-center-sm,
    .rsx-center-middle-sm {
        left: 50% !important;
    }

    .rsx-middle-sm,
    .rsx-center-middle-sm {
        top: 50% !important;
    }

    .rsx-center-sm {
        -webkit-transform: translateX(-50%) !important;
            -ms-transform: translateX(-50%) !important;
                transform: translateX(-50%) !important;
    }

    .rsx-middle-sm {
        -webkit-transform: translateY(-50%) !important;
            -ms-transform: translateY(-50%) !important;
                transform: translateY(-50%) !important;
    }

    .rsx-center-middle-sm {
        -webkit-transform: translate(-50%, -50%) !important;
            -ms-transform: translate(-50%, -50%) !important;
                transform: translate(-50%, -50%) !important;
    }
}


@media (min-width: 1000px) and (max-width: 1239px) {
    .rsx-top-md,
    .rsx-right-md,
    .rsx-bottom-md,
    .rsx-left-md,
    .rsx-center-md,
    .rsx-middle-md,
    .rsx-center-middle-md {
        position: absolute !important;
    }

    .rsx-top-md {
        top: 0 !important;
    }

    .rsx-right-md {
        right: 0 !important;
    }

    .rsx-bottom-md {
        bottom: 0 !important;
    }

    .rsx-left-md {
        left: 0 !important;
    }

    .rsx-center-md,
    .rsx-center-middle-md {
        left: 50% !important;
    }

    .rsx-middle-md,
    .rsx-center-middle-md {
        top: 50% !important;
    }

    .rsx-center-md {
        -webkit-transform: translateX(-50%) !important;
            -ms-transform: translateX(-50%) !important;
                transform: translateX(-50%) !important;
    }

    .rsx-middle-md {
        -webkit-transform: translateY(-50%) !important;
            -ms-transform: translateY(-50%) !important;
                transform: translateY(-50%) !important;
    }

    .rsx-center-middle-md {
        -webkit-transform: translate(-50%, -50%) !important;
            -ms-transform: translate(-50%, -50%) !important;
                transform: translate(-50%, -50%) !important;
    }
}


@media (min-width: 1240px) {
    .rsx-top-lg,
    .rsx-right-lg,
    .rsx-bottom-lg,
    .rsx-left-lg,
    .rsx-center-lg,
    .rsx-middle-lg,
    .rsx-center-middle-lg {
        position: absolute !important;
    }

    .rsx-top-lg {
        top: 0 !important;
    }

    .rsx-right-lg {
        right: 0 !important;
    }

    .rsx-bottom-lg {
        bottom: 0 !important;
    }

    .rsx-left-lg {
        left: 0 !important;
    }

    .rsx-center-lg,
    .rsx-center-middle-lg {
        left: 50% !important;
    }

    .rsx-middle-lg,
    .rsx-center-middle-lg {
        top: 50% !important;
    }

    .rsx-center-lg {
        -webkit-transform: translateX(-50%) !important;
            -ms-transform: translateX(-50%) !important;
                transform: translateX(-50%) !important;
    }

    .rsx-middle-lg {
        -webkit-transform: translateY(-50%) !important;
            -ms-transform: translateY(-50%) !important;
                transform: translateY(-50%) !important;
    }

    .rsx-center-middle-lg {
        -webkit-transform: translate(-50%, -50%) !important;
            -ms-transform: translate(-50%, -50%) !important;
                transform: translate(-50%, -50%) !important;
    }
}




/* 4. Float */
.rsx-float-right {
    float: right !important;
}

.rsx-float-left {
    float: left !important;
}

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

.rsx-clear-both {
    clear: both !important;
}

.rsx-clear-right {
    clear: right !important;
}

.rsx-clear-left {
    clear: left !important;
}

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


@media (max-width: 519px) {
    .rsx-float-right-xs {
        float: right !important;
    }

    .rsx-float-left-xs {
        float: left !important;
    }

    .rsx-no-float-xs{
        float: none !important;
    }

    .rsx-clear-both-xs {
        clear: both !important;
    }

    .rsx-clear-right-xs {
        clear: right !important;
    }

    .rsx-clear-left-xs {
        clear: left !important;
    }

    .rsx-no-clear-xs {
        clear: none !important;
    }
}


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

    .rsx-float-left-sm {
        float: left !important;
    }

    .rsx-no-float-sm{
        float: none !important;
    }

    .rsx-clear-both-sm {
        clear: both !important;
    }

    .rsx-clear-right-sm {
        clear: right !important;
    }

    .rsx-clear-left-sm {
        clear: left !important;
    }

    .rsx-no-clear-sm {
        clear: none !important;
    }
}


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

    .rsx-float-left-md {
        float: left !important;
    }

    .rsx-no-float-md{
        float: none !important;
    }

    .rsx-clear-both-md {
        clear: both !important;
    }

    .rsx-clear-right-md {
        clear: right !important;
    }

    .rsx-clear-left-md {
        clear: left !important;
    }

    .rsx-no-clear-md {
        clear: none !important;
    }
}


@media (min-width: 1240px) {
    .rsx-float-right-lg {
        float: right !important;
    }

    .rsx-float-left-lg {
        float: left !important;
    }

    .rsx-no-float-lg{
        float: none !important;
    }

    .rsx-clear-both-lg {
        clear: both !important;
    }

    .rsx-clear-right-lg {
        clear: right !important;
    }

    .rsx-clear-left-lg {
        clear: left !important;
    }

    .rsx-no-clear-lg {
        clear: none !important;
    }
}