/**
 * RSX Framework
 * Copyright 2015 Bell Canada
 * 
 * Helper classes for applying positioning.
 *
 *
 *  1. General
 *  2. Directional
 *  3. Transform
 */

/* 1. General */
.rsx-pos-static {
    position: static !important;
}

.rsx-pos-relative {
    position: relative !important;
}

.rsx-pos-absolute {
    position: absolute !important;
}

.rsx-pos-fixed {
    position: fixed !important;
}


@media (max-width: 519px) {
    .rsx-pos-static-xs {
        position: static !important;
    }

    .rsx-pos-relative-xs {
        position: static !important;
    }

    .rsx-pos-absolute-xs {
        position: absolute !important;
    }

    .rsx-pos-fixed-xs {
        position: fixed !important;
    }
}


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

    .rsx-pos-relative-sm {
        position: static !important;
    }

    .rsx-pos-absolute-sm {
        position: absolute !important;
    }

    .rsx-pos-fixed-sm {
        position: fixed !important;
    }
}


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

    .rsx-pos-relative-md {
        position: static !important;
    }

    .rsx-pos-absolute-md {
        position: absolute !important;
    }

    .rsx-pos-fixed-md {
        position: fixed !important;
    }
}


@media (min-width: 1240px) {
    .rsx-pos-static-lg {
        position: static !important;
    }

    .rsx-pos-relative-lg {
        position: static !important;
    }

    .rsx-pos-absolute-lg {
        position: absolute !important;
    }

    .rsx-pos-fixed-lg {
        position: fixed !important;
    }
}




/* 2. Directional */
.rsx-right-responsive,
.rsx-left-responsive {
    transition: right .5s cubic-bezier(.55,0,.1,1);
}

.rsx-right-responsive {
    right: 30px;
}

.rsx-left-responsive {
    left: 30px;
}


@media (min-width: 520px) and (max-width: 639px),
(min-width: 1000px) and (max-width: 1239px) {
    .rsx-right-responsive {
        right: 20px;
    }

    .rsx-left-responsive {
        left: 20px;
    }
}


@media (min-width: 640px) and (max-width: 999px),
(min-width: 1240px) {
    .rsx-right-responsive {
        right: 40px;
    }

    .rsx-left-responsive {
        left: 40px;
    }
}




/* 3. Transform */
.rsx-rotate-90 {
    -webkit-transform: rotate(90deg) !important;
        -ms-transform: rotate(90deg) !important;
            transform: rotate(90deg) !important;
}

.rsx-rotate-180 {
    -webkit-transform: rotate(180deg) !important;
        -ms-transform: rotate(180deg) !important;
            transform: rotate(180deg) !important;
}

.rsx-rotate-270 {
    -webkit-transform: rotate(270deg) !important;
        -ms-transform: rotate(270deg) !important;
            transform: rotate(270deg) !important;
}


@media (max-width: 519px) {
    .rsx-rotate-90-xs {
        -webkit-transform: rotate(90deg) !important;
            -ms-transform: rotate(90deg) !important;
                transform: rotate(90deg) !important;
    }

    .rsx-rotate-180-xs {
        -webkit-transform: rotate(180deg) !important;
            -ms-transform: rotate(180deg) !important;
                transform: rotate(180deg) !important;
    }

    .rsx-rotate-270-xs {
        -webkit-transform: rotate(270deg) !important;
            -ms-transform: rotate(270deg) !important;
                transform: rotate(270deg) !important;
    }
}


@media (min-width: 520px) and (max-width: 999px) {
    .rsx-rotate-90-sm {
        -webkit-transform: rotate(90deg) !important;
            -ms-transform: rotate(90deg) !important;
                transform: rotate(90deg) !important;
    }

    .rsx-rotate-180-sm {
        -webkit-transform: rotate(180deg) !important;
            -ms-transform: rotate(180deg) !important;
                transform: rotate(180deg) !important;
    }

    .rsx-rotate-270-sm {
        -webkit-transform: rotate(270deg) !important;
            -ms-transform: rotate(270deg) !important;
                transform: rotate(270deg) !important;
    }
}


@media (min-width: 1000px) and (max-width: 1239px) {
    .rsx-rotate-90-md {
        -webkit-transform: rotate(90deg) !important;
            -ms-transform: rotate(90deg) !important;
                transform: rotate(90deg) !important;
    }

    .rsx-rotate-180-md {
        -webkit-transform: rotate(180deg) !important;
            -ms-transform: rotate(180deg) !important;
                transform: rotate(180deg) !important;
    }

    .rsx-rotate-270-md {
        -webkit-transform: rotate(270deg) !important;
            -ms-transform: rotate(270deg) !important;
                transform: rotate(270deg) !important;
    }
}


@media (min-width: 1240px) {
    .rsx-rotate-90-lg {
        -webkit-transform: rotate(90deg) !important;
            -ms-transform: rotate(90deg) !important;
                transform: rotate(90deg) !important;
    }

    .rsx-rotate-180-lg {
        -webkit-transform: rotate(180deg) !important;
            -ms-transform: rotate(180deg) !important;
                transform: rotate(180deg) !important;
    }

    .rsx-rotate-270-lg {
        -webkit-transform: rotate(270deg) !important;
            -ms-transform: rotate(270deg) !important;
                transform: rotate(270deg) !important;
    }
}