/* ---------------------------------
 * CSS de grid
 * @version Beta v0.4
 * @date 12.Dez.2016
 * @author Márcio Camargo
 * @email marcio@seepix.com.br

* Divide estruturas em colunas sem espaços ajustando-se e ordenando-se em desktop | tablet | phone

Número de colunas por dispositivo:
	DESKTOP: 12 blocos;
	TABLET: 6 blocos;
	PHONE: 4 blocos;

Limites de dispositivos:
	DESKTOP: Acima de 840px;
	TABLE: Entre 480px e 840px;
	PHONE: Abaixo de 480px;

Exemplo de uso:

	<div class="grid">
		<div class="grid-desktop-4"></div>
		<div class="grid-desktop-4"></div>
		<div class="grid-desktop-4"></div>
	</div>

--------------------------------- */

.grid{
	
	display: -webkit-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -moz-box;
	display: flex;

	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;

	-webkit-flex-direction: row;
   	flex-direction: row;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	width: 100%;

	 display: -ms-flexbox;
    -ms-flex-pack: center;

	}

.grid-left,
.grid-l{
	display: flex;
	justify-content: flex-start;
	}
.grid-center,
.grid-c{
	display: flex;
	justify-content: center;
	}
.grid-right,
.grid-r{
	display: flex;
	justify-content: flex-end;
	}

.grid-phone-1,
.grid-phone-2,
.grid-phone-3,
.grid-phone-4,
.grid-phone-5,
.grid-phone-6,
.grid-phone-7,
.grid-phone-8,
.grid-tablet-1,
.grid-tablet-2,
.grid-tablet-3,
.grid-tablet-4,
.grid-tablet-5,
.grid-tablet-6,
.grid-desktop-1,
.grid-desktop-2,
.grid-desktop-3,
.grid-desktop-4,
.grid-desktop-5,
.grid-desktop-6,
.grid-desktop-7,
.grid-desktop-8,
.grid-desktop-9,
.grid-desktop-10,
.grid-desktop-11,
.grid-desktop-12,
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12{
	position: relative;
	-webkit-order: 999;
	order: 999;
	flex-grow: 0;
	flex-shrink: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	/*border: solid 1px #EEE;*/
	}

.grid-1{ 	width: 8.33333%; 	}
.grid-2{ 	width: 16.66666%; 	}
.grid-3{	width: 25%;	}
.grid-4{	width: 33.333333%;	}
.grid-5{	width: 41.666666%;	}
.grid-6{	width: 50%;			}
.grid-7{	width: 58.333333%;	}
.grid-8{	width: 66.666666%;	}
.grid-9{	width: 74.999999%;	}
.grid-10{	width: 83.333333%;	}
.grid-11{	width: 91.666666%;	}
.grid-12{	width: 100%;		}

.grid-order-1{ -webkit-order: 1; order: 1; }
.grid-order-2{ -webkit-order: 2; order: 2; }
.grid-order-3{ -webkit-order: 3; order: 3; }
.grid-order-4{ -webkit-order: 4; order: 4; }
.grid-order-5{ -webkit-order: 5; order: 5; }
.grid-order-6{ -webkit-order: 6; order: 6; }
.grid-order-7{ -webkit-order: 7; order: 7; }
.grid-order-8{ -webkit-order: 8; order: 8; }
.grid-order-9{ -webkit-order: 9; order: 9; }
.grid-order-10{ -webkit-order: 10; order: 10; }
.grid-order-11{ -webkit-order: 11; order: 11; }
.grid-order-12{ -webkit-order: 12; order: 12; }
.grid-order-13{ -webkit-order: 13; order: 13; }
.grid-order-14{ -webkit-order: 14; order: 14; }
.grid-order-15{ -webkit-order: 15; order: 15; }
.grid-order-16{ -webkit-order: 16; order: 16; }

@media (max-width: 480px) {
	.grid-phone-1{ 	width: 12.5%; 	}
	.grid-phone-2{	width: 25%;		}
	.grid-phone-3{	width: 37.5%;	}
	.grid-phone-4{	width: 50%;		}
	.grid-phone-5{ 	width: 62.5%; 	}
	.grid-phone-6{	width: 75%;		}
	.grid-phone-7{	width: 87.5%;	}
	.grid-phone-8{	width: 100%;	}

	.grid-phone-order-1{ -webkit-order: 1; order: 1; }
	.grid-phone-order-2{ -webkit-order: 2; order: 2; }
	.grid-phone-order-3{ -webkit-order: 3; order: 3; }
	.grid-phone-order-4{ -webkit-order: 4; order: 4; }
	.grid-phone-order-5{ -webkit-order: 5; order: 5; }
	.grid-phone-order-6{ -webkit-order: 6; order: 6; }
	.grid-phone-order-7{ -webkit-order: 7; order: 7; }
	.grid-phone-order-8{ -webkit-order: 8; order: 8; }
	.grid-phone-order-9{ -webkit-order: 9; order: 9; }
	.grid-phone-order-10{ -webkit-order: 10; order: 10; }
	.grid-phone-order-11{ -webkit-order: 11; order: 11; }
	.grid-phone-order-12{ -webkit-order: 12; order: 12; }
	.grid-phone-order-13{ -webkit-order: 13; order: 13; }
	.grid-phone-order-14{ -webkit-order: 14; order: 14; }
	.grid-phone-order-15{ -webkit-order: 15; order: 15; }
	.grid-phone-order-16{ -webkit-order: 16; order: 16; }

	.grid-phone-hide{ display: none !important; }

	.grid-phone-left,
	.grid-phone-l{
		display: flex;
		justify-content: flex-start;
		}
	.grid-phone-center,
	.grid-phone-c{
		display: flex;
		justify-content: center;
		}
	.grid-phone-right,
	.grid-phone-r{
		display: flex;
		justify-content: flex-end;
		}

	}

