/* MAD-RIPPLE EFFECT */
.ripple{
  animation: ripple-shadow 0.4s forwards;
  -webkit-animation: ripple-shadow 0.4s forwards;
  border-radius: inherit; /* inherit from parent (rounded buttons etc) */
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none; /* allow user interaction */
  position: absolute;
  right: 0;
  top: 0;
  -ms-transform: translateZ(0); /* to contain zoomed ripple */
  -webkit-transform: translateZ(0); /* to contain zoomed ripple */
  transform: translateZ(0);
}
.rippleWave{
  animation: ripple 2s forwards;
  -webkit-animation: ripple 2s forwards;
  backface-visibility: hidden;
  background: #fff;
  background: rgba(255,255,255, 1);
  border-radius: 50%;
  opacity: 0.45;
  position: absolute;
  -ms-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
}
@keyframes ripple-shadow {
  0%   {
    box-shadow: 0 0 0 rgba(0,0,0,0.0);
  }
  20%  {
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  }
  100% {
    box-shadow: 0 0 0 rgba(0,0,0,0.0);
  }
}
@-webkit-keyframes ripple-shadow {
  0%   {
    box-shadow: 0 0 0 rgba(0,0,0,0.0);
  }
  20%  {
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  }
  100% {
    box-shadow: 0 0 0 rgba(0,0,0,0.0);
  }
}
@keyframes ripple {
  to {
    opacity:0;
    -ms-transform: scale(24);
    -webkit-transform: scale(24);
    transform: scale(24);
  }
}
@-webkit-keyframes ripple {
  to {
    opacity:0;
    -ms-transform: scale(24);
    -webkit-transform: scale(24);
    transform: scale(24);
  }
}