
 .glitch {
	 color: white;
	 /* font-size: 100px; */
	 position: relative;
	 /* width: 500px; */
     /* width: 100%; */
	 margin: 0 auto;
     text-align: center;
     /* display: inline-block; */
}
 @keyframes noise-anim {
	 0% {
		 clip: rect(1px, 9999px, 35px, 0);
	}
	 5% {
		 clip: rect(38px, 9999px, 83px, 0);
	}
	 10% {
		 clip: rect(97px, 9999px, 100px, 0);
	}
	 15% {
		 clip: rect(19px, 9999px, 72px, 0);
	}
	 20% {
		 clip: rect(46px, 9999px, 12px, 0);
	}
	 25% {
		 clip: rect(66px, 9999px, 45px, 0);
	}
	 30% {
		 clip: rect(60px, 9999px, 57px, 0);
	}
	 35% {
		 clip: rect(6px, 9999px, 88px, 0);
	}
	 40% {
		 clip: rect(28px, 9999px, 46px, 0);
	}
	 45% {
		 clip: rect(66px, 9999px, 88px, 0);
	}
	 50% {
		 clip: rect(24px, 9999px, 42px, 0);
	}
	 55% {
		 clip: rect(69px, 9999px, 22px, 0);
	}
	 60% {
		 clip: rect(49px, 9999px, 48px, 0);
	}
	 65% {
		 clip: rect(60px, 9999px, 33px, 0);
	}
	 70% {
		 clip: rect(98px, 9999px, 75px, 0);
	}
	 75% {
		 clip: rect(18px, 9999px, 75px, 0);
	}
	 80% {
		 clip: rect(93px, 9999px, 15px, 0);
	}
	 85% {
		 clip: rect(62px, 9999px, 13px, 0);
	}
	 90% {
		 clip: rect(77px, 9999px, 46px, 0);
	}
	 95% {
		 clip: rect(68px, 9999px, 90px, 0);
	}
	 100% {
		 clip: rect(7px, 9999px, 97px, 0);
	}
}
 .glitch:after {
	 content: attr(data-text);
	 position: absolute;
	 left: calc(50% - 2px) ;
     transform: translateX(-50%);
	 text-shadow: -1px 0 red;
	 top: 0;
	 color: white;
	 background: #1d1d36;
	 overflow: hidden;
	 clip: rect(0, 900px, 0, 0);
	 animation: noise-anim 2s infinite linear alternate-reverse;
}
 @keyframes noise-anim-2 {
	 0% {
		 clip: rect(81px, 9999px, 82px, 0);
	}
	 5% {
		 clip: rect(74px, 9999px, 92px, 0);
	}
	 10% {
		 clip: rect(93px, 9999px, 53px, 0);
	}
	 15% {
		 clip: rect(88px, 9999px, 32px, 0);
	}
	 20% {
		 clip: rect(80px, 9999px, 60px, 0);
	}
	 25% {
		 clip: rect(74px, 9999px, 84px, 0);
	}
	 30% {
		 clip: rect(61px, 9999px, 33px, 0);
	}
	 35% {
		 clip: rect(70px, 9999px, 47px, 0);
	}
	 40% {
		 clip: rect(8px, 9999px, 89px, 0);
	}
	 45% {
		 clip: rect(17px, 9999px, 98px, 0);
	}
	 50% {
		 clip: rect(62px, 9999px, 23px, 0);
	}
	 55% {
		 clip: rect(1px, 9999px, 18px, 0);
	}
	 60% {
		 clip: rect(56px, 9999px, 98px, 0);
	}
	 65% {
		 clip: rect(76px, 9999px, 5px, 0);
	}
	 70% {
		 clip: rect(31px, 9999px, 3px, 0);
	}
	 75% {
		 clip: rect(69px, 9999px, 47px, 0);
	}
	 80% {
		 clip: rect(36px, 9999px, 52px, 0);
	}
	 85% {
		 clip: rect(61px, 9999px, 15px, 0);
	}
	 90% {
		 clip: rect(9px, 9999px, 40px, 0);
	}
	 95% {
		 clip: rect(15px, 9999px, 2px, 0);
	}
	 100% {
		 clip: rect(34px, 9999px, 68px, 0);
	}
}
 .glitch:before {
	 content: attr(data-text);
	 position: absolute;
	 left: calc(50% + 2px) ;
     transform: translateX(-50%);
	 text-shadow: 1px 0 blue;
	 top: 0;
	 color: white;
     background: #1d1d36;
	 overflow: hidden;
	 clip: rect(0, 900px, 0, 0);
	 animation: noise-anim-2 3s infinite linear alternate-reverse;
}

@media (max-width: 960px) {

    .glitch:after {
        width: 100%;
        content: attr(data-text);
        position: absolute;
        left: calc(50% - 2px) ;
        transform: translateX(-50%);
        text-shadow: -1px 0 red;
        top: 0;
        color: white;
        background: #1d1d36;
        overflow: hidden;
        clip: rect(0, 900px, 0, 0);
        animation: noise-anim 2s infinite linear alternate-reverse;
   }
    .glitch:before {
        width: 100%;
        content: attr(data-text);
        position: absolute;
        left: calc(50% + 2px) ;
        transform: translateX(-50%);
        text-shadow: 1px 0 blue;
        top: 0;
        color: white;
        background: #1d1d36;
        overflow: hidden;
        clip: rect(0, 900px, 0, 0);
        animation: noise-anim-2 3s infinite linear alternate-reverse;
   }

}
 