.logo,
.label {
  width: 100%;
  background: url("/static/images/2016-sprites.svg");
  background-size: 300%;
}

.logi,
.tank,
.labs {
  float: left;
  width: 33.3333%;
}

.logo  { padding-bottom: 100%; }
.label { padding-bottom: 40%; }

.logi .logo { background-position:  0% 50%; }
.tank .logo { background-position: 50% 50%; }
.labs .logo { background-position: 100% 50%; }

.logi .label { background-position: 0%   0; }
.tank .label { background-position: 50%  0; }
.labs .label { background-position: 100% 0; }

.top-margin {
  margin-top: 50px;
}

.labs .logo {
  -webkit-animation: bubble 450ms steps(1) infinite;
  -moz-animation: bubble 450ms steps(1) infinite;
  -o-animation: bubble 450ms steps(1) infinite;
  animation: bubble 450ms steps(1) infinite;
}

/* keyframes for bubbling animation: */
@-webkit-keyframes bubble {
   0% { background-position: 100%  50%; }
  25% { background-position:   0% 100%; } 
  50% { background-position:  50% 100%; }
  75% { background-position: 100% 100%; }
}
@-moz-keyframes bubble {
   0% { background-position: 100%  50%; }
  25% { background-position:   0% 100%; } 
  50% { background-position:  50% 100%; }
  75% { background-position: 100% 100%; }
}
@-o-keyframes bubble {
   0% { background-position: 100%  50%; }
  25% { background-position:   0% 100%; } 
  50% { background-position:  50% 100%; }
  75% { background-position: 100% 100%; }
}
@keyframes bubble {
   0% { background-position: 100%  50%; }
  25% { background-position:   0% 100%; } 
  50% { background-position:  50% 100%; }
  75% { background-position: 100% 100%; }
}