.brands {
  color: #313437;
  background-color: #fff;
}

.brands > div {
  display: block;
  text-align: center;
  padding: 40px 0;
}

@media (max-width:767px) {
  .brands > div {
    padding: 30px 0;
  }
}

@keyframes brand-vibrate {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-2px, -1px); }
  20% { transform: translate(2px, 1px); }
  30% { transform: translate(-1px, 2px); }
  40% { transform: translate(1px, -2px); }
  50% { transform: translate(-2px, 1px); }
  60% { transform: translate(2px, -1px); }
  70% { transform: translate(-1px, -2px); }
  80% { transform: translate(1px, 2px); }
  90% { transform: translate(-2px, -1px); }
}

.brands > div img {
  display: inline-block;
  margin: 10px 20px;
  vertical-align: middle;
  transition: transform 0.1s ease;
}

.brands > div img:hover {
  animation: brand-vibrate 0.4s ease-in-out infinite;
}