@charset "utf-8";
/* CSS Document */
* { padding: 0; box-sizing: border-box; font-family: 'corbel';}
@font-face { font-family: 'corbel'; src: url('../fonts/corbel.eot'); src: local(''), url('../fonts/corbel.woff') format('woff'), url('../fonts/corbel.ttf') format('truetype'), url('../fonts/corbel.svg') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'corbel-bold'; src: url('../fonts/corbel-bold.eot'); src: local(''), url('../fonts/corbel-bold.woff') format('woff'), url('../fonts/corbel-bold.ttf') format('truetype'), url('../fonts/corbel-bold.svg') format('svg'); font-weight: normal; font-style: normal; }

*, *::before, *::after {padding: 0; margin: 0; box-sizing: border-box}
:root {
    --color-body: #e2e2e2;
    --color-red: #EF4444;  
    --color-green: #059669;
    --color-blue: #049aad;
    --color-grey: #f5f5f5;
    --color-violet: #8e70c1;
    --color-orange: #f58646;
    --color-rose: #f35c86;
    --color-border: #ccc;
    --color-grey-light: #f5f5f5;
    --color-white: #fff;
    --color-black: #222;

    --color-red-light: #FDDBD1;  
    --color-green-light: #CCFDED;
    --color-blue-light: #CFFAFA;
    --color-grey-light: #f5f5f5;
    --color-violet-light: #fff0ff;
    --color-orange-light: #FEF1D5;

    --color-menu-hover:  #666;
    --color-menu-active:  #888;
    --color-menu-background:  #333;

}




body {font-family: "lato", sans-serif; overflow-x: hidden; background-color: var(--color-body); min-height: 100vh; display: flex; position: relative; font-size: 16px}
a {text-decoration: none; color:var(--main-color-dark)}
a:hover {color:var(--text-color-hover)}
ul {list-style: none}
/* solo para LOGIN */
.caja-nubes {position: relative; width: 100%; height: auto; display: inline-block; text-align: center}
.caja-nubes img {width: 100%; height: auto}
.caja-nubes-logo {position: absolute; top: 10%; left: 50%; transform: translate(-50%, -50%)}
.logo-nubes {height:80px; width:auto}
.cajaLogin {position: absolute; width: 270px; border: 1px solid var(--color-white); border-radius: 6px; text-align: center; left: 50%; transform: translate(-50%, -50%); top: 40%; background-color: rgba(255, 255, 255,.5)}
.inputUser {padding: 10px; font-size: 18px; text-align: center; background-color: var(--color-white); border: 1px solid var(--color-border); margin:10px}
.login-boton {padding: 30px 40px 30px 40px; font-weight: bold; background-color: var(--color-white); color: var(--color-red); border: 1px solid var(--color-red); margin: 10px; border-radius: 6px}
.login-boton:hover {padding: 30px 40px 30px 40px; font-weight: bold; background-color: var(--color-red); color:var(--color-white); border: 1px solid var(--color-red); margin: 10px; border-radius: 6px}
/* end login */
#lateral {z-index: 9000; display:block}
.mobile {display: none;}



