@font-face {font-family: 'Varela';  src: url('../font/VarelaRound-Regular.ttf');}


/* Button container ORIGINAL */
.progress-button {
	position: relative;
	display: inline-block;
	text-align: center;
	/*width: 45%;*/
	min-width: 150px;
	margin: 10px;
}

/* Button style */
.progress-button button {
	cursor: pointer;
	display: block;
	margin: 0 auto;
	padding: 5px;
	width: 130px;/* ORI = 100px*/
	/*height: 25px;*/ /* ORI = 30px*/
	border: 2px solid #1ECD97;
	border-radius: 40px;
	background: transparent;
	color: #1ECD97;
	letter-spacing: 1px;
	font-size: 14px;
	letter-spacing:1px;
	font-family:Varela;
	-webkit-tap-highlight-color: transparent;
	-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
	transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
}

.progress-button button:hover {
	background-color: #1ECD97;
	color: #fff;
}

.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;
	transition: opacity 0.3s 0.1s;
}

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

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

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

.progress-button svg.checkmark path,
.progress-button svg.cross path {
	stroke: #fff;
	stroke-linecap: round;
	stroke-width: 4;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

/* Loading, success and error effects */
.loading.progress-button button {
	width: 70px; /* make a circle */
	border-width: 5px;
	border-color: #ddd;
	background-color: transparent;
	color: #fff;
}

.loading.progress-button span {
	-webkit-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, width 0.3s, border-width 0.3s;
	transition: background-color 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: #FB797E;
	background-color: #FB797E;
}

.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;
	transition: stroke-dashoffset 0.3s;
}

/* Optional elastic effect for the width of the button */
.elastic.progress-button button {
	-webkit-transition: background-color 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, 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, 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, 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, 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, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
}


/* WHITE */
/* Button container */
.progress-button-white {
	position: relative;
	display: inline-block;
	text-align: center;
	/*width: 45%;*/
	min-width: 150px;
	margin: 10px;
}

/* Button style */
.progress-button-white button {
	display: block;
	margin: 0 auto;
	padding: 0;
	width: 120px;/* ORI = 100px*/
	height: 25px;/* ORI = 30px*/
	border: 2px solid #1ECD97;
	border-radius: 40px;
	/*background: transparent;*/
	background-color:#FFF;
	color: #1ECD97;
	letter-spacing: 1px;
	font-size: 14px;
	letter-spacing:1px;
	font-family:Varela;
	-webkit-tap-highlight-color: transparent;
	-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
	transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
}

.progress-button-white button:hover {
	background-color: #1ECD97;
	color: #fff;
}

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

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

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

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

.progress-button-white svg.progress-circle path {
	stroke: #1ECD97;
	stroke-width: 5;
}

.progress-button-white svg.checkmark path,
.progress-button-white svg.cross path {
	stroke: #fff;
	stroke-linecap: round;
	stroke-width: 4;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

/* Loading, success and error effects */
.loading.progress-button-white button {
	width: 70px; /* make a circle */
	border-width: 5px;
	border-color: #ddd;
	background-color: transparent;
	color: #fff;
}

.loading.progress-button-white span {
	-webkit-transition: opacity 0.15s;
	transition: opacity 0.15s;
}

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

.success.progress-button-white button,
.error.progress-button-white button {
	-webkit-transition: background-color 0.3s, width 0.3s, border-width 0.3s;
	transition: background-color 0.3s, width 0.3s, border-width 0.3s;
}

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

.error.progress-button-white button {
	border-color: #FB797E;
	background-color: #FB797E;
}

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

/* Optional elastic effect for the width of the button */
.elastic.progress-button-white button {
	-webkit-transition: background-color 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, 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, 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-white button {
	-webkit-transition: background-color 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, 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, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
}
/* WHITE */


.buttons {
  /*padding-top: 2px;*/
  text-align: center;
}


.btn {
  	cursor: pointer;
  	margin: 0; /*margin: 10px;*/
  	border-radius: 45px;
  	text-decoration: none;
 	padding: 6px;
  	font-family:Varela;
  	font-size: 14px;
  	transition: .3s;
  	-webkit-transition: .3s;
  	-moz-transition: .3s;
  	-o-transition: .3s;
 	display: inline-block;
  	width: 120px;/* ORI = 100px*/
	text-align:center;
}

.btn:hover {
 /* cursor: url(http://cur.cursors-4u.net/symbols/sym-1/sym46.cur), auto;*/
}
.blue1 {
  color: #55acee;
  border: 2px #55acee solid;
}

.blue1:hover {
  background-color: #55acee;
  color: #fff
}

.green {
  color: #2ecc71;
  border: 2px #2ecc71 solid;
}

.green:hover {
  color: #fff;
  background-color: #2ecc71;
}

.red {
  color: #e74c3c;
  border: 2px #e74c3c solid;
}

.red:hover {
  color: #fff;
  background-color: #e74c3c;
}

.purple {
  color: #9b59b6;
  border: 2px #9b59b6 solid;
}

.purple:hover {
  color: #fff;
  background-color: #9b59b6;
}

.orange {
  color: #e67e22;
  border: 2px #e67e22 solid;
}

.orange:hover {
  color: #fff;
  background-color: #e67e22;
}

.yellow {
  color: #f1c40f;
  border: 2px #f1c40f solid;
}

.yellow:hover {
  color: #fff;
  background-color: #f1c40f;
}


/* Button style - RED START*/
.progress-button-red button {
	cursor: pointer;
	display: block;
	margin: 0 auto;
	padding: 5px;
	width: 130px;/* ORI = 100px*/
	/*height: 25px;*/ /* ORI = 30px*/
	border: 2px solid #e74c3c;
	border-radius: 40px;
	background: transparent;
	color: #e74c3c;
	letter-spacing: 1px;
	font-size: 14px;
	letter-spacing:1px;
	font-family:Varela;
	-webkit-tap-highlight-color: transparent;
	-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
	transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
}

.progress-button-red button:hover {
	background-color: #e74c3c;
	color: #fff;
}

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

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

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

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

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

.progress-button-red svg.checkmark path,
.progress-button-red svg.cross path {
	stroke: #fff;
	stroke-linecap: round;
	stroke-width: 4;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

/* Loading, success and error effects */
.loading.progress-button-red button {
	width: 70px; /* make a circle */
	border-width: 5px;
	border-color: #ddd;
	background-color: transparent;
	color: #fff;
}

.loading.progress-button-red span {
	-webkit-transition: opacity 0.15s;
	transition: opacity 0.15s;
}

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

.success.progress-button-red button,
.error.progress-button button {
	-webkit-transition: background-color 0.3s, width 0.3s, border-width 0.3s;
	transition: background-color 0.3s, width 0.3s, border-width 0.3s;
}

.success.progress-button-red button {
	border-color: #e74c3c;
	background-color: #e74c3c;
}

.error.progress-button-red button {
	border-color: #FB797E;
	background-color: #FB797E;
}

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

/* Optional elastic effect for the width of the button */
.elastic.progress-button-red button {
	-webkit-transition: background-color 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, 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, 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-red button {
	-webkit-transition: background-color 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, 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, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
}

/* Button style - RED END */