/* CSS Document */

/* Root styles */
:root {
	--main-font: "Lato", Arial, Helvetica, sans-serif;
	--first-brand-color: #906;
	--second-brand-color: #357;
	--contrast-brand-color: #fff;
	--text-color: #322;
	--bg-color: #fff;
	--bg-main-color: #fff;
	--dark-color: #212121;
	--medium-color: #E0DDDD;
	--light-color: #F9F8F7;
	--light-bg: linear-gradient( 125deg, #f1f4f6 60%, #f8eef5 100%);
	--font-family: sans-serif;
	--box-shadow: 3px 3px 3px rgba(0,0,0,0.03);
	--border-radius: 0.6rem;

	/* Page styles */
	--background-color: #FFFFFFFF;
	--text-color: #222F;
	--link-color: var(--first-brand-color);
	--link-hover: var(--second-brand-color);
	--label-color: var(--text-color);
	--button-color: var(--first-brand-color);
	--button-hover: var(--second-brand-color);
	--button-text: #FFFFFFFF;
	--focus-color: var(--first-brand-color);
	
	--light-gradient: linear-gradient(135deg, #e9d0dbee 0%, #d5a6bdee 50%); 
	--thick-gradient: linear-gradient(135deg, #751a48ee 0%, #906e 50%);
	

	/* Form styles */
	--form-first-brand-color: var(--first-brand-color);
	--form-second-brand-color: var(--second-brand-color);

	--form-font: var(--main-font);
	--form-input-font: var(--main-font);

	--form-input-radius: 3px;
	--form-button-radius: 3px;

	--form-borders: 1px solid var(--form-input-border-color);
	--borders-focus: 1px solid var(--focus-color);
	--box-borders-focus: 1px solid var(--box-focus-color);	
	--form-input-bg-color: #FFFFFFFF;
	--form-input-text-color: #222222FF;
	--form-input-border-color: #CCCCCCFF;	
	
	--error-hard-color: #c66;
	--error-soft-color: #edd;
	--success-hard-color: #6c6;
	--success-soft-color: #ded;
	
	--no-dot-color: #0009;
	--dot-color: #000c;	
	
}

@keyframes fade_in_show {
	0% {
		opacity: 0;
		/* transform: scale(0)*/
	}

	100% {
		opacity: 1;
		/* transform: scale(1) */
	}
}
@keyframes BackgroundGradient {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

@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;
    }
}

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


/* Reset */
/* -------------------------------------------------------------- */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	position: relative;
}
a {
	display: inline-block;
	text-decoration: none;
	color: var(--first-brand-color)
}
a:focus { outline: 1px dotted; }
a[disabled] { pointer-events: none; }

img,
iframe {
	max-width: 100%;
	border: none;
}
iframe {
	width: 100%;
}
img {
	height: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	border: solid #ccc;
	border-width: 1px 1px 0 1px;
}
table th 	{ background-color:#f5f5f5; color: var(--first-brand-color); border-bottom: 1px solid #ddd; }
table td 	{ border-bottom: 1px solid #ddd; padding: 3px; }
table td+td { border-left: 1px solid #ddd; }

ul.list li, ol.list li, dl.list li {
	padding: 0.5rem;
	list-style: outside;
	margin: 0 1rem;
}

ul.list.nopadding li, ol.list.nopadding li, dl.list.nopadding li {
	padding: 0
}

.video-js * { position: static; }  /* Fix */

.page.rounded .round { border-radius: 8px; overflow: hidden; }

/* General */
/* -------------------------------------------------------------- */

html { scroll-behavior: smooth; margin: 0; padding: 0; border: 0; height: 100%; }

body { font-family: var(--main-font); color: var(--text-color); background-color: var(--bg-color); font-size: 100%; font-size: calc(14px + 0.3vw); line-height: 1.6; min-height: 100vh; }

p 	{ margin-bottom: 1em; }
h1 	{ font-size: 3em; margin-bottom: 1.2em; font-family: "Montserrat", sans-serif; font-weight: 900; line-height: 1.2  }
h2 	{ font-size: 2em; margin-bottom: 1.2em; font-family: "Montserrat", sans-serif; font-weight: 900; color: var(--first-brand-color); line-height: 1.2   }
h3 	{ font-size: 1.3em; margin-bottom: 1.2em; font-family: "Montserrat", sans-serif; font-weight: 900 ; line-height: 1.2 }
h4 	{ font-size: 1.2em; margin-bottom: 1.2em; font-family: "Montserrat", sans-serif; font-weight: 900; color: var(--first-brand-color); line-height: 1.2  }
h5 	{ font-size: 1.1em; margin-bottom: 1.2em; font-family: "Montserrat", sans-serif; font-weight: 900; line-height: 1.2 }
h6 	{ font-size: 1.0em; margin-bottom: 1.2em; font-family: "Montserrat", sans-serif; font-weight: 900; line-height: 1.2 }

h4:has( + p ),
h5:has( + p ),
h2:has( + h5 ){ margin-bottom: 0}

h4 + p,
h5 + p { margin-top: 0 }

h2 + h5 {
   font-weight: 500;
   margin-top: 0.4rem;
}

h2 .small, h2 small, h2 a { /*! font-size: 0.5em; */ /*! font-size: calc(12px + 0.05em); */ /*! font-weight: normal; */ }
h3 .small, h3 small, h3 a,
h4 .small, h4 small, h4 a,
h5 .small, h5 small, h5 a { font-size: 0.6em; font-size: calc(10px + 0.05em); font-weight: normal; }

h4:has( + p ) { margin-bottom: 0 }

code { border-radius: 2px; padding:0.2em; margin: 0.3em 0.2em; font-size: 0.9em; color: var(--info-color); background: var(--info-bg-color); border: 1px solid rgba(0,0,0,0.05); }

ul.list { list-style: outside;  margin-left: 1em; font-size: 1em}
ul.list li { margin: 0.3em 0; list-style-type: square;  }
ul.list li a { padding: 0.2em; display: inline }
ul.list.disabled a { display: none; }
ul.list ul { margin-left: 2em; }

img  { 	max-width: 100%; height: auto; }

.small, small { font-size: 0.75em; }
.align-center { text-align: center; }
.fcolor { color: var(--first-brand-color)}


/* PAGE */
/* -------------------------------------------------------------- */

.page {
	margin: 0 auto;
	display: block;
}

.wrap { margin: 0 auto; padding: 0; }

/* Header */ 
header { 
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	z-index: 2;
	width: 100%;
	position: fixed;
	font-size: 0.9em;
	top:0;
	box-shadow: 5px 5px 5px #0003;	
}

header > a {
  display: flex;
}

header img {
	margin: 0;
	display: block;
}

header nav ul {
	display: flex;
	align-items: center;
}
header nav li {
  list-style: none;
  padding: 0.2em 0.5em;
  text-align: center;
}

header nav a {
	color: var(--first-brand-color);
	display: block;
	padding: 0.5em;
	border-radius: 8px;
	transition: 0.5s;	
}

header nav a:hover,
header nav a.active {
	background: #9061;
}

/* Main */
.section {
	margin: 5vh 0;
	padding: 10vh 10vw;
}
.section > * {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;  
}
.section img {
	transition: 0.6s ease;
	margin: 0 5%;
	display: block;
	margin: 0 auto;
}
.section:not(.noshadow) img {
	box-shadow: var(--box-shadow);
	border-radius: var(--border-radius);
}
.section:hover img {
	transform: scale(1.02);
}
.section h2 {
  font-size: 2.4em;
}
.section h2 .black { 
	color: var(--text-color);
	transition: 1s ease;
	display: block;
	vertical-align: -0.25em;
	opacity: 0;
	font-size: 0.4em;
}
.section:hover h2 .black { 
	opacity: 0.3;
}
.section:not( :has(.row:nth-last-child(n + 2) )) .col:has( img ) {
	flex: 2;
}
.section:has(.row:nth-last-child(n + 2) ) .col:not(:has( img )) {
	flex: 2;
}
.section:has(.row:nth-last-child(n + 2) ) .row {
	margin: 1em auto;
	align-items: center
}

.section.boxes .row,
.section.gboxes .row {
	gap: 1em;
	align-items: stretch;
	align-content: stretch;
	margin-top: 2em;
	font-size: 0.95em;
}
.section.boxes .col,
.section.gboxes .col {
	border-radius: var(--border-radius);
	padding: 1.5em;
	background: var(--light-gradient)
}
.section.gboxes .col {
	background: var(--light-color) var(--light-bg);
}
.section.boxes .col:after {
	content:"";
	position: absolute;
	display: block;
	width:1.5em;
	height:1.5em;
	background: var(--first-brand-color);
	left: calc(50% - 0.5em);
	top: -0.5em;
	border-radius: 1em;
}
.section.action {
	background: var(--light-gradient);
	margin-bottom: -5vh;	
}
.section.action .col:first-child {
	align-self: center;
}
.section.action video {
	max-width: 100%;
}
.section.action .btn-sm {
	min-width: 10em;
	margin-left: 0.3em;
	z-index: 1;
}
.section.action .btn-sm:first-of-type:hover {
	background: #9063 !important;
}
.section.action .btn-sm:hover {
	opacity: 0.7
}
.section.gboxes.timeline .row .row {
	align-items: flex-start;
	margin:0;
}
.section.gboxes.timeline > .row > .col {
	padding: 0;
}

/* Columns */
.row {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1em;
	align-items: flex-start;
}
.col { width: 100% }

.hero { 
	background-attachment: fixed;
	background-color: #9068;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;	
	line-height: 1.2;
	margin: 0;
	min-height: 100vh;
	overflow: hidden;
	padding: 0;
	transition: 0.3s;
	z-index: 2;
}
.hero:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
	background-color: var(--first-brand-color);
	background-image: linear-gradient(
	45deg,
	var(--dot-color) 25%,
	transparent 25%,
	transparent 75%,
	var(--dot-color) 75%,
	var(--dot-color)
	);
	background-size: 2px 2px;
}
.hero:hover {
  filter: saturate(1.3);
}	
.hero .row {
	flex-direction: column;
	text-align: center;
	margin: 5vh 10vh 2vh;  
	align-items: stretch;
	gap: 0;
	min-width: 300px;
}
.hero h1, .hero .subtitle, .hero h2 {
    padding: 1rem;
    display: flex;
	justify-content: center;
	width: 100%	;
	margin: 0 auto;	
	max-width: 80rem;
	color: #fff;
	transition: 0.3s;	
    font-weight: 600;
}
.hero h2 a {
	color: #fff;
	padding-bottom: 1.5em;
	margin-bottom: -1.5em;
	z-index: 1;	
}
.hero .row:hover h1, .hero .row:hover h2 {
    filter: saturate(120%);
	transform: scale(1.05);
}
.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;
  font-weight: 300;
}
.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 #wowcast {
  margin-top: 0;
}
.index main .row .col { flex: 2 !important }
.index main .row .col:has( img ) { flex: 1 !important }

.index .btn-sm.big b::after {
  content: " 🠆";
  vertical-align: middle;
}

#fade { 
	position: absolute;  
	top: 0;   
	left: 0;  
	width: 100%; 
	height: 100%;   
	z-index: 0;  
	background-size: cover; 
	background-position: top center; 
	mix-blend-mode: multiply; 
	transition: transform 1s;
	display: none;
}
#fade:has( + .row:hover ) { 
	transform: scale(1.03) 
}
.video-bg { 
	position: absolute; 
	top: 0;   
	left: 0;  
	width: 100%; 
	height: 100%;   
	z-index: 0; 
	mix-blend-mode: multiply; 
	background: #0d0639;
}
.video-bg video { 
	position: absolute;  
	top: 0;  
	left: 0; 
	width: 100%; 
	height: 100%; 
	object-fit: cover;
}
.hero:has(.video-bg):before {
  opacity: 0.6;
}
.section.intro {
	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:hover::before {
  transform: scale(110%) rotate(-1deg);
  filter: saturate(5);
}
.section.intro h2 .black {
  color: var(--first-brand-color);
}

.section.about-us {
	background: var(--thick-gradient);
	color: var(--bg-color);
	padding: 18vh 10vh 15vh ;	
	margin-top: 0
}
.section.about-us h2,
.section.about-us .black {
	color: var(--bg-color);
}
div[class="section"]:has( + .section[class="section"]) { 
	border-bottom: 1px solid #cccc 
}
.section.featlist, .section.bg-gray {
  background: var(--light-bg);
}
.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);
} 
.row.env {
	 align-items:  flex-start !important;
}
.row.env a {
  display: block;
  text-align: center;
  border-radius: 0.5em;
  transition: 0.3s;
  padding: 0.5em 0;
  margin-bottom: 0.2em
}
.row.env a h4 { 
	margin-bottom: 0 
}
.row.env p {
	margin-top:0;
}

