/*------------------------------------*\
    $BUTTONS
\*------------------------------------*/

.md-button {
	display: inline-block;
	position: relative;
	min-width: 72px;
	margin: 0.25em;
	padding: 0.5em 1em;
	border-radius: 3px;
	/*box-shadow: 0 2px 10px rgba(0,0,0,0.5); */
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 
                0 2px 10px 0 rgba(0, 0, 0, 0.16); /* shadow-1 */
	border: none;
	outline: none;
	overflow: hidden;
	-webkit-transition: 0.3s;
	   -moz-transition: 0.3s;
	    -ms-transition: 0.3s;
	     -o-transition: 0.3s;
	        transition: 0.3s;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	overflow: hidden;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
		    user-select: none;
}

	/* .md-button:hover {
	  box-shadow: 1px 6px 15px rgba(0,0,0,0.5);
	} */
	
	.md-button:active {
	   box-shadow: none; /* pulse effect */
	}

.md-button.md-button--flat {
	background-color: transparent;
	box-shadow: none;
}

/*----------------------------------------------------------------------------- 
	 $md-js-ripple: To create (with js) the ripple effect, for buttons, links, divs
	  				How works: It creates a span inside the element with class md-js-ripple
	  						   and after with js, add the md-js-ripple--show 
 -----------------------------------------------------------------------------*/
.md-js-ripple {
	position: absolute;
	background: rgba(0, 0, 0, .25);
	border-radius: 100%;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	pointer-events: none;
}

.md-js-ripple--show {
	-webkit-animation: md-js-ripple-animation .5s ease-out;
	animation: md-js-ripple-animation .5s ease-out;
}



/* This is the container of the ripple
   must be overflow: none in order to effect dissapear after border */
.md-js-ripple-container {
	/*display: inline-block;*/
	position: relative;
	overflow: hidden;
}

@-webkit-keyframes 
md-js-ripple-animation {to { -webkit-transform:scale(1.5);
	transform: scale(1.5);
	opacity: 0;
}

}
@keyframes 
md-js-ripple-animation {to { -webkit-transform:scale(1.5);
	transform: scale(1.5);
	opacity: 0;
}
}

/* For icon buttons we need lower scale*/ 

.md-icon-button .md-js-ripple--show {
	-webkit-animation: md-js-ripple-animation--icon-button .5s ease-out;
	        animation: md-js-ripple-animation--icon-button .5s ease-out;
} 


.md-icon-button.md-js-ripple-container {
	overflow: initial; /* In order to avoid worng positioning of the < > in the tables */
}

@-webkit-keyframes 
md-js-ripple-animation--icon-button {to { -webkit-transform:scale(1);
	transform: scale(1);
	opacity: 0;
}

}
@keyframes 
md-js-ripple-animation--icon-button {to { -webkit-transform:scale(1);
	transform: scale(1);
	opacity: 0;
}
}


/* For icon activity also we need lower scale,as icon-button*/ 

.md-activity__item  .md-js-ripple--show {
	-webkit-animation: md-js-ripple-animation--icon-button .5s ease-out;
	        animation: md-js-ripple-animation--icon-button .5s ease-out;
} 

.md-activity__item.md-js-ripple-container {
	overflow: initial; /* In order to avoid worng positioning of the < > in the tables */
}

.md-menudown__item.md-js-ripple-container {
	overflow: initial; /* In order to avoid worng positioning of the < > in the tables */
}

/* To make the effect of click  */
   .md-activity__item:active a {
       color: rgba(0, 0, 0, 0.2);
   }