.glitch .hero {
	line-height: 1;
	display: inline-block;
	color: #fff;
	z-index: 2;
	letter-spacing: 10px;

	/* Bright things in dark environments usually cast that light, giving off a glow */
	/* filter: drop-shadow(0 1px 3px); */
  }

.glitch .demo {
	height: 100px;
	background: #fff;
  }

.glitch .layers {
	position: relative;
  }

.glitch .layers::before, 
.glitch .layers::after {
    content: attr(data-text);
    position: absolute;
    width: 110%;
    z-index: -1;
    font-weight: 400!important;
    font-size: 2.3rem;
}
.glitch .layers::before {
	top: 10px;
	left: 15px;
	color: #e5763c;
	background: rgb(86 86 86);
}

.glitch .layers::after {
	top: 5px;
	left: -10px;
	color: #93e6ff;
}

.glitch .hero-container,
.glitch .single-path {
	clip-path: polygon(
	  0% 12%,
	  53% 12%,
	  53% 26%,
	  25% 26%,
	  25% 86%,
	  31% 86%,
	  31% 0%,
	  53% 0%,
	  53% 84%,
	  92% 84%,
	  92% 82%,
	  70% 82%,
	  70% 29%,
	  78% 29%,
	  78% 65%,
	  69% 65%,
	  69% 66%,
	  77% 66%,
	  77% 45%,
	  85% 45%,
	  85% 26%,
	  97% 26%,
	  97% 28%,
	  84% 28%,
	  84% 34%,
	  54% 34%,
	  54% 89%,
	  30% 89%,
	  30% 58%,
	  83% 58%,
	  83% 5%,
	  68% 5%,
	  68% 36%,
	  62% 36%,
	  62% 1%,
	  12% 1%,
	  12% 34%,
	  60% 34%,
	  60% 57%,
	  98% 57%,
	  98% 83%,
	  1% 83%,
	  1% 53%,
	  91% 53%,
	  91% 84%,
	  8% 84%,
	  8% 83%,
	  4% 83%
	);
  }

.glitch .paths {
	animation: paths 5s step-end infinite;
  }

  @keyframes paths {
	0% {
	  clip-path: polygon(
		0% 43%,
		83% 43%,
		83% 22%,
		23% 22%,
		23% 24%,
		91% 24%,
		91% 26%,
		18% 26%,
		18% 83%,
		29% 83%,
		29% 17%,
		41% 17%,
		41% 39%,
		18% 39%,
		18% 82%,
		54% 82%,
		54% 88%,
		19% 88%,
		19% 4%,
		39% 4%,
		39% 14%,
		76% 14%,
		76% 52%,
		23% 52%,
		23% 35%,
		19% 35%,
		19% 8%,
		36% 8%,
		36% 31%,
		73% 31%,
		73% 16%,
		1% 16%,
		1% 56%,
		50% 56%,
		50% 8%
	  );
	}

	5% {
	  clip-path: polygon(
		0% 29%,
		44% 29%,
		44% 83%,
		94% 83%,
		94% 56%,
		11% 56%,
		11% 64%,
		94% 64%,
		94% 70%,
		88% 70%,
		88% 32%,
		18% 32%,
		18% 96%,
		10% 96%,
		10% 62%,
		9% 62%,
		9% 84%,
		68% 84%,
		68% 50%,
		52% 50%,
		52% 55%,
		35% 55%,
		35% 87%,
		25% 87%,
		25% 39%,
		15% 39%,
		15% 88%,
		52% 88%
	  );
	}

	30% {
	  clip-path: polygon(
		0% 53%,
		93% 53%,
		93% 62%,
		68% 62%,
		68% 37%,
		97% 37%,
		97% 89%,
		13% 89%,
		13% 45%,
		51% 45%,
		51% 88%,
		17% 88%,
		17% 54%,
		81% 54%,
		81% 75%,
		79% 75%,
		79% 76%,
		38% 76%,
		38% 28%,
		61% 28%,
		61% 12%,
		55% 12%,
		55% 62%,
		68% 62%,
		68% 51%,
		0% 51%,
		0% 92%,
		63% 92%,
		63% 4%,
		65% 4%
	  );
	}

	45% {
	  clip-path: polygon(
		0% 33%,
		2% 33%,
		2% 69%,
		58% 69%,
		58% 94%,
		55% 94%,
		55% 25%,
		33% 25%,
		33% 85%,
		16% 85%,
		16% 19%,
		5% 19%,
		5% 20%,
		79% 20%,
		79% 96%,
		93% 96%,
		93% 50%,
		5% 50%,
		5% 74%,
		55% 74%,
		55% 57%,
		96% 57%,
		96% 59%,
		87% 59%,
		87% 65%,
		82% 65%,
		82% 39%,
		63% 39%,
		63% 92%,
		4% 92%,
		4% 36%,
		24% 36%,
		24% 70%,
		1% 70%,
		1% 43%,
		15% 43%,
		15% 28%,
		23% 28%,
		23% 71%,
		90% 71%,
		90% 86%,
		97% 86%,
		97% 1%,
		60% 1%,
		60% 67%,
		71% 67%,
		71% 91%,
		17% 91%,
		17% 14%,
		39% 14%,
		39% 30%,
		58% 30%,
		58% 11%,
		52% 11%,
		52% 83%,
		68% 83%
	  );
	}

	76% {
	  clip-path: polygon(
		0% 26%,
		15% 26%,
		15% 73%,
		72% 73%,
		72% 70%,
		77% 70%,
		77% 75%,
		8% 75%,
		8% 42%,
		4% 42%,
		4% 61%,
		17% 61%,
		17% 12%,
		26% 12%,
		26% 63%,
		73% 63%,
		73% 43%,
		90% 43%,
		90% 67%,
		50% 67%,
		50% 41%,
		42% 41%,
		42% 46%,
		50% 46%,
		50% 84%,
		96% 84%,
		96% 78%,
		49% 78%,
		49% 25%,
		63% 25%,
		63% 14%
	  );
	}

	90% {
	  clip-path: polygon(
		0% 41%,
		13% 41%,
		13% 6%,
		87% 6%,
		87% 93%,
		10% 93%,
		10% 13%,
		89% 13%,
		89% 6%,
		3% 6%,
		3% 8%,
		16% 8%,
		16% 79%,
		0% 79%,
		0% 99%,
		92% 99%,
		92% 90%,
		5% 90%,
		5% 60%,
		0% 60%,
		0% 48%,
		89% 48%,
		89% 13%,
		80% 13%,
		80% 43%,
		95% 43%,
		95% 19%,
		80% 19%,
		80% 85%,
		38% 85%,
		38% 62%
	  );
	}

	1%,
	7%,
	33%,
	47%,
	78%,
	93% {
	  clip-path: none;
	}
  }

