* { box-sizing: border-box; }

/* force scrollbar */
html { overflow-y: scroll; }


/* ---- grid ---- */

.grid {
  background: #DDD;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}








.box {

align-items: center;
	display: flex;
	width: 100%;
	justify-content: center;
}




@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-188px * 50));
            transform: translateX(calc(-188px * 50));
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-188px * 25));
            transform: translateX(calc(-188px * 25));
  }
}


.slider {
  background: white;
  height: 150px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 1360px;
}









.slider .slide-track {
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: flex;
  width: calc(188px * 25);
}
.slider .slide {
  height: 150px;
  width: 188px;
}




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

.slider {
  height: 100px;
}

.slide img {

height: 100px;
width: 125px;

}

}