[data-ripple] {
	overflow: hidden;
	position: relative;
}

.ripple-effect {
	height: 40px;
	position: absolute;
	width: 40px;

	-webkit-animation: ripple 2s;
	-moz-animation: ripple 2s;
	-ms-animation: ripple 2s;
	-o-animation: ripple 2s;
	animation: ripple 2s;

	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

@-webkit-keyframes ripple {
	from {
		-webkit-transform: scale(1);
		opacity: 0.4;
	}
	to {
		-webkit-transform: scale(100);
		opacity: 0;
	}
}

@-moz-keyframes ripple {
	from {
		-moz-transform: scale(1);
		opacity: 0.4;
	}
	to {
		-moz-transform: scale(100);
		opacity: 0;
	}
}

@-ms-keyframes ripple {
	from {
		-ms-transform: scale(1);
		opacity: 0.4;
	}
	to {
		-ms-transform: scale(100);
		opacity: 0;
	}
}

@-o-keyframes ripple {
	from {
		-o-transform: scale(1);
		opacity: 0.4;
	}
	to {
		-o-transform: scale(100);
		opacity: 0;
	}
}

@keyframes ripple {
	from {
		transform: scale(1);
		opacity: 0.4;
	}
	to {
		transform: scale(100);
		opacity: 0;
	}
}