/* CSS Document */
.page-box .box-content {
	position: relative;
    height: 300px;
}

.carousel-content {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(-182px) rotateY(0);
  transform: translateZ(-182px) rotateY(0);
  -webkit-animation: carousel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
  animation: carousel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
}

.slider {
  
  border-radius: 6px;
	line-height: 100px;
	
	text-align: center;
	
	padding: 0 2rem;
	border-radius: 6px;
	 -webkit-transform: rotateY(0) translateZ(182px);
  transform: rotateY(0) translateZ(182px);
}
.slide {
  --interval: 1s;
 
	font-size: 20px;
	
	color: orangered;
	
	
  text-shadow: 
    0 0 10px coral,
    0 0 20px orange,
    0 0 40px lightcoral,
    0 0 80px mediumblue;
  will-change: filter, color;
  filter: saturate(60%);
  animation: flicker steps(100) var(--interval) 1s infinite;
	font-family: Bad Script;
}


@keyframes flicker {
  50% {
    color: white;
    filter: saturate(200%) hue-rotate(20deg);
  }
}