@charset "UTF-8";
/* CSS Document */

.lesheros{
    width:100%;
	/*max-width: 90%;*/
    padding: 0px;
	margin:0px;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:30px;
	position: relative;
 }
.lesherosTitre{
	width:100%;
    padding: 0px;
	margin:0px;
	text-align:center;

	
}
ul.herosGalerie{
	 position:relative;
	 list-style:none;	 
	 margin:0px;
	 padding:0px;
	 width: 100%;
	background-color:#2CF679;}
 
li.heros{
	 position:relative;
	 width: 12.5%;
	 height: 200px;
	 float: left;
	 text-align:center;
	 overflow:hidden;
	 margin:0px;
	 padding:0px;
	 border: 0px solid #FFF;
	 background-color:#FFF;
 }

 .herosVisuel {
	position: absolute;
	width: 90%;
	height: auto;
	left: 5%;
	z-index: 5;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
	     top: 50%;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
	 
}
ul.herosGalerie :hover .herosVisuel{
	width: 100%;
	height: auto;
	left:0%;
	/*
	top:-5%;
	
	*/
}



.herosYO{
	
	column-count: 6;
    column-gap: 4px;
    /*column-rule: 1px solid #FFF;*/
    
    -moz-column-count: 6;
    -moz-column-gap: 4px;
    /*-moz-column-rule: 1px solid #FFF;*/
    
    -webkit-column-count: 6;
    -webkit-column-gap: 4px;
    /*-webkit-column-rule: 1px solid #FFF;*/
    padding: 0px;
	margin:0px;
	
	
}
.herosBloc {
	position:relative;
	 float:left;
     width:100%;
	height:auto;
	padding:0px;
	margin:0px;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	-ms-transition: 1s;
	webkit-transition: 1s;
	overflow: hidden;
	
}

.herosBloc:hover {
	width:120%;
	height:auto;
	margin:-10%;
	padding:-40%;
	overflow: hidden;
}


 /***** [ ecrans classique ] *****/
@media (max-width: 1600px) {
		li.heros{
	 width: 12.5%;
	 height: 180px;
 }
	
}
/***** [ ipad2 large ] *****/
@media (max-width:1400px) {
	li.heros{
	 width: 12.5%;
	 height: 160px;
 }

}


/***** [ ipad2 large ] *****/
@media (max-width:1280px) {
	li.heros{
	 width: 12.5%;
	 height: 145px;
 }

}


/***** [ ipad2 vertical ] *****/
@media handheld, only screen and (max-width: 960px){
	li.heros{
	 width: 12.5%;
	 height: 110px;
 }
}
/***** [ Mobile - low res ] *****/
@media handheld, only screen and (max-width: 740px){
	.lesheros{
    width:100%;
	max-width: 100%;
 }
	li.heros{
	 width: 12.5%;
	 height: 85px;
 }
}
/***** [ Mobile - low res ] *****/
@media handheld, only screen and (max-width: 480px){
	li.heros{
	 width: 25%;
	 height: 108px;
 }
}