@charset "utf-8";
/*ANIMACIONES MEJORADAS */

/* MOVE - Mueve el elemento desde un offset (200px,200px) hasta su posición original */
#animate {position: absolute; top: 100px; left: 30px; width: 100px; height: 100px; -webkit-animation: move 3s ease forwards; animation: move 3s ease forwards}
@-webkit-keyframes move { 0% {-webkit-transform: translate(200px, 200px); transform: translate(200px, 200px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0)}}
@keyframes move {0% { -webkit-transform: translate(200px, 200px); transform: translate(200px, 200px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0)}}
  
/* ROTATE2 - Rota el elemento desde -45deg hasta 0deg  */
#animate2 {position: absolute; top: 100px; left: 30px; width: 100px; height: 100px; -webkit-animation: rotate2 4s ease forwards; animation: rotate2 4s ease forwards}
@-webkit-keyframes rotate2 {0% {-webkit-transform: rotate(-45deg); transform: rotate(-45deg)} 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg)}}
@keyframes rotate2 {0% {-webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg)}}

/* ROTATE3 - Desplaza el elemento desde (-50px, -200px) hasta su posición final */
#animate3 {position: absolute; top: 80px; left: 300px; width: 100px; height: 100px; -webkit-animation: rotate3 3s ease forwards; animation: rotate3 3s ease forwards}
@-webkit-keyframes rotate3 {0% {-webkit-transform: translate(-50px, -200px); transform: translate(-50px, -200px)} 100% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}}      
@keyframes rotate3 {0% {-webkit-transform: translate(-50px, -200px); transform: translate(-50px, -200px);} 100% {-webkit-transform: translate(0, 0); transform: translate(0, 0)}}

/* ROTATE4 - Rota el elemento desde -30deg hasta 0deg */
#animate_movil {position: absolute; top: 60px; left: 0; width: 100px; height: 100px; -webkit-animation: rotate4 4s ease forwards; animation: rotate4 4s ease forwards}
@-webkit-keyframes rotate4 {0% {-webkit-transform: rotate(-30deg); transform: rotate(-30deg)} 100% {-webkit-transform: rotate(0deg); transform: rotate(0deg)}}    
@keyframes rotate4 {0% {-webkit-transform: rotate(-30deg); transform: rotate(-30deg)} 100% {-webkit-transform: rotate(0deg); transform: rotate(0deg)}}    

/* Ajuste para imagen dentro de #animate_movil */
#animate_movil img {width: 250px; height: auto; display: block}

/*Animaciones de entrada (Fade In & Slide) */

/* Reglas generales para las animaciones de entrada */
.fadeInUp, .fadeInDown, .fadeInLeft, .fadeInLeft2, .fadeInRight { -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; animation-duration: 1s}

/* fadeInUp - Aparece el elemento aumentando su opacidad, desplazándose desde abajo */
@-webkit-keyframes fadeInUp {from { opacity: 0; -webkit-transform: translate3d(0, 80px, 0); transform: translate3d(0, 80px, 0)} to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)}}
@keyframes fadeInUp {from {opacity: 0; -webkit-transform: translate3d(0, 80px, 0); transform: translate3d(0, 80px, 0)} to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)}}
.fadeInUp {-webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-delay: .5s; animation-delay: .5s}

/* fadeInDown - Aparece el elemento aumentando su opacidad, desplazándose desde arriba */
@-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translateY(-80px); transform: translateY(-80px)} to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }}
@keyframes fadeInDown { from { opacity: 0; -webkit-transform: translateY(-80px); transform: translateY(-80px)} to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }}
.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-delay: .5s; animation-delay: .5s}

/* fadeInLeft - Aparece el elemento aumentando su opacidad, desplazándose desde la izquierda */
@-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translateX(-100px); transform: translateX(-100px)} to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0)}}
@keyframes fadeInLeft {from { opacity: 0; -webkit-transform: translateX(-100px); transform: translateX(-100px)} to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0)}}
.fadeInLeft {-webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-delay: .5s; animation-delay: .5s}

/* fadeInRight - Aparece el elemento aumentando su opacidad, desplazándose desde la derecha */
@-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translateX(100px); transform: translateX(100px)} to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0)}}
@keyframes fadeInRight {from { opacity: 0; -webkit-transform: translateX(100px); transform: translateX(100px)} to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0)}}
.fadeInRight {-webkit-animation-name: fadeInRight; animation-name: fadeInRight; -webkit-animation-delay: .5s; animation-delay: .5s}

/* Variante con mayor retardo */
.fadeInLeft2 {-webkit-animation-name: fadeInLeft;animation-name: fadeInLeft; -webkit-animation-delay: 1s;animation-delay: 1s}

/* Bounce */
@-webkit-keyframes bounce {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0); transform: translateY(0)} 40% {-webkit-transform: translateY(-30px); transform: translateY(-30px)} 60% {-webkit-transform: translateY(-15px); transform: translateY(-15px)}}
@keyframes bounce {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);transform: translateY(0); } 40% {-webkit-transform: translateY(-30px); transform: translateY(-30px)} 60% {-webkit-transform: translateY(-15px); transform: translateY(-15px)}}

/* Scale (Zoom In) */
@-webkit-keyframes zoomIn {from {opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3)} 50% {opacity: 1} to {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}}
@keyframes zoomIn {from {opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3)} 50% {opacity: 1;} to {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}}
.elemento-zoom {-webkit-animation: zoomIn 1s ease forwards; animation: zoomIn 1s ease forwards}

/* Flip */
@-webkit-keyframes flipInY {0% {-webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0;} 40% {-webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg)} 70% {-webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg)} 100% {-webkit-transform: perspective(400px) rotateY(0deg);transform: perspective(400px) rotateY(0deg); opacity: 1}}
@keyframes flipInY {0% {-webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0} 40% {-webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg)} 70% {-webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg)} 100% {-webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1}}
.elemento-flip {-webkit-animation: flipInY 1s ease both; animation: flipInY 1s ease both}