/*!
 * Google material design ripple effect
 * By Thomas Reynders http://thomasreynders.com
 * MIT Licensed.
 * 
 * Version 1.1
 * based on : http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design
 * Github: https://github.com/ninox92/Google-material-design-ripple-effect/
 * preview: http://thomasreynders.com/google-material-design-plugin/
 */
	/*List ripple styles*/
		ul.ripple{
		}
		ul.ripple li {
			padding:0;
			list-style-type: none;
			/*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
			position: relative;
			overflow: hidden;
		}
		ul.ripple li a {			
			text-decoration: none;
			cursor: pointer; /*since the links are dummy without href values*/
			/*prevent text selection*/
			user-select: none;
			/*static positioned elements appear behind absolutely positioned siblings(.ink in this case) hence we will make the links relatively positioned to bring them above .ink*/
			position: relative;
		}

/* Animations
------------------------- */
	/*.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.*/
	.btn.animate{
		animation: color_change 0.55s ease-in-out;
		-webkit-animation: color_change 0.55s ease-in-out;
	}
	.ink {
		display: block; 
		position: absolute;
		background: #e7e9fd;/* Color: 50 */
		opacity:0.1;
		border-radius: 100%;
		top:0;
		left:0;
		transform: scale(0);
		-webkit-transform: scale(0);
	}
	/*animation effect*/
	.ink.animate {
		background:#333;
		opacity:0.4;
		animation: ripple 0.65s cubic-bezier(.4,0,.2,1);
		-webkit-animation: ripple 0.65s cubic-bezier(.4,0,.2,1);
	}
	.ink.focus{
		opacity:0.2;
		animation: ripplefocus 4s infinite;
		-webkit-animation: ripplefocus 4s infinite;
	}
	/* Click Animation for ripple.js */
	@keyframes ripple {
		/*scale the element to 250% to safely cover the entire link and fade it out*/
		100% {
			opacity: 0; 
			-webkit-transform: scale(0.9);
			-ms-transform: scale(0.9);
			transform: scale(0.9); 
		}
	}
	@-webkit-keyframes ripple {
		/*scale the element to 250% to safely cover the entire link and fade it out*/
		100% {
			opacity: 0; 
			transform: scale(0.9);
			-webkit-transform: scale(0.9); 
		}
	}
	/* Click Animation for ripple.js */
	@keyframes color_change {
		/*scale the element to 250% to safely cover the entire link and fade it out*/
		50% {
			background-color:#455ede;/*blue 700*/	
		}
	}
	@-webkit-keyframes color_change {
		/*scale the element to 250% to safely cover the entire link and fade it out*/
		50% {
			background-color:#455ede;/*blue 700*/	
		}
	}

	/* Focus Animation for ripple.js */
	@keyframes ripplefocus {
		/*scale the element infinitly on focus*/
		0%, 20%, 100% {
			transform: scale(0.8);
			-ms-transform: scale(0.8);
			-webkit-transform: scale(0.8); 
		}
		60% {
			transform: scale(0.9);
			-ms-transform: scale(0.9);
			-webkit-transform: scale(0.9); 
		}
	}
	@-webkit-keyframes ripplefocus{
		0%, 20%, 100% {
			transform: scale(0.8);
			-webkit-transform: scale(0.8); 
		}
		60% {
			transform: scale(0.9);
			-webkit-transform: scale(0.9); 
		}
	}