/* Fotomov: fotos en movimiento */

@keyframes fotomov {
	0% {transform:scale(1) rotate(0deg);}
	50% {transform:scale(1.4) rotate(0.3deg)}
	100% {transform:scale(1) rotate(0deg)}
}

@keyframes fotomov2 {
	0% {transform:scale(1) rotate(0.4deg);}
	50% {transform:scale(1.4) rotate(0.5deg)}
	100% {transform:scale(1) rotate(0.8deg)}
}

@-webkit-keyframes stroke-offset {
  50% {
    stroke-dashoffset: 35%;
    stroke-dasharray: 0 87.5%;
  }
}

@keyframes stroke-offset {
  50% {
    stroke-dashoffset: 35%;
    stroke-dasharray: 0 87.5%;
  }
}
  
/* Fondomov: fotos en movimiento */

@keyframes fondomov {
	0% {transform:scale(1) rotate(0deg);}
	25% {transform:scale(1.025) rotate(0.15deg)}
	50% {transform:scale(1.025) rotate(-0.15deg)}
	100% {transform:scale(1) rotate(0deg)}
}

  
@keyframes move {
  0% {
    text-shadow:
      4px -4px 0 hsla(0, 100%, 50%, 1), 
      3px -3px 0 hsla(0, 100%, 50%, 1), 
      2px -2px 0 hsla(0, 100%, 50%, 1), 
      1px -1px 0 hsla(0, 100%, 50%, 1),
      -4px 4px 0 hsla(180, 100%, 50%, 1), 
      -3px 3px 0 hsla(180, 100%, 50%, 1), 
      -2px 2px 0 hsla(180, 100%, 50%, 1), 
      -1px 1px 0 hsla(180, 100%, 50%, 1)
    ;
  }
  25% {    
    text-shadow:      
      -4px -4px 0 hsla(180, 100%, 50%, 1), 
      -3px -3px 0 hsla(180, 100%, 50%, 1), 
      -2px -2px 0 hsla(180, 100%, 50%, 1), 
      -1px -1px 0 hsla(180, 100%, 50%, 1),
      4px 4px 0 hsla(0, 100%, 50%, 1), 
      3px 3px 0 hsla(0, 100%, 50%, 1), 
      2px 2px 0 hsla(0, 100%, 50%, 1), 
      1px 1px 0 hsla(0, 100%, 50%, 1)      
    ;
  }
  50% {
    text-shadow:
      -4px 4px 0 hsla(0, 100%, 50%, 1), 
      -3px 3px 0 hsla(0, 100%, 50%, 1), 
      -2px 2px 0 hsla(0, 100%, 50%, 1), 
      -1px 1px 0 hsla(0, 100%, 50%, 1),
      4px -4px 0 hsla(180, 100%, 50%, 1), 
      3px -3px 0 hsla(180, 100%, 50%, 1), 
      2px -2px 0 hsla(180, 100%, 50%, 1), 
      1px -1px 0 hsla(180, 100%, 50%, 1)
    ;
  }
  75% {
    text-shadow:
      4px 4px 0 hsla(180, 100%, 50%, 1), 
      3px 3px 0 hsla(180, 100%, 50%, 1), 
      2px 2px 0 hsla(180, 100%, 50%, 1), 
      1px 1px 0 hsla(180, 100%, 50%, 1),
      -4px -4px 0 hsla(0, 100%, 50%, 1), 
      -3px -3px 0 hsla(0, 100%, 50%, 1), 
      -2px -2px 0 hsla(0, 100%, 50%, 1), 
      -1px -1px 0 hsla(0, 100%, 50%, 1)      
    ;
  }
  100% {
    text-shadow:
      4px -4px 0 hsla(0, 100%, 50%, 1), 
      3px -3px 0 hsla(0, 100%, 50%, 1), 
      2px -2px 0 hsla(0, 100%, 50%, 1), 
      1px -1px 0 hsla(0, 100%, 50%, 1),
      -4px 4px 0 hsla(180, 100%, 50%, 1), 
      -3px 3px 0 hsla(180, 100%, 50%, 1), 
      -2px 2px 0 hsla(180, 100%, 50%, 1), 
      -1px 1px 0 hsla(180, 100%, 50%, 1)
    ;
  }  
}


