@keyframes spin {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }

.splash .wheel,
.splash .wheel:after,
.splash .wheel:before {
  bottom: -20%;
  width: 12.8%;
  height: 46.38%;
  border-radius: 100%;
  background: #1e2327; }

.splash .wheel {
  left: 21.5%;
  -webkit-animation: spin 0.4s infinite linear;
  animation: spin 0.4s infinite linear; }

.splash .wheel.front {
  left: 82%; }

.splash .wheel:after,
.splash .wheel:before {
  content: "";
  position: absolute;
  display: block;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%; }

.splash .wheel:before {
  background: #aaa; }

.splash .wheel:after {
  top: 40%;
  left: 40%;
  width: 20%;
  height: 20%; }

@keyframes bobbing {
  0% {
    transform: rotate(0) translateY(0); }
  100% {
    transform: rotate(0.1deg) translateY(5px); } }

.splash .body {
  width: 100%;
  position: relative;
  transform-origin: right center;
  animation: bobbing 0.2s infinite ease-in-out forwards alternate; }

.splash .frame {
  position: relative; }

.splash .truck {
  width: 90%;
  max-width: 500px;
  margin: 100px auto;
  position: relative; }

.splash .truck * {
  position: absolute; }

.splash .truck img {
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  margin: 0; }

@keyframes bobbing {
  0% {
    transform: rotate(0) translateY(0); }
  100% {
    transform: rotate(0.1deg) translateY(5px); } }

.body {
  width: 100%;
  position: relative;
  transform-origin: right center;
  animation: bobbing 0.2s infinite ease-in-out forwards alternate; }

.frame {
  position: relative; }

.truck img {
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  margin: 0; }

@keyframes shine {
  0% {
    opacity: 0.1;
    background-position: 50px top; }
  30% {
    opacity: 1; }
  50%, 100% {
    opacity: 0.2;
    background-position: -500px 0; } }

.shine {
  /* Position it in the gap */
  width: 67%;
  height: 37%;
  left: 9%;
  top: 6%;
  /* Shape of the div to fit the windows */
  transform: skew(33deg, 1deg);
  border-radius: 56px 100px 20px 0;
  /* The background */
  background: linear-gradient(to right, transparent 76%, rgba(255, 255, 255, 0.8) 78%, rgba(255, 255, 255, 0.8) 96%, transparent 98%);
  background-repeat: no-repeat;
  background-size: cover;
  /* The animation */
  animation: shine 3s infinite ease forwards; }

@keyframes thingy {
  0% {
    transform: translateX(0);
    width: 0;
    opacity: 0; }
  10% {
    width: 10%;
    opacity: 1; }
  30%, 100% {
    transform: translateX(-250px);
    width: 0;
    opacity: 0; } }

.speed-thingy {
  position: absolute;
  width: 20px;
  border-radius: 10px;
  height: 5%;
  background: #fff;
  top: -10%;
  left: 50%;
  animation: thingy 3s infinite ease forwards; }

.speed-thingy.second {
  top: 50%;
  left: 30%;
  animation-delay: 0.1s; }

@keyframes shadow {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.01); } }

.shadow {
  width: 90%;
  border-radius: 100%;
  height: 20px;
  bottom: -25%;
  left: 5%;
  background: rgba(0, 0, 0, 0.1);
  animation: shadow 0.2s infinite ease-in-out forwards alternate;
  transform-origin: right center; }