/*GRID TIENE LA DEFINICIÓN DE TAMAÑO Y DISTRIBUCIÖN DE LOS CONTENEDORES y los ITEMS (HIJOS) */

.container, .container-fluid {
	display: block;
	width: 100%;
	margin: auto;
/*        background-color: #EEE; */
}

.container { max-width: 1200px; }

.item {
	display: block;
        padding: 16px;
        padding: 1rem;
/*    	background-color: #222;*/
}

/* 
	Los anchos se calculan por regla de 3
	Mi reticula es de 12 columnas
	Mi base de 960px

	12col -----> 960px;
	n-col -----> ???px
	
	( n-col * 960px ) / 12col = resultado en px

	( 6col * 960px ) / 12col = 480px
	( 1col * 960px ) / 12col = 80px

	Mi reticula es de 12 columnas
	Mi base de 100%	

	( n-col * 100% ) / 12col = resultado en %
*/

/*Aplicando la Filosofía Mobile First */
.ph12 { width: 100%; }

.ph11 { width: 91.66666666666667%; }

.ph10 { width: 83.33333333333333%; }

.ph9 { width: 75%; }

.ph8 { width: 66.66666666666667%; }

.ph7 { width: 58.33333333333333%; }

.ph6 { width: 50%; }

.ph5 { width: 41.66666666666667%; }

.ph4 { width: 33.33333333333333%; }

.ph3 { width: 25%; }

.ph2 { width: 16.66666666666667%; }

.ph1 { width: 8.333333333333333%; }

/*Con media Queries iremos modificando estos tamanos*/

/*Se Trabajará para 4 tamaños aunque se pueden aumentar más*/

/*Dispositivos pequeños*/
@media screen and (min-width: 30em){
    .bg{
        background-color: red;
    }
    .sm12 { width: 100%; }

    .sm11 { width: 91.66666666666667%; }

    .sm10 { width: 83.33333333333333%; }

    .sm9 { width: 75%; }

    .sm8 { width: 66.66666666666667%; }

    .sm7 { width: 58.33333333333333%; }

    .sm6 { width: 50%; }

    .sm5 { width: 41.66666666666667%; }

    .sm4 { width: 33.33333333333333%; }

    .sm3 { width: 25%; }

    .sm2 { width: 16.66666666666667%; }

    .sm1 { width: 8.333333333333333%; }
}

/*Dispositivos medianos*/
@media screen and (min-width: 48em){
    .bg{
        background-color: green;
    }
    .md12 { width: 100%; }

    .md11 { width: 91.66666666666667%; }

    .md10 { width: 83.33333333333333%; }

    .md9 { width: 75%; }

    .md8 { width: 66.66666666666667%; }

    .md7 { width: 58.33333333333333%; }

    .md6 { width: 50%; }

    .md5 { width: 41.66666666666667%; }

    .md4 { width: 33.33333333333333%; }

    .md3 { width: 25%; }

    .md2 { width: 16.66666666666667%; }

    .md1 { width: 8.333333333333333%; }
}

/*Dispositivos grandes*/
@media screen and (min-width: 64em){
    .bg{
        background-color: blue;
    }
    .lg12 { width: 100%; }

    .lg11 { width: 91.66666666666667%; }

    .lg10 { width: 83.33333333333333%; }

    .lg9 { width: 75%; }

    .lg8 { width: 66.66666666666667%; }

    .lg7 { width: 58.33333333333333%; }

    .lg6 { width: 50%; }

    .lg5 { width: 41.66666666666667%; }

    .lg4 { width: 33.33333333333333%; }

    .lg3 { width: 25%; }

    .lg2 { width: 16.66666666666667%; }

    .lg1 { width: 8.333333333333333%; }
}