/* EFFET D'IMAGE */ 

/* Aucun effet  */
#anim-block .none {
    transition: none !important;
    animation: none !important;
}

/* Zoom */ 
#anim-block .zoom { 
    -webkit-transform: scale(1) !important; 
    transform: scale(1) !important; 
    -webkit-transition: .3s ease-in-out !important; 
    transition: .3s ease-in-out !important; 
} 
   
#anim-block .zoom:hover { 
    -webkit-transform: scale(1.2) !important; 
    transform: scale(1.2) !important; 
} 
   
/* Zoom out */ 
#anim-block .zoom-out { 
    -webkit-transform: scale(1) !important; 
    transform: scale(1) !important; 
    -webkit-transition: .3s ease-in-out !important; 
    transition: .3s ease-in-out !important; 
} 

#anim-block .zoom-out:hover { 
    -webkit-transform: scale(0.8) !important; 
    transform: scale(0.8) !important; 
} 
   
/* Ronde */ 
#anim-block .rounded { 
    height: auto; /* hauteur de l'image */ 
    -webkit-transition: .3s ease-in-out !important;  
    transition: .3s ease-in-out !important;  
} 

#anim-block .rounded:hover { 
    border-radius: 50% !important;  
} 
   
/* Flou */ 
#anim-block .blur { 
    -webkit-filter: blur(3px) !important; 
    filter: blur(3px) !important; 
    -webkit-transition: .3s ease-in-out !important; 
    transition: .3s ease-in-out !important; 
} 

#anim-block .blur:hover{ 
    -webkit-filter: blur(0) !important; 
    filter: blur(0) !important; 
} 
   
/* Flou inversé*/ 
#anim-block .blur-0 { 
    -webkit-filter: blur(0) !important; 
    filter: blur(0) !important; 
    -webkit-transition: .3s ease-in-out !important; 
    transition: .3s ease-in-out !important; 
} 

#anim-block .blur-0:hover { 
    -webkit-filter: blur(3px) !important; 
    filter: blur(3px) !important; 
} 
   
/* noir & blanc -> couleur */ 
#anim-block .color { 
    -webkit-filter: grayscale(100%) !important; 
    filter: grayscale(100%) !important; 
    -webkit-transition: .3s ease-in-out !important; 
    transition: .3s ease-in-out !important; 
} 

#anim-block .color:hover { 
    -webkit-filter: grayscale(0) !important; 
    filter: grayscale(0) !important; 
} 
   
/* couleur -> noir & blanc */ 
#anim-block .color-0 { 
    -webkit-filter: grayscale(0) !important; 
    filter: grayscale(0) !important; 
    -webkit-transition: .3s ease-in-out !important; 
    transition: .3s ease-in-out !important; 
} 

#anim-block .color-0:hover { 
    -webkit-filter: grayscale(100%) !important; 
    filter: grayscale(100%) !important; 
} 
   
/* Sepia */ 
#anim-block .sepia { 
    -webkit-filter: sepia(100%) !important; 
    filter: sepia(100%) !important; 
    -webkit-transition: .3s ease-in-out !important; 
    transition: .3s ease-in-out !important; 
} 

#anim-block .sepia:hover { 
    -webkit-filter: sepia(0) !important; 
    filter: sepia(0) !important; 
} 
   
/* Sepia inversé */ 
#anim-block .sepia-0 { 
    -webkit-filter: sepia(0) !important; 
    filter: sepia(0) !important; 
    -webkit-transition: .3s ease-in-out !important; 
    transition: .3s ease-in-out !important; 
} 

#anim-block .sepia-0:hover { 
    -webkit-filter: sepia(100%) !important; 
    filter: sepia(100%) !important; 
} 
   
/* Morph */ 
#anim-block .morph { 
    -webkit-transition: all 0.5s ease !important; 
    transition: all 0.5s ease !important; 
    border-radius: 50% !important; 
} 
    
#anim-block .morph:hover { 
    border-radius: 50% !important;  /* on arrondit l'image */ 
    -webkit-transform: rotate(360deg) !important; /* rotation de l'image */ 
    transform: rotate(360deg) !important; 
} 
   
/* Opacité */ 
#anim-block .opacity { 
    opacity: 1; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
  
