.wrapper {
	margin: 25px 0px 25px 0px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slider {
	width: 100%;
	height: 100px;
	position: relative;
	background: white;
	box-shadow: 0 10px 20px -10px rgba(0,0,0,0.2);
	display: -webkit-inline-box;
	overflow:hidden;
}

/* ANIMATION */
.slide {
	width: 1550px;
	height: 100px;
	display: flex;
	align-items: center;
	animation: slideshow 30s linear infinite;
}

.slide img {
	height: 70px;
	padding: 0 30px 0 30px;
	filter: grayscale(100%);
}

.slide img:hover {
	animation: colorUp 0.5s linear forwards;
}

.slide_one {
	width: 2130px;
	height: 100px;
	display: flex;
	align-items: center;
	animation: slideshow 60s linear infinite;
}
.slide_one img {
	height: 70px;
	padding: 0 30px 0 30px;
	filter: grayscale(100%);
}

.slide_one img:hover {
	animation: colorUp 0.51s linear forwards;
}

@keyframes slideshow {
	0% {transform: translateX(0);}
	100% {transform: translateX(-100%);}
}

@keyframes colorUp {
	0% {filter: grayscale(100%);}
	100% {filter: grayscale(10%);}
}

.slider:hover > .slide {
	animation-play-state: paused;
}

.slider:hover > .slide_one {
	animation-play-state: paused;
}

/* GRADIENT BLUR EFFECT */
.slider::before, .slider::after {
	height: 100px;
	width: 200px;
	position: absolute;
	content: "";
	background: linear-gradient(to right, white 0%, rgba(255,255,255,0) 100%);
	z-index: 2;
}

.slider::before {
	left: 0;
	top: 0;
}

.slider::after {
	right:0;
	top:0;
	transform: rotateZ(180deg);
}

@media only screen and (max-width: 600px) {
	.slider::before, .slider::after {
		width: 50px;
	}
}