.lines {
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  width: 44.64rem;
  height: 15rem;
  margin: auto;
	margin-top: 4rem;
	margin-bottom: -19rem;
  overflow: hidden;
/*	transform: skewX(-18deg); */
	pointer-events: none;
}

.lines .line {
  position: absolute;
  height: 4.8px;
  width: 100%;
  left: -2rem;
  background: rgba(255, 255, 255, 0);
  overflow: hidden;
}

@media (max-width: 600px) {.lines .line {height: 6.9px;}}

/* Animated bar inside each line */
.lines .line::after {
  content: "";
  display: block;
  position: absolute;
  width: 6rem;
  height: 100%;
  left: -10%;
  top: 0;
  background: linear-gradient(to right, rgba(0, 255, 0, 0) 0%, green 75%, #f5f5f5 100%);
  animation: run-horizontal 3s cubic-bezier(0.4, 0.46, 0.55, 0.97) infinite;
}

/* Vertically spread out, ensuring early inclusion of bottom lines */
.lines .line:nth-child(1)  { top: 10%; }
.lines .line:nth-child(2)  { top: 90%; }
.lines .line:nth-child(3)  { top: 30%; }
.lines .line:nth-child(4)  { top: 70%; }
.lines .line:nth-child(5)  { top: 50%; }
.lines .line:nth-child(6)  { top: 20%; }
.lines .line:nth-child(7)  { top: 80%; }
.lines .line:nth-child(8)  { top: 40%; }
.lines .line:nth-child(9)  { top: 60%; }
.lines .line:nth-child(10) { top: 100%; }

/* Shorter delays to create continuous overlap */
.lines .line:nth-child(1)::after  { animation-delay: 0.2s; }
.lines .line:nth-child(2)::after  { animation-delay: 0.4s; }
.lines .line:nth-child(3)::after  { animation-delay: 0.8s; }
.lines .line:nth-child(4)::after  { animation-delay: 1.2s; }
.lines .line:nth-child(5)::after  { animation-delay: 1.6s; }
.lines .line:nth-child(6)::after  { animation-delay: 2s; }
.lines .line:nth-child(7)::after  { animation-delay: 2.4s; }
.lines .line:nth-child(8)::after  { animation-delay: 2.8s; }
.lines .line:nth-child(9)::after  { animation-delay: 3.2s; }
.lines .line:nth-child(10)::after { animation-delay: 3.6s; }

@keyframes run-horizontal {
  0% {
    left: -10%;
  }
  100% {
    left: 110%;
  }
}