/*author Rahul Indra  */
@font-face {
    font-family: hackfont;
    src: url('../../fonts/hacked/HACKED.ttf');
}
.glitch h1 {

	margin-left: 0px;
	font-family: hackfont;
	font-size: 70px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.glitch {
	color: white;
	white-space: nowrap;
	height: 60px;
}

.glitch h1 {
	position: absolute
}

.glitch h1:nth-child(1) {
	color: white
}

.glitch h1:nth-child(2) {
	color: #67f3da;
	opacity: .25
}

.glitch h1:nth-child(3) {
	color: #f16f6f;
	opacity: .25
}

.glitchit h1:nth-child(1) {
	animation: glitch1 3s 1
}

.glitchit h1:nth-child(2) {
	animation: glitch2 3s 1
}

.glitchit h1:nth-child(3) {
	animation: glitch3 3s 1
}

@keyframes glitch1 {
	0% {
		transform: none;
		opacity: 1
	}
	7% {
		transform: skew(-0.5deg, -0.9deg);
		opacity: .75
	}
	10% {
		transform: none;
		opacity: 1
	}
	27% {
		transform: none;
		opacity: 1
	}
	30% {
		transform: skew(.8deg, -0.1deg);
		opacity: .75
	}
	35% {
		transform: none;
		opacity: 1
	}
	52% {
		transform: none;
		opacity: 1
	}
	55% {
		transform: skew(-1deg, .2deg);
		opacity: .75
	}
	50% {
		transform: none;
		opacity: 1
	}
	72% {
		transform: none;
		opacity: 1
	}
	75% {
		transform: skew(.4deg, 1deg);
		opacity: .75
	}
	80% {
		transform: none;
		opacity: 1
	}
	100% {
		transform: none;
		opacity: 1
	}
}

@keyframes glitch2 {
	0% {
		transform: none;
		opacity: .25
	}
	7% {
		transform: translate(-2px, -3px);
		opacity: .5
	}
	10% {
		transform: none;
		opacity: .25
	}
	27% {
		transform: none;
		opacity: .25
	}
	30% {
		transform: translate(-5px, -2px);
		opacity: .5
	}
	35% {
		transform: none;
		opacity: .25
	}
	52% {
		transform: none;
		opacity: .25
	}
	55% {
		transform: translate(-5px, -1px);
		opacity: .5
	}
	50% {
		transform: none;
		opacity: .25
	}
	72% {
		transform: none;
		opacity: .25
	}
	75% {
		transform: translate(-2px, -6px);
		opacity: .5
	}
	80% {
		transform: none;
		opacity: .25
	}
	100% {
		transform: none;
		opacity: .25
	}
}

@keyframes glitch3 {
	0% {
		transform: none;
		opacity: .25
	}
	7% {
		transform: translate(2px, 3px);
		opacity: .5
	}
	10% {
		transform: none;
		opacity: .25
	}
	27% {
		transform: none;
		opacity: .25
	}
	30% {
		transform: translate(5px, 2px);
		opacity: .5
	}
	35% {
		transform: none;
		opacity: .25
	}
	52% {
		transform: none;
		opacity: .25
	}
	55% {
		transform: translate(5px, 1px);
		opacity: .5
	}
	50% {
		transform: none;
		opacity: .25
	}
	72% {
		transform: none;
		opacity: .25
	}
	75% {
		transform: translate(2px, 6px);
		opacity: .5
	}
	80% {
		transform: none;
		opacity: .25
	}
	100% {
		transform: none;
		opacity: .25
	}
}