/* Noise: animación del nombre del site */  


@-webkit-keyframes noise {
  0%, 3%, 5%, 42%, 44%, 100% { -webkit-transform: scaleY(1); }  
  4.3% { -webkit-transform: scaleY(1.7); }
  43% { -webkit-transform: scaleX(1.5); }
}
@keyframes noise {
  0%, 3%, 5%, 42%, 44%, 100% { transform: scaleY(1); }  
  4.3% { transform: scaleY(1.7); }
  43% { transform: scaleX(1.5); }
}


/* noisev: variacion de noise */  


@-webkit-keyframes noisev {
  0%, 3%, 5%, 42%, 44%, 100% { -webkit-transform: scaleY(1); }  
  1.3% { -webkit-transform: scaleY(1.2); }
}
@keyframes noisev {
  0%, 3%, 5%, 42%, 44%, 100% { transform: scaleY(1); }  
  1.3% { transform: scaleY(1.2); }
}


/* moving-panel: elemento del menú seleccionado */ 

@-webkit-keyframes moving-panel {
  100% {
    -webkit-transform: scale(1, 1) translate(20px, 0);
    transform: scale(1, 1) translate(20px, 0);
  }
}

@keyframes moving-panel {
  100% {
    -webkit-transform: scale(1, 1) translate(20px, 0);
    transform: scale(1, 1) translate(20px, 0px);
  }
}



@keyframes fill {
  50%   { width: 100%; }
  100%  { width: 0%;   }
}


/* Shake: agitar */

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes shake45 {
  10%, 90% {
    transform: translate3d(-0, -1px, 0) rotate(90deg);
  }
  
  20%, 80% {
    transform: translate3d(0, 2px, 0) rotate(90deg);
  }

  30%, 50%, 70% {
    transform: translate3d(0, -4px, 0) rotate(90deg);
  }

  40%, 60% {
    transform: translate3d(0, 4px, 0) rotate(90deg);
  }
}


/* Glitch */

@keyframes glitch-effect{
  
    @for $i from 0 through $steps{
        #{percentage($i*(1/$steps))}{
            clip:rect(random(100)+px,9999px,random(100)+px,0);}
}
}


/* Blur: texto animado  */

@-webkit-keyframes blurFadeIn{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		-webkit-transform: scale(1.3);
	}
	50%{
		opacity: 0.5;
		text-shadow: 0px 0px 10px #fff;
		-webkit-transform: scale(1.1);
	}
	100%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		-webkit-transform: scale(1);
	}
}
@-webkit-keyframes fadeInBack{
	0%{
		opacity: 0;
		-webkit-transform: scale(0);
	}
	50%{
		opacity: 0.4;
		-webkit-transform: scale(2);
	}
	100%{
		opacity: 0.2;
		-webkit-transform: scale(5);
	}
}
@-webkit-keyframes fadeInRotate{
	0%{
		opacity: 0;
		-webkit-transform: scale(0) rotate(360deg);
	}
	100%{
		opacity: 1;
		-webkit-transform: scale(1) rotate(0deg);
	}
}
/**/
@-moz-keyframes blurFadeInOut{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		-moz-transform: scale(1.3);
	}
	20%,75%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		-moz-transform: scale(1);
	}
	100%{
		opacity: 0;
		text-shadow: 0px 0px 50px #fff;
		-moz-transform: scale(0);
	}
}
@-moz-keyframes blurFadeIn{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		-moz-transform: scale(1.3);
	}
	100%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		-moz-transform: scale(1);
	}
}
@-moz-keyframes fadeInBack{
	0%{
		opacity: 0;
		-moz-transform: scale(0);
	}
	50%{
		opacity: 0.4;
		-moz-transform: scale(2);
	}
	100%{
		opacity: 0.2;
		-moz-transform: scale(5);
	}
}
@-moz-keyframes fadeInRotate{
	0%{
		opacity: 0;
		-moz-transform: scale(0) rotate(360deg);
	}
	100%{
		opacity: 1;
		-moz-transform: scale(1) rotate(0deg);
	}
}
/**/
@keyframes blurFadeInOut{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.3);
	}
	20%,75%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
	100%{
		opacity: 0;
		text-shadow: 0px 0px 50px #fff;
		transform: scale(0);
		overflow: hidden;
	}
}
@keyframes blurFadeIn{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.3);
	}
	50%{
		opacity: 0.5;
		text-shadow: 0px 0px 10px #fff;
		transform: scale(1.1);
	}
	100%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
}
@keyframes fadeInBack{
	0%{
		opacity: 0;
		transform: scale(0);
	}
	50%{
		opacity: 0.4;
		transform: scale(2);
	}
	100%{
		opacity: 0.2;
		transform: scale(5);
	}
}
@keyframes fadeInRotate{
	0%{
		opacity: 0;
		transform: scale(0) rotate(360deg);
	}
	100%{
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}


/* 10% */

@keyframes blurFadeInOut10{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.3);
	}
	2%,8%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
	10%{
		opacity: 0;
		text-shadow: 0px 0px 50px #fff;
		transform: scale(0);
		overflow: hidden;
	}
}