.row.env a:hover {
	background: var(--light-color) var(--light-bg);
	transform: scale(1.05)
}

.row.env-images {
	width: 105%;
	margin: 0 -5vw !important;
	transform: rotate(-1deg);
	flex-wrap: wrap;
	flex-direction: row;
}

.row.env-images a { 
	display: block
}

.row.env-images > *   {
	flex: 1;
	border: 1px solid var(--medium-color);
	min-width: 200px;
	max-width: 50%;
}

.row.env-images img {
	max-width: 100%
}


.player_content {
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);
}
.video-container {
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	background: rgba(100,100,100,0.15);
	border-radius: var(--border-radius);	
}

.video-container:before,
.video-container:after {  position: absolute; display: block; content: ""; top: 0 ; left: 0; right: 0; bottom: 0; transition: 0.6s; opacity: 0 }

.video-container::before {
	background: url(https://storage.wowcast.co/assets/img/wowcast-logo.png);
	background-size: 20% auto;
	background-position: 99% 99%;
	opacity: 1;
	background-repeat: no-repeat;
}

.video-container.loader:before { opacity: 0.3; background: var(--first-brand-color);  }
.video-container.loader:after  { opacity: 0.5; background-image: url(https://storage.wowcast.co/libs/images/loading.gif);background-position: center center;background-repeat: no-repeat;background-size: 1.2em;background-blend-mode: luminosity; }

.video-container video { object-fit: contain }

.video-container iframe {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.fa-solid:before { 
	line-height: 1;
}
.fa-lg { 
	font-size: 3em;
	opacity: 0.5;
	display: block;
	text-align: center;
	min-height: 1em;
	margin: 0.6rem auto 1rem;
}

.section.boxes .fa-lg {
	color: var(--first-brand-color);
	opacity: 1;
}

.contact {
	background: var(--light-color) var(--light-bg);
	margin: 5vh 0 0;
	padding: 10vh 10vw;
}

.contact > * {
  max-width: 80rem;
}

.contact .col {
	width: 100%;
}
.contact .col:last-child {
	margin-top: 1em
}
.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;
} 

.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
}
.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;
}
.moving h2{ 
	animation: moving 2s;
}
.moving h5{ 
	animation: moving 2s 0.3s both;
}

fieldset:has(#test) {
	background: #00000008;
	margin: 0.6vh 3%;
	border-radius: 5px;
}
fieldset:has(#test:focus) {
	background: #9061;
}
fieldset:has(#test) big {
	font-weight: bold;
	display: inline-block;
	margin-left: 0.2em;
}
label:has(+ #test) {
	display: inline-block;
}
.contact #test {
	width: 5em;
	display: inline-block;
}

