.ripple-effect {
	position: relative;
	overflow: hidden;
	-webkit-transform: translatez(0);
}
.ripl {
	display: block;
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
	transform: scale(0);
}
.ripl {
	background: rgba(255, 255, 255, 0.7);
	opacity: 1;
}
.ripl.animate {
	-webkit-animation: ripple-effect 0.8s linear;
	-o-animation: ripple-effect 0.8s linear;
	animation: ripple-effect 0.8zzs linear;
}

@keyframes ripple-effect {
  100% {
    opacity: 0;
    -webkit-transform: scale(3.5);
    -ms-transform: scale(3.5);
    -o-transform: scale(3.5);
    transform: scale(3.5);
  }
}
@-webkit-keyframes ripple-effect {
  100% {
    opacity: 0;
    -webkit-transform: scale(3.5);
    -ms-transform: scale(3.5);
    -o-transform: scale(3.5);
    transform: scale(3.5);
  }
}
@-moz-keyframes ripple-effect {
  100% {
    opacity: 0;
    -webkit-transform: scale(3.5);
    -ms-transform: scale(3.5);
    -o-transform: scale(3.5);
    transform: scale(3.5);
  }
}
@-ms-keyframes ripple-effect {
  100% {
    opacity: 0;
    -webkit-transform: scale(3.5);
    -ms-transform: scale(3.5);
    -o-transform: scale(3.5);
    transform: scale(3.5);
  }
}
@-o-keyframes ripple-effect {
  100% {
    opacity: 0;
    -webkit-transform: scale(3.5);
    -ms-transform: scale(3.5);
    -o-transform: scale(3.5);
    transform: scale(3.5);
  }
}