html,
body {
  margin: 0;
  overflow: hidden;
  height: 100%;
}

#wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.city {
  height: 100%;
  position: absolute;
  width: 100%;
  min-width: 800px;
  overflow-x: hidden;
  z-index: 0;
  background: #ffaf1b;
}

.parallax {
  background-image: url("images/parallax0.png");
  background-position: bottom;
  background-repeat: repeat-x;
  bottom: 0;
  height: 100%;
  left: -100%;
  position: absolute;
  width: 400%;
  z-index: -4;
  backface-visibility: hidden;
  perspective: 1000px;
  transform: translate3d(0, 0, 0);
  animation: paraA 140s linear infinite;
  background-size: 30%;
}

.parallax3 {
  background: transparent url("images/parallax4.png");
  background-position: bottom;
  background-repeat: repeat-x;
  bottom: 0;
  height: 100%;
  opacity: 1;
  position: absolute;
  width: 200%;
  z-index: -3;
  backface-visibility: hidden;
  filter: hue-rotate(45deg);
  perspective: 1000px;
  transform: translate3d(0, 0, 0);
  animation: paraB 30s linear infinite;
  background-size: 30%;
}

.parallax2 {
  background: transparent url("images/parallax3.png");
  background-position: bottom;
  background-repeat: repeat-x;
  bottom: 20px;
  height: 100%;
  opacity: 1;
  position: absolute;
  width: 200%;
  z-index: -3;
  backface-visibility: hidden;
  filter: hue-rotate(45deg);
  perspective: 1000px;
  transform: translate3d(0, 0, 0);
  animation: paraB 60s linear infinite;
  background-size: 30%;
}

@keyframes paraA {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-1300px);
  }
}

@keyframes paraB {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-1100px);
  }
}