.shapesCont {
  margin: 0 auto;
  position: relative;
}

.shape-animation {
    z-index: 5;
    position: absolute;
    opacity: 0.18
}


.random-shape:after {
  font-family: FontAwesome;
  content: "";
  display: inline-block;

  width:800px;
  height: 800px;
  border: 8px solid #125a94;
}

@keyframes shape-1 {
  0% {
    transform: translate(-400px, -500px) ;
  }
  100% {
    transform: translate(1600px, -500px) ;
  }
}
.shape-container--1 {
  animation: shape-1 90s linear infinite;
}
.shape-container--1 .random-shape:after {
  margin-left: 350px;
  color: #2534ff;
  font-size: 60rem;
  display:none;
}

@keyframes shape-2 {
  0% {
    transform: translate(-2000px, -500px) ;
  }
  100% {
    transform: translate(2000px, -500px) ;
  }
}
.shape-container--2 {
  animation: shape-2 80s linear infinite;
}
.shape-container--2 .random-shape:after {
  margin-left: 1100px;
  color: #2534ff;
  font-size: 8rem;
  transform: rotate(75deg)
}

@keyframes shape-3 {
  0% {
    transform: translate(-2000px, -500px) ;
  }
  100% {
    transform: translate(2000px, -500px) ;
  }
}
.shape-container--3 {
  animation: shape-3 70s linear infinite;
}
.shape-container--3 .random-shape:after {
  margin-left: 800px;
  color: #2534ff;
  font-size: 1.6rem;
  transform: rotate(100deg)
}

@keyframes shape-4 {
  0% {
    transform: translate(-2000px, -300px) ;
  }
  100% {
    transform: translate(2000px, -300px) ;
  }
}
.shape-container--4 {
  animation: shape-4 60s linear infinite;
}
.shape-container--4 .random-shape:after {
  margin-left: 1050px;
  color: #2534ff;
  font-size: 6rem;
  transform: rotate(125deg)
}