.car-preloader { position: relative; }
.car-preloader .cp-wrapper {
	position: relative;
	height: 100px;
	margin: 0 auto;
	width: 400px;
	display: flex;
	justify-content: space-between;
}
.car-preloader .car {
    width: 50px;
    height: 50px;
    -webkit-mask: url(../img/preloader_car.svg) no-repeat;
    background-color: #fff;
}
.car-preloader .searcher {
	position: absolute;
	width: 160px;
	height: 160px;
	left: 136px;
	top: -30px;
	-webkit-mask: url(../img/search.svg) no-repeat;
    background-color: #fff;
}
.car-preloader .car-1, .car-preloader .car-5 {
	opacity: 0.5;
}
.car-preloader .car-1a {
	position: absolute;
	opacity: 0;
}
.car-preloader .car-2, .car-preloader .car-4 {
	width: 60px;
	height: 60px;
	opacity: 0.75;
}
.car-preloader .car-3 {
	width: 80px;
	height: 80px;
	margin: 0 15px;
}
.car-preloader .searching {
    position: absolute;
    left: 45%;
    top: 150%;
}
.car-preloader .searching .dots {
	display: inline-block;
	width: 5px;
	overflow: hidden;
	vertical-align: bottom;
	animation: dots .7s linear infinite;
	transition: 1;
}


.car-preloader .car-1 {	animation: moveOne .7s ease-in-out infinite; }
.car-preloader .car-1a { animation: fadeIn .7s ease-in-out infinite; }
.car-preloader .car-2 {	animation: moveTwo .7s ease-in-out infinite; }
.car-preloader .car-3 { animation: moveThree .7s ease-in-out infinite; }
.car-preloader .car-4 {	animation: moveFour .7s ease-in-out infinite; }
.car-preloader .car-5 {	animation: fadeOut .7s ease-in-out infinite; }

@media screen and (min-width:769px) {
	@keyframes moveOne {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(68px);
			width: 60px;
			height: 60px;
			opacity: 0.75;
		}
	}
	@keyframes moveTwo {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(83px);
			width: 80px;
			height: 80px;
			opacity: 1;
		}
	}
	@keyframes moveThree {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(82px);
			width: 60px;
			height: 60px;
			opacity: 0.75;
		}
	}
	@keyframes moveFour {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(67px);
			width: 50px;
			height: 50px;
			opacity: 0.5;
		}
	}

	@keyframes fadeIn {
		0% {opacity: 0;}
		100% {opacity: .5;}
	}
	@keyframes fadeOut {
		0% {opacity: .5;}
		100% {opacity: 0;}
	}

	@keyframes dots {
		0% { width: 0px; }
		100% { width: 15px; }
	}
}

@media only screen and (max-width: 768px) {

	
	.car-preloader .cp-wrapper {
		width: 270px;
	}
	.car-preloader .car {
		width: 40px;
		height: 40px;
	}
	.car-preloader .car-2, .car-preloader .car-4 {
		width: 45px;
		height: 45px;
	}
	.car-preloader .car-3 {
		width: 60px;
		height: 60px;
		margin: 0 5px;
	}

	.car-preloader .searcher {
		width: 110px;
		height: 110px;
		left: 92px;
		top: -15px;
	}

	.car-preloader .searching {
	    position: absolute;
	    left: 39%;
	    top: 130%;
	}
	
	@keyframes moveOne {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(46px);
			width: 45px;
			height: 45px;
			opacity: 0.75;
		}
	}
	@keyframes moveTwo {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(53px);
			width: 60px;
			height: 60px;
			opacity: 1;
		}
	}
	@keyframes moveThree {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(52px);
			width: 45px;
			height: 45px;
			opacity: 0.75;
		}
	}
	@keyframes moveFour {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(48px);
			width: 40px;
			height: 40px;
			opacity: 0.5;
		}
	}

	@keyframes fadeIn {
		0% {opacity: 0;}
		100% {opacity: .5;}
	}
	@keyframes fadeOut {
		0% {opacity: .5;}
		100% {opacity: 0;}
	}

	@keyframes dots {
		0% { width: 0px; }
		100% { width: 15px; }
	}

}