/***************/
/*** Ripples ***/
/***************/
.ripple-container { position: relative; }

.ripples {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: transparent;
}

.ripplesCircle {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
	width: 0;
	height: 0;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.1);
}
.ripples.ripples--light .ripplesCircle { background: rgba(255, 255, 255, 0.25); }

.ripples.is-active .ripplesCircle {
	-webkit-animation: ripples 0.5s ease-in;
	animation: ripples 0.5s ease-in;
}
.ripples.ripples--quick.is-active .ripplesCircle {
	-webkit-animation: ripples 0.3s ease-in;
	animation: ripples 0.3s ease-in;
}

@-webkit-keyframes ripples {
	0% { opacity: 0; }
	25% { opacity: 1; }
	100% {
		width: 200%;
		padding-bottom: 200%;
		opacity: 0;
	}
}

@keyframes ripples {
	0% { opacity: 0; }
	25% { opacity: 1; }
	100% {
		width: 200%;
		padding-bottom: 200%;
		opacity: 0;
	}
}