/* montserrat-100 - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 100;
	src: url('../fonts/montserrat-v26-latin_latin-ext-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-100italic - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 100;
	src: url('../fonts/montserrat-v26-latin_latin-ext-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-200 - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 200;
	src: url('../fonts/montserrat-v26-latin_latin-ext-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-200italic - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 200;
	src: url('../fonts/montserrat-v26-latin_latin-ext-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-300 - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/montserrat-v26-latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-300italic - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 300;
	src: url('../fonts/montserrat-v26-latin_latin-ext-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-regular - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/montserrat-v26-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-italic - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 400;
	src: url('../fonts/montserrat-v26-latin_latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-500 - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/montserrat-v26-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-500italic - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 500;
	src: url('../fonts/montserrat-v26-latin_latin-ext-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/montserrat-v26-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600italic - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 600;
	src: url('../fonts/montserrat-v26-latin_latin-ext-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/montserrat-v26-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700italic - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 700;
	src: url('../fonts/montserrat-v26-latin_latin-ext-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-800 - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 800;
	src: url('../fonts/montserrat-v26-latin_latin-ext-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-800italic - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 800;
	src: url('../fonts/montserrat-v26-latin_latin-ext-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-900 - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 900;
	src: url('../fonts/montserrat-v26-latin_latin-ext-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-900italic - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 900;
	src: url('../fonts/montserrat-v26-latin_latin-ext-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


:root{
	--background:#171718;

}

html, 
body{

	font-family: 'Montserrat', sans-serif;
	
	background-color: var(--background);
	color: white;
	
}

html:has(.page.instream),
body:has(.page.instream){
	background-color: green;
}


h1{
	font-weight: bold;
}


.page:not(.instream){
	padding: 30px 0px;
}
.page{
	min-height:100vh
}

.stream-bar{
	display: flex;
	flex-direction: column;
	gap: 5px;
	max-width: 1700px;
	margin: 0 auto;

}



.stream-bar .sb-row{
	display: flex;
	flex-direction: row;

}

.stream-bar .sb-row.text-info p{
	margin: 0px;
	color: white;
	line-height: 1;
	letter-spacing: 1.4px;
	font-size: 24px;
}

.stream-bar .sb-row.text-info > div{
	padding: 5px 10px;
}
.stream-bar .sb-row.text-info .left p{
	font-weight: 900;
}

.stream-bar .sb-row.text-info .right p{
	font-weight: 500;
}

.stream-bar .sb-row.text-info .right p span{
	min-width: 75px;
	display: inline-block;
	text-align: right;
	letter-spacing: 1px;
}

.stream-bar .sb-row.text-info{
	justify-content: space-between;
}

.stream-bar .sb-row.media{
	justify-content: space-between;
}

.stream-bar .sb-row.media .organizer{
	max-width: 180px;
	background-color: var(--background);
	padding: 5px 25px;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: flex-start;

}

.stream-bar .sb-row.media .organizer h5{
	font-size: 18px;
	line-height: 1.2;
}

.stream-bar .sb-row.media .organizer h5 span{
	font-size: 16px;

	display: inline-block;
	margin-bottom: 3px;
}


.stream-bar .sb-row.media .organizer > *{
	margin: 0px;
}

.stream-bar .sb-row.media .sponsor{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
	padding: 5px 30px;
}


.stream-bar .sb-row.media .banner{
	width: 100%;

	background-color: #343434;
}

.banner {
	position: relative;
	width: 100%;
	height: 100px;
	overflow: hidden;
}

.slide {
	visibility: hidden;
	position: absolute;
	width: 100%;
	height: 100%;

	transform: translateY(+100px);
	opacity: 0;
	transition: 150ms ease-out;

}

.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
	transition: 300ms ease-in;
}


.slide img {
	width: 100%;
	height: auto;
}



.team-bar{
	display: flex;
	flex-direction: column;
	max-width: 1700px;
	margin: 0 auto;
}
.team-bar p{
	margin: 0px;
}
.team-bar .teams{
	background-color: var(--background);
	display: flex;
	justify-content: space-between;
	align-items: center;
}


.team-bar .teams > div{
	display: flex;
	justify-content: space-between;
	flex: 1;
	align-items: center;
}

.team-bar .teams .flag svg{
	height: 50px;
	width: auto;

}

.team-bar .teams .flag{
	background-color: #161616;
	padding: 5px 15px;
}
.team-bar .teams .flag svg path{
	fill: #4e4b4b;
}

.team-bar .teams .flag.active{
	background-color: #ffeb00;
}

.team-bar .teams .flag.active svg path{
	fill: #201e1e;
}

.team-bar .teams .flag.active svg {

	animation: flagPulse 1000ms ease infinite;

}


@keyframes flagPulse{
	0%{

		transform: scale(0.7);
	}

	70%{
		transform: scale(1.0);
	}

	100%{
		transform: scale(0.7);
	}
}

.team-bar .teams .team{
	flex: 1;
	width: 100%;

}

.team-bar .teams .team p{
	font-weight: bold;
	font-size: 35px;
	text-align: center;
	letter-spacing: 1.4px;
}
.team-bar .teams .center{

	flex: 1;
	justify-content: center;
	align-items: center;
	max-width: 180px;
}
.team-bar .teams .center p{
	font-size: 40px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 1.4px;
}

.team-bar .teams .left{
	padding-left: 30px;



}
.team-bar .teams .right {
	text-align: right;
	padding-right: 30px;


}
.team-bar .teams .flag{
	position: relative;
	z-index: 1;
}
.team-bar .teams  > div{
	position: relative;
}
.team-bar .teams  > div .team{
	position: relative;
	z-index: 1;
}
.team-bar .teams  > div:after{
	content: '';
	height: 4px;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 0;
}

.team-bar .teams .left:after{
	background-color: #ff6b6b;
}
.team-bar .teams .right:after{
	background-color: #6b8bff;
}

.team-bar .teams .right.score ,
.team-bar .teams .left.score{
	color: #201e1e;
	transition: 300ms ease;
}
.team-bar .teams .right.score:after,
.team-bar .teams .left.score:after{
	background-color: #ffeb00;
	height: 100%;
	

}





.team-bar .match{
	text-align: center;
	font-weight: 500;
	font-size: 30px;
}
.full-width-buttons .btn{
	text-align: center;
	width: 100%;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1.2px;
}

.page:has(.leaderboards){
/*	 background-image: linear-gradient(
    45deg,
    hsl(4deg 81% 68%) 0%,
    hsl(346deg 86% 69%) 20%,
    hsl(330deg 76% 67%) 40%,
    hsl(304deg 53% 65%) 60%,
    hsl(265deg 71% 71%) 80%,
    hsl(226deg 97% 71%) 100%
  );*/
}
.leaderboards{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 30px;

/*	background-color: rgba(0,0,0,0.5);
backdrop-filter: blur(15px);*/

max-width: 1410px;
margin: 0 auto;


}
.leaderboards .listing{
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 1400px;
	flex: 1;
	width: 100%;

}
.leaderboards .listing .head{
	margin-bottom: 15px;
}
.leaderboards .listing .head p{
	font-size: 18px;
	text-transform: uppercase;
}
.leaderboards .listing p{
	margin: 0px;
	font-size:  25px;
	line-height: 1.2;
}

