.s4 {
  position: relative;
  height: 120%;
  background-color: rgb(0, 0, 0);
}

.s4farmer {
  position: absolute;
  margin-top: 165%;
  width: 90%;
  z-index: 18;

  left: 50%;
  transform: translateX(-50%);
}

.s4treesback {
  position: absolute;
  margin-top: 190%;
  width: 100%;
  z-index: 19;
  will-change: transform; /* smooth animation */
}

.s4treesfront {
  position: absolute;
  margin-top: 210%;
  width: 100%;
  z-index: 20;
  will-change: transform; 
  pointer-events: none; /* ensures clicks pass through the front trees */
}

.s4bg {
  position: absolute;
  margin-top: 220%;
  width: 100%;
  z-index: 17;
  left: 50%;
  transform: translateX(-50%); /* We must preserve this in JS */
  will-change: transform; 
}

.s4billboard {
  position: absolute;
  margin-top: 222%;
  width: 100%;
  z-index: 20;
  left: 50%;
  transform: translateX(-50%); /* We must preserve this in JS */
  will-change: transform; 
}


.s4billboardonly {
  position: absolute;
  margin-top: 210%;
  width: 80%;
  z-index: 20;

  left: 50%;
  transform: translateX(-50%);
}


.s4road {
  position: absolute;
  margin-top: 265%;
  width: 100%;
  z-index: 21;
}

.s4car {
  position: absolute;
  margin-top: 265%;
  width: 30%;
  left: 100%;              /* start off-screen right */
  z-index: 23;
  overflow: visible;

  animation: moveCar 7s linear infinite;
  will-change: transform;
}


@keyframes moveCar {
  /* Start completely outside right */
  0% {
    transform: translateX(0);
  }

  /* Drive across the screen */
  50% {
    transform: translateX(-140vw);
  }

  /* Pause off-screen left */
  100% {
    transform: translateX(-140vw);
  }
}