.page-loader {
	height: 100%;
	background: #212121;
	transition: all 1s cubic-bezier(.77,0,.175,1).2s;
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: transform;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
}

.animation-holder {
	width: 300px;
	opacity: 1;
	transition: all 1s cubic-bezier(.77,0,.175,1).2s;
}

.st1 {
	stroke-dasharray: 584;
	stroke-dashoffset: 584;
	stroke: #C62034;
	stroke-width: 2px;
	stroke-loaction: inside;
	animation: 2s ease 1s 1 plus;
	animation-fill-mode: forwards;
	fill: rgba(198,32,53,0);
	fill: none;
	transform-origin: 80% 80%;
}

@keyframes plus {
	0% {
		stroke-dashoffset: 584;
		fill: rgba(198,32,53,0);
	}

	70% {
		stroke-dashoffset: 0;
		fill: rgba(198,32,53,0);
	}

	100%{
		stroke-dashoffset: 0;
		fill: rgba(198,32,53,1);
	}
}

.st2 {
	stroke-dasharray: 9022;
	stroke-dashoffset: 9022;
	stroke: #fff;
	stroke-width: 4px;
	stroke-loaction: inside;
	animation: 12s ease 1s 1 text;
	animation-fill-mode: forwards;
	fill: none;
}

.st3 {
	fill:url(#SVGID_1_);
	animation: 2s ease 1s 1 text-mirror;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes text {
	0% {
		stroke-dashoffset: 9022;
	}

	90%{
		stroke-dashoffset: 0;
		opacity: 1;
	}

	100%{
		stroke-dashoffset: 0;
		opacity: 0;
	}
}

@keyframes text-mirror {
	0% {
		opacity: 0;
	}

	70% {
		opacity: 0;
	}

	100%{
		opacity: 1;
	}
}

.st0 {
	animation: 1s ease 3s 1 text2;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes text2 {
	0% {
		transform: translateX(30px);
		opacity: 0;
	}

	100%{
		opacity: 1;
		transform: translateX(0px);
	}
}