@keyframes bob {
    50% {
        transform: translateX(4px);
    }

    100% {
        transform: translateX(-4px);
    }
}

@keyframes float {
    0% {
        transform: translate(0, 7px);
    }

    10% {
        transform: translate(0, 1px);
    }

    50% {
        transform: translate(0, -7px);
    }

    90% {
        transform: translate(0, 1px);
    }

    100% {
        transform: translate(0, 7px);
    }
}

@keyframes burger-hover {
    0% {
        width: 24px;
    }

    50% {
        width: 12px;
    }

    100% {
        width: 24px;
    }
}

@keyframes sm-bbl {
    20% {
        transform: translate(-54px, 80px);
    }

    40% {
        transform: translate(-108px, -10px);
    }

    60% {
        transform: translate(-162px, 80px);
    }

    80% {
        transform: translate(-240px, -10px);
    }
}

@keyframes big-bbl {
    20% {
        transform: translate(-40px, 10px);
    }

    40% {
        transform: translate(-80px, -30px);
    }

    60% {
        transform: translate(-140px, 10px);
    }

    80% {
        transform: translate(-200px, -30px);
    }
}

@keyframes fl-bbl {
    0% {
        transform: translate(-50%, -10px);
    }

    50% {
        transform: translate(-50%, 10px);
    }

    100% {
        transform: translate(-50%, -10px);
    }
}

@keyframes sticky {
    0% {
        transform: translateY(-300px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes form_bbl1 {
    0%, 100% {
        top: 0;
        right: 0;
    }

    20% {
        top: 20%;
        right: 30%;
    }

    30% {
        top: 60%;
        right: 50%;
    }

    40% {
        top: calc(100% - 50px);
        right: 40%;
    }

    50% {
        top: 70%;
        right: 0%;
    }

    60% {
        top: 60%;
        right: 60%;
    }

    70% {
        top: 30%;
        right: 20%;
    }

    80% {
        top: 20%;
        right: 50%;
    }

    90% {
        top: 10%;
        right: calc(100% - 50px);
    }
}

@keyframes form_bbl2 {
    0%, 100% {
        bottom: 0;
        left: 0;
    }

    20% {
        bottom: 20%;
        left: 30%;
    }

    30% {
        bottom: 60%;
        left: 50%;
    }

    40% {
        bottom: calc(100% - 70px);
        left: 40%;
    }

    50% {
        bottom: 70%;
        left: 0%;
    }

    60% {
        bottom: 60%;
        left: 60%;
    }

    70% {
        bottom: 30%;
        left: 20%;
    }

    80% {
        bottom: 20%;
        left: 50%;
    }

    90% {
        bottom: 10%;
        left: calc(100% - 70px);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes effect {
    0% {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(1.3, 0.6);
    }

    50% {
        transform: scale(1.1, 0.9);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes goleft {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        opacity: 50%;
    }

    100% {
        top: 50%;
        transform: translate(-50px, -50%) scale(2);
        opacity: 0;
    }
}
@keyframes goright {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        opacity: 50%;
    }

    100% {
        top: 50%;
        transform: translate(50px, -50%) scale(2);
        opacity: 0;
    }
}

@keyframes circle{
    0%{
      transform: rotate(0deg);
    }
    100%{
      transform: rotate(360deg);
    }
  }
  @keyframes circle1{
    0%{
      transform: rotate(120deg);
    }
    100%{
      transform: rotate(480deg);
    }
  }
  @keyframes circle2{
    0%{
      transform: rotate(240deg);
    }
    100%{
      transform: rotate(600deg);
    }
  }