#anim-block .opacity:hover { 
    opacity: .5; 
} 
   
/* Opacité inversée */ 
#anim-block .opacity-0 { 
    opacity: .5; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 

#anim-block .opacity-0:hover { 
    opacity: 1; 
}


/* Tremblement  */

#anim-block .hob-shock:hover{
    -webkit-animation: hob-shock .35s !important;
    animation: hob-shock .35s !important;
}

@keyframes hob-shock {
	0%, 100% {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0)
	}
	30% {
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		-ms-transform: rotate(10deg);
		-o-transform: rotate(10deg);
		transform: rotate(10deg)
	}
	60% {
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		-ms-transform: rotate(-10deg);
		-o-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
}

#anim-block .bounce:hover {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

@keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    40%,
    43% {
      -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -30px, 0);
      transform: translate3d(0, -30px, 0);
    }
  
    70% {
      -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -15px, 0);
      transform: translate3d(0, -15px, 0);
    }
  
    90% {
      -webkit-transform: translate3d(0, -4px, 0);
      transform: translate3d(0, -4px, 0);
    }
  }

#anim-block .flash:hover {
    -webkit-animation-name: flash !important;
    animation-name: flash !important;
}

@keyframes flash {
    from,
    50%,
    to {
      opacity: 1;
}
  
    25%,
    75% {
      opacity: 0;
    }
}

#anim-block .caoutchouc:hover {
    -webkit-animation-name: rubberBand 2s !important;
    animation-name: rubberBand 2s !important;
  }

@keyframes caoutchouc {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);
    }
  
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);
    }
  
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
      transform: scale3d(1.15, 0.85, 1);
    }
  
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
      transform: scale3d(0.95, 1.05, 1);
    }
  
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
      transform: scale3d(1.05, 0.95, 1);
    }
  
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

 
#anim-block .swing:hover {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}

@keyframes swing {
    20% {
      -webkit-transform: rotate3d(0, 0, 1, 15deg);
      transform: rotate3d(0, 0, 1, 15deg);
    }
  
    40% {
      -webkit-transform: rotate3d(0, 0, 1, -10deg);
      transform: rotate3d(0, 0, 1, -10deg);
    }
  
    60% {
      -webkit-transform: rotate3d(0, 0, 1, 5deg);
      transform: rotate3d(0, 0, 1, 5deg);
    }
  
    80% {
      -webkit-transform: rotate3d(0, 0, 1, -5deg);
      transform: rotate3d(0, 0, 1, -5deg);
    }
  
    to {
      -webkit-transform: rotate3d(0, 0, 1, 0deg);
      transform: rotate3d(0, 0, 1, 0deg);
    }
  }
 

#anim-block .wakeup:hover {
    -webkit-animation-name: wakeup !important;
    animation-name: wakeup !important;
}

@keyframes wakeup {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  
    10%,
    20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
  
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
  
    40%,
    60%,
    80% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
  
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  
#anim-block .alerte {
    -webkit-animation-name: wobble !important;
    animation-name: wobble !important;
}

  @keyframes alerte {
    from {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    15% {
      -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
      transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
  
    30% {
      -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
      transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }
  
    45% {
      -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
      transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }
  
    60% {
      -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
      transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }
  
    75% {
      -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
      transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

#anim-block .flip:hover {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flip  3s !important;
    animation-name: flip 3s !important;
}
 
@keyframes flip {
    from {
      -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
        rotate3d(0, 1, 0, -360deg);
      transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function:  3s ease-out;
    }
  
    40% {
      -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
        rotate3d(0, 1, 0, -190deg);
      transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
        rotate3d(0, 1, 0, -190deg);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: 3s ease-out;
    }
  
    50% {
      -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
        rotate3d(0, 1, 0, -170deg);
      transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
        rotate3d(0, 1, 0, -170deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: 3s ease-in;
    }
  
    80% {
      -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
        rotate3d(0, 1, 0, 0deg);
      transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
        rotate3d(0, 1, 0, 0deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: 3s ease-in;
    }
  
    to {
      -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
        rotate3d(0, 1, 0, 0deg);
      transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: 3s ease-in;
    }
  }

#anim-block .rollIn:hover {
  -webkit-animation-name: rollIn !important;
  animation-name: rollIn !important;
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}