.flex-center {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.preloader {	
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(48, 54, 49);
	z-index: 1060;
}
#preloader-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: 84px;
}
#shape-a {
	animation: fill-a 0.5s ease forwards 2.1s;
}
#shape-b {
	animation: fill-b 0.5s ease forwards 2.4s;
}
#shape-a path {
	stroke-dasharray: 500;
	stroke-dashoffset: 1000;
    animation: line-anim 4s ease infinite 0.6s;
	stroke: #22B573;
	stroke-width: 3;
	
}
#shape-b path {
    stroke-dasharray: 500;
	stroke-dashoffset: 1000;
    animation: line-anim 4s ease infinite;
	stroke: #FBB03B;
	stroke-width: 3;
}
#shape-gradient-a stop:nth-child(1) {
	stop-color: rgb(34,181,115);
	stop-opacity: 1;
}
#shape-gradient-a stop:nth-child(2) {
	stop-color: rgb(0,169,157);
	stop-opacity: 1;
}
#shape-gradient-b stop:nth-child(1) {
	stop-color: rgb(251,176,59);
	stop-opacity: 1;
}
#shape-gradient-b stop:nth-child(2) {
	stop-color: rgb(241,90,36);
	stop-opacity: 1;
}

@keyframes line-anim {
	  to {
		stroke-dashoffset: 0;
	  }
}
/*
@keyframes fill-a {
    from {
        fill: url(#shape-gradient-a);
		fill-opacity: 0;
    }

    to {
        fill: url(#shape-gradient-a);
		fill-opacity: 1;
    }
}
@keyframes fill-b {
    from {
        fill: url(#shape-gradient-b);
		fill-opacity: 0;
    }

    to {
        fill: url(#shape-gradient-b);
		fill-opacity: 1;
    }
}*/
@media (max-width: 767px) {
	#preloader-logo {
		width: 60px;
	}	
}