.holder {
  position: absolute;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #EBE5DF;
}

.flying-notes {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateX(-50%) translateY(-50%);
}

.flying-notes .note {
  position: relative;
  left: 0%;
  /*top: 0%;*/
  top: 10px;
  width: 100px;
  height: 100px;
  animation: wobble 1s infinite;
  transform-origin: 50% 100%;
}

@keyframes wobble {
  0% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(-10deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  30% {
    transform: rotateZ(-5deg);
  }
  40% {
    transform: rotateZ(5deg);
  }
  50% {
    transform: rotateZ(-3.3333333333deg);
  }
  60% {
    transform: rotateZ(3.3333333333deg);
  }
  70% {
    transform: rotateZ(-2.5deg);
  }
  80% {
    transform: rotateZ(2.5deg);
  }
  90% {
    transform: rotateZ(-2deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}
.flying-notes .note svg {
  width: 100%;
  height: 40%;
}

.flying-notes .note.note1 {
  position: absolute;
  opacity: 0;
  width: 100px;
  animation: note1 5.7s infinite linear;
  animation-delay: 0s;
}

@keyframes note1 {
  0% {
    left: 0px;
    top: 0px;
    opacity: 0;
    transform: rotateY(0deg);
  }
  20% {
    left: -34px;
    top: -46px;
    opacity: 0.8;
    transform: rotateY(720deg);
    width: 37px;
  }
  35% {
    left: -34px;
    top: -46px;
    opacity: 0;
    transform: rotateY(1080deg);
    width: 37px;
  }
  100% {
    left: -34px;
    top: -46px;
    opacity: 0;
    transform: rotateY(0deg);
  }
}
.flying-notes .note.note2 {
  position: absolute;
  opacity: 0;
  width: 100px;
  animation: note2 5.7s infinite linear;
  animation-delay: 1s;
}

@keyframes note2 {
  0% {
    left: 0px;
    top: 0px;
    opacity: 0;
    transform: rotateY(0deg);
  }
  20% {
    left: -37px;
    top: -66px;
    opacity: 0.8;
    transform: rotateY(720deg);
    width: 49px;
  }
  35% {
    left: -37px;
    top: -66px;
    opacity: 0;
    transform: rotateY(1080deg);
    width: 49px;
  }
  100% {
    left: -37px;
    top: -66px;
    opacity: 0;
    transform: rotateY(0deg);
  }
}
.flying-notes .note.note3 {
  position: absolute;
  opacity: 0;
  width: 100px;
  animation: note3 5.7s infinite linear;
  animation-delay: 2s;
}

@keyframes note3 {
  0% {
    left: 0px;
    top: 0px;
    opacity: 0;
    transform: rotateY(0deg);
  }
  20% {
    left: -15px;
    top: -49px;
    opacity: 0.8;
    transform: rotateY(720deg);
    width: 38px;
  }
  35% {
    left: -15px;
    top: -49px;
    opacity: 0;
    transform: rotateY(1080deg);
    width: 38px;
  }
  100% {
    left: -15px;
    top: -49px;
    opacity: 0;
    transform: rotateY(0deg);
  }
}
.flying-notes .note.note4 {
  position: absolute;
  opacity: 0;
  width: 100px;
  animation: note4 5.7s infinite linear;
  animation-delay: 3s;
}

@keyframes note4 {
  0% {
    left: 0px;
    top: 0px;
    opacity: 0;
    transform: rotateY(0deg);
  }
  20% {
    left: 1px;
    top: -27px;
    opacity: 0.8;
    transform: rotateY(720deg);
    width: 46px;
  }
  35% {
    left: 1px;
    top: -27px;
    opacity: 0;
    transform: rotateY(1080deg);
    width: 46px;
  }
  100% {
    left: 1px;
    top: -27px;
    opacity: 0;
    transform: rotateY(0deg);
  }
}
.flying-notes .note.note5 {
  position: absolute;
  opacity: 0;
  width: 100px;
  animation: note5 5.7s infinite linear;
  animation-delay: 4s;
}

@keyframes note5 {
  0% {
    left: 0px;
    top: 0px;
    opacity: 0;
    transform: rotateY(0deg);
  }
  20% {
    left: 18px;
    top: -42px;
    opacity: 0.8;
    transform: rotateY(720deg);
    width: 31px;
  }
  35% {
    left: 18px;
    top: -42px;
    opacity: 0;
    transform: rotateY(1080deg);
    width: 31px;
  }
  100% {
    left: 18px;
    top: -42px;
    opacity: 0;
    transform: rotateY(0deg);
  }
}
.flying-notes .note.note6 {
  position: absolute;
  opacity: 0;
  width: 100px;
  animation: note6 5.7s infinite linear;
  animation-delay: 5s;
}

@keyframes note6 {
  0% {
    left: 0px;
    top: 0px;
    opacity: 0;
    transform: rotateY(0deg);
  }
  20% {
    left: -32px;
    top: 37px;
    opacity: 0.8;
    transform: rotateY(720deg);
    width: 45px;
  }
  35% {
    left: -32px;
    top: 37px;
    opacity: 0;
    transform: rotateY(1080deg);
    width: 45px;
  }
  100% {
    left: -32px;
    top: 37px;
    opacity: 0;
    transform: rotateY(0deg);
  }
}
.flying-notes .note.note7 {
  position: absolute;
  opacity: 0;
  width: 100px;
  animation: note7 5.7s infinite linear;
  animation-delay: 6s;
}

@keyframes note7 {
  0% {
    left: 0px;
    top: 0px;
    opacity: 0;
    transform: rotateY(0deg);
  }
  20% {
    left: -22px;
    top: 12px;
    opacity: 0.8;
    transform: rotateY(720deg);
    width: 33px;
  }
  35% {
    left: -22px;
    top: 12px;
    opacity: 0;
    transform: rotateY(1080deg);
    width: 33px;
  }
  100% {
    left: -22px;
    top: 12px;
    opacity: 0;
    transform: rotateY(0deg);
  }
}
.flying-notes .note.note8 {
  position: absolute;
  opacity: 0;
  width: 100px;
  animation: note8 5.7s infinite linear;
  animation-delay: 7s;
}

@keyframes note8 {
  0% {
    left: 0px;
    top: 0px;
    opacity: 0;
    transform: rotateY(0deg);
  }
  20% {
    left: 51px;
    top: 10px;
    opacity: 0.8;
    transform: rotateY(720deg);
    width: 28px;
  }
  35% {
    left: 51px;
    top: 10px;
    opacity: 0;
    transform: rotateY(1080deg);
    width: 28px;
  }
  100% {
    left: 51px;
    top: 10px;
    opacity: 0;
    transform: rotateY(0deg);
  }
}
.flying-notes .note.note9 {
  position: absolute;
  opacity: 0;
  width: 100px;
  animation: note9 5.7s infinite linear;
  animation-delay: 8s;
}

@keyframes note9 {
  0% {
    left: 0px;
    top: 0px;
    opacity: 0;
    transform: rotateY(0deg);
  }
  20% {
    left: 16px;
    top: -14px;
    opacity: 0.8;
    transform: rotateY(720deg);
    width: 38px;
  }
  35% {
    left: 16px;
    top: -14px;
    opacity: 0;
    transform: rotateY(1080deg);
    width: 38px;
  }
  100% {
    left: 16px;
    top: -14px;
    opacity: 0;
    transform: rotateY(0deg);
  }
}
.flying-notes .note.note10 {
  position: absolute;
  opacity: 0;
  width: 100px;
  animation: note10 5.7s infinite linear;
  animation-delay: 9s;
}

@keyframes note10 {
  0% {
    left: 0px;
    top: 0px;
    opacity: 0;
    transform: rotateY(0deg);
  }
  20% {
    left: 20px;
    top: 14px;
    opacity: 0.8;
    transform: rotateY(720deg);
    width: 34px;
  }
  35% {
    left: 20px;
    top: 14px;
    opacity: 0;
    transform: rotateY(1080deg);
    width: 34px;
  }
  100% {
    left: 20px;
    top: 14px;
    opacity: 0;
    transform: rotateY(0deg);
  }
}