.leaderboards .listing > div{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 10px;
}
.leaderboards .user-info{
	text-align: center;
}
.leaderboards .user-info h1{
	color: #fdff6f;
}
.leaderboards .listing .short{
	max-width: 50px;
	width: 100%;
	text-align: left;
	color: #fdff6f;
}

.leaderboards .listing .long{
	width: 100%;
	text-align: left;

}
.leaderboards .listing .stats{
	display: flex;
	align-items: center;
}
.leaderboards .listing .stats .long{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: row;
		
}
.leaderboards .listing .medium{
	max-width: 110px;
	width: 100%;
	text-align: right;
	color: #84c6ff;
}

.leaderboards .listing .position{
	max-width: 60px;
	width: 100%;
}
.leaderboards .listing .stats{
	background-color: #1f1d20;
	padding: 5px 15px;

}

.leaderboards .listing .stats p{
	font-weight: bold;
}

.tags{
	display: flex;
	flex-direction: row;
	gap: 30px;
	justify-content: center;
}

.tags h4{
	background-color: #84c6ff ;
	color: #161616;
	padding: 5px 15px;
	font-size: 20px;
	font-weight: 900;
}


.leaderboards .listing .stats svg{
	height: 45px;
	width: auto;
}

.leaderboards .listing .stats .up svg polygon{
	fill: #61ff61;
}


.leaderboards .listing .stats .down svg polygon{
	fill: #ff5b5b;

}

.leaderboards .listing .stats .down svg{
	transform: rotate(180deg);	
}


.leaderboards .logo img{
height: 45px;
width: auto;
margin-right: 20px;
}

.replay{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
	max-width: 1700px;
	margin: 0 auto;
}

.replay .blob{
	background-color: #ff3a3a;
	height: 50px;
	width: 50px;
	border-radius: 50%;
	opacity: 0;
	animation: replay 1s ease infinite ;

}

.replay .text p{
	margin: 0px;

	font-size: 40px;
	font-weight: 900;
}

@keyframes replay{
	0%{
		opacity: 0;
		transform: scale(0.8);
	}

	80%{
		opacity: 1;
		transform: scale(1);
	}
	100%{
		opacity: 0;
		transform: scale(0.8);
	}

}


.intro{
text-align: center;
}

.team-avatar{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 30px;
	margin-bottom: 15px;
}
.team-avatar img{
height: 60px;
width: auto;
}