/* 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) */
	}
}

/* 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: 600;
   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: 10px;
	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;
	background: var(--light-gradient), linear-gradient(135deg, var(--light-color) 0%, var(--medium-color) 50%);
	background-size: 6vw 6vw, 3vw 3vw;
	background-position: 2vw 12vh, 94vw bottom;
	background-repeat: no-repeat, no-repeat;
	transition: background 0.6s ease;
}
.section:has(:hover) {
	background-size: 5vw 5vw, 2vw 2vw;
	background-position: 1vw 11vh, 95vw bottom;
}
.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.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 { 
	min-height: 100vh;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	transition:0.3s;
	line-height: 1.2;
	overflow: hidden;
	z-index: 0;
	cursor: pointer
}
.hero:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
	background-color: var(--no-dot-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 {
	align-items: stretch;
	gap: 0;
	margin: 14vw 10vh 10vw;
	box-shadow: var(--box-shadow);
	min-width: 300px;
}
.hero h1, .hero .subtitle, .hero h2 {
    padding: 5vw;
    display: flex;
	align-items: center;
	width: 100%	;
	margin: 0 auto;	
	transition: background 1s;
	border-radius: var(--border-radius);	
}
.hero h1 {
    background: #906 var(--thick-gradient);
	color: #fff;
	flex: 1; 
    transition: 0.3s;
}
.hero h1:has(+ h2),
.hero h2 {
    background: #9068;
	color: #fff;
	transition: 0.3s;
}
.hero h2 a {
	color: #fff;
	padding-bottom: 1.5em;
	margin-bottom: -1.5em;
	z-index: 1;	
}
.hero .row:hover h1 {
    background: #906c;
    filter: saturate(120%);
	transform: scale(1.05);
}
.hero .row:hover h2 {
	background: #dfa3c2cc;
}
.hero .subtitle {
    background:  var(--light-gradient);
	color: var(--first-brand-color);
	font-size: 1.5em;
    flex: 2;
    flex-direction: column;
	display: flex;
	transition: 0.3s;
}
.hero .row:hover h2, .hero .row:hover .subtitle {
	filter: saturate(120%);
}
#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; 
}
.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 {
	background: var(--light-color) var(--light-bg);
	margin-top: 0;
}
.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);
}


.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
}
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 }

@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;
	}
	
	#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) {
	
	header {
		padding: 1.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;
}
.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; }

/* 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; }