.wrapper {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider {
  width: 1000px;
  height: 100%;
  position: relative;
  background: white;
  box-shadow: 0 100px 20px -10px rgba(0,0,0,0.2);
  display: flex;
  overflow: hidden;
}
.slide{
  display: flex;
  align-items: center;
  animation: slideshow 8s linear infinite;
}
.slide img {
  height: 70px;
  padding: 0 30px 0 30px;
}
@keyframes slideshow {
  0% {transform: translateX(0);}
  100% {transform: translateX(-100%);}
}
.slider::before, .slider::after {
  height: 10px;
  width: 20px;
  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);
}

.dist-wrap{
	width: 100%;
	height: 100%;
	text-align: center;
}

.dist-in{
	width: 70%;
	height: auto;
}

.dist-in ul{
	padding: 0;
	margin: 0;
}

.dist-in ul li{
	list-style: none;
	display: inline-block;
	width: 150px;
	height: 100px;
	position: relative; 
	overflow: hidden; 
	cursor: pointer;
	margin: 10px;
	box-shadow: 0px 0px 0px -7px #555;
	transition: .5s;
}

.dist-in ul li img{
	width: 100%;
	height: 100%;	
}

.dist-in ul li img:nth-child (1){
	tranform:translateY(0);
	transition: .5s;
}

.dist-in ul li: img:nth-child (2){
	tranform:translateY(0);
	transition: .5s;
}

.dist-in ul li:hover img:nth-child (1){
	tranform:translateY(-100%);
	transition: .5s;
}

.dist-in ul li:hover img:nth-child (2){
	tranform:translateY(-100%);
	transition: .5s;
}