.division {border-bottom: 2px solid #cc2121; width: 30%; margin:auto}
.fotoPrograma {width: 47%; margin: .5%; text-align: left; float: left;}
.textoPrograma {width: 47%; margin: .5%; text-align: left; float: left;}

.fotoPrograma2 {width: 30%; margin: .5%; text-align: left; float: left;}
.textoPrograma2 {width: 65%; margin: .5%; text-align: left; float: left;}

/* NEW MENÚ */
header {position:fixed; top:0; width:100%; height:80px; background:var(--color-black); z-index:12; box-shadow: 0px 0px 5px 3px rgba(0,0,0,.3); display: flex; justify-content: flex-end}
.logoempresa {position:absolute; right: 40px; border:0px; height: 40px; width: auto; float:left; top: 20px}
.logo {height:100%; width:auto}
.logoempresaLeft {position:absolute; left: 40px; border:0px; height: 40px; width: auto; float:left; top: 20px}
.logoLeft {height:100%; width:auto}
nav {float:right; margin-top: 0px}
nav ul {margin-right: 5px; margin-top:50px}
#menuButton {position: absolute; top: 50px; right: 20px; z-index: 10; width: 25px; height: auto; background-color: transparent}
.side-menu {position: fixed; top: 80px; right: 0; width: 20%; height: 100%; background-color: var(--color-menu-background); overflow-y: auto; transition: left 0.3s; color: var(--color-white)}
.side-menu ul {list-style-type: none; margin: 0; padding: 0}
.side-menu ul li:hover {background-color:  var(--color-menu-hover)}
.side-menu ul li {padding: 25px; border-bottom: 1px solid  var(--color-menu-active); color: var(--color-white); font-size: 18px}
.side-menu ul li a {color: var(--color-white); text-decoration: none}
.side-icono-menu {width: 15px; height: auto; margin-right: 10px}
main {position: absolute; flex: 1; padding: 0%; color:  var(--color-black); display: flex; flex-direction: column; margin-top:4rem; left: 0; transition: 0.3s; width: 80%; }
main h1 {font-size: 20px; font-weight: 400; color: var(--main-color-dark)}
main h2 {font-size: 18px; font-weight: 400}
main {font-size: 16px}
main .copyright {margin-top: auto; font-size: 12px}
main .copyright span {color: var(--main-color); font-weight: 500; cursor: pointer}

/* Este estilo empuja el bloque de enlaces al fondo */
.policy-links { margin-top: 80%; text-align: right;  color: #999;  font-size: 0.9em;}
.policy-links a { color: inherit; text-decoration: none; }

.policy-links a:hover {text-decoration: underline;}

/* END NEW MENÚ */

main h1 {	color: #404040; font-size: 30px; margin: 60px 10px 10px 0px; font-weight: 300; font-style: normal; line-height: 110%; text-align:center; margin-left: 10%; margin-right: 10%; }
main h2 { color: #404040; font-size: 18px; font-weight: 400; font-style: normal; line-height: 110%; text-align: center; margin-left: 10%; margin-right: 10%; }
main h3 { color: #555; font-size: 16px; line-height: 110%; margin-top: 15px; margin-bottom: 10px; font-weight: 400; text-align:center; margin-left: 10%; margin-right: 10%; }
main h4 { color: #555; font-size: 16px; line-height: 150%; margin-top: 15px; margin-bottom: 15px; font-weight: 400; font-style: normal; text-align:center; margin-left: 10%; margin-right: 10%;}
main h5 { color: #555; font-size: 16px; text-align: center; line-height: 150%; margin-top: 0px; margin-bottom: 0px; font-weight: 400; font-style: normal; padding: 0px 0px 0px 20px; margin-left: 10%; margin-right: 10%;}
main h6 { color: #373126; font-size: x-small; text-align: right; font-weight: 400; font-style: normal;margin-left: 10%; margin-right: 10%; }
main p { color: #555; font-size: 16px; line-height: 150%; margin-top: 15px; margin-bottom: 15px; font-weight: 400; font-style: normal; margin-left: 10%; margin-right: 10%;}
main ul { color: #769D00; font-size: 16px; text-align: left; line-height: 150%; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-left: 10%; margin-right: 10%;}
main ol { color: #769D00; font-size: 16px; text-align: left; line-height: 150%; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-left: 10%; margin-right: 10%;}
main li { margin-left: 10px; padding: 0px; color: #444; font-size: 16px; text-align: left; line-height: 150%; white-space: normal; list-style: disc; list-style-position: inside;}
main a:link, #principal a:visited, #principal a:active { color: #CC2121; text-decoration: none; text-align: right; padding: 0px;}
main a:hover { color: #000; text-decoration: underline !important; }

.button, .button:visited, .button:active {display: inline-block; padding: 10px !important; text-decoration: none; border-top: 0px; border-left: 0px; border-right: 0px; position: relative; cursor:pointer; transition: all 0.1s ease; border-bottom: 1px solid rgba(0,0,0,0.25); top: 1px; }
.uno.button, .uno.button:visited {font-size: 16px; font-weight: bold; background-color: #fff; color:#CC2121; border: 1px solid #CC2121}
.uno.button:hover {font-weight: bold; background-color: #CC2121; color:#fff !important; border: 1px solid #CC2121; text-decoration: none}
.petit.button, .petit.button:visited {font-size: 12px; font-weight: bold; background-color: #CC2121; color:#ffffff; text-decoration: none}
.petit.button:hover {font-size: 12px; font-weight: bold; background-color: rgba(0,130,251,1.00); text-decoration: none}
.dos.button, .dos.button:visited {font-size: 16px; font-weight: bold; background-color: #fff; color:#CC2121; border: 1px solid #CC2121; text-decoration: none}
.dos.button:hover {font-size: 16px; font-weight: bold; background-color: #CC2121; color: #fff !important; border: 1px solid #CC2121; text-decoration: none}
.tres.button, .tres.button:visited {font-weight: bold; background-color: #CC2121 !important; color:#fff !important; border: 1px solid #CC2121; text-decoration: none}
.tres.button:hover {font-weight: bold; background-color: #fff !important; color:#CC2121 !important; border: 1px solid #CC2121; text-decoration: none}
.boton_grande {padding: 30px 40px 30px 40px !important}
.boton_grande:hover {padding: 30px 40px 30px 40px !important}
.boton_petit {padding: 4px 4px 4px 4px !important}
.boton_petit:hover {padding: 4px 4px 4px 4px !important}
.botonEnviar {width: 96px !important; padding: 10px !important; border: 0px solid #fff !important;}

.contenedor {width: 100%; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: stretch}
#cajabusqueda {background-color:var(--color-white); padding:1%; width:100%; border-radius: 6px; margin-bottom: 20px; border-left: 4px solid var(--color-lateral)}
.cajaTransparente {padding: 1%; width:97%; margin: 15px; float: left}
.caja {padding: 10px; width:98%; border: 1px solid #ccc; background-color: #fff; margin: 1%; float: left; border-radius: 6px}
.caja:hover {box-shadow: 0px 0px 5px 3px rgba(100,100,100,.3)}
.no-hover:hover {box-shadow: none;}
.cajaImagen {padding: .1%; width:33%; float: left}
.cajaImagen img {width: 100%; height: auto}
.cajaTexto {padding: 1%; width:63%; margin: 10px; float: left}
.cajaTexto h2 {font-size: 20px; text-align:left; font-weight: normal; font-style: normal}
.cajaTexto h3 {font-size: 16px; text-align:left; font-weight: normal; font-style: normal}
.cajaTexto p {font-size: 16px; text-align:left; font-weight: normal; font-style: normal}
.cajaTexto ul {font-size: 16px; margin-top: 0px; margin-bottom: 0px; text-align:left; font-weight: normal; font-style: normal}
.cajaTexto li {font-size: 16px; margin-top: 0px; margin-bottom: 0px; text-align:left; font-weight: normal; font-style: normal}
.cajaTexto a:link, .cajaTexto a:visited, .cajaTexto a:active {color: #F59D17; text-decoration: none; text-align: right; padding: 0px}
.cajaTexto a:hover {color: #000; text-decoration: none !important}
.cajaTexto img {width: 100%; height: auto}

.cajita {padding: .5%; width:32%; border: 1px solid #ccc; background-color: #fff; margin: 4px; float: left; border-radius: 6px}
.cajita:hover {box-shadow: 0px 0px 5px 3px rgba(100,100,100,.3)}
.cajita h3 {font-size: 16px; text-align:left; font-weight: normal; font-style: normal}
.cajita p {font-size: 16px; text-align:left; font-weight: normal; font-style: normal}
.cajita a:link, .cajita a:visited, .cajita a:active {color: #F59D17; text-decoration: none; text-align: right; padding: 0px}
.cajita a:hover {color: #000; text-decoration: none !important}
.cajitaImagen {position: relative; height:150px; width:100%; overflow:hidden; float:left} 
.cajitaImagen img {width:100%; height:auto; border: 0px;} 
.cajitaTexto {padding: .2%; width:100%; margin: 10px; float:left}
.botoncito {position: absolute; top: 5px; left: 5px; z-index: 1000;}

.cajitaSubirImagen {float:left; text-align:center; margin: 10px; border: 1px solid #ccc; padding: 10px; border-radius: 6px; background-color: #fafafa;}

.imagenok {padding-bottom: 10px; margin: 3px; float:none}
.imagenPetita {padding: 1%; width: 10%; float: left; max-width: 100px;}

.campoFormulario {padding: 1%; width:200px; float: left; margin-right: 10px;}

.cajainterna {background-color:var(--color-white); padding:1%; border-radius: 6px; margin: 20px 0; border:1px solid  var(--color-border)}

table {border: 1px solid  var(--color-border); border-collapse: collapse; padding: 1%; width: 100%}
.tablapetita {width: 50%}
th {border-bottom: 2px solid var(--main-color-dark); padding:  5px 10px; vertical-align: top; font-weight: bold; background-color: var(--color-th); text-align: left}
td {border-top: 1px solid  var(--color-border); border-bottom: 1px solid  var(--color-border); padding: 8px 16px; vertical-align: top}
.filaColor {background-color: var(--color-grey-light)}
tr:hover, .filaColor:hover {background-color: var(--color-blue-light) !important}

.tablasinbordes {border: 0px solid  var(--color-border); width: 98%}
.tablasinbordes td {border: 0px solid  var(--color-border); border-bottom: 0px solid  var(--color-border); padding: 1%}
.tablapetita {width: 50%}
.titulo {font-weight: bold}
.tercio {width: 33%}
.medio {width: 50%}
.float {float: left}
.derecha {float: right}
.fotolistado {max-width:40px; max-height:40px; width:auto; height:auto}
.fotomarcas {max-width:120px; max-height:120px; width:auto; height:auto}
.grande {padding: 7px !important; height: 35px !important}
.numero {text-align: right; min-width: 80px}
.centrado {text-align: center}
.casillaform {border: 1px solid var(--color-border); background-color: var(--color-white); padding:4px; width:95%; border-radius: 3px; height: 25px}
.casillaformpetita {border: 1px solid var(--color-border); background-color: var(--color-grey-light); padding:4px; width:80px; border-radius: 3px; height: 25px; text-align: right}
.casillaformmediana {border: 1px solid var(--color-border); background-color: var(--color-grey-light); padding:4px; width:50%; border-radius: 3px; height: 25px}
.checkbox {height: 25px !important}
select {border: 1px solid var(--color-border); background-color: var(--color-white); padding:10px; border-radius: 3px; height: 30px; font-size: 16px}
.textmetas{height: 200px !important; width: 100%}
.textcontenido{height: 600px !important; width: 100% !important}
.textarea {visibility: visible !important}
textarea {width: 95%; height: 150px}
.fotoProducto {max-width: 300px; height: auto; width: 100%}
.cajaSubirFoto {border: 1px solid  var(--color-border); width: 100%; padding: 10px; margin-bottom: 30px; border-radius: 6px; width: 22%; float: left; margin-left: 1%; background-color: var(--color-white)}
.fotossubir {max-width:180px; max-height:160px; height:auto}


.button, .button:visited, .button:active, input.button, input.button:visited, input.button:active {display: inline-block; padding: 3px 15px !important; text-decoration: none; border: 0px; position: relative; cursor:pointer; transition: all 0.1s ease; border-bottom: 1px solid rgba(0,0,0,0.25); top: 1px; border-radius: 5px; font-size: 14px; border: 1px solid #ccc}
.green, .green:visited, .green:active {color: #fff !important; background-color:#8cc45b; border: 1px solid #8cc45b }
.green:hover {color: #8cc45b !important; background-color: #fff !important; border: 1px solid #8cc45b; text-decoration: none !important}
.blue, .blue:visited, .blue:active {color: #fff !important; background-color:#4d66ae; }
.blue:hover {color: #4d66ae !important; background-color: #fff !important; border: 1px solid #4d66ae; text-decoration: none !important}
.orange, .orange:visited, .orange:active {color: #fff !important; background-color:#f9c319; }
.orange:hover {color: #fff !important; background-color: #8cc45b !important; border: 1px solid #8cc45b; text-decoration: none !important}
.grey, .grey:visited, .grey:active {color: #fff !important; background-color:#9C9C9A; }
.grey:hover {color: #fff !important; background-color: #666 !important; border: 1px solid #f9c319; text-decoration: none !important}
.violet, .violet:visited, .violet:active {color: #fff !important; background-color:#8a2be2; }
.violet:hover {color: #8a2be2 !important; background-color: #fff !important; border: 1px solid #8a2be2; text-decoration: none !important}
.red, .red:visited, .red:active {color: #fff !important; background-color:#EF4444; border: 1px solid #EF4444}
.red:hover {color: #EF4444 !important; background-color:#fff !important; border: 1px solid #EF4444; text-decoration: none !important}
.purple, .purple:visited, .purple:active {color: #fff !important; background-color:#E22BBD; }
.purple:hover {color: #E22BC3 !important; background-color: #fff !important; border: 1px solid #E22BBD; text-decoration: none !important}
.grande, .grande:hover, .grande:active, .grande:visited {padding: 12px !important; height: 45px !important}
.derecha {float: right}
.anchofijo {min-width: 200px !important; text-align: center;}
select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: white; border: 1px solid #ccc; padding: 5px; border-radius: 4px; width: 100%; box-sizing: border-box; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"%3E%3Cpath fill="black" d="M0 0l5 5 5-5H0z"/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px; cursor: pointer; }

/* COLORES */
.color-red-light {background-color: var(--color-red-light) !important}  
.color-green-light {background-color: var(--color-green-light) !important}
.color-blue-light {background-color: var(--color-blue-light) !important}
.color-grey-light {background-color: var(--color-grey-light) !important}
.color-violet-light {background-color: var(--color-violet-light) !important}
.color-orange-light {background-color: var(--color-orange-light) !important}

.color-green {color: var(--color-green) !important}
.color-red {color: var(--color-red) !important}
.color-blue {color: var(--color-blue) !important}
.color-grey {color: var(--color-grey) !important}
.color-violet {color: var(--color-violet) !important}
.color-orange {color: var(--color-orange) !important}
.color-rose {color: var(--color-rose) !important}

.cajaSuperInfo {width: 10%; height: auto; min-height: 130px; border: 1px solid var(--color-border); float:left; margin-left: 1%; display:inline-grid; vertical-align: middle; text-align: center; background-color:  var(--color-grey-light); padding: 5px; color: var(--color-black)}
.cajaSuperInfo p {font-size:30px}
.limpiar {clear:both}
.ofifacil {background-color: var(--color-green)!important; border-color: var(--color-green)}
.ofifacil:hover {background-color: var(--color-white) !important}

.icono {width: 16px; height: auto; filter: grayscale(100%); margin-right: 2px}
.icono:hover {filter: grayscale(0%)}
.iconito {width: 12px; height: auto; margin-right: 10px}
.iconopetit {width: 12px; height: auto}
.iconogrande {width: 20px; height: auto; filter: grayscale(100%); margin-right: 10px}
.iconogrande:hover {filter: grayscale(0%)}
.iconoenorme {width: 40px; height: auto; margin-right: 10px; vertical-align: middle}
.iconoViviendas {width: 20px; height: auto; filter: grayscale(100%); margin-right: 10px}

/* NUEVOS ESTILOS */

#barritaloca {position:fixed; left:0px; right:0px; bottom:0px; width:100%; min-height:80px; z-index: 99999; background:var(--color-black); color:#fafafa; display: block; font-size: 14px} 
#barrita_buscar {visibility: hidden; position: fixed; width: 600px; margin: auto; height: 60px;}
.barrita_buscar_input {font-size:16px; width: 60%; padding:1px; border-radius:4px; background-color:#cccccc;} 
.barritaloca_texto {position: relative; width:100%; text-align:center; float: left; top: 10px; padding-left: 1%;}
.barritaloca_texto a {color: #fafafa;}
.barritaloca_boton { position: relative; width:10%; margin-left:1%; text-align:center; float: left; top: 10px;}
.barritaloca_ok { position: relative; padding:20px; text-decoration:none; background:#CC2121; color:#fff; top:15px; cursor:pointer;}
.barritaloca_ok:hover { background:#ffffff; color:#cc2121; text-decoration: none !important; cursor:pointer;}
.barritaloca_info {padding-left:5px; text-decoration:none; color:#ffffff;}

.formulario {background-color: #ffffff;}
.campo_formulario { max-width: 600px; width:100%; background-color: rgba(250,250,250,1); color: #444;  border: 1px #999 solid; padding: 6px; border-radius: 3px ;  }
.campo_formulario_buscar { width:60%; background-color: rgba(255,255,255,1); color: #444;  border: 1px #999 solid; padding: 6px; border-radius: 3px;  }
#formulario_contacto { color: #000; font-size: 16px; margin-top: 0px; margin-left: 15px; font-weight: normal; font-style: normal; }
#formulario_contacto a:link, #formulario_contacto a:visited, #formulario_contacto a:active { color: #CC2121; text-decoration: none; text-align: center; }
#formulario_contacto a:hover { text-decoration: underline; color: #fff; }
#formulario_contacto table { width:100%; }
#formulario_contacto td {font-size:16px; vertical-align: top; }
#formulario_contacto input {background-color: #ffffff; width:100%; font-size: 16px; padding: 4px; border: 1px solid #eee !important;}
#formulario_contacto textarea {color: #222; border: 1px solid #eee; background-color: #ffffff; width:100%; height:300px; font-size: 16px; font-weight: normal; font-style: normal; font-family: 'corbel', Verdana, sans-serif; }


@media only screen and (max-width: 768px) {
    .logoempresa  {right:10px; height:20px; top:15px}
    .logoempresaLeft {left:10px; height:20px; top:15px}
    #lateral {display:none}
    main {width: 100%}
    .desktop {display: none;}
    .mobile {display: block;}
.side-menu {width: 80% !important}
.fotoPrograma {width: 100%; float: none;}
.textoPrograma {width: 100%; float: none;}
.fotoPrograma2 {width: 100%; float: none;}
.textoPrograma2 {width: 100%; float: none;}

#barritaloca {position:fixed; left:0px; right:0px; bottom:0px; width:100%; min-height:90px; z-index: 99999; background:var(--color-black); color:#fafafa; display: block; font-size: 10px; } 
}




/*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}