@keyframes moverderecha {
    from {
        opacity: 0;
        transform: translateX(-400px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes moverizquierda {
    from {
        opacity: 0;
        transform: translateX(400px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes arriba {
    from {
        opacity: 0;
        transform: translateY(400px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes abajo {
    from {
        opacity: 0;
        transform: translateY(-200px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes aparecer {
    from {
        opacity: 0;
        transform: scale(.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translate(-700px);
    }

    50% {
        opacity: 0;
        transform: translate(-350px);
    }
    100% {
        opacity: 1;
        transform: translate(0px);
    }
}

@keyframes desplegar {
    0% {
        opacity:0;
        height: 0;
    }
    80% {
        opacity: .8;
        height: 100px;
    }
    100% {
        opacity: 1;
        height: 180px;
    }
}

.ver_selector {
    animation-name: desplegar;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.mover_der {
    animation-name: moverderecha;
    animation-delay: .5s;
    animation-duration: 1.5s;
    animation-fill-mode: both;
}

.mover_der_rapido {
    animation-name: moverderecha;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.mover_izq {
    animation-name: moverizquierda;
    animation-delay: .5s;
    animation-duration: 1.5s;
    animation-fill-mode: both;
}

.mover_izq_rapido {
    animation-name: moverizquierda;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.subir {
    animation-name: arriba;
    animation-delay: 1s;
    animation-duration: 1s;
    animation-fill-mode: both;
}


.bajar {
    animation-name: abajo;
    animation-delay: 1s;
    animation-duration: 1s;
    animation-fill-mode: both;

}

.subir_rapido{
    animation-name: subir;
    animation-duration: 1s;
    animation-fill-mode: both;
}


.aparecer {
    animation-name: aparecer;
    animation-duration: .5s ;
    animation-fill-mode: both;
}

.mover {
    animation: fadeIn .3s ease-out;
}

.vermodal {
    animation-name: aparecer;
    animation-duration: .5s;
    animation-fill-mode: both;
}


/* SUBIR CON REBOTE */

@keyframes arriba {
    0% {
        opacity: 0;
        transform: translateY(200px);
    }
    60% {
        opacity: 1;
        transform: translateY(-10px);
    }
    100% {
        transform:translateY(0px);
    }
}

.subir_rebote{
    animation-name: arriba;
    animation-duration: 1s;
    animation-fill-mode: both;
}


/* SUBIR CON REBOTE */

@keyframes abajo_rebote {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }
    15% {
        opacity: 1;
        transform: translateY(10px);
    }
    30% {
        transform:translateY(0px);
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.bajar_rebote {
    animation-name: abajo_rebote;
    animation-duration: 8s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}
.bajar_rebote2 {
    animation-name: abajo_rebote;
    animation-duration: 8s;
    animation-delay: .2s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

/* APARECER */

@keyframes aparece {
    0% {
        opacity: 0;
        transform: scale(.5);
    }

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

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

@keyframes derecha {
    0% {
        opacity: 0;
        right: -400px;
    }
    100% {
        opacity: 1;
        right:40px;
    }
}

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

@keyframes over {
    0% {
        opacity: 0;
        right: -50px;
    }
    60% {
        opacity: 1;
        right:10px;
    }
    100% {
        opacity: 0;
        right: 0;
    }
}
.mouse {
    animation-name: over;
    animation-duration: 3s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

@keyframes swip {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    25% {
        opacity: 1;
    }
    50% {
        transform: translateX(100px);
        opacity: 0;
    }
    75%{
        opacity: 1;
    }


    100% {
        opacity: 0;
        transform: translateX(-100px);
    }
}
.mouse2 {
    animation-name: swip;
    animation-duration: 5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}


@keyframes avanza_muestra {
    0% {
        opacity: 0;
        transform: translateX(1200px);
    }
    60% {
        opacity: 1;
        transform: translateX(-20px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes retrocede_muestra {
    0% {
        opacity: 0;
        transform: translateX(-1200px);
    }
    60% {
        opacity: 1;
        transform: translateX(20px);
    }
    100% {
        transform: translateX(0);
    }
}

.avanza {
    animation-name: avanza_muestra;
    animation-duration: 1.5s;
    animation-fill-mode: both;
}

.retrocede {
    animation-name: retrocede_muestra;
    animation-duration: 1.5s;
    animation-fill-mode: both;

}



@keyframes desplegar {
    0% {
        opacity:0;
        height: 0;
    }
    80% {
        opacity: .8;
        height: 100px;
    }
    100% {
        opacity: 1;
        height: 180px;
    }
}

.ver_selector {
    animation-name: desplegar;
    animation-duration: 1s;
    animation-fill-mode: both;
}