@keyframes brillar {

    0% {



        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.75);

    }



    100% {



        box-shadow: 0px 0px 30px 15px rgba(184, 39, 13, 1);

    }

}



@keyframes rotate-anim {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(380deg);

    }

}



.rotate-anim {

    animation-name: rotate-anim;

    animation-duration: 0.3s;

}

.aparecerIzq{
    animation-name: aparecerIzq;
    animation-fill-mode: forwards;
    animation-duration: 200ms;
}
@keyframes aparecerIzq {
    0% {
        transform: translate(-100%);
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translate(0%);
    }
}

.irse{
    animation-name: irse;
    animation-fill-mode: forwards;
    animation-duration: 200ms;
}
@keyframes irse {
    0% {
        opacity: 1;
        transform: translate(0%);
    }

    100% {
        transform: translate(-100%);
        opacity: 0;

    }
}