.pop-right {
	animation: pop-right 0.5s ease forwards;
	opacity: 0;
}

@keyframes pop-right {
	0% {
		opacity: 0;
		transform: translateX(300px) scale(0.5);
	}

	70% {
		opacity: 1;
		transform: translateX(0px) scale(0.5);
	}

	100% {
		transform: scale(1.0);
		opacity: 1;
	}
}

.a0 {
	animation-name: step_progress0;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes step_progress0 {
	from {
		width: 15%;
	}

	to {
		width: 0;
	}
}

.a15 {
	animation-name: step_progress15;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes step_progress15 {
	from {
		width: 0;
	}

	to {
		width: 15%;
	}
}

.a30 {
	animation-name: step_progress30;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes step_progress30 {
	from {
		width: 15%;
	}

	to {
		width: 30%;
	}
}

.a45 {
	animation-name: step_progress45;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes step_progress45 {
	from {
		width: 30%;
	}

	to {
		width: 45%;
	}
}

.a60 {
	animation-name: step_progress60;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes step_progress60 {
	from {
		width: 45%;
	}

	to {
		width: 60%;
	}
}

.a75 {
	animation-name: step_progress75;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

.a90 {
	animation-name: step_progress90;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes step_progress90 {
	from {
		width: 75%;
	}

	to {
		width: 90%;
	}
}

@keyframes step_progress75 {
	from {
		width: 60%;
	}

	to {
		width: 75%;
	}
}

@keyframes uploading-animation {
	from {
		width: 0;
	}

	to {
		width: 100%;
	}
}

.thankyou-circle {
	animation: circle 0.5s linear forwards;
	}

	@keyframes circle {
	0% {
		clip-path: circle(0%);
	}

	100% {
		clip-path: circle(100%);
	}
}

/*tick animation*/

@keyframes rotate-circle {
	25% {

		border-left-color: rgb(34, 208, 136);
	}

	50% {

		border-left-color: rgb(34, 208, 136);
		border-top-color: rgb(34, 208, 136);
	}

	75% {

		border-left-color: rgb(34, 208, 136);
		border-top-color: rgb(34, 208, 136);
		border-right-color: rgb(34, 208, 136);
	}

	100% {
		transform: rotate(360deg);
		border-color: rgb(34, 208, 136);
	}
}

@keyframes tick-icon {
	0% {
		font-size: 0;
		opacity: 1;
		top: 50%;
	}

	15% {
		font-size: 10px;
		top: 45%;
	}

	30% {
		font-size: 20px;
		top: 40%;
	}

	45% {
		font-size: 25px;
		top: 30%;
	}

	60% {
		font-size: 30px;
		top: 25%;
	}

	75% {
		font-size: 200px;
		top: 0;
	}

	100% {
		font-size: 50px;
		opacity: 1;
		top: 30%;
	}
}