/*-------------------------
	The buttons
--------------------------*/


.progress-button{
    font-family: 'Comfortaa',cursive;
	display: inline-block;
	font-size:18px;
	color:#fff !important;
	text-decoration: none !important;
	padding:7px;
	line-height:1;
	overflow: hidden;
	position:relative;
	background-color: #E20046;
}

/*	Hide the original text of the button. Then the loading or finished
	text will be shown in the :after element above it. */

.progress-button.in-progress,
.progress-button.finished{
	color:transparent !important;
}

.progress-button.in-progress:after,
.progress-button.finished:after{
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	padding-top: inherit;
	color: #fff !important;
	left: 0;
}

/*	If the .in-progress class is set on the button, show the
	contents of the data-loading attribute on the butotn */

.progress-button.in-progress:after{
	content:attr(data-loading);
}

/* The same goes for the .finished class */

.progress-button.finished:after{
	content:attr(data-finished);
	background-color:#A0FF46;
}

/* The colorful bar that grows depending on the progress */

.progress-button .tz-bar{
	background-color:#A0FF46;
	height:3px;
	bottom:0;
	left:0;
	width:0;
	position:absolute;
	z-index:1;

	-webkit-transition: width 0.5s, height 0.5s;
	-moz-transition: width 0.5s, height 0.5s;
	transition: width 0.5s, height 0.5s;
}

/* The bar can be either horizontal, or vertical */

.progress-button .tz-bar.background-horizontal{
	height:100%;
}

.progress-button .tz-bar.background-vertical{
	height:0;
	top:0;
	width:100%;
}