.glitch .movement {
	/* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
	position: relative;
	animation: movement 8s step-end infinite;
  }

  @keyframes movement {
	0% {
	  top: 0px;
	  left: -20px;
	}

	15% {
	  top: 10px;
	  left: 10px;
	}

	60% {
	  top: 5px;
	  left: -10px;
	}

	75% {
	  top: -5px;
	  left: 20px;
	}

	100% {
	  top: 10px;
	  left: 5px;
	}
  }

.glitch .opacity {
	animation: opacity 5s step-end infinite;
  }

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

	5% {
	  opacity: 0.7;
	}

	30% {
	  opacity: 0.4;
	}

	45% {
	  opacity: 0.6;
	}

	76% {
	  opacity: 0.4;
	}

	90% {
	  opacity: 0.8;
	}

	1%,
	7%,
	33%,
	47%,
	78%,
	93% {
	  opacity: 0;
	}
  }

.glitch .font {
	animation: font 7s step-end infinite;
  }

  @keyframes font {
	0% {
	  font-weight: 100;
	  color: #e0287d;
	  filter: blur(3px);
	}

	20% {
	  font-weight: 500;
	  color: #fff;
	  filter: blur(0);
	}

	50% {
	  font-weight: 300;
	  color: #1bc7fb;
	  filter: blur(2px);
	}

	60% {
	  font-weight: 700;
	  color: #fff;
	  filter: blur(0);
	}

	90% {
	  font-weight: 500;
	  color: #e0287d;
	  filter: blur(6px);
	}
  }

.glitch .glitch svg {
	animation: paths 5s step-end infinite;
  }

.glitch .glitch::before {
	animation: paths 5s step-end infinite, opacity 5s step-end infinite,
	  font 8s step-end infinite, movement 10s step-end infinite;
  }

.glitch .glitch::after {
	animation: paths 5s step-end infinite, opacity 5s step-end infinite,
	  font 7s step-end infinite, movement 8s step-end infinite;
  }

.glitch .hero-container {
	position: relative;
	padding: 200px 0;
	text-align: center;
  }

.glitch .environment {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:var(--realwhite);
	background-size: cover;
  }




@keyframes opacity2 {
	0% {
		opacity: 0.1;
	}

	1.5%{
		opacity: 0.7;
	}

	7%{
		opacity: 0.4;
	}

	11% {
		opacity: 0.6;
	}

	19%, 68% {
		opacity: 0.4;
	}

	22%,80% {
		opacity: 0.8;
	}

	.25%, 
	1.3%, 
	8%, 58%,
	12%, 
	19%, 
	23%, 69.5%, 81%{
		opacity: 1;
	}
	25%{
		opacity:0;
	}
	83%{
		opacity:0;
	}
}


@keyframes movement2 {
	0% {
		top: 0px;
		left: -8px;
	}

	15% {
		top: 6px;
		left: -10px;
	}

	60% {
		top: 5px;
		left: -10px;
	}

	75% {
		top: -5px;
		left: -8px;
	}

	100% {
		top: 6px;
		left: -5px;
	}
}

.glitch .hero-container{
	animation: paths 5s step-end infinite, opacity2 15s step-end infinite; 
}
@media(min-width:768px){
	.glitch .hero-container{
		animation: paths 5s step-end infinite, opacity2 15s step-end infinite;

	}
}