.robot {
  position: relative;
  margin: 0 auto;
  width: 80%; }
  @media screen and (min-width: 641px) {
    .robot {
      width: 50%; } }
  @media screen and (min-width: 2560px) {
    .robot {
      width: 35%; } }

.robot:before {
  content: "";
  display: block;
  padding-top: 100%; }

.robot-animation {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: url("../images/frames/robot-sprite.png") no-repeat left top;
  background-size: 100%;
  animation: sprite 3.5s steps(47) infinite;
  -webkit-animation: sprite 3.5s steps(47) infinite; }

@keyframes sprite {
  from {
    background-position: left top; }
  to {
    background-position: left bottom; } }