body{
  margin:0;
  color:#444;
  background:#3388d6;
  font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

.machine-wrap{
  top:70%;
  left:50%;
  width:475px;
  height:145px;
  position:absolute;
  margin-top:-72.5px;
  margin-left:-237.5px;
  border-bottom:5px solid #271e01;
}
.machine{
  width:475px;
  height:145px;
  padding-bottom:20px;
}
.machine .machine-roof,
.machine .machine-main{
  margin:auto;
}
.machine-wrap .road .mud:before,
.machine-wrap .road .mud:after,
.machine .machine-roof .machine-silencer:before,
.machine .machine-roof .machine-silencer:after,
.machine .machine-body:before,
.machine .machine-body:after,
.machine .machine-main .machine-back:before,
.machine .machine-main .machine-back:after,
.machine .machine-main .machine-front:after{
  content:'';
  position:absolute;
}
.machine .machine-roof{
  width:80px;
  height:60px;
  bottom:-1px;
  position:relative;
  background:#3388d6;
  border:15px solid #271e01;
  border-bottom:none;
}
.machine .machine-roof .machine-silencer{
  width:14px;
  left:-50px;
  height:12px;
  bottom:-1px;
  position:absolute;
  background:#271e01;
}
.machine .machine-roof .machine-silencer:before{
  height:0;
  bottom:100%;
  width:inherit;
  border:6px solid #271e01;
  border-top:4px solid transparent;
  border-left:8px solid transparent;
}
.machine .machine-roof .machine-silencer:after{
  left:4px;
  width:5px;
  height:12px;
  bottom:100%;
  background:inherit;
  -webkit-transform:skewY(-35deg);
  transform:skewY(-35deg);
}
.machine .machine-roof .machine-silencer .machine-smoke{
  left:-5px;
  width:16px;
  height:16px;
  bottom:20px;
  border-radius:50%;
  position:absolute;
  background:#271e01;
  -webkit-transform:scale(0);
  transform:scale(0);
  -webkit-animation:moveSmoke .5s linear infinite;
  animation:moveSmoke .5s linear infinite;
}
.machine-main{
  height:60px;
  width:185px;
  position:relative;
}
.machine .machine-main .machine-body{
  height:inherit;
  width:inherit;
  position:relative;
  background:#271e01;
}
.machine .machine-main .machine-body:before{
  left:-15px;
  width:30px;
  height:inherit;
  background:inherit;
  -webkit-transform:skewX(-20deg);
  transform:skewX(-20deg);
}
.machine .machine-main .machine-body:after{
  bottom:0;
  right:15px;
  width:35px;
  height:41px;
  background:#3388d6;
}
.machine .machine-main .machine-back{
  bottom:-1px;
  width:75px;
  height:45px;
  position:absolute;
}
.machine .machine-main .machine-back:before{
  width:75px;
  height:45px;
  background:#3388d6;
  border-radius:50% 50% 0 0 / 85% 85% 0 0;
}
.machine .machine-main .machine-back:after{
  top:50%;
  left:50%;
  width:60px;
  height:60px;
  border-radius:50%;
  margin-top:-15px;
  margin-left:-30px;
  background:transparent;
  border:15px solid #271e01;
}
.machine .machine-main .machine-front{
  z-index:1;
  width:60px;
  height:60px;
  right:-24px;
  bottom:-20px;
  border-radius:50%;
  position:absolute;
  background:#271e01;
  border-top:2px solid #3388d6;
}
.machine .machine-main .machine-front:after{
  top:50%;
  left:50%;
  width:80px;
  height:20px;
  margin-top:-10px;
  margin-left:-40px;
  background:inherit;
  border:2px solid #3388d6;
}
.machine-wrap .road{
  right:0;
  bottom:0;
  height:15px;
  width:140px;
  overflow:hidden;
  position:absolute;
}
.machine-wrap .road .mud-wrap{
  width:160px;
  position:absolute;
  -webkit-animation:moveRoad .4s linear infinite;
  animation:moveRoad .4s linear infinite;
}
.machine-wrap .road .mud{
  bottom:0;
  width:40px;
  float:left;
  height:15px;
  position:relative;
  display:inline-block;
}
.machine-wrap .road .mud:before,
.machine-wrap .road .mud:after{
  width:20px;
  height:20px;
  border-radius:4px;
  background:#271e01;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}
.machine-wrap .road .mud:before{
  left:0;
  bottom:-17px;
}
.machine-wrap .road .mud:after{
  right:0;
  bottom:-20px;
}

.machine-wrap .machine-roof,
.machine-wrap .machine-body,
.machine-wrap .machine-silencer,
.machine-wrap .machine-back:before,
.machine-wrap .machine-front{
  -webkit-animation:upDown .6s linear infinite;
  animation:upDown .6s linear infinite;
}
.machine-wrap .machine-silencer{
  -webkit-animation-duration:.4s;
  animation-duration:.4s;
}
.machine-wrap .machine-front{
  -webkit-animation-duration:.3s;
  animation-duration:.3s;
}
.machine-wrap .machine-back{
  -webkit-animation:upDown .8s linear infinite;
  animation:upDown .8s linear infinite;
}
@-webkit-keyframes moveRoad{
  0%{
    right:-40px;
  }
  100%{
    right:0;
  }
}
@keyframes moveRoad{
  0%{
    right:-40px;
  }
  100%{
    right:0;
  }
}
@-webkit-keyframes moveSmoke{
  0%{
    opacity:0;
    -webkit-transform:scale(0) translate(0);
    transform:scale(0) translate(0);
  }
  60%{
    -webkit-transform:scale(.5) translate(0);
    transform:scale(.5) translate(0);
  }
  100%{
    opacity:.6;
    -webkit-transform:scale(1) translate(-10px,-40px);
    transform:scale(1) translate(-10px,-40px);
  }
}
@keyframes moveSmoke{
  0%{
    opacity:0;
    -webkit-transform:scale(0) translate(0);
    transform:scale(0) translate(0);
  }
  60%{
    -webkit-transform:scale(.5) translate(0);
    transform:scale(.5) translate(0);
  }
  100%{
    opacity:.6;
    -webkit-transform:scale(1) translate(-10px,-40px);
    transform:scale(1) translate(-10px,-40px);
  }
}
@-webkit-keyframes upDown{
  0%{
    -webkit-transform:translateY(0);
    transform:translateY(0);
  }
  50%{
    -webkit-transform:translateY(2px);
    transform:translateY(2px);
  }
  100%{
    -webkit-transform:translateY(0);
    transform:translateY(0);
  }
}
@keyframes upDown{
  0%{
    -webkit-transform:translateY(0);
    transform:translateY(0);
  }
  50%{
    -webkit-transform:translateY(2px);
    transform:translateY(2px);
  }
  100%{
    -webkit-transform:translateY(0);
    transform:translateY(0);
  }
}