/*****************************************/
/* POUR UNE GRILLE AVEC 30PX DE GOUTIERE */
/*****************************************/

	.grid{ position:relative; margin-left:-15px; margin-right:-15px; z-index:0; } /* Définir les margins la moitier de la goutière */
	
	
	.grid .col1de2, .grid .col1de3, .grid .col2de3, .grid .col1de4, .grid .col3de4,
	.grid .col1de5, .grid .col2de5, .grid .col3de5, .grid .col4de5, 	
	.grid .col1de6,	.grid .col5de6, .grid .colfull{ /*float:left;*/ display:inline-block;  }
	

	
	.grid .colfull{ width:100%; }
	
	.grid .col1de2{ width:50%; }
	
	.grid .col1de3{ width:33.33333333%; }
	.grid .col2de3{ width:66.66666666%; }

	.grid .col1de4{ width:25%; }
	.grid .col3de4{ width:75%; }

	.grid .col1de5{ width:20%; }
	.grid .col2de5{ width:40%; }
	.grid .col3de5{ width:60%; }
	.grid .col4de5{ width:80%; }
	
	.grid .col1de6{ width:16.66666666%; }
	.grid .col5de6{ width:83.33333333%; }

	
	
	.gridend { width:100%; height:0; display:inline-block; }



	.grid .object{ position:relative; padding:0px; margin-left:15px; margin-right:15px; /*margin-bottom:20px; */ /* margin bottom à changer au besoin */
		-moz-transition: opacity .2s ease-in-out;
		-o-transition: opacity .2s ease-in-out;
		transition: opacity .2s ease-in-out;
  	}
	
	.grid .objectinner{ position:absolute; /*background-color:#fff;*/ text-align:center; padding:10px; }


	.grid .objectinnercontent{ position:absolute; left:8px; right:8px; top:8px; bottom:8px; background-size:cover; background-position:center center; background-repeat:no-repeat; }

	.grid .objectpointer{ cursor:pointer; }
	.grid .objectpointer .grid .objectinner:hover{ opacity:0.5;  }



/* Défini la hauteur d'un object de grille si l'élément n'a pas de hauteur spécifique comme un IMG tag */

	.grid .object{ height:auto; }



/* ajustement des images dans le grid */



@media screen and (max-width: 660px){ 

	.grid .col1de3{ width:100%; }
	.grid .col2de3{ width:100%; }
	.grid .col1de6{ width:33.333333333%; }
	.grid .col1de4{ width:50%; }
	.grid .col3de4{ width:50%; }
	.grid .col1de5{ width:33%; }
	.grid .col4de5{ width:66%; }
	.grid .col2de5{ width:50%; }
	.grid .col3de5{ width:50%; }
	.grid .col4de5{ width:100%; }
	.grid .col5de6{ width:100%; }
}

@media screen and (max-width: 550px){ 
	.grid .col1de2{ width:100%; }
}

@media screen and (max-width: 400px){ 

	.grid .col1de6{ width:50%; }
	.grid .col1de4{ width:100%; }
	.grid .col3de4{ width:100%; }
	.grid .col2de5{ width:100%; }
	.grid .col3de5{ width:100%; }	
}