div.container {
  width: 800px;
  max-width: 100%;
  position: relative;
  margin: 100px auto;
  height: 500px;
  max-height: 99%;
  font-size: 21px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  overflow-x: hidden;
  overflow-y: hidden;
}
@media screen and (max-width: 600px) {
  div.container {
    height: auto;
  }
}
div.container img.logo {
  width: 66%;
}
img.gear {
  width: 30%;
  opacity: 0.05;
  position: absolute;
  animation: spin 30s linear infinite;
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinrev {
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
img.gear.rev {
  animation: spinrev 30s linear infinite;
}
img.gear.fast {
  animation-duration: 20s;
}
img.gear.gear-1 {
  top: 0%;
  left: 0%;
}
img.gear.gear-2 {
  top: 29%;
  left: 19%;
  animation-delay: 1600ms;
}
img.gear.gear-3 {
  top: 51%;
  left: 41%;
  animation-delay: 1600ms;
}
img.gear.gear-4 {
  top: 0%;
  right: 22%;
}
img.gear.gear-5 {
  top: 25%;
  right: 0%;
}