@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap; font-style: normal; font-named-instance: 'Regular'; src: url("../fonts/v3/Inter.var.woff2?v=3.19") format("woff2"); }

/*/////////////////////////*/
/* Liandri Frontend Styles */
/*/////////////////////////*/

/*//////////////*/
/* Base - Start */
/*//////////////*/

body {
	font-family: Inter, sans-serif;
	font-weight: 400;
	color: #474747;
	font-size: 19px;
	line-height: 32px;
	background-color: #282828;
	margin: 0px;
	overflow-y: scroll;
}

a {
	color: #474747;
}

/*////////////*/
/* Base - End */
/*////////////*/

/*//////////////////////////*/
/* Primary elements - Start */
/*//////////////////////////*/

.page-box {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: center;
	min-height: 100vh;
}

.page {
	display: flex;
	flex-direction: row;
	max-width: 1600px;
	width: 100%;
}

.banner {
	background-color: #393939;
	width: 41%;
	max-width: 545px;
	background-image: url("../../img/laindri-central-core-banner.jpg");
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.logo {
	font-size: 130px;
	letter-spacing: 0.5px;
	font-weight: 300;
	padding: 40px 68px 53px 53px;
	position: relative;
	left: -1px;
	display: block;	
	text-decoration: none;
}

.logolink {
	display: block;
	text-decoration: none;
}

.logo div.one {
	font-size: 96px;
	letter-spacing: -6.1px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 100%;
	color: #262626;
	background: linear-gradient(90deg, rgba(38,38,38,1) 42.5%, rgba(130,38,38,1) 42.5%);
	background-size: 100% 4px;
	background-repeat: no-repeat;
	background-position: bottom;
	width: 100%;
	text-indent: -6px;
	padding-bottom: 10px;	
	position: relative;
}

.logo div.two {
	font-size: 130px;
	letter-spacing: -6.6px;
	font-weight: 300;
	line-height: 100%;
	color: #696969;
	text-indent: -6px;
	position: relative;
	top: -4px;	
}

.logo div.three {
	font-size: 130px;
	letter-spacing: -6.6px;
	font-weight: 300;
	line-height: 100%;
	color: #696969;
	text-indent: -6px;
	position: relative;
	top: -31px;
}

.logo div.three .square {
	display: inline-block;
	margin-left: 25px;
	width: 19px;
	height: 19px;
	background-color: #822626;
	position:relative;
	top: 2px;
	left: 2px;	
	opacity: 1;
	
	/*animation-name: square;*/
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
}

@keyframes square {
  0%   {opacity: 1}
  25%  {opacity: 1}
  50%  {opacity: 0.5;}
  75%  {opacity: 1;}
  100% {opacity: 1;}
}

.content-column {
	width: 100%;
	max-width:1090px;
	background-color: #181818;
}

.content {
	margin: 94px 4.8%;
}

.topmenu {
	margin: 38px 129px;
	display: flex;
	font-size: 12px;
	line-height: 130%;
	justify-content: space-between;
	color: #696969;
}

.topmenu div:last-child {
	text-align: right;
}

.topmenu div:last-child a:first-child {
	color: #696969;
}

.topmenu a {
	text-decoration: none;
}

.mainmenu {
	width: 100%;
}

.mainmenu ul {
	list-style: none;
	display: flex;
	margin: 0px 52px;
	margin: 0px 4.8%;
	padding: 0px;
	background-color: #1c1c1c;
	justify-content: space-around;
	width: calc(100% - 9.6% - 22px);
	padding: 0px 11px;
}

.mainmenu ul li {
	flex-grow: 1;
	flex-shrink: 1;
}

.mainmenu ul li a {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	text-decoration: none;
	font-size: 15px;
	line-height: 130%;
	color: #b8b8b8;
	width: 100%;
	text-align: center;
	height: 109px;
	text-wrap: nowrap;
}

.mainmenu ul li a span {
	position: relative;
	height: 100%;
	padding: 0px 10%;
	display: flex;
	align-items: center;
	z-index: 2;
}

.mainmenu ul li a span::before {
	content: '';
	position: absolute;
	display: block;
	height: 130%;
	width: 100%;
	top: 0px;
	transform: translateX(-50%);
	left: 50%;
	background-size: 100% 0px;
	background-repeat: no-repeat;
	background-image: linear-gradient(rgba(130,38,38,1), rgba(130,38,38,1));
	background-position: 0% calc(0%);
	transition: all .7s cubic-bezier(0.600, 0.005, 0.485, 1.000);
	z-index: -1;
}

.mainmenu ul li a:hover span::before {
	background-size: calc(100%) 100%;
}

.mainmenu ul li a.active span::before {
	background-image: linear-gradient(rgba(75,28,28,1), rgba(75,28,28,1));
	background-image: linear-gradient(rgba(38,38,38,1), rgba(38,38,38,1));
	background-image: linear-gradient(rgba(130,38,38,1), rgba(130,38,38,1));
	background-size: calc(100%) 100%;
}

/*////////////////////////*/
/* Primary elements - End */
/*////////////////////////*/

/*//////////////////////////*/
/* Content elements - Start */
/*//////////////////////////*/

.cont {
	margin-bottom: 50px;
}

.content-header {
	display: flex;
	align-content: space-between;
	justify-content: space-between;
	margin-bottom: 25px;
	align-items: baseline;
}

.nostreams {
	font-size: 16px;
	font-weight: 300;
	color: #696969;
	margin-top: 25px;
	letter-spacing: -0.5px;
}

.content-header.streams.offline {
	margin-top:60px;
	padding-top:40px;
	border-top: 1px solid #812626;
}

.content-infos {
	font-size: 14px;
	font-weight: 300;
	color: #696969;
	letter-spacing: -0.5px;
}

.content-infos span {
	font-size: 15px;
	font-weight: 500;
}

.content .headline {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.content h1 {
	font-size: 35px;
	font-weight: 200;
	letter-spacing: -1px;
	color: #696969;
	margin-bottom: 0px;
	margin-top: 0px;
}

.content h2 {
	font-size: 16px;
	font-weight: 300;
	color: #696969;
	margin-top: 5px;
	letter-spacing: -0.5px;
}

.content h2 span {
	padding-right: 5px;
}

.content .headline2 {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding-top: 20px;
	margin-bottom: 20px;
}

.content .headline2 h2 {
	font-size: 35px;
	font-weight: 200;
	letter-spacing: -1px;
	color: #696969;
	margin-bottom: 0px;
	margin-top: 0px;
}

.content .headline2 h3 {
	font-size: 16px;
	font-weight: 300;
	color: #696969;
	margin-top: 5px;
	letter-spacing: -0.5px;
}

.content .headline2 h3 span {
	padding-right: 5px;
}

.updates {
	font-size: 14px;
	font-weight: 300;
	line-height: 150%;
	color: #696969;
	display: grid;
	grid-template-columns: 200px auto;
	gap: 20px;
	column-gap: 40px;
}

.updates .date {
	display: grid;
	grid-template-columns: 80px 10px 80px;
	gap: 20px;
	column-gap: 10px;
}

.updates .next {
	display: grid;
	gap: 0px;
	column-gap: 10px;
	/*grid-template-columns: 80px 10px 80px;*/
	/*grid-template-columns: 76px 100px;*/
	border-bottom: 1px solid rgb(106, 35, 35);
	/*text-align: right;*/
	padding-bottom: 20px;
}

.updates div a {
	font-size: 14px;
	font-weight: 400;
	line-height: 150%;
	color: #696969;
	text-decoration: none;
}


/*.updates .next2 {
	display: grid;
	gap: 0px;
	column-gap: 10px;
	grid-template-columns: 1fr;
	padding-bottom: 20px;
}*/

.updates .next2 {
	display: grid;
	gap: 0px;
	column-gap: 10px;
	grid-template-columns: 20px 1fr;
	padding-bottom: 20px;
}

/*.updates .next span {
	background-color: rgba(106, 35, 35, 1);
}*/

/*////////////////////////*/
/* Content elements - End */
/*////////////////////////*/

/*////////////////////////////////////*/
/* Teaser and stream elements - Start */
/*////////////////////////////////////*/

.stream-section-title {
	font-size: 14px;
	font-weight: 300;
	color: #696969;
	letter-spacing: -0.5px;
	display: flex;
	justify-content: flex-end;
	margin-bottom: 20px;
	flex-basis: 350px;
	text-wrap: nowrap;
}

.stream-section-title-wrapper {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	column-gap: 40px;
}

.stream-section-title-wrapper.files {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	column-gap: 40px;
}

.stream-section-title.ipinfo {
	text-wrap: wrap;
	line-height: 120%;
	text-align: left;
	flex-basis: 500px;
	font-size: 11px;
	letter-spacing: 0px;
	color: #4d4d4d;
}

.stream-section-title.ipinfo span {
	align-self: flex-start;
	flex-basis: 550px;
}

.stream-section-title a {
	font-size: 15px;
	font-weight: 500;
	color: #696969;
}

.stream-section-title.ipinfo span a {
	line-height: 120%;
	font-size: 11px;
	letter-spacing: 0px;
	color: #4d4d4d;
	text-decoration: none;
	font-weight: 400;
}

.content-header.streams {
	margin-bottom: 0px;
}

.content-header.files {
	margin-bottom: 0px;
}

.streamList {
	display: flex;
	width: 100%;
	flex-direction: row;
	gap: 30px;
	margin-bottom: 40px;
	flex-wrap: wrap;
	justify-content: space-between;
}

.streamEntry {
	flex-basis: 450px;
	min-height: 455px;
	flex-grow: 1;
	flex-shrink: 1;
	background-color: #1c1c1c;
}

.teaser {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-bottom: 40px;
}

.streamEntry > .streamBanner {
	height: 100%;
}

.streamEntry .streamText {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 10px;
	justify-content: space-between;
	flex-grow: 1;
}

.streamEntry .background {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.streamEntry:not(.youtTubeEntry) .streamText span {
	font-size: 14px;
	font-weight: 300;
	color: #a6a6a6;
	line-height: 120%;
}

.streamEntry > .streamBanner .streamTitle {
	font-size: 20px;
	font-weight: 400;
	color: #a6a6a6;
	line-height: 120%;
	padding-bottom: 15px;
	font-weight: 200;	
	height: 100%;
	word-break: break-word;
}

.streamEntry > .streamBanner .streamTitle a {
	color: #666;
}

.streamEntry > .streamBanner .streamTags {
	font-size: 16px;
	font-weight: 600;
	color: #a6a6a6;
	line-height: 120%;
	padding-bottom: 25px;
	margin-top: auto;	
	height: 100%;
	min-height: fit-content;
}

.streamEntry > .streamBanner .streamTags a {
	color: #a6a6a6;
}

.streamEntry > .streamBanner .streamTime {
	font-size: 16px;
	font-weight: 600;
	color: #a6a6a6;
	line-height: 120%;
}

.streamEntry > .streamBanner .streamLanguage {
	font-size: 16px;
	font-weight: 600;
	color: #a6a6a6;
	line-height: 120%;
	text-transform: uppercase;
}

.streamEntry > .streamBanner .streamLanguage span {
	text-transform: none;
}

.streamEntry > .streamBanner .streamTGroup {
	font-size: 16px;
	font-weight: 600;
	color: #a6a6a6;
	line-height: 120%;
}

.teaser-link {
	display: block;
	height: 87px;
	width: 100%;
	text-decoration: none;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link {
	display: block;
	width: 100%;
	text-decoration: none;
	max-height: 260px;
	max-width: 460px;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .stream-content-bg-inner {
	opacity: 1;
	transition: opacity .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link:hover > .stream-content-bg > .stream-content-bg-inner {
	opacity: 0;
}

.teaser > .teaser-link > .teaserbanner > .bordergradient > .background .teaser-content-bg > .teaser-content-bg-inner {
	opacity: 1;
	background-color: rgba(29, 29, 29, 0);
	transition: background-color .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);
	overflow: hidden;
}

.teaser > .teaser-link > .teaserbanner > .bordergradient > .background .teaser-content-bg > .teaser-content-bg-inner::before {
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	background-color: rgba(81, 32, 32, 0.95);
	transform: translateX(-100%);
	transition: transform .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);
	z-index: 2;
	
	transform: translateX(-100%) skew(-15deg);
}

.teaser > .teaser-link:hover > .teaserbanner > .bordergradient > .background .teaser-content-bg > .teaser-content-bg-inner::before {
  transform: translateX(2%) skew(-15deg);
}

.teaser > .teaser-link > .teaserbanner .bordergradient > .background .teaser-content-bg > .teaser-content-bg-inner .teaser-content > div {
	transform: translateX(0%);
	position: absolute;
	left: 28px;
	transition: transform .5s cubic-bezier(0.600, 0.005, 0.485, 1.000), left .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);	
	text-wrap: nowrap;
}

.teaser > .teaser-link:hover > .teaserbanner > .bordergradient > .background .teaser-content-bg > .teaser-content-bg-inner .teaser-content > div {
	transform: translateX(-50%);
	left: 50%;
}

.teaser > .teaser-link > .teaserbanner .bordergradient > .background .teaser-content-bg > .teaser-content-bg-inner .teaser-content div.more {
	font-size: 16px;
	font-weight: 300;
	opacity: 0;
	position: relative;
	display: inline-block;
	left: -100px;
	color: #848484;
	transition: opacity .5s ease-in-out, left .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);
}

.teaser > .teaser-link:hover > .teaserbanner > .bordergradient > .background .teaser-content-bg > .teaser-content-bg-inner .teaser-content div.more {
	opacity: 1;
	left: 0px;
}

.teaser > .teaser-link > .teaserbanner .bordergradient > .background .teaser-content-bg > .teaser-content-bg-inner .teaser-content div.more span.sep {
	padding: 0px 10px;
}

.teaser-link > .teaserbanner > .bordergradient {
	width: 100%;
	height: 100%;
	padding: 1px;	
	box-sizing: border-box;
	position: relative;
}

.streamEntry > .streamBanner,  .teaser-link > .teaserbanner {
	overflow: hidden;
}

.teaser-link > .teaserbanner {
	width: 100%;
	height: 100%;
}
  
  
.streamEntry > .streamBanner > .bordergradient {
	width: 100%;
	height: 100%;
	padding: 1px;
	box-sizing: border-box;
	position: relative;
}

.streamEntry > .streamBanner > .bordergradient::before, .teaser-link > .teaserbanner > .bordergradient::before {
	content:'';
	position:absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	transform: translate(-73.5%, -78.5%) rotate(155deg) scaleX(2.5);
	width: 260%;
	height: 260%;
	width: 1663px;
	height: 1204px;
	background-image: linear-gradient(0deg, rgba(130,38,38,0) 125px, rgba(130,38,38,1) 200px, rgba(130,38,38,1) 300px, rgba(130,38,38,0) 375px, rgba(130,38,38,0) 500px), linear-gradient(0deg, rgba(130,38,38,0) 925px, rgba(130,38,38,1) 1000px, rgba(130,38,38,1) 1100px, rgba(130,38,38,0) 1175px, rgba(130,38,38,0) 1300px);
	transition: transform 1.0s cubic-bezier(0.005, 0.050, 0.185, 1.000);
}

.streamEntry:hover > .streamBanner > .bordergradient::before, .teaser-link:hover > .teaserbanner > .bordergradient::before {
	transform: translate(-25%, -30%) rotate(155deg) scaleX(2.5);
}

.teaser-link > .teaserbanner > .bordergradient > .background, .streamEntry > .streamBanner > .bordergradient > .background {
	background-color: #1c1c1c;
	width: calc(100% - 18px);
	height: calc(100% - 18px);
	position: relative;
	padding: 9px;	
	transition: background-color 1s ease-in-out;
}

.streamEntry:hover > .streamBanner > .bordergradient > .background {
	background-color: #202020;
	background-color: #242424;
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: right;
	position: relative;
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	/*filter: grayscale(60%);*/
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg.streams {
	background-image: url(../img/teaser-streams.jpg);
	background-size: cover;
	background-position: center;
	/*filter: grayscale(60%);*/
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg.vods {
	background-image: url(../img/teaser-vods.jpg);
	background-size: cover;
	background-position: center;
	/*filter: grayscale(60%);*/
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg.files {
	background-image: url(../img/teaser-files.jpg);
	background-size: cover;
	background-position: center;
	/*filter: grayscale(60%);*/
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg.knowledge {
	background-image: url(../img/teaser-knowledge-base.jpg);
	background-size: cover;
	background-position: center;
	/*filter: grayscale(60%);*/
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg.resources {
	background-image: url(../img/teaser-resources.jpg);
	background-size: cover;
	background-position: center;
	/*filter: grayscale(60%);*/
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg > .teaser-content-bg-inner {
	position: absolute;
	width: 100%;
	height: 100%;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg {
	position: relative;
	width: 100%;
	height: 100%;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .stream-content-bg-inner {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg .teaser-gradient-layer1 {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-size: 100%;
	background-position: left;
	background-repeat: no-repeat;
	background: linear-gradient(105deg, rgba(29,29,29,0.99) 112px, rgba(29,29,29,0.97) 210px, rgba(24,24,24,0) 582px);	
	opacity: 1;
	transition: opacity 1.0s cubic-bezier(0.005, 0.050, 0.185, 1.000);
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .stream-content-bg-inner .teaser-gradient-layer1 {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
	background-size: 100%;
	background-position: left;
	background-repeat: no-repeat;
	background: linear-gradient(105deg, rgba(29,29,29,0.99) 112px, rgba(29,29,29,0.97) 170px, rgba(24,24,24,0) 332px);	
	transition: background-position 1.0s cubic-bezier(0.005, 0.050, 0.185, 1.000);
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg .teaser-gradient-layer2, .streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .stream-content-bg-inner .teaser-gradient-layer2  {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;	
	transition: transform 1.0s cubic-bezier(0.005, 0.050, 0.185, 1.000);
	transition-delay: 100ms;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .stream-content-bg-inner .teaser-gradient-layer2 {
	width: 180px;
	height: 259px;
	background-image: none;
	background-color: rgba(81, 32, 32, 1);
	transform: translateX(calc(-100% + 118px)) skew(-14.55deg);
	left: 0px;
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg .teaser-gradient-layer2 {
	width: 180px;
	height: 259px;
	background-image: none;
	background-color: rgba(81, 32, 32, 1);
	transition: transform .5s cubic-bezier(0.600, 0.005, 0.485, 1.000), left .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);
	transform: translateX(calc(-100% + 118px)) skew(-14.55deg);
	left: 0px;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link:hover > .stream-content-bg > .stream-content-bg-inner .teaser-gradient-layer2 {
	background-position: -600px;
	transform: translateX(calc(-100% + 118px - 178px)) skew(-14.55deg);
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg .teaser-gradient-layer3, .streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .stream-content-bg-inner .teaser-gradient-layer3  {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;	
	transition: transform 1.0s cubic-bezier(0.005, 0.050, 0.185, 1.000);
	transition-delay: 200ms;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .stream-content-bg-inner .teaser-gradient-layer3 {
	width: 40px;
	height: 259px;
	background-color: rgba(106, 35, 35, 1);
	transform: translateX(calc(-100% + 58px)) skew(-14.55deg);
	left: 0px;
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg .teaser-gradient-layer3 {
	width: 40px;
	height: 259px;
	background-color: rgba(106, 35, 35, 1);
	transition: transform .5s cubic-bezier(0.600, 0.005, 0.485, 1.000), left .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);
	transform: translateX(calc(-100% + 58px)) skew(-14.55deg);
	left: 0px;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link:hover > .stream-content-bg > .stream-content-bg-inner .teaser-gradient-layer3 {
	background-position: -600px;
	transform: translateX(calc(-100% + 58px - 178px)) skew(-14.55deg);
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg .teaser-gradient-layer4, .streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .stream-content-bg-inner .teaser-gradient-layer4  {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;	
	transition: transform 1.0s cubic-bezier(0.005, 0.050, 0.185, 1.000);
	transition-delay: 150ms;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .stream-content-bg-inner .teaser-gradient-layer4 {
	width: 40px;
	height: 259px;
	background-color: rgba(119, 37, 37, 1);
	transform: translateX(calc(-100% + 48px)) skew(-14.55deg);
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg .teaser-gradient-layer4 {
	width: 40px;
	height: 259px;
	background-color: rgba(119, 37, 37, 1);
	transition: transform .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);
	transform: translateX(calc(-100% + 48px)) skew(-14.55deg);
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link:hover > .stream-content-bg > .stream-content-bg-inner .teaser-gradient-layer4 {
	background-position: -600px;
	transform: translateX(calc(-100% + 48px - 178px)) skew(-14.55deg);
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg .teaser-gradient-layer5, .streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .stream-content-bg-inner .teaser-gradient-layer5  {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;	
	transition: transform 1.0s cubic-bezier(0.005, 0.050, 0.185, 1.000);
	transition-delay: 100ms;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .stream-content-bg-inner .teaser-gradient-layer5 {
	height: 259px;
	background-color: rgba(106, 35, 35, 1);
	transform: translateX(calc(-100% + 34px)) skew(-14.55deg);
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg .teaser-gradient-layer5 {
	height: 259px;
	background-color: rgba(106, 35, 35, 1);
	transition: transform .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);
	transform: translateX(calc(-100% + 34px)) skew(-14.55deg);
}

.teaser > .teaser-link:hover > .teaserbanner > .bordergradient > .background .teaser-content-bg > .teaser-content-bg-inner .teaser-gradient-layer2 {
  left: calc(100% + 35px);
}

.teaser > .teaser-link:hover > .teaserbanner > .bordergradient > .background .teaser-content-bg > .teaser-content-bg-inner .teaser-gradient-layer3 {
  left: calc(100% - 93px);
}

.teaser > .teaser-link:hover > .teaserbanner > .bordergradient > .background .teaser-content-bg > .teaser-content-bg-inner .teaser-gradient-layer4 {
  transform: translateX(30px) skew(-14.55deg);
}

.teaser > .teaser-link:hover > .teaserbanner > .bordergradient > .background .teaser-content-bg > .teaser-content-bg-inner .teaser-gradient-layer5 {
  /*transform: translateX(105%) skew(-15deg);*/
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link:hover > .stream-content-bg > .stream-content-bg-inner .teaser-gradient-layer5 {
	background-position: -600px;
	transform: translateX(calc(-100% + 34px - 178px)) skew(-14.55deg);
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg .teaser-gradient-layer6, .streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .stream-content-bg-inner .teaser-gradient-layer6  {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;	
	transition: transform 1.0s cubic-bezier(0.005, 0.050, 0.185, 1.000);
	transition-delay: 50ms;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .stream-content-bg-inner .teaser-gradient-layer6 {
	height: 259px;
	background-color: rgba(80, 31, 31, 1);
	transform: translateX(calc(-100% - 27px)) skew(-14.55deg);
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg .teaser-gradient-layer6 {
	height: 259px;
	background-color: rgba(80, 31, 31, 1);
	transform: translateX(calc(-100% - 27px)) skew(-14.55deg);
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link:hover > .stream-content-bg > .stream-content-bg-inner .teaser-gradient-layer6 {
	background-position: -600px;
	transform: translateX(calc(-100% - 27px - 178px)) skew(-14.55deg);
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg .svg-gradient {
	display: block;
	position: absolute;
	width: 360px;
	height: calc(100% - 18px);
	z-index: 2;
}

.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg > .teaser-content-bg-inner > .teaser-content  {
	position: relative;
	z-index: 3;
	width: calc(100% - 28px);
	height: 100%;
	display: flex;
	align-items: center;
	align-content: center;
	color: #a6a6a6;
	font-size: 25px;
	font-weight: 900;
	padding-left: 28px;
	letter-spacing: -0.75px;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-content  {
	position: relative;
	z-index: 3;
	width: calc(100% - 56px);
	height: calc(100% - 35px);
	display: flex;
	align-items: center;
	align-content: center;
	color: #a6a6a6;
	font-size: 25px;
	font-weight: 900;
	padding: 12px 28px 23px 28px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-content {
	position: absolute;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-image {
	width: 100%;
	height: 100%;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .teaser-image {
	width: 100%;
	height: 100%;
	position: absolute;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-image > img {
	object-fit: cover;
	object-position: right bottom;
	width: 100%;
	height: auto;
	display: block;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-image > iframe {
	object-fit: cover;
	object-position: right bottom;
	width: 100%;
	height: auto;
	display: block;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .teaser-image > img {
	object-fit: cover;
	object-position: right bottom;
	width: 100%;
	height: auto;
	display: block;
}

.viewers {
	font-size: 20px;
	font-weight: 700;
}

.viewers span {
	font-size: 12px;
	font-weight: 700;
}

.bottominfo {
	width: 100%;
}

.bottominfo .channelname {
	width: min-content;
	transform: translateX(0px);
	transition: transform .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);
	position: relative;
	z-index: 2;
	width: fit-content;
}

.bottominfo .channelnamebox {
	transition: transform .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);
	transform: translateX(0%);
}

.bottominfo .channelname span {
	position: relative;
	z-index: 2;
}

.bottominfo .channelname::before {
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	background-color:rgba(81, 32, 32, 0);
	transition: background-color .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);
	position: absolute;
	transform: translate(-10px, -2.5px) skew(-14.55deg);
	padding: 5px 10px;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link:hover > .stream-content-bg > .teaser-content > .bottominfo > .channelnamebox {
	transform: translateX(100%);
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link:hover > .stream-content-bg > .teaser-content > .bottominfo > .channelnamebox > .channelname::before {
	background-color:rgba(104, 31, 31, 0.95);
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link:hover > .stream-content-bg > .teaser-content > .bottominfo > .channelnamebox > .channelname {
	transform: translateX(-100%);
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-content > .bottominfo > .status {
	opacity: 1;
	transition: opacity .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-content > .viewers {
	opacity: 1;
	transition: opacity .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link:hover > .stream-content-bg > .teaser-content > .bottominfo > .status {
	opacity: 0;
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link:hover > .stream-content-bg > .teaser-content > .viewers {
	opacity: 0;
}

.teaser-content .status {
	font-size: 20px;
	font-weight: 400;
}

.teaser-content .status.offline {
	font-size: 20px;
	font-weight: 400;
	line-height: 70%;
	padding-bottom: 10px;
}

.teaser-content .status.offline span {
	font-size: 12px;
	font-weight: 400;
}

/*//////////////////////////////////*/
/* Teaser and stream elements - End */
/*//////////////////////////////////*/

/*///////////////////////////////////////*/
/* YouTube Vod / stream Elements - Start */
/*///////////////////////////////////////*/

.streamEntry.youtTubeEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/*.streamEntry.youtTubeEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-image > img {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.2);
}*/

.streamEntry.youtTubeEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-image > img {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 135%;
  display: block;
  transform: translateY(-13%);
}

.streamEntry.youtTubeEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-image:has(iframe) > img {
	/*transform: translateY(13%);*/
}

.streamEntry.youtTubeEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-image > iframe {
  /*width: 100%;
  height: 145%;
  display: block;
  transform: translateY(-15.6%);*/
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: auto;
  aspect-ratio: 16 / 9;
  /*transform: scale(1.5) translateY(-15.6%);*/
  
  position: absolute;
  left: 50%; /* % of surrounding element */
  top: 0px;
  transform: translate(-50%, 0%); /* % of current element */
  z-index: 1;
  
}

.streamEntry.youtTubeEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-image > iframe > * {
  /*pointer-events: none;*/
}


.streamEntry.youtTubeEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-image.ytplayer::after {
	content: '';
	width: 90px;
	height: 20px;
	position: absolute;
	bottom: 0px;
	right: 0px;
	display: block;
	z-index: 1;
	background-image: url("../img/yt_logo_mono_dark.png");
	background-size: cover;
	transform: translate(-16px, -15px);
	opacity: 0.75;
	transition: opacity .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);
}

.streamEntry.youtTubeEntry > .streamBanner > .bordergradient > .background > .stream-link:hover > .stream-content-bg > .teaser-image.ytplayer::after {
	opacity: 0;
}

.streamEntry.youtTubeEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .stream-content-bg-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
}

.stream-section-title.ipinfo.youtube {
	flex-basis: 250px;
	/*display: block;*/
}

.streamEntry.youtTubeEntry > .streamBanner > .bordergradient > .background > .stream-link:hover > .stream-content-bg > .teaser-content > .bottominfo > .channelnamebox {
	/*transform: translateX(34%);*/
	/*transform: translateX(0%);*/
}

.streamEntry.youtTubeEntry > .streamBanner > .bordergradient > .background > .stream-link:hover > .stream-content-bg > .teaser-content > .bottominfo > .channelnamebox > .channelname {
  /*transform: translateX(0%);
  transform: translate(0%, 35px);*/
}

.teaser-image.ytplayer {
	/*pointer-events:none;*/
}

#unmuteButton {
	/*text-decoration: none;
	color: #8e8e8e;
	background-color: #6a2323;
	padding: 5px 10px;
	display: inline-block;
	font-size: 11px;
	margin-top: 5px;
	transition: color .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);*/
}

#unmuteButton:hover {
	/*color: #a6a6a6;*/
}

/*/////////////////////////////////////*/
/* YouTube Vod / stream Elements - End */
/*/////////////////////////////////////*/


/*////////////////////////////////*/
/* Twitch stream Elements - Start */
/*////////////////////////////////*/

.streamEntry.twitchEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-image > img {
	position:relative;
}

.streamEntry.twitchEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-content {
	pointer-events: none;
}

.streamEntry.twitchEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .stream-content-bg-inner {
	pointer-events: none;
}

.streamEntry.twitchEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-image > div > iframe {
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: auto;
  aspect-ratio: 16 / 9;
  
  position: absolute;
  left: 50%; /* % of surrounding element */
  top: 0px;
  transform: translate(-50%, 0%); /* % of current element */
  z-index: 1;
  pointer-events: none;
  
}

.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .stream-content-bg-inner {
	z-index: 1;
}

/*//////////////////////////////*/
/* Twitch stream Elements - End */
/*//////////////////////////////*/

/*////////////////*/
/* Toggle - Start */
/*////////////////*/

.stream-section-title-wrapper.mutebox {
	flex-direction: row;
}

.stream-section-title-wrapper.mutebox .stream-section-title {
  justify-content: flex-start;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 16px;
  margin-right: 6px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #242424;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 8px;
  width: 21px;
  left: 4px;
  bottom: 4px;
  background-color: #5e5e5e;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #6a2323;
}

input:focus + .slider {
  /*box-shadow: 0 0 1px #2196F3;*/
}

input:checked + .slider:before {
  -webkit-transform: translateX(21px);
  -ms-transform: translateX(21px);
  transform: translateX(21px);
  background-color: #8e8e8e;
}

/*//////////////*/
/* Toggle - End */
/*//////////////*/

/*//////////////////*/
/* Progress - Start */
/*//////////////////*/

.progress {
	color: #696969;
	font-size: 25px;
	font-weight: 200;
}

.progress a {
	color: #696969;
}

/*////////////////*/
/* Progress - End */
/*////////////////*/

/*///////////////////////*/
/* Files section - Start */
/*///////////////////////*/

.file-section-title {
	display:grid; 
	grid-template-columns: 50% 15% 20%; 
	gap: 10px; 
	column-gap:5%;
	background-color: #6a2323;
	height: 56px;
	align-items: center;
	padding: 0px 21px;
}

.file-section-title > div {
	color: #9f9f9f;
	font-size: 14px;
	font-weight: 600;
	padding-bottom: 3px;
}

.file-section-entries {
	display: grid;
	row-gap: 10px;
	padding-top: 10px;
}

.file-section-entry {
	display:grid; 
	grid-template-columns: 50% 15% 20%; 
	gap: 30px;
	column-gap: 5%;
	height: 50px;
	align-items: center;
	padding: 0px 21px;
	background-color: #1c1c1c;
	background-size: 0% 100%;
	background-image: linear-gradient(rgba(36,36,36,1), rgba(36,36,36,1));
	background-repeat: no-repeat;
	background-position: 0px calc(100% - 0px);
	transition: all .7s cubic-bezier(0.600, 0.005, 0.485, 1.000);
	text-decoration: none;
	position: relative;
}

.file-section-entry:hover {
	background-size: 100% 100%;
	background-image: linear-gradient(rgba(36,36,36,1), rgba(36,36,36,1));
	transition: all .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);
}

.file-section-entry::after {
	content:'';
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: 0px;
	background-color: transparent;
	background-size: 0px 100%;
	background-image: linear-gradient(0deg, rgba(130,38,38,1) 1%, rgba(130,38,38,0) 2%);
	background-repeat: no-repeat;
	background-position: left;
	transition: background-size 1.3s cubic-bezier(0.600, 0.005, 0.485, 1.000);
}

.file-section-entry:hover::after {
	background-size: 100% 100%;
	background-image: linear-gradient(0deg, rgba(130,38,38,1) 1%, rgba(130,38,38,0) 2%);
	transition: background-size .9s cubic-bezier(0.600, 0.005, 0.485, 1.000);
}

.file-section-entry:hover > div, .file-section-entry:hover > div > span {
	/*color: #b8b8b8;
	transition: color .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);*/
}

.file-section-entry > div {
	color: #9f9f9f;
	font-size: 16px;
	font-weight: 300;
	padding-bottom: 2px;
	transition: color .7s cubic-bezier(0.600, 0.005, 0.485, 1.000);
}

.file-section-entry > div span {
	text-decoration: none;
	color: #9f9f9f;
	transition: color .7s ease-in-out, border-bottom .7s ease-in-out;
	border-top: 1px solid transparent;
	border-bottom: 1px solid #3c3c3c;
	line-height: 130%;
}

.file-section-entry:hover > div > span {
	border-bottom: 1px solid #5a5a5a;
	color: #b8b8b8;
}

.filename {
	display:flex;
}

.size {
	display:flex; justify-content:end;
}

.downloads {
	display:flex; justify-content:end;
}

.long {
	display: block;
}

.short {
	display: none;
}

/*/////////////////////*/
/* Files section - End */
/*/////////////////////*/



/*///////////////////////*/
/* Resource section - Start */
/*///////////////////////*/

.link-section-title {
	display:grid; 
	grid-template-columns: 30% 65%; 
	gap: 10px; 
	column-gap:5%;
	background-color: #6a2323;
	height: 56px;
	align-items: center;
	padding: 0px 21px;
}

.link-section-title > div {
	color: #9f9f9f;
	font-size: 14px;
	font-weight: 600;
	padding-bottom: 3px;
}

.link-section-entries {
	display: grid;
	row-gap: 10px;
	padding-top: 10px;
}

.link-section-entry {
	display:grid; 
	grid-template-columns: 30% 65%; 
	gap: 30px;
	column-gap: 5%;
	min-height: 50px;
	align-items: flex-start;
	padding: 0px 21px;
	background-color: #1c1c1c;
	background-size: 0% 100%;
	background-image: linear-gradient(rgba(36,36,36,1), rgba(36,36,36,1));
	background-repeat: no-repeat;
	background-position: 0px calc(100% - 0px);
	transition: all .7s cubic-bezier(0.600, 0.005, 0.485, 1.000);
	text-decoration: none;
	position: relative;
	line-height: 120%;
	padding: 12px 21px 13px;
	box-sizing: border-box;
}

.link-section-entry:hover {
	background-size: 100% 100%;
	background-image: linear-gradient(rgba(36,36,36,1), rgba(36,36,36,1));
	transition: all .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);
}

.link-section-entry::after {
	content:'';
	position: absolute;
	width: 100%;
	height: 50px;
	bottom: 0px;
	background-color: transparent;
	background-size: 0px 100%;
	background-image: linear-gradient(0deg, rgba(130,38,38,1) 1%, rgba(130,38,38,0) 2%);
	background-repeat: no-repeat;
	background-position: left;
	transition: background-size 1.3s cubic-bezier(0.600, 0.005, 0.485, 1.000);
}

.link-section-entry:hover::after {
	background-size: 100% 100%;
	background-image: linear-gradient(0deg, rgba(130,38,38,1) 1%, rgba(130,38,38,0) 2%);
	transition: background-size .9s cubic-bezier(0.600, 0.005, 0.485, 1.000);
}

.link-section-entry:hover > div, .link-section-entry:hover > div > span {
	/*color: #b8b8b8;
	transition: color .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);*/
}

.link-section-entry > div {
	color: #9f9f9f;
	font-size: 16px;
	font-weight: 300;
	padding-bottom: 2px;
	transition: color .7s cubic-bezier(0.600, 0.005, 0.485, 1.000);
}

.link-section-entry > div span {
	text-decoration: none;
	color: #9f9f9f;
	transition: color .7s ease-in-out, border-bottom .7s ease-in-out;
	border-top: 1px solid transparent;
	border-bottom: 1px solid #3c3c3c;
	line-height: 130%;
}

.link-section-entry:hover > div > span {
	border-bottom: 1px solid #5a5a5a;
	color: #b8b8b8;
}

.link-section-entry.additional > div {
	font-size: 13px;
	color: #7b7b7b;
}

.link-section-entry.additional > div span {
	color: #7b7b7b;
}

.link-section-entry.additional:hover > div, .link-section-entry.additional:hover > div span {
	color: #9f9f9f;
}

.link-section-entry.additional > div.linkname {
	padding-left: 30px;
}

.link-section-entry.additional {
	/*border-bottom: 1px solid #313131;*/
	background-color: #1a1a1a;
}

/*.link-section-entry:not(.additional)::before {
	content:'';
	position: absolute;
	width: 100%;
	height: 50px;
	bottom: 0px;
	background-color: transparent;
	background-size: 100% 100%;
	background-image: linear-gradient(0deg, rgba(40,40,40,1) 1%, rgba(130,38,38,0) 2%);
	background-repeat: no-repeat;
	background-position: left;
	transition: background-size 1.3s cubic-bezier(0.600, 0.005, 0.485, 1.000);
}*/

.linkname {
	display:flex;
}

.description {
	display:flex;
	display: block;
}

.link-section-title .long {
	display: none;
}

.link-section-title .short {
	display: block;
}

.link-subsection {
	font-weight: 300;
	font-size: 14px;
	color: #a63030;
	margin-top: 10px;
}


/*/////////////////////*/
/* Resource section - End */
/*/////////////////////*/


/*/////////////////////////*/
/* YouTube section - Start */
/*/////////////////////////*/

.youtTubeEntry .vodEntries {
	display: flex;
	flex-direction: column;
	gap: 0px;
	justify-content: space-between;
	flex-grow: 1;
	/*padding: 0px 10px;*/
}

.youtTubeEntry .vodEntries .vodEntriesTitle {
	color: #5e5e5e;
	font-weight: 400;
	font-size: 14px;
	font-weight: 300;
	line-height: 120%;
}

.youtTubeEntry .link-section-entry {
	grid-template-columns: 100%; 
	gap: 10px;
	padding: 12px 21px 13px;
	padding: 12px 11px 13px;
	padding: 12px 0px 13px;
	/*background-color: #6a2323;*/
	color: #a6a6a6;
	color: #5e5e5e;
	background-color: #242424;
	background-color: transparent;
	background-position: bottom right;
	background-size: 100% 1px;
	background-image: linear-gradient(rgba(28,28,28,1), rgba(28,28,28,1));
	background-image: linear-gradient(rgba(94,94,94,1), rgba(94,94,94,1));
	/*border-bottom: 1px solid #a6a6a6;
	border-bottom: 1px solid #5e5e5e;*/
	transition: all 1.5s cubic-bezier(0.600, 0.005, 0.485, 1.000);
}

.youtTubeEntry .link-section-entry:hover {
	background-size: 0% 1px;
	background-image: linear-gradient(rgba(28,28,28,1), rgba(28,28,28,1));
	background-image: linear-gradient(rgba(94,94,94,1), rgba(94,94,94,1));
	transition: all .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);
	color: #a6a6a6;
}

.youtTubeEntry.streamEntry > .streamBanner .streamTitle .link-section-entry {
	color: #a6a6a6;
	background-size: 100% 0px;
}

.vodEntries {
	font-size: 16px;
	font-weight: 400;
}

.vodEntries .link-section-entry {
	min-height: 92px;
	align-content: flex-start;
}

.youtTubeEntry .viewers {
	padding-top: 5px;
	line-height: 110%;
}

.youtTubeEntry .link-section-entry::after {
	z-index: 102;
}

.youtTubeEntry.streamEntry .link-section-entry span {
	/*color: #5e5e5e;*/
	font-size: 14px;
	/*transition: color .5s cubic-bezier(0.600, 0.005, 0.485, 1.000);*/
}

.youtTubeEntry .link-section-entry:hover span {
	/*color: #a6a6a6;*/
}

/*///////////////////////*/
/* YouTube section - End */
/*///////////////////////*/


/*///////////////////////////////////////////////*/
/* OTF to Woff2 font-weight compensation - Start */
/*///////////////////////////////////////////////*/


body {
	font-weight: 500;
}

.content h2 {
  font-weight: 400;
}

.content .headline2 h3 {
  font-weight: 300;
}

.teaser > .teaser-link > .teaserbanner .bordergradient > .background .teaser-content-bg > .teaser-content-bg-inner .teaser-content div.more {
  font-weight: 400;
}

.stream-section-title {
  font-weight: 400;
}

.stream-section-title b {
  font-weight: 400;
}

.content-infos {
  font-weight: 400;
}

.streamEntry > .streamBanner .streamTitle {
  font-weight: 300;
}

.streamEntry .streamText span {
  font-weight: 400;
}

.updates {
  font-weight: 400;
}

.mainmenu ul li a span {
  letter-spacing: -0.1px;
}

.topmenu {
  letter-spacing: -0.07px;
}

.updates {
  letter-spacing: -0.08px;
}



/*////////////////////////////////////////////*/
/* OTF to Woff font-weight compensation - End */
/*////////////////////////////////////////////*/


/*/////////////////////*/
/* Breakpoints - Start */
/*/////////////////////*/


@media only screen and (min-width: 1905px) {
	
	.streamList {
		justify-content: start;
	}
	.page {
		max-width: none;
	}
	.content-column {
		max-width: none;
	}
	.topmenu {
		width: calc(100% - 9.6% - 22px);
		padding: 0px 11px;
		margin: 38px auto;
	}
	.content {
		margin: 94px 53px;
	}
	
	.mainmenu ul {
		margin: 0px 53px;
		width: calc(100% - 106px - 22px);
	}
	
	.topmenu {
		width: calc(100% - 106px - 22px);
	}
}


@media only screen and (min-width: 1601px) {
	.banner {
		/*max-width: 510px;*/
		/*max-width: 545px;*/
	}
}

@media only screen and (max-width: 1875px) {
	
	.banner {
		max-width: 510px;
		width: 35%;
	}
	
}


@media only screen and (max-width: 1599px) {
	
	.banner {
		max-width: 510px;
		width: 35%;
	}

	.logo {
		padding: 2.5vw 4.25vw 2.5vw 3.3vw;
	}
	
	.logo div.one {
		font-size: 6vw;
		letter-spacing: -0.38vw;
		text-indent: -0.4vw;
	}
	
	.logo div.two {
		font-size: 8.1vw;
		letter-spacing: -0.41vw;
	}
	
	.logo div.three {
		font-size: 8.1vw;
		letter-spacing: -0.41vw;
		top: -2vw;
	}
	
	.logo div.three .square {
		width: 1.18vw;
		height: 1.18vw;
		margin-left: 1.55vw;
	}
	
	.mainmenu ul li a {
		/*padding: 48px 0px 51px;*/
	}
	
	.mainmenu ul li a span::before {
		/*padding: 0px 0.7vw;*/
	}
	.topmenu {
		margin: 38px 7.9vw;
		margin: 38px calc(23.4% - 9.6% - 22px);
	}
}

@media only screen and (min-width: 1477px) {
	/*.streamEntry {
		max-width: 478px;
	}*/
}

@media only screen and (min-width: 1465px) {
	.streamEntry {
		flex-basis: 410px;
		max-width: calc((100% - 30px) / 2);
	}
	.streamList {
		max-width: 986px;
	}
	
	.streamList {
		justify-content: start;
	}
	.page {
		max-width: none;
	}
	.content-column {
		max-width: none;
	}
	.topmenu {
		width: calc(100% - 9.6% - 22px);
		padding: 0px 11px;
		margin: 38px auto;
	}
	.content {
		margin: 94px 53px;
	}
	
	.mainmenu ul {
		margin: 0px 53px;
		width: calc(100% - 106px - 22px);
	}
	
	.topmenu {
		width: calc(100% - 106px - 22px);
	}
	
	.link-section-entry {
		/*grid-template-columns: minmax(auto, 400px) auto;*/
	}
	
}

@media only screen and (min-width: 1905px) {
	.streamEntry {
		flex-basis: 410px;
		max-width: calc((100% - 60px) / 3);
	}
	.streamList {
		max-width: 1494px;
	}
}

@media only screen and (min-width: 2026px) {
	.link-section-title {
		grid-template-columns: minmax(auto, 400px) auto;
	}
	
	.link-section-entry {
		grid-template-columns: minmax(auto, 400px) auto;
	}
}

@media only screen and (min-width: 2346px) {
	.streamEntry {
		max-width: calc((100% - 90px) / 4);
	}
	.streamEntry:last-child {
		margin-right: auto;
	}
	.streamList {
		max-width: 2002px;
	}
}

@media only screen and (min-width: 2786px) {
	.streamEntry {
		max-width: calc((100% - 120px) / 5);
	}
	.streamList {
		max-width: 2510px;
	}
}

@media only screen and (min-width: 3226px) {
	.streamEntry {
		max-width: calc((100% - 150px) / 6);
	}
	.streamList {
		max-width: 3018px;
	}
}

@media only screen and (min-width: 3666px) {
	.streamEntry {
		max-width: calc((100% - 180px) / 7);
	}
	.streamList {
		max-width: 3526px;
	}
}

@media only screen and (min-width: 4106px) {
	.streamEntry {
		max-width: calc((100% - 210px) / 8);
	}
	.streamList {
		max-width: 4034px;
	}
}



@media only screen and (max-width: 1464px) {
	.streamList {
		/*flex-direction: column;*/
	}
	.streamEntry {
		min-height: unset;
	}
	.streamEntry .background {
		flex-direction: row;
	}
	.streamEntry > .streamBanner > .bordergradient > .background > .stream-link {
		/*width: 48vw;*/
	}
	.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-image > img {
		height: 100%;
	}
	
	.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .teaser-image > img {
		height: 100%;
	}
	
	.streamEntry > .streamBanner > .bordergradient > .background > .stream-link {
		width: 45%;
	}
	
	.streamEntry .streamText {
		width: 55%;
	}
	
	.vodEntries .link-section-entry {
		min-height: unset;
	}
}

@media only screen and (max-width: 1200px) {
	.link-section-title {
		grid-template-columns: 35% 60%;
	}

	.link-section-entry {
		grid-template-columns: 35% 60%;
	}
}


@media only screen and (max-width: 1040px) {
	.page {
		background-color: #181818;
	}
	
	/*.streamList {
		flex-direction: column;
	}
	
	.streamEntry {
		min-height: unset;
	}*/
	
	.streamEntry {
		min-width: 100%;
	}
	
	.banner {
		width: 100%;
		max-width: 100%;
		background-size: 50%;
		background-position: right 42%;
	}
	.page {
		display: flex;
		flex-direction: column;
	}
	.logo {
		display: flex;
		flex-direction: row;
		padding: 2.5vw 4.25vw 1.5vw 3.3vw;
	}
	
	.logo .logolink {
		display: flex;
		flex-direction: row;
	}
	
	.logo div.one {
		width: 23vw;
	}
	.logo div.two {
		top: 0px;
		line-height: 55%;
	}
	.logo div.three {
		left: 2vw;
		top: 0px;
		line-height: 55%;
	}
	.topmenu {
		margin: 3.65vw calc(23.4% - 9.6% - 22px);
	}
}

@media only screen and (max-width: 756px) {
	.streamList {
		/*flex-direction: column;*/
	}
	.streamEntry {
		min-height: unset;
	}
	.streamEntry .background {
		flex-direction: column;
	}
	.streamEntry > .streamBanner > .bordergradient > .background > .stream-link {
		width: 100%;
	}
	
	.streamEntry .streamText {
		width: 100%;
		box-sizing: border-box;
	}
	
	.menues {
		display: flex;
		/*flex-direction: column;*/
		flex-direction: row-reverse;
	}
	
	.topmenu {
		flex-direction: column;
		align-items: flex-end;
		row-gap: 15px;		
		justify-content: flex-start;
		flex-grow: 1;		
		margin: 30px 4.8%;
		text-align: right;
	}
	
	.mainmenu ul {
		flex-direction: row;
		flex-wrap: wrap;
		row-gap: 15px;
		align-content: first baseline;
		padding: 15px 11px;		
		flex-direction: column;
		align-items: flex-start;
		width: calc(100% - 22px);
	}
	
	.mainmenu ul li {
		flex-basis: 30%;		
		flex-basis: 100%;		
		width: 100%;
	}
	
	.mainmenu ul li a {
		height: 30px;
	}
	
	.mainmenu {
		width: fit-content;
		margin-top: 20px;
		margin: 30px 4.8% 0px;
	}
	
	.mainmenu ul li a span {
		padding: 0px 10px;
		
		width: 100%;
	}
	
	.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg > .teaser-content-bg-inner > .teaser-content {
		text-wrap: nowrap;
	}
	
	.stream-section-title {
	  justify-content: flex-start;
	}
	
	.mainmenu ul {
		margin-left: 0px;
	 }
	 
	.stream-section-title-wrapper {
		flex-direction: column;
	}
	
	.stream-section-title-wrapper div, .stream-section-title-wrapper div.ipinfo, .stream-section-title-wrapper div.ipinfo.youtube {
		flex-basis: unset;
	}
	
	.link-section-title {
		grid-template-columns: 44% 51%;
	}

	.link-section-entry {
		grid-template-columns: 44% 51%;
	}
}

@media only screen and (max-width: 600px) {
	.logo div.one {
		width: 31vw;
	  }
	.logo div.one {
		font-size: 8vw;
	}
	.logo div.two {
		font-size: 10.1vw;
	}
	.logo div.three {
		font-size: 10.1vw;
	}
	
	.content-header {
		flex-direction: column;
	}
	
	.link-section-title {
		grid-template-columns: 47% 48%;
	}
	
	.link-section-entry {
		grid-template-columns: 100%;
		row-gap: 5px;
	}
	
	.link-section-entry.additional > div.description {
	  padding-left: 30px;
	}
	
	.link-section-title .long {
		display: block;
	}

	.link-section-title .short {
		display: none;
	}
	
	.link-section-title .description {
		display: none;
	}
}

@media only screen and (max-width: 500px) {
	
	.updates {
		grid-template-columns: auto;
		row-gap: 5px;
	}
	.updates .date {
		padding-top: 20px;
	}
	.updates .date:first-child {
		padding-top: 0px;
	}
	
	.updates .next {
		display: grid;
		gap: 20px;
		column-gap: 10px;		
		border-bottom: 0px;
	}
	
	.updates .next2 {
		padding-bottom: 20px;
		border-bottom: 1px solid rgb(106, 35, 35);
	}
	
	.menues {
		flex-direction: column;
	}
	
	.topmenu {
		margin: 20px 4.8% 0px;
		align-items: flex-start;		
		padding: 20px calc(4.8% + 21px);
		margin: 0px;
		row-gap: 10px;
		background-color: #1c1c1c;
		text-align: left;
	}
	
	.topmenu div:last-child {
		text-align: left;
	}
	
	.mainmenu {
		width: auto;
	}
	
	.mainmenu ul li {
		width: 100%;
	}
	
	.mainmenu ul li a span {
		width: 100%;
	}
	
	.content .headline {
		flex-wrap: wrap;
		row-gap: 0px;
	}
	
	.stream-section-title {
		text-wrap: nowrap;
		flex-wrap: wrap;
		line-height: 23px;
	}
	
	.file-section-entry > div {
		font-size: 14px;
	}
	
	.file-section-title > div {
		font-size: 12px;
	}
	
	.file-section-title {
		grid-template-columns: 60% 15% 10%;
	}
	
	.file-section-entry {
		grid-template-columns: 60% 15% 10%;
	}
	
	.link-section-entry > div {
		font-size: 14px;
	}
	
	.link-section-title > div {
		font-size: 12px;
	}
	
	.link-section-title {
		grid-template-columns: 47% 48%;
	}
	
	.link-section-entry {
		grid-template-columns: 100%;
		row-gap: 5px;
	}
	
	.link-section-entry.additional > div.description {
	  padding-left: 30px;
	}
	
	.long {
		display: none;
	}
	
	.short {
		display: block;
	}
	
	.teaser > .teaser-link > .teaserbanner .bordergradient > .background .teaser-content-bg > .teaser-content-bg-inner .teaser-content div.more {
		display:none;
	}
}

@media only screen and (max-width: 400px) {
	
	.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-content {
		font-size: 22px;
	}
	
	.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg > .teaser-content-bg-inner > .teaser-content {
	  font-size: 22px;
	}
	
	.link-section-entry.additional > div.description, .link-section-entry.additional > div.linkname {
	  padding-left: 0px;
	}
	
	.streamEntry.youtTubeEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-image > iframe {
	  
		/*height: calc(78.61vw - 58px);
		width: auto;
		height: auto;
		width: calc(128.5vw - 58.4px);
		width: 111.5vw;
		
		height: calc(79.11vw - 58.4px);*/
		width: auto;
		height: 100%;
		aspect-ratio: 16 / 9;
		position: absolute;
		left: 50%; /* % of surrounding element */
		top: 0vw;
		transform: translate(-50%, 0%); /* % of current element */
		z-index: 1;
	  
	}
	
	.streamEntry.youtTubeEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-image:has(iframe) > img {
		transform: translateY(-13%);
	}
	
	.streamEntry.youtTubeEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-image:has(iframe) img {
		/*display:none;*/
	}
}

@media only screen and (max-width: 350px) {
	
	.file-section-entry > div {
		font-size: 3.7vw;;
	}
	
	.file-section-title > div {
		font-size: 11px;
	}
	
	.streamEntry > .streamBanner > .bordergradient > .background > .stream-link > .stream-content-bg > .teaser-content {
		font-size: 6.3vw;
	}
	
	.teaser-link > .teaserbanner > .bordergradient > .background > .teaser-content-bg > .teaser-content-bg-inner > .teaser-content {
	  font-size: 6.3vw;
	}
}

/*///////////////////*/
/* Breakpoints - End */
/*///////////////////*/