/*
	NOVO GRID EM DISCUSSAO

	** grids**
	Smartphone até 540px;
	Tablets Pesquenos de 541px até 810px;
	Tablets Médios de 811px até 1080px;
	Pcs e Tablets GRANDES de 1081 ao infinito;
	Conteúdo do Site maximo até 1200px;

*/

/*
Grid - Template

Como usar

Classes de grid tem o seguinte padrão:
    .g<group>-<columns>
Onde:
    group: é o grupo de faixa de resolução
    columns: define em qunatas partes o elemento deve ser dividido
Ex.:
    .g0-4 = divisão de 4 colunas para Smartphones
    .gD-6 = divisão de 6 colunas independe do tamanho do dispositivo

Classes de coluna tem o seguinte padrão:
    .c<group>-<columns>
    Onde:
        group: é o grupo de faixa de resolução
        columns: define quantas colunas o lemento deve ocupar
    Ex.:
        .c0-4 = ocupar 4 colunas para Smartphones
        .cD-6 = ocupar 6 colunas independe do tamanho do dispositivo
*/

.grid > .field-wrap {margin: 0;}

.pD-0  {padding-left:  0px; padding-right:  0px;}
.pD-10 {padding-left: 10px; padding-right: 10px;}
.pD-20 {padding-left: 20px; padding-right: 20px;}

[class*="gD-"], [class*="g0-"], [class*="g1-"], [class*="g2-"], [class*="g3-"], [class*="g4-"] {display: grid;}
[class*="gD-"] > *, [class*="g0-"] > *, [class*="g1-"] > *, [class*="g2-"] > *, [class*="g3-"] > *, [class*="g4-"] > * {grid-column-end: span 1;}

/* Classes gD e cD são classes "default" de grid independetes de "@media query" */

.gD-1  {grid-template-columns: repeat( 1, 1fr);}
.gD-2  {grid-template-columns: repeat( 2, 1fr);}
.gD-3  {grid-template-columns: repeat( 3, 1fr);}
.gD-4  {grid-template-columns: repeat( 4, 1fr);}
.gD-5  {grid-template-columns: repeat( 5, 1fr);}
.gD-6  {grid-template-columns: repeat( 6, 1fr);}
.gD-7  {grid-template-columns: repeat( 7, 1fr);}
.gD-8  {grid-template-columns: repeat( 8, 1fr);}
.gD-10 {grid-template-columns: repeat(10, 1fr);}
.gD-12 {grid-template-columns: repeat(12, 1fr);}

.cD-1  {grid-column-end: span  1;}
.cD-2  {grid-column-end: span  2;}
.cD-3  {grid-column-end: span  3;}
.cD-4  {grid-column-end: span  4;}
.cD-5  {grid-column-end: span  5;}
.cD-6  {grid-column-end: span  6;}
.cD-7  {grid-column-end: span  7;}
.cD-8  {grid-column-end: span  8;}
.cD-9  {grid-column-end: span  9;}
.cD-10 {grid-column-end: span 10;}
.cD-11 {grid-column-end: span 11;}
.cD-12 {grid-column-end: span 12;}

.cD-full { grid-column: 1 / -1;}

@media (max-width: 540px) {
    .g0-1  {grid-template-columns: repeat( 1, 1fr);}
    .g0-2  {grid-template-columns: repeat( 2, 1fr);}
    .g0-3  {grid-template-columns: repeat( 3, 1fr);}
    .g0-4  {grid-template-columns: repeat( 4, 1fr);}
    .g0-5  {grid-template-columns: repeat( 5, 1fr);}
    .g0-6  {grid-template-columns: repeat( 6, 1fr);}
    .g0-7  {grid-template-columns: repeat( 7, 1fr);}
    .g0-8  {grid-template-columns: repeat( 8, 1fr);}
    .g0-10 {grid-template-columns: repeat(10, 1fr);}
    .g0-12 {grid-template-columns: repeat(12, 1fr);}

    .c0-1  {grid-column-end: span  1;}
    .c0-2  {grid-column-end: span  2;}
    .c0-3  {grid-column-end: span  3;}
    .c0-4  {grid-column-end: span  4;}
    .c0-5  {grid-column-end: span  5;}
    .c0-6  {grid-column-end: span  6;}
    .c0-7  {grid-column-end: span  7;}
    .c0-8  {grid-column-end: span  8;}
    .c0-9  {grid-column-end: span  9;}
    .c0-10 {grid-column-end: span 10;}
    .c0-11 {grid-column-end: span 11;}
    .c0-12 {grid-column-end: span 12;}

    .c0-full { grid-column: 1 / -1;}
}

@media (min-width: 541px) and (max-width: 810px) {
    .g1-1  {grid-template-columns: repeat( 1, 1fr);}
    .g1-2  {grid-template-columns: repeat( 2, 1fr);}
    .g1-3  {grid-template-columns: repeat( 3, 1fr);}
    .g1-4  {grid-template-columns: repeat( 4, 1fr);}
    .g1-5  {grid-template-columns: repeat( 5, 1fr);}
    .g1-6  {grid-template-columns: repeat( 6, 1fr);}
    .g1-7  {grid-template-columns: repeat( 7, 1fr);}
    .g1-8  {grid-template-columns: repeat( 8, 1fr);}
    .g1-10 {grid-template-columns: repeat(10, 1fr);}
    .g1-12 {grid-template-columns: repeat(12, 1fr);}

    .c1-1  {grid-column-end: span  1;}
    .c1-2  {grid-column-end: span  2;}
    .c1-3  {grid-column-end: span  3;}
    .c1-4  {grid-column-end: span  4;}
    .c1-5  {grid-column-end: span  5;}
    .c1-6  {grid-column-end: span  6;}
    .c1-7  {grid-column-end: span  7;}
    .c1-8  {grid-column-end: span  8;}
    .c1-9  {grid-column-end: span  9;}
    .c1-10 {grid-column-end: span 10;}
    .c1-11 {grid-column-end: span 11;}
    .c1-12 {grid-column-end: span 12;}

    .c1-full { grid-column: 1 / -1;}
}

