.loader-outer{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #64a2b1;
	z-index: 98;
}
.loader-outer.active{
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}

.logo-loader{
	width: 10vw;
	position: fixed;
	top: 10vh;
	left: 40vw;
	right: 0;
	bottom: 0;
}

.logo-loader path{
	stroke: #fff;
	stroke-width: 1;
	fill: rgba(0, 0, 0, 0.0);
}

#logo-loader-1{
	opacity: 0;
	animation: loaderLogoAnim1 2s ease-in-out infinite;
}

#logo-loader-2{
	opacity: 0;
	animation: loaderLogoAnim2 2s ease-in-out infinite;
	animation-delay: 0.2s;
}

@keyframes loaderLogoAnim1{
	0%{
		opacity: 0;
		transform: rotateY(180deg);
	}
	5%{
		opacity: 0;
		transform: rotateY(180deg);
	}
	45%{
		opacity: 1.0;
		transform: rotateY(0deg);
	}
	55%{
		opacity: 1.0;
		transform: rotateY(0deg);
	}
	95%{
		opacity: 0;
		transform: rotateY(180deg);
	}
	100%{
		opacity: 0;
		transform: rotateY(180deg);
	}
}

@keyframes loaderLogoAnim2{
	0%{
		opacity: 0;
		transform: rotateY(180deg);
	}
	5%{
		opacity: 0;
		transform: rotateY(180deg);
	}

	45%{
		opacity: 1.0;
		transform: rotateY(0deg);
	}

	55%{
		opacity: 1.0;
		transform: rotateY(0deg);
	}
	95%{
		opacity: 0;
		transform: rotateY(180deg);
	}
	100%{
		opacity: 0;
		transform: rotateY(180deg);
	}
}