/* Material Ripple effect */

.material-ripple {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	user-select: none;
}

/*
.ink styles - the elements which will create the ripple effect.
The size and position of these elements will be set by the JS code.
Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.
*/
.material-ink {
	position: absolute;
	background: #bdc3c7;
	border-radius: 50%;
	transform: scale(0);
	opacity: 0.4;
}

/* animation effect */
.material-ink.animate {
	animation: ripple 0.4s linear;
}

@keyframes ripple {
	100% {
		transform: scale(2.5);
		opacity: 0;
	}
}

/*
Material Design Card and Box Shadow by Samuel Thornton
http://codepen.io/sdthornton/pen/wBZdXq
*/

.material-card {
	background: #fff;
	border-radius: 2px;
	display: block;
	margin: 1rem;
	position: relative;
}

.material-shadow-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.2s ease-in-out;
}

.material-shadow-2 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	transition: all 0.2s ease-in-out;
}

.material-shadow-3 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	transition: all 0.2s ease-in-out;
}

.material-shadow-4 {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	transition: all 0.2s ease-in-out;
}

.material-shadow-5 {
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
	transition: all 0.2s ease-in-out;
}

.material-hover:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}