@media (min-width: 811px) and (max-width: 1080px) {
    .g2-1  {grid-template-columns: repeat( 1, 1fr);}
    .g2-2  {grid-template-columns: repeat( 2, 1fr);}
    .g2-3  {grid-template-columns: repeat( 3, 1fr);}
    .g2-4  {grid-template-columns: repeat( 4, 1fr);}
    .g2-5  {grid-template-columns: repeat( 5, 1fr);}
    .g2-6  {grid-template-columns: repeat( 6, 1fr);}
    .g2-7  {grid-template-columns: repeat( 7, 1fr);}
    .g2-8  {grid-template-columns: repeat( 8, 1fr);}
    .g2-10 {grid-template-columns: repeat(10, 1fr);}
    .g2-12 {grid-template-columns: repeat(12, 1fr);}

    .c2-1  {grid-column-end: span  1;}
    .c2-2  {grid-column-end: span  2;}
    .c2-3  {grid-column-end: span  3;}
    .c2-4  {grid-column-end: span  4;}
    .c2-5  {grid-column-end: span  5;}
    .c2-6  {grid-column-end: span  6;}
    .c2-7  {grid-column-end: span  7;}
    .c2-8  {grid-column-end: span  8;}
    .c2-9  {grid-column-end: span  9;}
    .c2-10 {grid-column-end: span 10;}
    .c2-11 {grid-column-end: span 11;}
    .c2-12 {grid-column-end: span 12;}

    .c2-full { grid-column: 1 / -1;}
}

@media (min-width: 1081px) {
    .g3-1  {grid-template-columns: repeat( 1, 1fr);}
    .g3-2  {grid-template-columns: repeat( 2, 1fr);}
    .g3-3  {grid-template-columns: repeat( 3, 1fr);}
    .g3-4  {grid-template-columns: repeat( 4, 1fr);}
    .g3-5  {grid-template-columns: repeat( 5, 1fr);}
    .g3-6  {grid-template-columns: repeat( 6, 1fr);}
    .g3-7  {grid-template-columns: repeat( 7, 1fr);}
    .g3-8  {grid-template-columns: repeat( 8, 1fr);}
    .g3-10 {grid-template-columns: repeat(10, 1fr);}
    .g3-12 {grid-template-columns: repeat(12, 1fr);}

    .c3-1  {grid-column-end: span  1;}
    .c3-2  {grid-column-end: span  2;}
    .c3-3  {grid-column-end: span  3;}
    .c3-4  {grid-column-end: span  4;}
    .c3-5  {grid-column-end: span  5;}
    .c3-6  {grid-column-end: span  6;}
    .c3-7  {grid-column-end: span  7;}
    .c3-8  {grid-column-end: span  8;}
    .c3-9  {grid-column-end: span  9;}
    .c3-10 {grid-column-end: span 10;}
    .c3-11 {grid-column-end: span 11;}
    .c3-12 {grid-column-end: span 12;}

    .c3-full { grid-column: 1 / -1;}
}


/* gaps */
.gap10{ grid-gap: 10px; }
.gap20{ grid-gap: 20px; }
.gap30{ grid-gap: 30px; }
.gap40{ grid-gap: 40px; }
.gap50{ grid-gap: 50px; }
.gap60{ grid-gap: 60px; }
.gap70{ grid-gap: 70px; }

.gap-r-10{ grid-row-gap: 10px; }
.gap-r-20{ grid-row-gap: 20px; }
.gap-r-30{ grid-row-gap: 30px; }
.gap-r-40{ grid-row-gap: 40px; }
.gap-r-50{ grid-row-gap: 50px; }
.gap-r-60{ grid-row-gap: 60px; }
.gap-r-70{ grid-row-gap: 70px; }

.gap-c-10{ grid-column-gap: 10px; }
.gap-c-20{ grid-column-gap: 20px; }
.gap-c-30{ grid-column-gap: 30px; }
.gap-c-40{ grid-column-gap: 40px; }
.gap-c-50{ grid-column-gap: 50px; }
.gap-c-60{ grid-column-gap: 60px; }
.gap-c-70{ grid-column-gap: 70px; }


.grid-form {
    align-items: flex-start;
}

.grid-form .field-wrap {
    margin: 0px;
}

/* aligns */
.grid-between{ justify-content: space-between; }
.grid-space-around{ justify-content: space-around; }
.grid-evenly{ justify-content: space-evenly; }

.grid-v-center{ align-items: center; }
.grid-v-start{ align-items: start; }
.grid-v-end{ align-items: end; }

.grid-h-center{ justify-content: center; }
.grid-h-start{ justify-content: start; }
.grid-h-end{ justify-content: end; }