@keyframes BackgroundGradient {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}
header img {
	margin:0;
}
.index .hero { 
	flex-direction: column; 
	background-color: #9068;
	z-index: 2;
}
.index .hero:before{
	background-color: #906;
}
.index .hero .row {
  flex-direction: column;
  text-align: center;
  margin: 5vh 10vh 2vh;  
}
.index .hero h1 {
  justify-content: center;
  padding: 1rem;
}
.index .hero h2 {
  padding: 1rem;
  max-width: 80rem
}
.index .hero header { 
	background: none; 
	position: relative !important; 
	box-shadow: none;
	justify-content: center;
	font-size: 1.2em;
	height: auto !important;
}
.index .hero small {
  font-size: 0.6em;
}
.index .hero header nav ul {
	position: relative !important;
	flex-wrap: wrap;
	justify-content: center;
}
.index .hero header nav a { 
	color: #fff 
}
.index .hero header nav a:hover, 
.index .hero header nav a.active { 
	opacity: 0.75; 
	background: var(--first-brand-color) 
}
.index .hero h1,
.index .hero h2 {
	background: none !important;
}
.index #wowcast {
  margin-top: 0;
}
.index main .row .col { flex: 2 !important }
.index main .row .col:has( img ) { flex: 1 !important }

.index .video-bg {
	background: #0d0639;
}

.section.intro:first-child {
  background: none;
  margin-top: 3rem;
  overflow:hidden;
}
.section.intro:first-child::before, .section.intro:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  z-index:0;
}
.section.intro:first-child::before {
  background-image: var( --intro-bg );
  background-size: cover;
  opacity: 0.1;
  filter:contrast(10) saturate(10) sepia(0.6);
  background-position: center center;
  transition: 1s;
}
.section.intro:first-child:after {
  background: linear-gradient(132deg, #906,#957, #ffef00,#f0469b,#f00,#fff);
  background-size: 400% 400% !important;
  animation: BackgroundGradient 10s ease infinite;
  background-blend-mode: color-burn !important;
  filter: none;
  opacity: 0.25;
}
/*
.section.intro:first-child::after {
  background: radial-gradient(circle, #9062 65%, #9066 100%) !important;
  background-blend-mode: multiply !important;
  filter: none;
  opacity: 1;
  z-index: 0;
}
*/
.section.intro.noshadow:hover::before {
  transform: scale(110%) rotate(-1deg);
  filter: saturate(5);
}
.section.intro h2 .black {
  color: var(--first-brand-color);
}
.section { 
	background: none; 
}
section[class="section"]:has( + .section[class="section"]) { 
	border-bottom: 1px solid #cccc 
}
.section.featlist, .section.bg-gray {
  background: var(--light-bg);
}
.featlist .row {
  gap: 2.5em;
}
.featlist p {
	font-weight: bold
}
.featlist ul {
	list-style: none;
}
.featlist li {
  padding: 0.3em 0 0.3em 2em;
  border-bottom: 1px solid #eee;
}
.featlist .fa-solid {
  color: var(--first-brand-color);
  display: flex;
  min-width: 2em;
  padding-top: 0.4em;
  position: absolute;
  left: 0;
} 
.section.action {
	text-align: center;
}
.section.action:before {
	content: "";
	position: absolute;
	display: block;
	left:0;
	right:0;
	top:0;
	bottom: 0;
	opacity: 0.07;
	background: var(--bg-action) center center no-repeat fixed;
	background-size: cover;
	filter: grayscale(1);
} 
.fibrasat-items .row {
	align-items: stretch !important;
}
.fibrasat-items .col:last-child {
	flex: 1  !important;
	display: flex;
	align-items: center;
}
.fibrasat-items .fa-lg {
	color: var(--first-brand-color)
}
.fibrasat-items .col:first-child { 
	flex: 3  !important
}
h4:has( + h6 ){ 
	margin-bottom: 0 
}
.production .row {
	align-items: flex-start !important
}
	
@media screen and (max-width: 400px) {
	.index .hero header { display: none !important }
}
@media screen and (max-width: 1023px) {
	.hide-xs { display: none }
	.page > header nav li { flex: 1 }
}
@media screen and (min-width: 1024px) {
	.hide-lg { display: none }
	header { padding: 0.5rem;  }
}

.neon-text {
    text-shadow: 0 0 5px #ff005e33, 0 0 10px #ff005e33, 0 0 20px #ff005e33, 0 0 40px #ff005e33, 0 0 80px #ff005e33;
    animation: glow 4s infinite alternate;
}

@keyframes glow {
    0% {
        text-shadow: 0 0 5px #906a, 0 0 10px #ff005e33, 0 0 20px #ff005e33, 0 0 40px #ff005e33, 0 0 80px #ff005e33;
    }
    100% {
        text-shadow: 0 0 10px #00d4ff33, 0 0 20px #00d4ff33, 0 0 40px #00d4ff33, 0 0 80px #00d4ff33, 0 0 160px #00d4ff33;
    }
}

.moving h2{ 
	animation: moving 2s;
}
.moving h5{ 
	animation: moving 2s 0.3s both;
}

@keyframes moving {
	0% {
		transform: scale(1);
	}
	30% {
		transform: scale(1);
	}
	60% {
		 transform: scale(1.02);
	}
	100% {
		transform: scale(1);
	}  
}