/**
 * RSX Framework
 * Copyright 2015 Bell Canada
 * 
 * Helper classes for applying dimensions.
 * Reference: http://rsxdeployment.azurewebsites.net/docs/cheatsheet.html#helper
 *
 *
 *  1. Percentage Width
 *  2. Pixel Height
 */

/* 1. Percentage Width */
.rsx-width-auto {
    width: auto !important;
}

.rsx-width-10 {
    width: 10% !important;
}

.rsx-width-15 {
    width: 15% !important;
}

.rsx-width-20 {
    width: 20% !important;
}

.rsx-width-30 {
    width: 30% !important;
}

.rsx-width-40 {
    width: 40% !important;
}

.rsx-width-50 {
    width: 50% !important;
}

.rsx-width-60 {
    width: 60% !important;
}

.rsx-width-70 {
    width: 70% !important;
}

.rsx-width-80 {
    width: 80% !important;
}

.rsx-width-85 {
    width: 85% !important;
}

.rsx-width-90 {
    width: 90% !important;
}

.rsx-width-100 {
    width: 100% !important;
}


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

    .rsx-width-10-xs {
        width: 10% !important;
    }

    .rsx-width-15-xs {
        width: 15% !important;
    }

    .rsx-width-20-xs {
        width: 20% !important;
    }

    .rsx-width-30-xs {
        width: 30% !important;
    }

    .rsx-width-40-xs {
        width: 40% !important;
    }

    .rsx-width-50-xs {
        width: 50% !important;
    }

    .rsx-width-60-xs {
        width: 60% !important;
    }

    .rsx-width-70-xs {
        width: 70% !important;
    }

    .rsx-width-80-xs {
        width: 80% !important;
    }

    .rsx-width-85-xs {
        width: 85% !important;
    }

    .rsx-width-90-xs {
        width: 90% !important;
    }

    .rsx-width-100-xs {
        width: 100% !important;
    }
}


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

    .rsx-width-10-sm {
        width: 10% !important;
    }

    .rsx-width-15-sm {
        width: 15% !important;
    }

    .rsx-width-20-sm {
        width: 20% !important;
    }

    .rsx-width-30-sm {
        width: 30% !important;
    }

    .rsx-width-40-sm {
        width: 40% !important;
    }

    .rsx-width-50-sm {
        width: 50% !important;
    }

    .rsx-width-60-sm {
        width: 60% !important;
    }

    .rsx-width-70-sm {
        width: 70% !important;
    }

    .rsx-width-80-sm {
        width: 80% !important;
    }

    .rsx-width-85-sm {
        width: 85% !important;
    }

    .rsx-width-90-sm {
        width: 90% !important;
    }

    .rsx-width-100-sm {
        width: 100% !important;
    }
}


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

    .rsx-width-10-md {
        width: 10% !important;
    }

    .rsx-width-15-md {
        width: 15% !important;
    }

    .rsx-width-20-md {
        width: 20% !important;
    }

    .rsx-width-30-md {
        width: 30% !important;
    }

    .rsx-width-40-md {
        width: 40% !important;
    }

    .rsx-width-50-md {
        width: 50% !important;
    }

    .rsx-width-60-md {
        width: 60% !important;
    }

    .rsx-width-70-md {
        width: 70% !important;
    }

    .rsx-width-80-md {
        width: 80% !important;
    }

    .rsx-width-85-md {
        width: 85% !important;
    }

    .rsx-width-90-md {
        width: 90% !important;
    }

    .rsx-width-100-md {
        width: 100% !important;
    }
}


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

    .rsx-width-10-lg {
        width: 10% !important;
    }

    .rsx-width-15-lg {
        width: 15% !important;
    }

    .rsx-width-20-lg {
        width: 20% !important;
    }

    .rsx-width-30-lg {
        width: 30% !important;
    }

    .rsx-width-40-lg {
        width: 40% !important;
    }

    .rsx-width-50-lg {
        width: 50% !important;
    }

    .rsx-width-60-lg {
        width: 60% !important;
    }

    .rsx-width-70-lg {
        width: 70% !important;
    }

    .rsx-width-80-lg {
        width: 80% !important;
    }

    .rsx-width-85-lg {
        width: 85% !important;
    }

    .rsx-width-90-lg {
        width: 90% !important;
    }

    .rsx-width-100-lg {
        width: 100% !important;
    }
}




/* 2. Pixel Height */
.rsx-height-p175 {
    height: 175px !important;
}

.rsx-height-p200 {
    height: 200px !important;
}


@media (max-width: 519px) {
    .rsx-height-p175-xs {
        height: 175px !important;
    }

    .rsx-height-p200-xs {
        height: 200px !important;
    }
}


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

    .rsx-height-p200-sm {
        height: 200px !important;
    }
}


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

    .rsx-height-p200-md {
        height: 200px !important;
    }
}


@media (min-width: 1240px) {
    .rsx-height-p175-lg {
        height: 175px !important;
    }

    .rsx-height-p200-lg {
        height: 200px !important;
    }
}