*{
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
  body{
    background:#f2f2f2;
  }
  @keyframes slide{
    from{
      transform:translateX(0) ;
      
    }
    to{
      transform:translateX(-100%) ;
    
    }
  }
  .logos{
    overflow:hidden;
    padding:60px 0 ;
    background:white;
    white-space:nowrap;
    position:relative;
  }
  
  .logos:before,
  .logos:after{
    content:"";
    position:absolute;
    top:0;
    width:250px;
    height:100%;
    z-index:2;
  }
  .logos:before{
    left:0;
    background:linear-gradient(to left, rgba(255,255,255,0), white);
  }
  .logos:after{
    right:0;
    background:linear-gradient(to right, rgba(255,255,255,0), white);
  }
  
  
  .logos:hover .logos-slide{
    animation-play-state:paused;
    
    
  }
  .logos-slide{
    display:inline-block;
    animation: 35s slide infinite linear;
  }
  .logos-slide img{
    height:60px;
    margin: 0 40px;
  }