.shapes {
	animation: slice-down 1s forwards ease-in-out;
 }
 @keyframes slice-down{
    from{
        clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
    }
    to{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
 }
.step-move{
    animation: move 0.5s linear forwards;
}
.step-move.m20{
    animation-name: move-20;
}
@keyframes move-20{
    from{
        width: 0%;
    }
    to{
        width: 20%;
    }
}
.step-move.m40{
    animation-name: move-40;
}
@keyframes move-40{
    from{
        width: 20%;
    }
    to{
        width: 40%;
    }
}
.step-move.m60{
    animation-name: move-60;
}
@keyframes move-60{
    from{
        width: 40%;
    }
    to{
        width: 60%;
    }
}
.step-move.m80{
    animation-name: move-80;
}
@keyframes move-80{
    from{
        width: 60%;
    }
    to{
        width: 80%;
    }
}
.step-move.m100{
    animation-name: move-100;
}
@keyframes move-100{
    from{
        width: 80%;
    }
    to{
        width: 100%;
    }
}
.pop-slide{
    animation: pop-slide 0.5s ease forwards;
}
@keyframes pop-slide{
	0%{
		transform: translateX(500px) scale(0.5);
	}
	70%{
		transform: translate(0px) scale(0.5);
	}
	100%{
		transform: translate(0px) scale(1);
	}
}
@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%;
	}
	20%{
		font-size: 10px;
		top: 45%;
	}
	40%{
		font-size: 20px;
		top: 40%;
	}
	70%{
		font-size: 200px;
		top: 0;
	}
	100%{
		font-size: 50px;
		opacity: 1;
		top: 30%;
	}
}