﻿.glitch {
 -webkit-animation: text-anim 2s 2s 2 linear normal;
 -moz-animation: text-anim 2s 2s 2 linear normal;
  animation: text-anim 2s 2s 2 linear normal;
}

.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: 3px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: #000;
  background: #fff;
  overflow: hidden;
  font-size: 180px;
  clip: rect(0, 900px, 0, 0);
  -webkit-animation: noise-anim-2 2s 2s 2 linear alternate-reverse;
  -moz-animation: noise-anim-2 2s 2s 2 linear alternate-reverse;
  animation: noise-anim-2 2s 2s 2 linear alternate-reverse;
}

.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 5px;
  text-shadow: -1px 0 red;
  top: 0;
  color: #000;
  background: #fff;
  overflow: hidden;
  font-size:180px;
  clip: rect(0, 900px, 0, 0);
  -webkit-animation: noise-anim 3s 2s 2 linear alternate-reverse;
  -moz-animation: noise-anim 3s 2s 2 linear alternate-reverse;
  animation: noise-anim 3s 2s 2 linear alternate-reverse;
}

@-webkit-keyframes text-anim {
	10% {
		color:#ff0000;
	}
	12% {
		color:#000;
	}
	20% {
		color:#ddd;
	}
	22% {
		color:#000;
	}
	60% {
		color:#ff0000;
	}
	61% {
		color:#000;
	}	
}
@-moz-keyframes text-anim {
	10% {
		color:#ff0000;
	}
	12% {
		color:#000;
	}
	20% {
		color:#ddd;
	}
	22% {
		color:#000;
	}
	60% {
		color:#ff0000;
	}
	61% {
		color:#000;
	}	
}
@keyframes text-anim {
	10% {
		color:#ff0000;
	}
	12% {
		color:#000;
	}
	20% {
		color:#ddd;
	}
	22% {
		color:#000;
	}
	60% {
		color:#ff0000;
	}
	61% {
		color:#000;
	}	
}

