



.zoom-out :hover img {
	-webkit-transform: scale(1.25);
	transform: scale(1.25);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.zoom-out  img {
	-webkit-transform: scale(1);
	transform: scale(1);
}








/* TEST SUR LA DEUXIEME PHOTO VAUCLUSE */

.rounded :hover img:hover {
  width: 200px; /* on affiche l'image au carré */
  height: 315px;
  border-radius: 50%; 
}
.rounded img {
  width: 200px; /* largeur de l'image */
  height: auto; /* hauteur de l'image */
  -webkit-transition: .3s ease-in-out !important; 
  transition: .3s ease-in-out !important; 
}






.slide img {
	margin-left: 0px;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.slide :hover img {
	width: 100%;
	height: 100%;
	margin-left: -50px;
}







.rotate-zoom-out img {
	-webkit-transform: rotate(0) scale(1);
	transform: rotate(0) scale(1);
}
.rotate-zoom-out :hover img {
	-webkit-transform: rotate(10deg) scale(1.25);
	transform: rotate(10deg) scale(1.25);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}








/* TEST SUR LA CINQUIEME PHOTO DES REGIONS VOISINES */
.blur img {
	-webkit-filter: blur(0);
	filter: blur(0);
}
.blur :hover img {
	-webkit-filter: blur(3px);
	filter: blur(3px);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}








.grayscale img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}
.grayscale img:hover  {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}









.sepia  img {
	-webkit-filter: sepia(0);
	filter: sepia(0);
}
.sepia :hover img {
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}










.opacity1 img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.opacity1 :hover img {
	opacity: .5;
}









/* TEST SUR LA PREMIERE PHOTO BOUCHES-DU-RHONE */
.morph img {
  width: 470px;
  height: 315px;
  -webkit-filter: grayscale(0) blur(0px);
  filter: grayscale(0) blur(0px);
  -webkit-transition: all 1.2s ease;
  transition: all 1.2s ease;
}
 
.morph :hover img {
  width: 470px; /* on affiche l'image au carré */
  height: 315px;
  border-radius: 50%;  /* on arrondit l'image */
  -webkit-transform: rotate(360deg); /* rotation de l'image */
  transform: rotate(360deg);
}







.opacity-color img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.opacity-color :hover img {
	opacity: .5;
}










/* TEST SUR LA TROISIEME PHOTO SUR LA COTE D'AZUR */
.flash :hover img {
	opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}










.shine div {
	position: relative;
}
.shine ::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.shine :hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}











.light div {
	position: relative;
}
.light ::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.light :hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}




