/* Button container */
.progress-button {
	position: relative;
	display: inline-block;
	text-align: center;
	width: 100%;
}

/* Button style */
.progress-button button {
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.3;
	color: #ffffff;
	display: block;
	width: 100%;
	height: 56px;
	margin: auto;
	background-color: #a884f1;
	background-image: linear-gradient(to right, #bf73ff, #a884f1);
	background-image: -webkit-linear-gradient(to right, #bf73ff, #a884f1); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -moz-linear-gradient(to right, #bf73ff, #a884f1); /* For Firefox (3.6 to 15) */
    background-image: -o-linear-gradient(to right, #bf73ff, #a884f1); /* For old Opera (11.1 to 12.0) */ 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    border: 0;
    border-color: rgba(255,255,255,0.1);
	border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
	-webkit-tap-highlight-color: transparent;
	-webkit-transition: background-image 0.3s, background-color 0.3s,border-radius 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
	-moz-transition: background-image 0.3s, background-color 0.3s, border-radius 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
	-ms-transition: background-image 0.3s, background-color 0.3s, border-radius 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
	-o-transition: background-image 0.3s, background-color 0.3s, border-radius 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
	transition: background-image 0.3s, background-color 0.3s, border-radius 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
}

.progress-button button:hover {
	background-image: linear-gradient(to right, #CC90FF, #BA98FF);
	background-image: -webkit-linear-gradient(to right, #CC90FF, #BA98FF); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -moz-linear-gradient(to right, #CC90FF, #BA98FF); /* For Firefox (3.6 to 15) */
    background-image: -o-linear-gradient(to right, #CC90FF, #BA98FF); /* For old Opera (11.1 to 12.0) */ 
	
}

.progress-button button:focus {
	outline: none;
}

/* Text (transition for when returning to initial state) */
.progress-button button span {
	-webkit-transition: opacity 0.3s 0.1s;
	-moz-transition: opacity 0.3s 0.1s;
	-ms-transition: opacity 0.3s 0.1s;
	-o-transition: opacity 0.3s 0.1s;
	transition: opacity 0.3s 0.1s;
}

/* Common style of SVGs */
.progress-button svg {
	position: absolute;
	top: 8px;
	left: 50.52%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	pointer-events: none;
}

.progress-button svg path {
	opacity: 0;
	fill: none;
}

.progress-button svg.progress-circle{
	top: 12px;
}

#forget-form .progress-button svg.progress-circle{
	top: 22px;
}

.progress-button svg.progress-circle path {
	stroke: #a884f1;
	stroke-width: 5;
}

.progress-button svg.checkmark path,
.progress-button svg.cross path {
	stroke: #fff;
	stroke-width: 3;
	-webkit-transition: opacity 0.1s;
	-moz-transition: opacity 0.1s;
	-ms-transition: opacity 0.1s;
	-o-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

/* Loading, success and error effects */
.loading.progress-button button {
	width: 56px; /* make a circle */
	border: 5px solid;
	border-color: rgba(255,255,255,0.1);
	background-color: transparent;
	color: #fff;
	background-image: none;
	border-radius: 36px;
    -moz-border-radius: 36px;
    -webkit-border-radius: 36px;
}

.loading.progress-button span {
	-webkit-transition: opacity 0.15s;
	-moz-transition: opacity 0.15s;
	-ms-transition: opacity 0.15s;
	-o-transition: opacity 0.15s;
	transition: opacity 0.15s;
}

.loading.progress-button span,
.success.progress-button span,
.error.progress-button span {
	opacity: 0; /* keep it hidden in all states */
}

.success.progress-button button,
.error.progress-button button {
	-webkit-transition: background-color 0.3s,background-image 0.3s, width 0.3s, border-width 0.3s;
	-moz-transition: background-color 0.3s,background-image 0.3s, width 0.3s, border-width 0.3s;
	-ms-transition: background-color 0.3s,background-image 0.3s, width 0.3s, border-width 0.3s;
	-o-transition: background-color 0.3s,background-image 0.3s, width 0.3s, border-width 0.3s;
	transition: background-color 0.3s,background-image 0.3s, width 0.3s, border-width 0.3s;
}

.success.progress-button button {
	border-color: #1ECD97;
	background-color: #1ECD97;
}

.error.progress-button button {
	border-color: #f1465b;
	background-color: #f1465b;
	background-image:none;
}

.loading.progress-button svg.progress-circle path,
.success.progress-button svg.checkmark path,
.error.progress-button svg.cross path {
	opacity: 1;
	-webkit-transition: stroke-dashoffset 0.3s;
	-moz-transition: stroke-dashoffset 0.3s;
	-ms-transition: stroke-dashoffset 0.3s; 
	-o-transition: stroke-dashoffset 0.3s;
	transition: stroke-dashoffset 0.3s;
}

/* Optional elastic effect for the width of the button */
.elastic.progress-button button {
	-webkit-transition: background-color 0.3s,background-image 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1), border-width 0.3s, border-color 0.3s;
	-webkit-transition: background-color 0.3s,background-image 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;
	-moz-transition: background-color 0.3s,background-image 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;
	-ms-transition: background-color 0.3s,background-image 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;
	-o-transition: background-color 0.3s,background-image 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;
	transition: background-color 0.3s, color 0.3s,background-image 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;
}

.loading.elastic.progress-button button {
	-webkit-transition: background-color 0.3s,background-image 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, 0, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
	-webkit-transition: background-color 0.3s,background-image 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
	transition: background-color 0.3s,background-image 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
}