/* 7% */

@keyframes blurFadeInOut7{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.3);
		overflow: hidden;
	}
	2%,13%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
		z-index: 1;
	}
	15%{
		opacity: 0;
		text-shadow: 0px 0px 50px #fff;
		transform: scale(0);
		overflow: hidden;
	}
	100% {
	opacity: 0;	
	}
}


/* 98% */

@keyframes blurFadeInOut98{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.3);
	}
	2%,88%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
	100%{
		opacity: 0;
		text-shadow: 0px 0px 50px #fff;
		transform: scale(0);
		overflow: hidden;
	}
}



/* Desaparecer */

@keyframes opacity0 {
	0%{
		opacity: 0;
		transform: scale(1);
	}
	1% {
	opacity: 1;
	}
	99% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1);
	}
}


/* Desplazamiento derecha */

@keyframes irvolver {
	
	0% {
	left: 0;
	}
	25% {
	left: 37.5%;
	-webkit-transform: rotateX(0deg); /* Safari */
    transform: rotateX(0deg); /* Standard syntax */
	}
	49% {
	left: 75%;
	-webkit-transform: rotateX(0deg); /* Safari */
    transform: rotateX(0deg); /* Standard syntax */
	}
	50% {
	left: 75%;
	-webkit-transform: rotateY(180deg); /* Safari */
    transform: rotateY(180deg); /* Standard syntax */
	}
	51% {
	left: 75%;
	    -webkit-transform: rotateY(180deg); /* Safari */
    transform: rotateY(180deg); /* Standard syntax */
	}
	75% {
	left: 37.5%;
	    -webkit-transform: rotateY(180deg); /* Safari */
    transform: rotateY(180deg); /* Standard syntax */
	}
	99% {
	left: 0;
	-webkit-transform: rotateY(180deg); /* Safari */
    transform: rotateY(180deg); /* Standard syntax */
	}
	100% {
	left: 0;
	}
	}
	
@keyframes irvolversg {
	
	0% {
	left: 0;
	}
	25% {
	left: 37.5%;
	}
	49% {
	left: 75%;
	}
	50% {
	left: 75%;
	}
	51% {
	left: 75%;
	}
	75% {
	left: 37.5%;
	}
	99% {
	left: 0;
	}
	100% {
	left: 0;
	}	
	
	}
	}

	

	