@media (min-width: 481px) and (max-width: 840px) {

	.grid-tablet-1{ width: 16.66666%; 	}
	.grid-tablet-2{	width: 33.333333%;	}
	.grid-tablet-3{	width: 50%;			}
	.grid-tablet-4{	width: 66.666666%;	}
	.grid-tablet-5{	width: 83.333333%;	}
	.grid-tablet-6{	width: 100%; 		}

	.grid-tablet-order-1{ -webkit-order: 1; order: 1; }
	.grid-tablet-order-2{ -webkit-order: 2; order: 2; }
	.grid-tablet-order-3{ -webkit-order: 3; order: 3; }
	.grid-tablet-order-4{ -webkit-order: 4; order: 4; }
	.grid-tablet-order-5{ -webkit-order: 5; order: 5; }
	.grid-tablet-order-6{ -webkit-order: 6; order: 6; }
	.grid-tablet-order-7{ -webkit-order: 7; order: 7; }
	.grid-tablet-order-8{ -webkit-order: 8; order: 8; }
	.grid-tablet-order-9{ -webkit-order: 9; order: 9; }
	.grid-tablet-order-10{ -webkit-order: 10; order: 10; }
	.grid-tablet-order-11{ -webkit-order: 11; order: 11; }
	.grid-tablet-order-12{ -webkit-order: 12; order: 12; }
	.grid-tablet-order-13{ -webkit-order: 13; order: 13; }
	.grid-tablet-order-14{ -webkit-order: 14; order: 14; }
	.grid-tablet-order-15{ -webkit-order: 15; order: 15; }
	.grid-tablet-order-16{ -webkit-order: 16; order: 16; }

	.grid-tablet-hide{ display: none !important; }

	.grid-tablet-left,
	.grid-tablet-l{
		display: flex;
		justify-content: flex-start;
		}
	.grid-tablet-center,
	.grid-tablet-c{
		display: flex;
		justify-content: center;
		}
	.grid-tablet-right,
	.grid-tablet-r{
		display: flex;
		justify-content: flex-end;
		}

	}

@media (min-width: 841px){

	.grid-desktop-1{ 	width: 8.33333%; 	}
	.grid-desktop-2{ 	width: 16.66666%; 	}
	.grid-desktop-3{	width: 25%;	}
	.grid-desktop-4{	width: 33.333333%;	}
	.grid-desktop-5{	width: 41.666666%;	}
	.grid-desktop-6{	width: 50%;			}
	.grid-desktop-7{	width: 58.333333%;	}
	.grid-desktop-8{	width: 66.666666%;	}
	.grid-desktop-9{	width: 74.999999%;	}
	.grid-desktop-10{	width: 83.333333%;	}
	.grid-desktop-11{	width: 91.666666%;	}
	.grid-desktop-12{	width: 100%;		}

	.grid-desktop-order-1{ -webkit-order: 1; order: 1; }
	.grid-desktop-order-2{ -webkit-order: 2; order: 2; }
	.grid-desktop-order-3{ -webkit-order: 3; order: 3; }
	.grid-desktop-order-4{ -webkit-order: 4; order: 4; }
	.grid-desktop-order-5{ -webkit-order: 5; order: 5; }
	.grid-desktop-order-6{ -webkit-order: 6; order: 6; }
	.grid-desktop-order-7{ -webkit-order: 7; order: 7; }
	.grid-desktop-order-8{ -webkit-order: 8; order: 8; }
	.grid-desktop-order-9{ -webkit-order: 9; order: 9; }
	.grid-desktop-order-10{ -webkit-order: 10; order: 10; }
	.grid-desktop-order-11{ -webkit-order: 11; order: 11; }
	.grid-desktop-order-12{ -webkit-order: 12; order: 12; }
	.grid-desktop-order-13{ -webkit-order: 13; order: 13; }
	.grid-desktop-order-14{ -webkit-order: 14; order: 14; }
	.grid-desktop-order-15{ -webkit-order: 15; order: 15; }
	.grid-desktop-order-16{ -webkit-order: 16; order: 16; }

	.grid-desktop-hide{ display: none !important; }

	.grid-desktop-left,
	.grid-desktop-l{
		display: flex;
		justify-content: flex-start;
		}
	.grid-desktop-center,
	.grid-desktop-c{
		display: flex;
		justify-content: center;
		}
	.grid-desktop-right,
	.grid-desktop-r{
		display: flex;
		justify-content: flex-end;
		}

	}