*{ 
	/* permet de prendre en compte les bordures sur les width*/
	box-sizing : border-box; 
	-moz-box-sizing : border-box; 
	-webkit-box-sizing : border-box; 
}

/**********************************************************\
		- Clearfix sur le row
\**********************************************************/			
/* Nettoye les problèmes de div */
.row{	margin: 0 -10px; zoom:1; }
.row:before, .row:after{
	content: "";
	display: table;
}
.row:after{
	clear: both;
}

.border{ border:solid red 1px;}
/**********************************************************\
		- Mobile First
\**********************************************************/
/* Aspect de bases des colonnes*/
.col-s-1,.col-s-2,.col-s-3,.col-s-4,.col-s-5,.col-s-6,.col-s-7,.col-s-8,.col-s-9,.col-s-10,.col-s-11,.col-s-12{
	float: left;
	position: relative;
	min-height: 1px;
	padding : 10px;

	/*background-color: rgba(0,0,0, 0.2);
	border : 1px solid rgba(0,0,0, 0.5);*/
}

/* Taille  des colonnes */
.col-s-1{  width:  8.33333%;}
.col-s-2{  width: 16.66667%;}
.col-s-3{  width: 25%;}
.col-s-4{  width: 33.33333%;}
.col-s-5{  width: 41.66667%;}
.col-s-6{  width: 50%;}
.col-s-7{  width: 58.33333%;}
.col-s-8{  width: 66.66667%;}
.col-s-9{  width: 75%;}
.col-s-10{ width: 83.33333%;}
.col-s-11{ width: 91.66667%;}
.col-s-12{ width: 100%;}	

/* Pour décaler la div du nombre de crans */
.col-s-push-0{  left:0;}
.col-s-push-1{  left:8.33333%;}
.col-s-push-2{  left:16.66667%;}
.col-s-push-3{  left:25%;}
.col-s-push-4{  left:33.33333%;}
.col-s-push-5{  left:41.66667%;}
.col-s-push-6{  left:50%;}
.col-s-push-7{  left:58.33333%;}
.col-s-push-8{  left:66.66667%;}
.col-s-push-9{  left:75%;}
.col-s-push-10{ left:83.33333%;}
.col-s-push-11{ left:91.66667%;}
.col-s-push-12{ left:100%;}

/* Centrage sur mobile */
.col-s-center{ float:none; margin:0 auto;}

/* Cache sur mobile */
.s-hide{ display: none;}

/* Visible uniquement sur mobile */
.s-show{ display: block;}
.m-show{ display: none;}
.l-show{ display: none;}

/**********************************************************\
		- Ecran Médium
\**********************************************************/			

@media only screen and (min-width:640px){
	.col-m-1,.col-m-2,.col-m-3,.col-m-4,.col-m-5,.col-m-6,.col-m-7,.col-m-8,.col-m-9,.col-m-10,.col-m-11,.col-m-12{
		float: left;
		position: relative;
		min-height: 1px;
		padding : 10px;

		/*background-color: rgba(255,0,0, 0.2);
		border : 1px solid rgba(0,0,0, 0.5);*/

	}
	.col-m-1{  width:  8.33333%;}
	.col-m-2{  width: 16.66667%;}
	.col-m-3{  width: 25%;}
	.col-m-4{  width: 33.33333%;}
	.col-m-5{  width: 41.66667%;}
	.col-m-6{  width: 50%;}
	.col-m-7{  width: 58.33333%;}
	.col-m-8{  width: 66.66667%;}
	.col-m-9{  width: 75%;}
	.col-m-10{ width: 83.33333%;}
	.col-m-11{ width: 91.66667%;}
	.col-m-12{ width: 100%;}	
 
	.col-m-push-0{  left:0;}
	.col-m-push-1{  left:8.33333%;}
	.col-m-push-2{  left:16.66667%;}
	.col-m-push-3{  left:25%;}
	.col-m-push-4{  left:33.33333%;}
	.col-m-push-5{  left:41.66667%;}
	.col-m-push-6{  left:50%;}
	.col-m-push-7{  left:58.33333%;}
	.col-m-push-8{  left:66.66667%;}
	.col-m-push-9{  left:75%;}
	.col-m-push-10{ left:83.33333%;}
	.col-m-push-11{ left:91.66667%;}
	.col-m-push-12{ left:100%;}
 
	.col-m-center{ margin:0 auto; float:none;}

	/* Affiche ce qui est invisbible sur mobile */
	.s-hide{ display: block;}
	.m-hide{ display: none;}

	.s-show{ display: none;}
	.m-show{ display: block;}
}

/**********************************************************\
		- Ecran Large
\**********************************************************/			
	
@media only screen and (min-width:1024px){
	.col-l-1,.col-l-2,.col-l-3,.col-l-4,.col-l-5,.col-l-6,.col-l-7,.col-l-8,.col-l-9,.col-l-10,.col-l-11,.col-l-12{
		float: left;
		position: relative;
		min-height: 1px;
		padding : 10px;

		/*background-color: rgba(0,255,0, 0.2);
		border : 1px solid rgba(0,0,0, 0.5);*/

	}
	.col-l-1{  width:  8.33333%;}
	.col-l-2{  width: 16.66667%;}
	.col-l-3{  width: 25%;}
	.col-l-4{  width: 33.33333%;}
	.col-l-5{  width: 41.66667%;}
	.col-l-6{  width: 50%;}
	.col-l-7{  width: 58.33333%;}
	.col-l-8{  width: 66.66667%;}
	.col-l-9{  width: 75%;}
	.col-l-10{ width: 83.33333%;}
	.col-l-11{ width: 91.66667%;}
	.col-l-12{ width: 100%;}	
	
	.col-l-push-0{  left:0;}
	.col-l-push-1{  left:8.33333%;}
	.col-l-push-2{  left:16.66667%;}
	.col-l-push-3{  left:25%;}
	.col-l-push-4{  left:33.33333%;}
	.col-l-push-5{  left:41.66667%;}
	.col-l-push-6{  left:50%;}
	.col-l-push-7{  left:58.33333%;}
	.col-l-push-8{  left:66.66667%;}
	.col-l-push-9{  left:75%;}
	.col-l-push-10{ left:83.33333%;}
	.col-l-push-11{ left:91.66667%;}
	.col-l-push-12{ left:100%;}

	.col-l-center{ margin:0 auto; float:none;}

	/* Affiche ce qui n'est pas visible sur medium */
	.m-hide{ display: block;}
	.l-hide{ display: none;}

	.s-show{ display: none;}	
	.m-show{ display: none;}
	.l-show{ display: block;}	
}
.clear{
	clear: both;
}