footer { 
	font-size: 0.7em;
	background: var(--first-brand-color);
	color: #fff;
	padding: 0.5rem;
}
footer .col:last-child { 
	text-align: center
}

footer a { color: #fff }
footer a:hover { opacity:  0.85 }


#changelang,
#changelang li {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
		overflow: visible
}

#changelang {
	border: 1px solid #ddd;
	position: relative;

}

#changelang li {
	display: block;
}

#changelang li a {
	display: none;
	padding: 0.3em 2em 0.3em 1em;
	position: relative;
}

#changelang li a.active,
#changelang:hover li a {
	display: block;
}

/* Hace que los elementos se desplieguen hacia ARRIBA */
#changelang:hover li:has(a:not(.active)) {
	position: absolute;
	top: -100%;
	left: -1px;
	width: calc(100% + 2px);
	border: 1px solid #ddd;
	background: var(--first-brand-color);
}

/* El activo permanece como selector */
#changelang li a.active {
	display: block;
}

#changelang li a.active:after {
	content: "";
	display: block;
	position: absolute;
	top: 0.7em;
	right: 0.7em;
	border: solid;
	border-width: 0 1px 1px 0;
	padding: 2px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

@media screen and (max-width: 400px) {
	
	.index .hero header { display: none !important }
	
	.index .btn-sm.big b { display: block }
}

