/* Banner animation */
.banner .shapes .item-1 {
  width: 200px;
  height: 200px;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  border-radius: 23%;
}
.banner .shapes .item-2 {
  width: 200px;
  height: 200px;
  top: 90%;
  left: 15%;
  transform: translate(-50%, -50%);
  border-radius: 23%;
}
.banner .shapes .item-3 {
  width: 200px;
  height: 200px;
  top: 20%;
  left: 70%;
  transform: translate(-50%, -50%);
  border-radius: 23%;
}
.banner .shapes .item-4 {
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 23%;
}
.banner .shapes .item-5 {
  width: 200px;
  height: 200px;
  top: 30%;
  left: 80%;
  transform: translate(-50%, -50%);
  border-radius: 23%;
}
.banner .shapes .item-6 {
  width: 200px;
  height: 200px;
  top: 90%;
  left: 60%;
  transform: translate(-50%, -50%);
  border-radius: 23%;
}
.banner .shapes .item-7 {
  width: 200px;
  height: 200px;
  top: 70%;
  left: 90%;
  transform: translate(-50%, -50%);
  border-radius: 23%;
}
.banner .shapes .item-8 {
  width: 200px;
  height: 200px;
  top: 90%;
  left: 80%;
  transform: translate(-50%, -50%);
  border-radius: 23%;
}

.banner .shapes .item-1 .object-1 {
  width: 50%;
  animation: object1 80s alternate infinite;
  opacity: 0.9;
}
.banner .shapes .item-2 .object-2 {
  width: 50%;
  animation: object2 200s alternate infinite;
  opacity: 0.9;
}
.banner .shapes .item-3 .object-3 {
  width: 50%;
  animation: object3 80s alternate infinite;
  opacity: 0.9;
}
.banner .shapes .item-4 .object-4 {
  width: 50%;
  animation: object4 200s alternate infinite;
  opacity: 0.9;
}
.banner .shapes .item-5 .object-5 {
  width: 50%;
  animation: object5 100s alternate infinite;
  opacity: 0.9;
}
.banner .shapes .item-6 .object-6 {
  width: 50%;
  animation: object6 200s alternate infinite;
  opacity: 0.9;
}
.banner .shapes .item-7 .object-7 {
  width: 50%;
  animation: object7 100s alternate infinite;
  opacity: 0.9;
}
.banner .shapes .item-8 .object-8 {
  width: 50%;
  animation: object8 50s alternate infinite;
  opacity: 0.9;
}
/* keyframes */

@keyframes object1 {
  0% {
    transform: rotate(0deg) translateX(0px) translateY(0px);
  }

  100% {
    transform: rotate(360deg) translateX(100px) translateY(100px);
  }
}
@keyframes object2 {
  0% {
    transform: rotate(0deg) translate(-90px);
  }
  25% {
    transform: rotate(180deg) translate(50px);
  }
  50% {
    transform: rotate(360deg) translateY(80px);
  }
  75% {
    transform: rotate(-180deg) translateX(200px);
  }
  100% {
    transform: rotate(0deg) translateX(200px);
  }
}
@keyframes object3 {
  0% {
    transform: rotate(0deg) translate(100px);
  }
  25% {
    transform: rotate(90deg) translate(150px);
  }
  50% {
    transform: rotate(180deg) translateY(180px);
  }
  75% {
    transform: rotate(270deg) translateX(300px);
  }
  100% {
    transform: rotate(360deg) translateX(300px);
  }
}
@keyframes object4 {
  0% {
    transform: rotate(0deg) translateY(-200px);
  }
  25% {
    transform: rotate(90deg) translate(50px);
  }
  50% {
    transform: rotate(180deg) translateY(20px);
  }
  75% {
    transform: rotate(270deg) translateX(400px);
  }
  100% {
    transform: rotate(360deg) translateX(300px);
  }
}
@keyframes object5 {
  0% {
    transform: rotate(0deg) translate(-50px);
  }
  25% {
    transform: rotate(90deg) translate(50px);
  }
  50% {
    transform: rotate(180deg) translateY(80px);
  }
  75% {
    transform: rotate(270deg) translateX(200px);
  }
  100% {
    transform: rotate(360deg) translateX(300px);
  }
}
@keyframes object6 {
  0% {
    transform: rotate(0deg) translate(0px);
  }
  25% {
    transform: rotate(180deg) translate(100px);
  }
  50% {
    transform: rotate(360deg) translateY(180px);
  }
  75% {
    transform: rotate(-180deg) translateX(200px);
  }
  100% {
    transform: rotate(0) translateX(200px);
  }
}
@keyframes object7 {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-300px);
  }
}
@keyframes object8 {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}