@charset "UTF-8";

#el_video1{
	margin-top:6em;
}
.movergirarinicio
{
    transform: translate(300px, -650px) rotate(1800deg);
    -webkit-transform: translate(300px, -650px) rotate(1800deg);
    -o-transform: translate(300px, -650px) rotate(1800deg);
    -moz-transform: translate(3200px, -650px) rotate(1800deg);
    transition: transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -moz-transition: -webkit-transform 0.5s linear;
    -o-transition: -webkit-transform 0.5s linear;
}
.movergirarfin
{
    transform: translate(2350px, -750px) rotate(359deg);
    -webkit-transform: translate(2350px, -750px) rotate(359deg);
    -o-transform: translate(2350px, -750px) rotate(359deg);
    -moz-transform: translate(2350px, -750px) rotate(359deg);
    transition: transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -moz-transition: -webkit-transform 0.5s linear;
    -o-transition: -webkit-transform 0.5s linear;
}


.claseparadesescalar
{
    transform: scale(0.0) translate(1350px, -50px);
    -webkit-transform: scale(0.0) translate(1350px, -50px);
    -moz-transform: scale(0.0) translate(1350px, -50px);
    -o-transform: scale(0.0) translate(1350px, -50px);
    transition: transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -moz-transition: -webkit-transform 0.5s linear;
    -o-transition: -webkit-transform 0.5s linear;
}

.mover_escalar
{
    transform: scale(1.0) translate(1350px, -50px);
    -webkit-transform: scale(1.0) translate(1350px, -50px);
    -moz-transform: scale(1.0) translate(1350px, -50px);
    -o-transform: scale(1.0) translate(1350px, -50px);
    transition: transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -moz-transition: -webkit-transform 0.5s linear;
    -o-transition: -webkit-transform 0.5s linear;
}
.mover_desescalar
{
    transform: scale(0.0) translate(1350px, -50px);
    -webkit-transform: scale(0.0) translate(1350px, -50px);
    -moz-transform: scale(0.0) translate(1350px, -50px);
    -o-transform: scale(0.0) translate(1350px, -50px);
    transition: transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -moz-transition: -webkit-transform 0.5s linear;
    -o-transition: -webkit-transform 0.5s linear;
}






/*EMPIEZA TODO EL CSS PARA EL GIRO Y DESPLAZAMIENTO*/
.girar{
	-ms-transition: desplazar 0.5s ease-in;
	-moz-transition: desplazar 0.5s ease-in;
	-o-transition: desplazar 0.5s ease-in;
	-webkit-transition: desplazar 0.5s ease-in;
	transition: desplazar 0.5s ease-in;
}
.girar:hover{
transform: rotate(-5deg) ;
-ms-transform: rotate(-5deg) ; /* IE 9 */
-moz-transform: rotate(-5deg)  ;/* Safari and Chrome */	
-o-transform: rotate(-5deg) ;
-webkit-transform: rotate(-5deg) ;
	
}

.bajar{
	-ms-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-o-transition: 0.2s ease-out;
	-webkit-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
.bajar:hover{
transform: translate(0px,5px);
-ms-transform: translate(0px,5px); /* IE 9 */
-moz-transform: translate(0px,5px);/* Safari and Chrome */	
-o-transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
	
}

/*EMPIEZA TODO EL CSS PARA SUBIR*/
.subir{
	-ms-transition: 0.3s ease-out;
	-moz-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	-webkit-transition: 0.3s ease-out;
	transition: 0.3s ease-out;
}
.subir:hover{
transform: translate(0px,-35px);
-ms-transform: translate(0px,-35px); /* IE 9 */
-moz-transform: translate(0px,-35px);/* Safari and Chrome */	
-o-transform: translate(0px,-35px);
-webkit-transform: translate(0px,-35px);
	
}

.moverder{
	-ms-transition: 0.3s ease-out;
	-moz-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	-webkit-transition: 0.3s ease-out;
	transition: 0.3s ease-out;
}
.moverder:hover{
transform: translate(10px,0px);
-ms-transform: translate(10px,0px); /* IE 9 */
-moz-transform: translate(10px,0px);/* Safari and Chrome */	
-o-transform: translate(10px,0px);
-webkit-transform: translate(10px,0px);
	
}

.moverizq{
	-ms-transition: 0.3s ease-out;
	-moz-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	-webkit-transition: 0.3s ease-out;
	transition: 0.3s ease-out;
}
.moverizq:hover{
transform: translate(-10px,0px);
-ms-transform: translate(-10px,0px); /* IE 9 */
-moz-transform: translate(-10px,0px);/* Safari and Chrome */	
-o-transform: translate(-10px,0px);
-webkit-transform: translate(-10px,0px);
	
}

.transparente{
	opacity: 100;
	-ms-transition: 0.5s ease-out;
	-moz-transition: 0.5s ease-out;
	-o-transition: 0.5s ease-out;
	-webkit-transition: 0.5s ease-out;
	transition: 0.5s ease-out;
}
.transparente:hover {
	z-index:1;
	filter:alpha(opacity=50);
	-moz-opacity:.50;
	opacity:.50;
}






/* EFECTO LADO A LADO */

.lado-lado:hover {
-webkit-animation:wobble 1s alternate ;
}

@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}





.zoomformin {
-webkit-animation:zoomInUp 1s alternate ;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}





/* EFECTO HACE MAS ANCHO Y REGRESA */

.ancho:hover {
-webkit-animation:rubberBand 1s alternate ;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}













