/**
* Grid classes
*
* @author splitfire - http://splitfire.fr
* @version 2.1
*
*/ 

$widthApp : 1180px;
$widthAppMq: 98%;

.grid_container
{
	position: relative;
	//width: $widthApp;
	@include mq(phone){width: 100%; box-sizing : border-box}
	//margin:20px auto;
	&.grid_container--auto
	{
		width: auto;
	}	
	@extend %clearfloat;	
	
	/* Grid de base */
	&> *:not(.grid_p) + *:not(.grid_p) { margin-left: 2%; @include mq(phone){margin-left:0}}
	&> *		{ float:left;}
	/* Grid 2 elements per row */
	&.grid2 > * { width: 49%; @include mq(phone,tablet){width: 100%;}}
	&.grid2 > *:nth-child(2n + 3){margin-left:0;}
	/* Grid 3 elements per row */
	&.grid3 > * 	{ width: 32%;@include mq($to:phone){width: 100%;} }
	&.grid3 > *:nth-child(3n + 4){margin-left:0;}
	
	/* Grid 4 elements per row */
	&.grid4 > * 	{ width: 23.5%;@include mq($to:phone){width: 100%;} }
	&.grid4 > *:nth-child(4n + 5){margin-left:0;}
	/* Grid 5 elements per row */
	&.grid5 > * 	{ width: 18.4%;@include mq($to:phone){width: 100%;} }
	&.grid5 > *:nth-child(5n + 6){margin-left:0;}
	/* Grid 6 elements per row */
	&.grid6 > * 	{ width: 15%; @include mq($to:phone){width: 100%;}}
	&.grid6 > *:nth-child(6n + 7){margin-left:0;}
	/* Grid 7 elements per row */
	&.grid7 > * 	{ width: 12%; @include mq($to:phone){width: 100%;}}
	&.grid7 > *:nth-child(7n + 8){margin-left:0;}	
	
	/* Positionnement
	-------------------*/
	&.grid_multiple
	{
		margin-top:20px;
		margin-bottom:20px;
	}
	&.grid_center
	{
		margin-left:auto;
		margin-right:auto;
	}
	.grid_f
	{
		float: left;
	}
	.grid_r
	{
		float:right;
	}	
	
	/*Grid en pourcentage de 10% à 100%
	-------------------------------------------*/
	$class-slug: grid_p;
	@for $i from 1 through 10
	{
		& .#{$class-slug}_#{$i}
		{
			width: 10% * $i;
			margin:0 /9 !important;
		}	
	}	
	$class-slug: grid_p_m;
	@for $i from 1 through 10
	{
		& .#{$class-slug}_#{$i}
		{
			width: (10% * $i) - 2;
		}	
	}
	
	/*Grid en pourcentage de 10% à 100%
	-------------------------------------------*/

		
}