.wavy-lines {
	position: relative;
	overflow: hidden;
	height: 10.5vw;
	background-size: contain;
	min-height: 80px;
}

.wavy--line-1 {
	position: absolute;
	width: 100vw;
	height: 0px;
	border-top: 5px dotted var(--theme-green);
	left: 59%;
	top: 41%;
	transform-origin: left top;
	animation-duration: 20s;
	animation-iteration-count: infinite;
}

.wavy--line-1.right-mod {
	transform: rotate(-4deg);
	margin-top: -5px;
	margin-left: -3px
}

.wavy--line-1.left-mod {
	transform: rotate(-176deg);
	animation-delay: 1s;
}

@keyframes wavy-1-left {
  0%   {transform: rotate(-176deg);}
  50%  {transform: rotate(-183deg);}
  100% {transform: rotate(-176deg);}
}

@keyframes wavy-1-right {
  0%   {transform: rotate(-4deg);}
  50%  {transform: rotate(3deg);}
  100% {transform: rotate(-4deg);}
}

.wavy--line-2 {
	position: absolute;
	width: 100vw;
	height: 0px;
	border-top: 2px solid var(--theme-blue-dark);
	left: 50%;
	top: 3%;
	transform-origin: left top;
	animation-duration: 18s;
	animation-iteration-count: infinite;
}

.wavy--line-2.right-mod {
	margin-top: -2px;
	transform: rotate(4deg);
	animation-delay: 1.6s;
}

.wavy--line-2.left-mod {
	transform: rotate(176deg);
	animation-delay: 1.2s;
}

@keyframes wavy-2-left {
  0%   {transform: rotate(176deg);}
  50%  {transform: rotate(169deg);}
  100% {transform: rotate(176deg);}
}

@keyframes wavy-2-right {
  0%   {transform: rotate(4deg);}
  50%  {transform: rotate(11deg);}
  100% {transform: rotate(4deg);}
}

.wavy--line-3 {
	position: absolute;
	width: 100vw;
	height: 0px;
	border-top: 2px solid var(--theme-blue-light);
	left: 35%;
	top: 53%;
	transform-origin: left top;
	animation-duration: 22s;
	animation-iteration-count: infinite;
}

.wavy--line-3.right-mod {
	margin-top: -2px;
	transform: rotate(4deg);
	animation-delay: 1.8s;
}

.wavy--line-3.left-mod {
	transform: rotate(176deg);
	animation-delay: 1.1s;
}

@keyframes wavy-3-left {
  0%   {transform: rotate(176deg);}
  50%  {transform: rotate(186deg);}
  100% {transform: rotate(176deg);}
}

@keyframes wavy-3-right {
  0%   {transform: rotate(4deg);}
  50%  {transform: rotate(-4deg);}
  100% {transform: rotate(4deg);}
}

.movement-mod .wavy--line-1.right-mod { animation-name: wavy-1-right; }
.movement-mod .wavy--line-1.left-mod  { animation-name: wavy-1-left;  }
.movement-mod .wavy--line-2.right-mod { animation-name: wavy-2-right; }
.movement-mod .wavy--line-2.left-mod  { animation-name: wavy-2-left;  }
.movement-mod .wavy--line-3.right-mod { animation-name: wavy-3-right; }
.movement-mod .wavy--line-3.left-mod  { animation-name: wavy-3-left;  }