.efecto-glitch {
  /*propiedades para hacer el efecto "responsivo"*/
  width:1300px; 
  height: auto;
	display: inline-block;
  /*Propiedades background css3 para que el fondo sea "responsivo"*/
	background: url(../imagenes/logo1.png);
  background-repeat: no-repeat;
	background-size: contain;
  /*Propiedad Animacion CSS*/
	-webkit-animation:
    /*Dos grupos de animaciones*/
    glitch 12s cubic-bezier(0.5, 0.2, 0.3, 1.0) ,
    glitchMotion 12s cubic-bezier(0.5, 0.2, 0.3, 1.0) ;
  animation:
    /*Dos grupos de animaciones*/
    glitch 12s cubic-bezier(0.5, 0.2, 0.3, 1.0) ,
    glitchMotion 12s cubic-bezier(0.5, 0.2, 0.3, 1.0) ; 
}
.efecto-glitch img {
  /*la imagen oculta es la que otorga una altura proporcional al div*/
  width: 100%; max-width:1300px; 
  height: auto;
  vertical-align: middle;
  opacity: 0;
}

.efecto-glitch2 { display:none;}
.efecto-glitch2 img {display:none;}

@media screen and (max-width:1320px){
.efecto-glitch { display:none;
}
.efecto-glitch img {display:none;}

.efecto-glitch2 {left:0; margin-left:0;top:0; margin-top:0;
  /*propiedades para hacer el efecto "responsivo"*/
  width: 100%;
  min-width: 100%;
  height: auto;
	display: block;
  vertical-align: middle;
  /*Propiedades background css3 para que el fondo sea "responsivo"*/
	background: url(../imagenes/logo1.png);
  background-repeat: no-repeat;
	background-size: contain;
  /*Propiedad Animacion CSS*/
	-webkit-animation:
    /*Dos grupos de animaciones*/
    glitch 12s cubic-bezier(0.5, 0.2, 0.3, 1.0) ,
    glitchMotion 12s cubic-bezier(0.5, 0.2, 0.3, 1.0) ;
  animation:
    /*Dos grupos de animaciones*/
    glitch 12s cubic-bezier(0.5, 0.2, 0.3, 1.0) ,
    glitchMotion 12s cubic-bezier(0.5, 0.2, 0.3, 1.0) ;
}
.efecto-glitch2 img {
  /*la imagen oculta es la que otorga una altura proporcional al div*/
  width: 100%; max-width:1300px; 
  height: auto;
  vertical-align: middle;
  opacity: 0;display: block;
}
	
}


