/* =========================
   ANIMACION LOGO
========================= */

.hero-logo{
    animation: floating 4s ease-in-out infinite;
}

/* FLOATING */

@keyframes floating{

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

    50%{
        transform: translateY(-15px);
    }

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

}

/* =========================
   SCROLL ANIMATIONS
========================= */

.fade-in{
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s ease;
}

/* CUANDO APARECE */

.fade-in.show{
    opacity: 1;
    transform: translateY(0);
}