@media screen and (max-width: 1023px) {
	
	header { 
		height: 2rem;
		overflow: visible;
		height: 3rem;
	}
	
	header img {
		max-width: 80%;
		max-width: calc(100vw - 20px - 3.2rem)
	}
	
	header nav {
		text-align: right;
	}
	
	header #menu {
		display: inline-block;
		text-align: right;
		color: var(--text-color);
		opacity: 0.6;
		padding: 1.1rem;
	}
	
	header nav ul {
		width: 100%;
		text-align: center;
		position: fixed;
		z-index: 10;
		left: 0;
		top: 3rem;
	}
	
	header #menu:not(.active) + ul { flex-direction: row; background: var(--medium-color); box-shadow: var(--box-shadow) inset; gap: 2%; justify-content: space-between; padding: 0 2%;}
	header #menu:not(.active) + ul li { padding: 0.2em 0; }
	header #menu:not(.active) + ul li:first-child { display:  none }
	header #menu:not(.active) + ul li a { line-height: 1.2; height: 1.6em; overflow: hidden; padding: 0.25em 0.2em; margin: 0;}	
	
	header #menu.active + ul	{
		display: flex;
		background: #fff;		
		flex-direction: column;		
		gap: 1em;
	}
	
	.hide-xs { display: none }
	.page > header nav li { flex: 1 }	
	
	#fade {
		transition: transform 1s, background-position 3s ease !important;
	}

	#fade[style*="opacity"] {
	  background-position: top left;
	}	
	
	.row.env-images {
		align-content: center;
	}
	.row.env-images > * {
		margin: 0 auto;
	}	
	
	.section:has(.row:nth-last-child(n+2)) .row:not(:last-child) {
		margin-bottom: 4em;
	}	
	footer {
		text-align: center;
	}
}

