/* ----------------------------- */
/* == albums                */
/* ----------------------------- */


#grid-albums > div{
	width: 100%;  
	float: left;  
		
}




#grid-produits a > .bloc_image, #grid-albums a > .bloc_image{
	filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);	
}

#grid-produits a:hover > .bloc_image, #grid-albums a:hover > .bloc_image{
	filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);

  	
}

#grid-produits a:hover .bloc_texte, #grid-albums a:hover .bloc_texte{
  opacity:0; filter:alpha(opacity=0); 

/* == fondu */
  -webkit-transition: all 0.5s ease-out;
  -khtml-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}


.imgWrapper {
	position: relative; height: 100%; top: 0; left: 0; bottom: 0; right: 0;
}

.imgWrapper img{
	margin-bottom:1em;
}


.imgWrapper.ratio-cent-cent {
  	padding-bottom: 100%;
  }



.imgWrapper div {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}








.imgWrapper .bloc_texte {

	text-align: center;
	font: 0/0 a;

/* == gris transparent */
	background-color: rgba(10, 13, 13, 0.6);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
	

  -webkit-transition: all 0.5s ease-out;
  -khtml-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  
  }

.imgWrapper .bloc_texte:before {
	content: ' ';
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}

.imgWrapper .bloc_texte ul {
	vertical-align: middle;
	display: inline-block;
	text-align: center;
	width: 100%;
	height: auto;
	font-family: 'apercu_medium', arial, sans-serif;
	list-style: none;
	padding:0px 0px 0px 0px;
}

.imgWrapper .bloc_texte li  { 
	margin:0px 10px 0px 10px;
}

.imgWrapper .bloc_texte li.artiste{ 
	margin:0px 10px 5px 10px;
	color:#B2B2B2;
	font-size: 16px;
	line-height: 18px;
	text-transform: uppercase;
}

.imgWrapper .bloc_texte li.titre{ 
	margin-top:5px; margin-bottom:10px;
	font-size: 24px;
	line-height: 24px;
}

.imgWrapper .bloc_texte li.format{ 
	margin-bottom:5px;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 14px;
	color: #ffffff;
}

.imgWrapper .bloc_texte li.reference{ 
	text-transform: uppercase;
	font-size: 12px;
	line-height: 14px;
}






@media (min-width: 961px) {
	#grid-produits > div{
		width: 25%;  
		float: left;  
	}
}

@media (min-width: 641px) and (max-width: 960px) {
	#grid-produits > div {
	   width: 33.33%;
	   float: left;  
	}
	
	.categorie_name{margin-left:20px;}
}


@media (min-width: 321px) and (max-width: 640px){
	#grid-produits > div {
	   width: 50%;
	   float: left;  
	}

	.imgWrapper .bloc_texte li.titre {
	   font-size: 18px;
	   line-height: 18px; 
	}
	
	.categorie_name{margin-left:10px;}
}

@media (max-width: 320px){
	#grid-produits > div {
	   width: 50%;
	float: left;  

	}

	.imgWrapper .bloc_texte li.titre {
	   font-size: 17px;
	   line-height: 17px; 
	}
		
	.categorie_name{margin-left:10px;}
}