$loader-width: 30px;
$border-width: 3px;

.page-preloader-cover {
	position: fixed;
	z-index: 1200;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: $color__bg-preloader-cover;
}

.preloader-wrap {
	display: block;
	position: absolute;
	width: 100%;
	height: auto;
	text-align: center;
	top: 50%;
	transform: translateY(-30px);
	.preloader-first-wrap,
	.preloader-second-wrap {
		display: inline-block;
		width: 100%;
		position: absolute;
		left:0;
		span {
			width: auto;
			height: auto;
			display: inline-block;
			animation: animationLoader cubic-bezier(0.86, 0.43, 0.3, 0.65) 3s;
			animation-iteration-count: infinite;
			transform-origin: 50% -50%;
			vertical-align: middle;
			padding: 0 3px;
		}
	}
	.preloader-first-wrap {
		span {
			&:nth-child(1) {
				animation-delay: 0ms;
			}
			&:nth-child(2) {
				animation-delay: 150ms;
			}
			&:nth-child(3) {
				animation-delay: 300ms;
			}
		}
		&:before {
			content: '';
			position: absolute;
			width: 25px;
			height: 1px;
			background-color: #64656f;
			top: 47%;
			left: 50%;
			right: auto;
			transform: translateX(-90px);
			opacity: 0.3;
		}
		&:after {
			content: '';
			position: absolute;
			width: 25px;
			height: 1px;
			background-color: #64656f;
			top: 47%;
			right: 50%;
			left: auto;
			transform: translateX(90px);
			opacity: 0.3;
		}
	}
	.preloader-second-wrap {
		animation: animationLoader2 cubic-bezier(0.86, 0.43, 0.3, 0.65) 2s;
		animation-iteration-count: 1;
		span {
			&:nth-child(1) {
				animation-delay: 1500ms;
			}
			&:nth-child(2) {
				animation-delay: 1650ms;
			}
			&:nth-child(3) {
				animation-delay: 1800ms;
			}
		}
	}
}

@keyframes animationLoader2 {
	0% {
		opacity:0;
	}
	95% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@keyframes animationLoader{
	0% {
		opacity:0;
		transform:  translate(1px,-80px)  ;
	}
	10% {
		opacity:1;
		transform:  translate(2px,0px) ;
	}
	50% {
		opacity:1;
		transform:  translate(2px,0px) ;
	}
	60% {
		opacity:0;
		transform:  translate(2px,80px)  ;
	}
	100% {
		opacity:0;
		transform:  translate(2px,80px)  ;
	}
}