@media screen and (min-width: 1024px) {
	
	.hide-lg { display: none }
	
	header {
		padding: 0.5rem; 
	}
	
	header #menu { 
		display: none 
	}

	/* Columns */
	.row {
		flex-direction: row;
	}
	
	.col {
		flex: 1;
	}
	
	.section .row.reverse {
		flex-direction: row-reverse;
	}
	
	footer .row {
		align-items: center;
	}
	
	footer .col:last-child { 
		text-align: right;
	}	
	
}
@media screen and (min-width: 1540px) {
	.row.env-images {
		margin: 0 auto !important;
		width: 100%
	}
}


.fa-solid {
  font-family: var(--main-font);
}
.fa-solid::before {
  font-family: 'Font Awesome 6 Free';
}

.hero::after{
	font-family: 'Font Awesome 6 Free';
	content: "\f078";
	display: inline-flex;
	color: #fff;
	font-size: 0.8em;
	position: absolute;
	bottom: 2em;
	font-weight: bold;
	transition: 0.3s; 
	text-align: center;  
	display: block;
	margin: 0 auto;
	left: 0;
	right: 0;
	z-index: 1;
}

.hero:has(.row:hover):after{
	bottom: 1em
}


/* Useful classes */
/* -------------------------------------------------------------- */

.allsizes.left  { float: left;  display: inline-block; }
.allsizes.right { float: right; display: inline-block; }
.cleaner{ height: 1px !important;  clear: both; overflow: hidden; }
.spacer	{ height: 15px !important; clear: both; overflow: hidden; }
.hidden	{ display: none; }
.indent { padding-left: 1.5rem; }
blockquote { padding: 8rem; }
.small, small { font-size: 0.8em; }
.big, big { font-size: 1.2em; }
.multiply { mix-blend-mode: multiply; }

/* Minimum width of X */
@media screen and (min-width: 1024px) {
	.left  { float: left;  display: inline-block; }
	.right { float: right; display: inline-block; }
}

.soft-transition, .soft-transition * {
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
	transition: 0.6s;
}
.btn-sm,
a[title*="Button"]{
	border: none;
	padding: 0.8rem 2rem;
	max-width: 100%;
	text-decoration: none;
	margin: 0.5em auto;
	transition: 0.6s;
	background-color: var(--first-brand-color);
	color: #fff;
	border-radius: 5px;
	text-align: center;
}
.btn-sm:has( ~ .btn-sm[disabled]), .btn-sm[disabled] ~ .btn-sm { opacity: 0.6; }
.btn-sm:has( ~ .btn-sm[disabled]):hover, .btn-sm[disabled] ~ .btn-sm:hover { opacity: 1; }

.btn-sm:hover {
	opacity: 0.8;
	transform: scale(105%);
}

