@charset "utf-8";
/* CSS Document */
/* Animation images & texte */
a.ex1:hover, a.ex1:active {
    opacity: 1;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}
a.ex2:hover {
    opacity: 1;
    -webkit-filter: sepia(1);
    filter: sepia(1);
}

/* Inverse les couleurs */
a.ex3:hover, a.ex3:active {   
    opacity: 1;
    -webkit-filter: invert(.8);
    filter: invert(.8);
}
a.ex4:hover, a.ex4:active {   
    transition: transform .2s; /* Animation */
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}   

/* FIN Fade IN */  



/* Texte flou */
.blurryText {
    color: transparent;
    text-shadow: 0 0 2px rgba(0,0,0,0.80);
} 

/* Fade sur image ou texte */
.fade-in-image {
    opacity: 1;
    animation-name: fadeInOpacityimage;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

@keyframes fadeInOpacityimage {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fade-in-text {
    opacity: 1;
    animation-name: fadeInOpacitytext;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

@keyframes fadeInOpacitytext {
    0% {
        opacity: .25;
    }
    100% {
        opacity: 1;
    }
}

/* FIN - Fade sur image ou texte */

/* Zoom arrière sur image */
.shrink { 
    transition: all .9s ease-in-out; 
}

.shrink:hover { 
    transform: scale(0.9); 
}
.shrink_shadow { 
    transition: all .9s ease-in-out; 
}

.shrink_shadow:hover { 
    transform: scale(0.9); 
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;     
}
.shrink_rotate { 
    transition: transform 0.5s ease; 
}

.shrink_rotate:hover { 
    transform: rotate(15deg) scale(0.9);     
}
/* FIN Zoom arrière sur image */

/* Zoom avant sur image */
.zoom {
    transition: transform 0.5s ease;
}

.zoom:hover { 
    transform: scale(1.25);
}

/* Zoom avant sur image avec ombrage */
.zoom1 { 
    transition: all .9s ease-in-out;   
}

.zoom1:hover { 
    transform: scale(1.10);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;    
}

/* Rotation d'une image */
.rotate {
    transition: transform 0.5s ease;
}
.rotate:hover {
    transform: rotate(15deg);
}
/* Fin - Rotation d'une image */

/* Flou d'une image */
.blur {
    transition: filter 0.5s ease;
}
.blur:hover {
    filter: blur(5px);
}
/* FIN - Flou d'une image */

/*Image qui tourne recto/verso*/

.flip-card {
    background-color: #000000;
    width: 300px;
    height: 600px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-front {
    background-color: #000000;
    color: black;
}

.flip-card-back {
    background-color: #000000;
    color: white;
    transform: rotateY(180deg);
}


/*FIN - Image qui tourne recto/verso*/