@-webkit-keyframes glitch {
  
  /*Nosotros especificamos el intervalo de tiempo en el que queremos que las imagenes de fondo cambien.*/
  
  0% {
    background: url(../imagenes/logo1.png) no-repeat;
    background-size: contain;
  }
  1.5% {
    background: url(../imagenes/logo7.png) no-repeat;
    background-size: contain;
  }
  1.6% {
    background: url(../imagenes/logo4.png) no-repeat;
    background-size: contain;	
  }
  1.7%{
    background: url(../imagenes/logo6.png) no-repeat;
    background-size: contain;
  }
  1.8% {
    background: url(../imagenes/logo3.png) no-repeat;
    background-size: contain;
  }
  1.9% {
    background: url(../imagenes/logo7.png) no-repeat;
    background-size: contain;
  }
  2%{
    background: url(../imagenes/logo4.png) no-repeat;
    background-size: contain;
  }
  2.3%{
    background: url(../imagenes/logo6.png) no-repeat;
    background-size: contain;
  }
  2.5%{
    background: url(../imagenes/logo7.png) no-repeat;
    background-size: contain;
  }
  3%{
    background: url(../imagenes/logo3.png) no-repeat;
    background-size: contain;
  }
  5%{
    background: url(../imagenes/logo5.png) no-repeat;
    background-size: contain;
  }


  7.6% {
    background: url(../imagenes/logo1.png) no-repeat;
    background-size: contain;	
  }
  7.7%{
    background: url(../imagenes/logo7.png) no-repeat;
    background-size: contain;
  }
  7.8% {
    background: url(../imagenes/logo3.png) no-repeat;
    background-size: contain;
  }
  7.9% {
    background: url(../imagenes/logo4.png) no-repeat;
    background-size: contain;
  }
  8%{
    background: url(../imagenes/logo7.png) no-repeat;
    background-size: contain;
  }
  8.3%{
    background: url(../imagenes/logo5.png) no-repeat;
    background-size: contain;
  }
  8.5%{
    background: url(../imagenes/logo1.png) no-repeat;
    background-size: contain;
  }



  14.9% {
    background: url(../imagenes/logo1.png) no-repeat;
    background-size: contain;
  }
  15.5%{
    background: url(../imagenes/logo7.png) no-repeat;
    background-size: contain;
  }
  15.7% {
    background: url(../imagenes/logo1.png) no-repeat;
    background-size: contain;
  }



  40.9% {
    background: url(../imagenes/logo1.png) no-repeat;
    background-size: contain;
  }
  41.5%{
    background: url(../imagenes/logo4.png) no-repeat;
    background-size: contain;
  }
  42% {
    background: url(../imagenes/logo1.png) no-repeat;
    background-size: contain;
  }

  70.9% {
    background: url(../imagenes/logo1.png) no-repeat;
    background-size: contain;
  }
  71.5%{
    background: url(../imagenes/logo6.png) no-repeat;
    background-size: contain;
  }
  71.8%{
    background: url(../imagenes/logo7.png) no-repeat;
    background-size: contain;
  }
  72% {
    background: url(../imagenes/logo1.png) no-repeat;
    background-size: contain;
  }


}
@keyframes glitch {
  
  /*Nosotros especificamos el intervalo de tiempo en el que queremos que las imagenes de fondo cambien.*/
  
  0% {
    background: url(../imagenes/logo1.png) no-repeat;
    background-size: contain;
  }
  1.5% {
    background: url(../imagenes/logo7.png) no-repeat;
    background-size: contain;
  }
  1.6% {
    background: url(../imagenes/logo4.png) no-repeat;
    background-size: contain;	
  }
  1.7%{
    background: url(../imagenes/logo6.png) no-repeat;
    background-size: contain;
  }
  1.8% {
    background: url(../imagenes/logo3.png) no-repeat;
    background-size: contain;
  }
  1.9% {
    background: url(../imagenes/logo7.png) no-repeat;
    background-size: contain;
  }
  2%{
    background: url(../imagenes/logo4.png) no-repeat;
    background-size: contain;
  }
  2.3%{
    background: url(../imagenes/logo6.png) no-repeat;
    background-size: contain;
  }
  2.5%{
    background: url(../imagenes/logo7.png) no-repeat;
    background-size: contain;
  }
  3%{
    background: url(../imagenes/logo3.png) no-repeat;
    background-size: contain;
  }
  5%{
    background: url(../imagenes/logo5.png) no-repeat;
    background-size: contain;
  }


  7.6% {
    background: url(../imagenes/logo1.png) no-repeat;
    background-size: contain;	
  }
  7.7%{
    background: url(../imagenes/logo7.png) no-repeat;
    background-size: contain;
  }
  7.8% {
    background: url(../imagenes/logo3.png) no-repeat;
    background-size: contain;
  }
  7.9% {
    background: url(../imagenes/logo4.png) no-repeat;
    background-size: contain;
  }
  8%{
    background: url(../imagenes/logo7.png) no-repeat;
    background-size: contain;
  }
  8.3%{
    background: url(../imagenes/logo5.png) no-repeat;
    background-size: contain;
  }
  8.5%{
    background: url(../imagenes/logo1.png) no-repeat;
    background-size: contain;
  }



  14.9% {
    background: url(../imagenes/logo1.png) no-repeat;
    background-size: contain;
  }
  15.5%{
    background: url(../imagenes/logo7.png) no-repeat;
    background-size: contain;
  }
  15.7% {
    background: url(../imagenes/logo1.png) no-repeat;
    background-size: contain;
  }



  40.9% {
    background: url(../imagenes/logo1.png) no-repeat;
    background-size: contain;
  }
  41.5%{
    background: url(../imagenes/logo4.png) no-repeat;
    background-size: contain;
  }
  42% {
    background: url(../imagenes/logo1.png) no-repeat;
    background-size: contain;
  }

  70.9% {
    background: url(../imagenes/logo1.png) no-repeat;
    background-size: contain;
  }
  71.5%{
    background: url(../imagenes/logo6.png) no-repeat;
    background-size: contain;
  }
  71.8%{
    background: url(../imagenes/logo7.png) no-repeat;
    background-size: contain;
  }
  72% {
    background: url(../imagenes/logo1.png) no-repeat;
    background-size: contain;
  }


}
@-webkit-keyframes glitchMotion {

  /*Una segunda animacion para crear el efecto de movimiento, tambien puede ir dentro de la primera animacion pero preferi hacerlas por separado*/

  7% {
    transform: translateX(0);
  }
  7.5% {
    transform: translateX(0) translateY(5px);
  }
  7.9% {
    transform: translateX(0) translateY(0);
  }

  40% {
    transform: translateX(0);
  }
  40.5% {
    transform: translateX(-12px) translateY(0);
  }
  40.9% {
    transform: translateX(0) translateY(0);
  }

  70% {
    transform: translateX(0);
  }
  70.5% {
    transform: translateX(5px) translateY(0);
  }
  70.9% {
    transform: translateX(0) translateY(0);
  }

}
@keyframes glitchMotion {

  /*Una segunda animacion para crear el efecto de movimiento, tambien puede ir dentro de la primera animacion pero preferi hacerlas por separado*/

  7% {
    transform: translateX(0);
  }
  7.5% {
    transform: translateX(0) translateY(5px);
  }
  7.9% {
    transform: translateX(0) translateY(0);
  }

  40% {
    transform: translateX(0);
  }
  40.5% {
    transform: translateX(-12px) translateY(0);
  }
  40.9% {
    transform: translateX(0) translateY(0);
  }

  70% {
    transform: translateX(0);
  }
  70.5% {
    transform: translateX(5px) translateY(0);
  }
  70.9% {
    transform: translateX(0) translateY(0);
  }

}