/* ================================= */
/* LOGO MENU CYBERPUNK */
/* ================================= */

.logo-menu{

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;
}

/* LOGO */

.logo-menu img{

    width:180px;

    transition:0.4s ease;

    animation:
    neonPulse 3s ease-in-out infinite,
    colorShift 6s linear infinite,
    floatLogo 4s ease-in-out infinite;

    filter:
    drop-shadow(0 0 10px #ff00ff)
    drop-shadow(0 0 20px #8a2be2)
    drop-shadow(0 0 35px #00ffff);
}

/* HOVER */

.logo-menu img:hover{

    transform:scale(1.05);

    filter:
    drop-shadow(0 0 15px #00ffff)
    drop-shadow(0 0 30px #ff00ff)
    drop-shadow(0 0 60px #8a2be2);
}

/* ================================= */
/* ANIMACION BRILLO */
/* ================================= */

@keyframes neonPulse{

    0%{

        opacity:.85;

        filter:
        drop-shadow(0 0 8px #00ffff)
        drop-shadow(0 0 20px #8a2be2);
    }

    50%{

        opacity:1;

        filter:
        drop-shadow(0 0 15px #ff00ff)
        drop-shadow(0 0 35px #00ffff)
        drop-shadow(0 0 60px #8a2be2);
    }

    100%{

        opacity:.85;

        filter:
        drop-shadow(0 0 8px #00ffff)
        drop-shadow(0 0 20px #8a2be2);
    }
}

/* ================================= */
/* CAMBIO DE COLORES */
/* ================================= */

@keyframes colorShift{

    0%{
        filter:
        hue-rotate(0deg)
        drop-shadow(0 0 10px #00ffff)
        drop-shadow(0 0 30px #ff00ff);
    }

    25%{
        filter:
        hue-rotate(40deg)
        drop-shadow(0 0 15px #8a2be2)
        drop-shadow(0 0 40px #00ffff);
    }

    50%{
        filter:
        hue-rotate(90deg)
        drop-shadow(0 0 20px #ff00ff)
        drop-shadow(0 0 50px #00ffff);
    }

    75%{
        filter:
        hue-rotate(140deg)
        drop-shadow(0 0 15px #00ffff)
        drop-shadow(0 0 40px #8a2be2);
    }

    100%{
        filter:
        hue-rotate(0deg)
        drop-shadow(0 0 10px #00ffff)
        drop-shadow(0 0 30px #ff00ff);
    }
}

/* ================================= */
/* EFECTO FLOTANTE */
/* ================================= */

@keyframes floatLogo{

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

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

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

/* ================================= */
/* RESPONSIVE */
/* ================================= */

@media(max-width:768px){

    .logo-menu img{

        width:130px;
    }

}