/* Desplazar hacia abajo/arriba */	
	
    @-webkit-keyframes desabajo2 {
        0% {
            -webkit-transform: translateY(-20%);
        }
        100% {
            -webkit-transform: translateY(0);
        }
    }	

    @-webkit-keyframes desabajo {
        0% {
            -webkit-transform: translateY(-30%);
        }
        100% {
            -webkit-transform: translateY(0);
        }
    }	
	
    @-webkit-keyframes desabajo {
        0% {
            -webkit-transform: translateY(-30%);
        }
        100% {
            -webkit-transform: translateY(0);
        }
    }	
		

    @-webkit-keyframes desabajo3 {
        0% {
            -webkit-transform: translateY(-30%);
        }
        100% {
            -webkit-transform: translateY(0);
        }
    }			
	
	    @-webkit-keyframes desabajo4 {
        0% {
            -webkit-transform: translateY(10%);
        }
        100% {
            -webkit-transform: translateY(0);
        }
    }		
	


/* Portada movimiento bucle */

@keyframes movblu {
	
	0% {
	left: 20%;
	}
	4% {
	left: 20%;
	}
	25% {
	left: -150%;
	}
	49% {
	left: -300%;
	opacity: 1;
	}
	50.9% {
	left: 0; 
	opacity: 0;
	}
	51% {
	left: 0;
	opacity: 1;
	}
	75% {
	left: -150%;
	}
	99.9% {
	left: -300%;
	}
	100% {
	display: none;
	}	
	
	}
	
	
/* Animacion scroll */

@keyframes moveDown{
    0% { 
        transform: translateY(-40px); 
        opacity: 0;
    }
    100% { 
        transform: translateY(0px);  
        opacity: 1;
    }
}


/* Granulados */


@keyframes grain {
  0%, 100% {
    transform: translate(0, 0, 0);
  }

  10% {
    transform: translate(-1%, -1%);
  }

  20% {
    transform: translate(1%, 1%);
  }

  30% {
    transform: translate(-2%, -2%);
  }

  40% {
    transform: translate(3%, 3%);
  }

  50% {
    transform: translate(-3%, -3%);
  }

  60% {
    transform: translate(4%, 4%);
  }

  70% {
    transform: translate(-4%, -4%);
  }

  80% {
    transform: translate(2%, 2%);
  }

  90% {
    transform: translate(-3%, -3%);
  }
}


@keyframes scratch {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.075;
  }

  10% {
    transform: translateX(-1%);
  }

  20% {
    transform: translateX(1%);
  }

  30% {
    transform: translateX(-2%);
        opacity: 0.09;
  }

  40% {
    transform: translateX(3%);
  }

  50% {
    transform: translateX(-3%);
    opacity: 0.05;
  }

  60% {
    transform: translateX(8%);
  }

  70% {
    transform: translateX(-3%);
  }

  80% {
    transform: translateX(10%);
    opacity: 0.02;
  }

  90% {
    transform: translateX(-2%);
  }
}


@keyframes inner-scratch {
  0% {
    transform: translateX(0);
    opacity: 0.08;
  }

  10% {
    transform: translateX(-1%);
  }

  20% {
    transform: translateX(1%);
  }

  30% {
    transform: translateX(-2%);
  }

  40% {
    transform: translateX(3%);
  }

  50% {
    transform: translateX(-3%);
    opacity: 0.06;
  }

  60% {
    transform: translateX(8%);
  }

  70% {
    transform: translateX(-3%);
  }

  80% {
    transform: translateX(10%);
    opacity: 0.03;
  }

  90% {
    transform: translateX(20%);
  }

  100% {
    transform: translateX(30%);
  }
}

@keyframes draw {
  0% {
    width: 0%;
  }

  100% {
    width: 110%;
  }
}


@keyframes draw-bottom {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}


@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


@keyframes frantic-movement {
	0%{
		transform: translate(0,0);
	}	
	50% {
		transform: translate(10%,0); 
		}
}

@keyframes record-pulse {
	0%, 100%
		box-shadow: 0 0 2px 2px alpha($red, 20%)
	50%
		box-shadow: 0 0 3px 3px alpha($red, 40%)
	}
	

}


@-webkit-keyframes tcolorwhite {
    from {background-color: red;}
    to {background-color: yellow;}
}