.TextHeaderClass1 {
  font: normal 100px 'Jolly Lodger', cursive;
 	display:flex;
	justify-content:center;
	align-items:center;
  vertical-align:middle;
  width: auto;
  background: linear-gradient(90deg, #555, #fff, #555);
  background-repeat: no-repeat;
  background-size: 80%;
  text-shadow:5px 5px 2px #010101;
  animation: animate1 8s cubic-bezier(0.13, 0.52, 0.8, 0.42) infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(210, 210, 210, 0);
  color:#FFFFFF;
}
/*
#SubContainer:hover {
  animation-play-state: paused;
} */

@keyframes animate1 {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}
.TextXelferClass1 {
  font: normal 120px 'Jolly Lodger', cursive;
 	display:flex;
	justify-content:center;
	align-items:center;
  vertical-align:middle;
  width: 1 1 100%;
  text-shadow:0px 0px 0px #888888;
  animation: animateXelfer1 25s cubic-bezier(0.67, 0.01, 0.29, 1) infinite;
  animation-delay: 3s;
  color:#BBBBBB;
}
/*
#TextXelfer:hover,
#TextXelfer:hover span {
  animation-play-state: paused;
}
*/
@keyframes animateXelfer1 {
  0% {backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
  50% {backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(360deg); }
  100% {backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
}
.TextXelferClass1 span {
  animation: animateXelferLetters1 25s linear infinite;
  animation-delay: 3s;
}
@keyframes animateXelferLetters1 {
  0% {text-shadow:0px 0px 0px #888888; color: #BBBBBB; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
  10% {text-shadow:0px 0px 0px #CCCCCC; color: #888888; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
  20% {text-shadow:0px 0px 5px #CCCCCC; color: #555555; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
  30% {text-shadow:0px 0px 10px #CCCCCC; color: #888888; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
  40% {text-shadow:0px 0px 15px #FFFFFF; color: #BBBBBB;backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(360deg); }
  50% {text-shadow:0px 0px 0px #888888; color: #BBBBBB;backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(360deg); }
  60% {text-shadow:0px 0px 0px #CCCCCC; color: #888888; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(360deg); }
  70% {text-shadow:0px 0px 5px #CCCCCC; color: #555555; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(360deg); }
  80% {text-shadow:0px 0px 10px #CCCCCC; color: #888888; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(360deg); }
  90% {text-shadow:0px 0px 15px #FFFFFF; color: #BBBBBB;backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
  100% {text-shadow:0px 0px 0px #888888; color: #BBBBBB;backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
}
.TextHeaderClass2 {
  font: normal 100px 'Jolly Lodger', cursive;
 	display:flex;
	justify-content:center;
	align-items:center;
  vertical-align:middle;
  width: auto;
  background: linear-gradient(90deg, #555, #fff, #000, #fff, #555);
  background-repeat: no-repeat;
  background-size: 80%;
  text-shadow:5px 5px 2px #010101;
  animation: animate2 8s cubic-bezier(0.13, 0.52, 0.8, 0.42) infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(210, 210, 210, 0);
  color:#FFFFFF;
}
/*
#SubContainer:hover {
  animation-play-state: paused;
} */

@keyframes animate2 {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}
.TextXelferClass2 {
  font: normal 120px 'Jolly Lodger', cursive;
 	display:flex;
	justify-content:center;
	align-items:center;
  vertical-align:middle;
  width: 1 1 100%;
  text-shadow:0px 0px 0px #888888;
  animation: animateXelfer2 25s cubic-bezier(0.67, 0.01, 0.29, 1) infinite;
  animation-delay: 6s;
  color:#BBBBBB;
}
/*
#TextXelfer:hover,
#TextXelfer:hover span {
  animation-play-state: paused;
}
*/
@keyframes animateXelfer2 {
  0% {backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
  50% {backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(360deg); }
  100% {backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
}
.TextXelferClass2 span {
  animation: animateXelferLetters2 25s linear infinite;
  animation-delay: 6s;
}
@keyframes animateXelferLetters2 {
  0% {text-shadow:0px 0px 0px #555555; color: #BBBBBB; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
  10% {text-shadow:0px 0px 0px #000000; color: #888888; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
  20% {text-shadow:0px 0px 5px #777777; color: #555555; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
  30% {text-shadow:0px 0px 10px #aaaaaa; color: #888888; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
  40% {text-shadow:0px 0px 15px #FFFFFF; color: #BBBBBB;backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(360deg); }
  50% {text-shadow:0px 0px 0px #ffffff; color: #ffffff;backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(360deg); }
  60% {text-shadow:0px 0px 0px #ffffff; color: #bbbbbb; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(360deg); }
  70% {text-shadow:0px 0px 5px #aaaaaa; color: #888888; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(360deg); }
  80% {text-shadow:0px 0px 10px #777777; color: #555555; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(360deg); }
  90% {text-shadow:0px 0px 15px #000000; color: #888888;backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
  100% {text-shadow:0px 0px 0px #555555; color: #BBBBBB;backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
}
.TextHeaderClass3 {
  font: normal 100px 'Jolly Lodger', cursive;
 	display:flex;
	justify-content:center;
	align-items:center;
  vertical-align:middle;
  width: auto;
  background: linear-gradient(90deg, #555, #fff, #000, #fff, #555);
  background-repeat: no-repeat;
  background-size: 70%;
  text-shadow:5px 5px 2px #010101;
  animation: animate3 18s cubic-bezier(0.1, 0.02, 0.1, 0.08) infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(210, 210, 210, 0);
}
/*
#SubContainer:hover {
  animation-play-state: paused;
} */

@keyframes animate3 {
  0% {
    color:#FFFFFF;
    background-position: -500%;
  }
  10%{
    text-shadow:5px 5px 2px #FFFFFF;
  }
  20% {
    text-shadow:5px 5px 2px #888888;
  }
  40% {
    text-shadow:5px 5px 2px #010101;
  }
  100% {
    text-shadow:5px 5px 2px #010101;
    background-position: 500%;
  }
}
.TextXelferClass3 {
  font: normal 120px 'Jolly Lodger', cursive;
 	display:flex;
	justify-content:center;
	align-items:center;
  vertical-align:middle;
  width: 1 1 100%;
  text-shadow:0px 0px 0px #888888;
  animation: animateXelfer3 25s cubic-bezier(0.67, 0.01, 0.29, 1) infinite;
  animation-delay: 6s;
  color:#BBBBBB;
}
/*
#TextXelfer:hover,
#TextXelfer:hover span {
  animation-play-state: paused;
}
*/
@keyframes animateXelfer3 {
  0% {backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
  50% {backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(360deg); }
  100% {backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
}
.TextXelferClass3 span {
  animation: animateXelferLetters3 25s linear infinite;
  animation-delay: 6s;
}
@keyframes animateXelferLetters3 {
  0% {text-shadow:0px 0px 0px #555555; color: #BBBBBB; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
  10% {text-shadow:0px 0px 0px #000000; color: #888888; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
  20% {text-shadow:0px 0px 5px #777777; color: #555555; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
  30% {text-shadow:0px 0px 10px #aaaaaa; color: #888888; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
  40% {text-shadow:0px 0px 15px #FFFFFF; color: #BBBBBB;backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(360deg); }
  50% {text-shadow:0px 0px 0px #ffffff; color: #ffffff;backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(360deg); }
  60% {text-shadow:0px 0px 0px #ffffff; color: #bbbbbb; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(360deg); }
  70% {text-shadow:0px 0px 5px #aaaaaa; color: #888888; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(360deg); }
  80% {text-shadow:0px 0px 10px #777777; color: #555555; backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(360deg); }
  90% {text-shadow:0px 0px 15px #000000; color: #888888;backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
  100% {text-shadow:0px 0px 0px #555555; color: #BBBBBB;backface-visibility: visible;     transform-origin: center center;     transform-style: preserve-3d;     transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg); }
}