@-webkit-keyframes noise-anim {
  0% {
    clip: rect(69px, 9999px, 25px, 0);
  }

  5% {
    clip: rect(27px, 9999px, 157px, 0);
  }

  10% {
    clip: rect(69px, 9999px, 130px, 0);
  }

  15.0% {
    clip: rect(55px, 9999px, 46px, 0);
  }

  20% {
    clip: rect(142px, 9999px, 82px, 0);
  }

  25% {
    clip: rect(120px, 9999px, 133px, 0);
  }

  30.0% {
    clip: rect(153px, 9999px, 4px, 0);
  }

  35% {
    clip: rect(7px, 9999px, 29px, 0);
  }

  40% {
    clip: rect(128px, 9999px, 121px, 0);
  }

  45% {
    clip: rect(122px, 9999px, 92px, 0);
  }

  50% {
    clip: rect(40px, 9999px, 79px, 0);
  }

  55.0% {
    clip: rect(115px, 9999px, 145px, 0);
  }

  60.0% {
    clip: rect(88px, 9999px, 124px, 0);
  }

  65% {
    clip: rect(162px, 9999px, 84px, 0);
  }

  70% {
    clip: rect(122px, 9999px, 131px, 0);
  }

  75% {
    clip: rect(170px, 9999px, 103px, 0);
  }

  80% {
    clip: rect(105px, 9999px, 180px, 0);
  }

  85.0% {
    clip: rect(24px, 9999px, 171px, 0);
  }

  90% {
    clip: rect(149px, 9999px, 94px, 0);
  }

  95% {
    clip: rect(39px, 9999px, 72px, 0);
  }

  100% {
    clip: rect(150px, 9999px, 61px, 0);
  }
}
@-moz-keyframes noise-anim {
  0% {
    clip: rect(69px, 9999px, 25px, 0);
  }

  5% {
    clip: rect(27px, 9999px, 157px, 0);
  }

  10% {
    clip: rect(69px, 9999px, 130px, 0);
  }

  15.0% {
    clip: rect(55px, 9999px, 46px, 0);
  }

  20% {
    clip: rect(142px, 9999px, 82px, 0);
  }

  25% {
    clip: rect(120px, 9999px, 133px, 0);
  }

  30.0% {
    clip: rect(153px, 9999px, 4px, 0);
  }

  35% {
    clip: rect(7px, 9999px, 29px, 0);
  }

  40% {
    clip: rect(128px, 9999px, 121px, 0);
  }

  45% {
    clip: rect(122px, 9999px, 92px, 0);
  }

  50% {
    clip: rect(40px, 9999px, 79px, 0);
  }

  55.0% {
    clip: rect(115px, 9999px, 145px, 0);
  }

  60.0% {
    clip: rect(88px, 9999px, 124px, 0);
  }

  65% {
    clip: rect(162px, 9999px, 84px, 0);
  }

  70% {
    clip: rect(122px, 9999px, 131px, 0);
  }

  75% {
    clip: rect(170px, 9999px, 103px, 0);
  }

  80% {
    clip: rect(105px, 9999px, 180px, 0);
  }

  85.0% {
    clip: rect(24px, 9999px, 171px, 0);
  }

  90% {
    clip: rect(149px, 9999px, 94px, 0);
  }

  95% {
    clip: rect(39px, 9999px, 72px, 0);
  }

  100% {
    clip: rect(150px, 9999px, 61px, 0);
  }
}
@keyframes noise-anim {
  0% {
    clip: rect(69px, 9999px, 25px, 0);
  }

  5% {
    clip: rect(27px, 9999px, 157px, 0);
  }

  10% {
    clip: rect(69px, 9999px, 130px, 0);
  }

  15.0% {
    clip: rect(55px, 9999px, 46px, 0);
  }

  20% {
    clip: rect(142px, 9999px, 82px, 0);
  }

  25% {
    clip: rect(120px, 9999px, 133px, 0);
  }

  30.0% {
    clip: rect(153px, 9999px, 4px, 0);
  }

  35% {
    clip: rect(7px, 9999px, 29px, 0);
  }

  40% {
    clip: rect(128px, 9999px, 121px, 0);
  }

  45% {
    clip: rect(122px, 9999px, 92px, 0);
  }

  50% {
    clip: rect(40px, 9999px, 79px, 0);
  }

  55.0% {
    clip: rect(115px, 9999px, 145px, 0);
  }

  60.0% {
    clip: rect(88px, 9999px, 124px, 0);
  }

  65% {
    clip: rect(162px, 9999px, 84px, 0);
  }

  70% {
    clip: rect(122px, 9999px, 131px, 0);
  }

  75% {
    clip: rect(170px, 9999px, 103px, 0);
  }

  80% {
    clip: rect(105px, 9999px, 180px, 0);
  }

  85.0% {
    clip: rect(24px, 9999px, 171px, 0);
  }

  90% {
    clip: rect(149px, 9999px, 94px, 0);
  }

  95% {
    clip: rect(39px, 9999px, 72px, 0);
  }

  100% {
    clip: rect(150px, 9999px, 61px, 0);
  }
}

