.holder {
    position: relative;
    width: 100%;
    height: 400px;
    background-color: #ebe5df;
    padding-top: 70px;
}

.flying-notes {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

.flying-notes .note {
    position: relative;
    left: 0%;
    top: 0%;
    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: 100%;
}

.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: -27px;
        top: -27px;
        opacity: 0.8;
        transform: rotateY(720deg);
        width: 32px;
    }
    35% {
        left: -27px;
        top: -27px;
        opacity: 0;
        transform: rotateY(1080deg);
        width: 32px;
    }
    100% {
        left: -27px;
        top: -27px;
        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: -29px;
        top: -27px;
        opacity: 0.8;
        transform: rotateY(720deg);
        width: 33px;
    }
    35% {
        left: -29px;
        top: -27px;
        opacity: 0;
        transform: rotateY(1080deg);
        width: 33px;
    }
    100% {
        left: -29px;
        top: -27px;
        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: 4px;
        top: -12px;
        opacity: 0.8;
        transform: rotateY(720deg);
        width: 45px;
    }
    35% {
        left: 4px;
        top: -12px;
        opacity: 0;
        transform: rotateY(1080deg);
        width: 45px;
    }
    100% {
        left: 4px;
        top: -12px;
        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: 33px;
        top: -48px;
        opacity: 0.8;
        transform: rotateY(720deg);
        width: 39px;
    }
    35% {
        left: 33px;
        top: -48px;
        opacity: 0;
        transform: rotateY(1080deg);
        width: 39px;
    }
    100% {
        left: 33px;
        top: -48px;
        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: 19px;
        top: -58px;
        opacity: 0.8;
        transform: rotateY(720deg);
        width: 37px;
    }
    35% {
        left: 19px;
        top: -58px;
        opacity: 0;
        transform: rotateY(1080deg);
        width: 37px;
    }
    100% {
        left: 19px;
        top: -58px;
        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: 23px;
        top: -91px;
        opacity: 0.8;
        transform: rotateY(720deg);
        width: 39px;
    }
    35% {
        left: 23px;
        top: -91px;
        opacity: 0;
        transform: rotateY(1080deg);
        width: 39px;
    }
    100% {
        left: 23px;
        top: -91px;
        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: -11px;
        top: -38px;
        opacity: 0.8;
        transform: rotateY(720deg);
        width: 39px;
    }
    35% {
        left: -11px;
        top: -38px;
        opacity: 0;
        transform: rotateY(1080deg);
        width: 39px;
    }
    100% {
        left: -11px;
        top: -38px;
        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: 30px;
        top: -21px;
        opacity: 0.8;
        transform: rotateY(720deg);
        width: 27px;
    }
    35% {
        left: 30px;
        top: -21px;
        opacity: 0;
        transform: rotateY(1080deg);
        width: 27px;
    }
    100% {
        left: 30px;
        top: -21px;
        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: 64px;
        top: -61px;
        opacity: 0.8;
        transform: rotateY(720deg);
        width: 47px;
    }
    35% {
        left: 64px;
        top: -61px;
        opacity: 0;
        transform: rotateY(1080deg);
        width: 47px;
    }
    100% {
        left: 64px;
        top: -61px;
        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: -29px;
        top: -52px;
        opacity: 0.8;
        transform: rotateY(720deg);
        width: 46px;
    }
    35% {
        left: -29px;
        top: -52px;
        opacity: 0;
        transform: rotateY(1080deg);
        width: 46px;
    }
    100% {
        left: -29px;
        top: -52px;
        opacity: 0;
        transform: rotateY(0deg);
    }
}