/* Aviso cookies ECG */
/* Cookies layer */
#cookieLayer, #ECGcookieLayer { position: fixed; display: flex; flex-direction: column; justify-content: flex-end; z-index: 99999; margin: 0; padding: 1%; top: 0; width: 100%; height: 100%; overflow-y: auto; background-color: rgba(0, 0, 0, 0.3);  }
#cookieLayer div, #ECGcookieLayer div { background-color: var(--background-color); margin: 0; padding: 0; font-size: 90%; color: var(--text-color); text-align: right; display: block; }
#cookieLayer div p, #ECGcookieLayer div p { margin: 0; padding: 3%; text-align: justify; }
#cookieLayer div a, #ECGcookieLayer div a { display: inline-block; text-decoration: none; color: var(--text-color); }
#cookieLayer div a, #ECGcookieLayer div a:not(.btn-sm) { font-weight: bold; }
#cookieLayer div a.btn-sm, #ECGcookieLayer div a.btn-sm { background-color: var(--text-color); color: var(--background-color); border: 1px solid var(--text-color); padding: 0.6vw 2vw; margin: 0 3% 3% 0; display: inline-block; border-radius: 3px; }
#cookieLayer div a.btn-sm.reverse, #ECGcookieLayer div a.btn-sm.reverse { background-color: var(--background-color); color: var(--text-color); }
#cookieLayer div a:hover, #ECGcookieLayer div a:hover { opacity: 0.8; }


/* Timeline */
.stream-timeline { display: flex; flex-direction: row; flex: 1; justify-content: space-evenly; align-items: flex-end; text-align: center; }
.stream-timeline img { box-shadow: 2px var(--box-shadow); border-top-left-radius: var(--radius-half); border-top-right-radius: var(--radius-half);}
.stream-timeline img, .stream-timeline a { display: block; width: 70%; max-width: 250px; margin: 0 auto; font-size: 0.8em; background: var(--light-color); transition: 0.3s; }
.stream-timeline a { padding: 2%; border-bottom-left-radius: var(--radius-half); border-bottom-right-radius: var(--radius-half); }
.stream-timeline a.edit:after { content: "\f044"; }
.stream-timeline a.edit:before { content: ""; font-family: var(--font-family); text-transform: uppercase; min-width: initial; }

.stream-timeline[data-status="offair"]   > div.tl-offair:after,
.stream-timeline[data-status="prelive"]  > div.tl-prelive:after,
.stream-timeline[data-status="live"]     > div.tl-live:after,
.stream-timeline[data-status="postlive"] > div.tl-postlive:after,
.stream-timeline[data-status="ondemand"] > div.tl-ondemand:after { background: var(--first-brand-color) !important; }

.stream-timeline[data-status="offair"]   > div.tl-offair > *,
.stream-timeline[data-status="prelive"]  > div.tl-prelive > *,
.stream-timeline[data-status="live"]     > div.tl-live > *,
.stream-timeline[data-status="postlive"] > div.tl-postlive > *,
.stream-timeline[data-status="ondemand"] > div.tl-ondemand > * { width: 80%; max-width: 350px; font-weight: bold; color: var(--first-brand-color); }

.stream-timeline[data-status="offair"]   > div.tl-offair:hover > *,
.stream-timeline[data-status="prelive"]  > div.tl-prelive:hover > *,
.stream-timeline[data-status="live"]     > div.tl-live:hover > *,
.stream-timeline[data-status="postlive"] > div.tl-postlive:hover > *,
.stream-timeline[data-status="ondemand"] > div.tl-ondemand:hover > * { width: 85%; max-width: 370px; }

.stream-timeline[data-status="offair"]   > div.tl-offair a:before,
.stream-timeline[data-status="prelive"]  > div.tl-prelive a:before,
.stream-timeline[data-status="live"]     > div.tl-live a:before,
.stream-timeline[data-status="postlive"] > div.tl-postlive a:before,
.stream-timeline[data-status="ondemand"] > div.tl-ondemand a:before { content: attr(data-now) ": "; }

.stream-timeline div:hover > * { width: 90%; max-width: 275px; }
.stream-timeline div:after { content: ""; display: block; position: absolute; background: var(--medium-color); width: 10px; height: 10px; right: 50%; bottom: -6px; border-radius: 5px; }

.stream-timeline div.has-video:before { z-index: 5; position: absolute; content: "\25B6"; width: 100%; color: white; font-size: 3cqw; text-shadow: 2px 2px 2px rgba(0,0,0,0.2); text-align: center; background: none; top: 40%; top: calc(50% - 1.25em); left: 0; transition: 0.3s; }
.stream-timeline-now b { text-transform: uppercase; }
.stream-timeline a { pointer-events: none }

.stream-timeline {   overflow-x: auto;overflow-y: hidden;scrollbar-width: thin;padding-bottom: 1em;min-height: 14em;}
.stream-timeline div { padding: 1em 0; min-width: 150px;border-bottom: 3px solid var(--light-color);}
.stream-timeline div:after { right: 50%; bottom: -6px; }