@-webkit-keyframes noise-anim-2 {
  0% {
    clip: rect(85px, 9999px, 58px, 0);
  }

  5% {
    clip: rect(74px, 9999px, 109px, 0);
  }

  10% {
    clip: rect(74px, 9999px, 136px, 0);
  }

  15.0% {
    clip: rect(19px, 9999px, 100px, 0);
  }

  20% {
    clip: rect(94px, 9999px, 81px, 0);
  }

  25% {
    clip: rect(155px, 9999px, 151px, 0);
  }

  30.0% {
    clip: rect(28px, 9999px, 129px, 0);
  }

  35% {
    clip: rect(42px, 9999px, 167px, 0);
  }

  40% {
    clip: rect(171px, 9999px, 157px, 0);
  }

  45% {
    clip: rect(8px, 9999px, 79px, 0);
  }

  50% {
    clip: rect(140px, 9999px, 100px, 0);
  }

  55.0% {
    clip: rect(129px, 9999px, 138px, 0);
  }

  60.0% {
    clip: rect(19px, 9999px, 88px, 0);
  }

  65% {
    clip: rect(94px, 9999px, 79px, 0);
  }

  70% {
    clip: rect(128px, 9999px, 106px, 0);
  }

  75% {
    clip: rect(179px, 9999px, 127px, 0);
  }

  80% {
    clip: rect(54px, 9999px, 13px, 0);
  }

  85.0% {
    clip: rect(26px, 9999px, 122px, 0);
  }

  90% {
    clip: rect(123px, 9999px, 6px, 0);
  }

  95% {
    clip: rect(14px, 9999px, 134px, 0);
  }

  100% {
    clip: rect(142px, 9999px, 139px, 0);
  }
}
@-moz-keyframes noise-anim-2 {
  0% {
    clip: rect(85px, 9999px, 58px, 0);
  }

  5% {
    clip: rect(74px, 9999px, 109px, 0);
  }

  10% {
    clip: rect(74px, 9999px, 136px, 0);
  }

  15.0% {
    clip: rect(19px, 9999px, 100px, 0);
  }

  20% {
    clip: rect(94px, 9999px, 81px, 0);
  }

  25% {
    clip: rect(155px, 9999px, 151px, 0);
  }

  30.0% {
    clip: rect(28px, 9999px, 129px, 0);
  }

  35% {
    clip: rect(42px, 9999px, 167px, 0);
  }

  40% {
    clip: rect(171px, 9999px, 157px, 0);
  }

  45% {
    clip: rect(8px, 9999px, 79px, 0);
  }

  50% {
    clip: rect(140px, 9999px, 100px, 0);
  }

  55.0% {
    clip: rect(129px, 9999px, 138px, 0);
  }

  60.0% {
    clip: rect(19px, 9999px, 88px, 0);
  }

  65% {
    clip: rect(94px, 9999px, 79px, 0);
  }

  70% {
    clip: rect(128px, 9999px, 106px, 0);
  }

  75% {
    clip: rect(179px, 9999px, 127px, 0);
  }

  80% {
    clip: rect(54px, 9999px, 13px, 0);
  }

  85.0% {
    clip: rect(26px, 9999px, 122px, 0);
  }

  90% {
    clip: rect(123px, 9999px, 6px, 0);
  }

  95% {
    clip: rect(14px, 9999px, 134px, 0);
  }

  100% {
    clip: rect(142px, 9999px, 139px, 0);
  }
}
@keyframes noise-anim-2 {
  0% {
    clip: rect(85px, 9999px, 58px, 0);
  }

  5% {
    clip: rect(74px, 9999px, 109px, 0);
  }

  10% {
    clip: rect(74px, 9999px, 136px, 0);
  }

  15.0% {
    clip: rect(19px, 9999px, 100px, 0);
  }

  20% {
    clip: rect(94px, 9999px, 81px, 0);
  }

  25% {
    clip: rect(155px, 9999px, 151px, 0);
  }

  30.0% {
    clip: rect(28px, 9999px, 129px, 0);
  }

  35% {
    clip: rect(42px, 9999px, 167px, 0);
  }

  40% {
    clip: rect(171px, 9999px, 157px, 0);
  }

  45% {
    clip: rect(8px, 9999px, 79px, 0);
  }

  50% {
    clip: rect(140px, 9999px, 100px, 0);
  }

  55.0% {
    clip: rect(129px, 9999px, 138px, 0);
  }

  60.0% {
    clip: rect(19px, 9999px, 88px, 0);
  }

  65% {
    clip: rect(94px, 9999px, 79px, 0);
  }

  70% {
    clip: rect(128px, 9999px, 106px, 0);
  }

  75% {
    clip: rect(179px, 9999px, 127px, 0);
  }

  80% {
    clip: rect(54px, 9999px, 13px, 0);
  }

  85.0% {
    clip: rect(26px, 9999px, 122px, 0);
  }

  90% {
    clip: rect(123px, 9999px, 6px, 0);
  }

  95% {
    clip: rect(14px, 9999px, 134px, 0);
  }

  100% {
    clip: rect(142px, 9999px, 139px, 0);
  }
}
