@keyframes raton {
    0% {
        transform: translateY(0px);
    }
    30% {
        transform: translateY(0px);
    }

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

@keyframes rueda {
    0% {
        transform: translateY(0px);
        opacity: .5;
    }
    30% {
        transform: translateY(0px);
        opacity: 1;
    }

    60% {
        transform: translateY(20px);
        opacity: 0;

    }
    100% {
        transform:translateY(0px);
        opacity: 0;
        transform: scale(.5);

    }
}

.mover_raton{
    animation-name: raton;
    animation-duration: 2.5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

.mover_rueda{
    animation-name: rueda;
    animation-duration: 2.5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}


@keyframes mostrar {
    0% {
        width: 0;
        opacity: 0;
    }
    100% {
        opacity: 1;
        width:50%;

    }
}

@keyframes ocultar {
    0% {
        opacity: 1;
        width: 50%;

    }
    100% {
        width: 0;
        opacity: 0;
    }
}


.ver_menu {
    animation-name: mostrar;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.ocultar_menu {
    animation-name: ocultar;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes reducir {
    0% {
        width: 100%;
    }
    100% {
        width: 70%;
    }
}

@keyframes crecer {
    0% {
        width: 70%;
    }
    100% {
        width: 100%;
    }
}

.down {
    animation-name: reducir;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.up {
    animation-name: crecer;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes aparecer {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 100%;
    }
}

.ver_item {
    animation-name: aparecer;
    animation-delay: .5ms;
    animation-duration: 1s;
    animation-fill-mode: both;
}


@keyframes lateral {
    0% {
        transform: translatey(50px);
        opacity: 0;
    }
    100% {
        transform: translatey(0px);
        opacity: 1;
    }
}

.mover_leyenda {
    animation-name: lateral;
    animation-duration: 1s;
    animation-fill-mode: both;

}

@media only screen and (min-width:320px) and (max-width:1200px) {

    @keyframes reducir {
        0% {
            width: 100%;
        }
        100% {
            width: 40%;
        }
    }
    @keyframes crecer {
        0% {
            width: 40%;
        }
        100% {
            width: 100%;
        }
    }


}