.orb {
  width: 275px;
  height: 100px;
 
 
  display: inline-block;
  margin: 0 24.7px;
  float: left;
  transition: all .2s ease-out;
}

.orb:hover {
  transform: scale(1.2);
  opacity: .5;
  cursor: pointer;
}

.red {background:url('../img/logo1.png')no-repeat;}
.yellow {background:url('../img/logo2.png')no-repeat;}
.blue {background:url('../img/logo3.png')no-repeat;}
.orange {background:url('../img/logo4.png')no-repeat;}
.purple {background:url('../img/logo5.png')no-repeat;}
.green {background:url('../img/logo7.png')no-repeat;}
 
.marquee {
  height: 400px;
  width: 100%;
 
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  background-color: #f5f5f5b3;
}

.marquee--inner {
  display: block;
  width: 200%;
  margin: 70px 0;
  position: absolute;
  animation: marquee 20s linear infinite;
}

.marquee--inner:hover {
  animation-play-state: paused;
 
}
 

/*.half {
  float: left;
  width: 10%;
}*/
 
@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}