/* IMAGE AVEC UN MASQUE */

.img_with_masque {overflow: hidden; max-width:500px; max-height:500px; /*height:500px;*/}

.img_masque {
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/public/masque_huitre.png) center no-repeat, rgba(43,139,180,0.6); 
	background-size:103%; /* compensation de l'apparition de bord au dessus et en dessous comme si le masque ne couvrait pas toute la hauteur */
    text-align: center;
    padding: 0;
	transition: ease 1s all;
}
.img_with_masque:hover .img_masque {background: url(../img/public/masque_huitre.png) center no-repeat;background-size:103%;}
.img_masque_nom { text-transform: uppercase; font-size:1.7em; color: #FFF;position: absolute; width: calc(100% - 20px);bottom: calc(50% - 30px);}
.img_masque a {display:table; width:100%; height:100%; color:inherit; text-decoration:none;}

.img_with_masque.grid_100 { width:100% !important; padding:0; float:none !important; position: relative !important; margin:0 auto !important;}
.img_with_masque.grid_100 img {max-width:100%;}


@media screen and (max-width : 1200px) {			
	.img_masque_nom {font-size:1.2em;}
}
@media screen and (max-width : 800px) {			
	.img_masque_nom {font-size:1.7em;}
}
@media screen and (max-width : 480px) {			
	.img_masque_nom {font-size:1.2em;}
}