@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: url('/static/fonts/Lato_400.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 600;
	src: url('/static/fonts/Lato_600.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	src: url('/static/fonts/Lato_700.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Comfortaa';
	font-style: normal;
	font-weight: 600;
	src: url('/static/fonts/Comfortaa_600.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Comfortaa';
	font-style: normal;
	font-weight: 700;
	src: url('/static/fonts/Comfortaa_700.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 600;
	src: url('/static/fonts/Oswald_600.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	src: url('/static/fonts/Raleway_400.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 600;
	src: url('/static/fonts/Raleway_600.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	src: url('/static/fonts/Raleway_700.woff2') format('woff2');
	font-display: swap;
}

:root {
	--white-color: rgb(255, 255, 255);
	--black-color: rgb(0, 0, 0);
	--red-color: rgb(255, 0, 70);
	--yellow-color: rgb(255, 206, 18);
	--yellow-neon: rgb(249, 205, 12);
	--orange-color: rgb(245, 166, 35);
	--green-color: rgb(114, 187, 0);
	--blue-color: rgb(39, 93, 174);

	--blue-light: rgb(0, 214, 235);
	--blue-dark: rgb(15, 35, 72);
	--blue-neon: rgb(46, 154, 254);
	--blue-back: rgb(242, 246, 250);
	--blue-best: rgb(24, 119, 242);

	--gray-back: rgb(246, 246, 246);
	--gray-dark: rgb(83, 83, 83);
	--card-back: rgb(246, 246, 246);

	--header-back: rgb(10, 30, 54);
	--text-color: rgb(26, 49, 60);
	--bottom-line: rgb(254, 192, 7);
	--border-color: rgb(210, 216, 219);
	--shadow-color: rgb(34, 60, 80, .1);
	--sb-line: #627b81;

	--hdr-top: rgb(0, 0, 0, .025);
	--hdr-text: rgb(157, 175, 190);
	--hdr-main: rgb(0, 0, 0, .055);
	--hdr-matches: rgb(0, 0, 0, .15);
	--footer-back: rgb(40, 40, 45);
	--moment-back: rgb(28, 29, 34);
	--moment-5: rgb(28, 29, 34, .5);
	--moment-0: rgb(28, 29, 34, 0);

	--master-color: rgb(50, 75, 80);
	--second-color: rgb(81, 218, 229);

	--facebook-color: rgb(24, 119, 242);
	--instagram-color: rgb(193, 53, 132);
	--youtube-color: rgb(255, 0, 0);

	--white-85: rgb(255, 255, 255, .85);
	--white-75: rgb(255, 255, 255, .75);
	--white-55: rgb(255, 255, 255, .55);
	--white-25: rgb(255, 255, 255, .25);
	--white-15: rgb(255, 255, 255, .15);
	--white-075: rgb(255, 255, 255, .075);
	--white-055: rgb(255, 255, 255, .055);
	--white-025: rgb(255, 255, 255, .025);
	--white-015: rgb(255, 255, 255, .015);

	--black-85: rgb(0, 0, 0, .85);
	--black-75: rgb(0, 0, 0, .75);
	--black-55: rgb(0, 0, 0, .55);
	--black-15: rgb(0, 0, 0, .15);
	--black-025: rgb(0, 0, 0, .025);

	--blue-35: rgb(46, 154, 254, .35);
	--blue-25: rgb(46, 154, 254, .25);

	--red-75: rgb(255, 0, 70, .75);
	--red-25: rgb(255, 0, 70, .25);

	--fs-sm: 12px;
	--fs-base: 14px;
	--fs-lg: 16px;
	--fs-xl: 20px;
	--fs-xxl: 24px;

	--line-height: 1.5;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
body {
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	font-size: var(--fs-base);
	font-weight: 400;
	line-height: var(--line-height);
	background-color: var(--white-color);
	color: var(--text-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.modal { overflow: hidden }
body.modal .overlay { display: grid }
.overlay {
	position: fixed;
	inset: 0;
	z-index: 9;
	display: none;
	background-color: var(--black-15);
	backdrop-filter: blur(4px);
}

.search_sidebar,
.sidebar_menu {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	width: 400px;
	max-width: 80%;
	height: 100%;
	z-index: 10;
	overflow: hidden;
	background-color: var(--master-color);
	backdrop-filter: blur(10px);
	transform: translateX(-100%);
	opacity: 0;
	visibility: hidden;
	transition: transform .5s ease, opacity .75s ease;
}
.search_sidebar {
	right: 0;
	transform: translateX(100%);
}
.search_sidebar.show,
.sidebar_menu.show {
	visibility: visible;
	opacity: 1;
	transform: translateX(0);
}
.sidebar_menu {
	display: grid;
	grid-template-rows: auto auto 1fr;
}
.sidebar_logo {
	display: flex;
	flex-direction: column;
	gap: 15px;
	border-bottom: 1px solid var(--white-075);
	padding: 15px;
	margin-bottom: 15px;
}
.sidebar_logo .app_logo {
	grid-template-columns: 64px 1fr auto;
	padding-right: 0;
}
.lang_switcher {
	display: flex;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	max-width: max-content;
}
.lang_switcher a {
	color: var(--white-color);
	border: 1px solid var(--white-color);
	border-radius: 3px;
	padding: 0 2px;
}
.lang_switcher a:hover { color: var(--blue-light) }
.lang_switcher .current {
	font-weight: 700;
	background-color: var(--white-color);
	color: var(--master-color);
}
.sidebar_bottom {
	display: flex;
	justify-content: center;
	align-items: end;
	padding-bottom: 25px;
}
.sidebar_menu .menu_list {
	gap: 0;
	flex-direction: column;
	align-items: start;
	padding: 0 10px;
	box-sizing: border-box;
}
.sidebar_menu .menu_item {
	display: flex;
	flex-direction: column;
	width: 100%;
	border-bottom: 1px solid var(--white-075);
}
.sidebar_menu .menu_item:last-child { border-color: transparent }
.sidebar_menu .menu_item svg { transform: rotate(90deg) }
.sidebar_menu .menu_item.open svg { transform: rotate(-90deg) }
.sidebar_menu .menu_item.open .sub_box {
	visibility: visible;
	opacity: 1;
	height: auto;
}
.sidebar_menu .menu_item.open .menu_link {
	background-color: var(--white-025);
	color: var(--blue-light);
}
.sidebar_menu .menu_list a {
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	border-radius: 5px;
	width: 100%;
	padding: 10px;
}
.sidebar_menu .menu_list a i { display: block }
.sidebar_menu .menu_link svg { transition: all .15s ease-in-out }
.sidebar_menu .menu_link * { pointer-events: none }
.sidebar_menu .menu_list .stroke { stroke: var(--white-55) }

.sidebar_menu .sub_box {
	z-index: 5;
	visibility: hidden;
	opacity: 0;
	transform: none;
	transition: height .3s ease, opacity .75s ease, visibility .3s;

	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	border-radius: 0;
	background-color: transparent;
	backdrop-filter: none;
	border: none;
	box-shadow: none;
	left: auto;
	right: auto;
	padding: 0;
	
	height: 0;
}
.sidebar_menu .menu_item:not(:hover) .sub_box { transition: none }
.sidebar_menu .menu_item.open .sub_box { transition: height .3s ease, opacity .75s ease, visibility .3s }
.sidebar_menu .sub_menu {
	margin: 0;
	padding: 0;
	padding-right: 0;
	list-style: none;
	border-right: none;
}
.sidebar_menu .sub_menu a:hover {
	opacity: 1;
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
}
.sidebar_menu .sub_menu li {
	display: flex;
	align-items: center;
	padding-left: 30px;
	position: relative;
}
.sidebar_menu .sub_menu li:before {
	content: '';
	position: absolute;
	left: 15px;
	top: 0;
	width: 15px;
	height: 23px;
	border-left: 1px solid var(--sb-line);
	border-bottom: 1px solid var(--sb-line);
	border-bottom-left-radius: 12px;
}
.sidebar_menu .sub_menu li:after {
	content: '';
	position: absolute;
	left: 15px;
	top: 0;
	width: 1px;
	height: 100%;
	background-color: var(--sb-line);
}
.sidebar_menu .sub_menu li:last-child:after { display: none }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 600;
}

h1 { font-size: var(--fs-xxl) }
h2 { font-size: var(--fs-xl) }
h3 { font-size: var(--fs-lg) }
h4 { font-size: var(--fs-base) }
h5 { font-size: var(--fs-sm) }
h6 {
	font-size: var(--fs-sm);
	font-weight: 500;
}
p { margin-bottom: 1em }

a {
	color: var(--text-color);
	transition: color .2s ease;
	text-decoration: none;
}
a:hover { color: var(--blue-color) }
button {
	display: flex;
	align-items: center;
	justify-content: center;
	outline: none;
	border: none;
	background-color: transparent;
}
button,
input { font-size: 14px }
select {
	display: inline-block;
	border-radius: 5px;
	outline: none;
	border: 1px solid var(--border-color);
	background-color: var(--card-back);
	padding: 8px;
	transition: .3s;
	box-sizing: border-box;
}

.btn {
	display: flex;
	gap: 5px;
	cursor: pointer;
	text-decoration: none;
	transition: .35s;
	cursor: pointer;
}
.icon {
	display: flex;
	align-items: center;
	justify-content: center;
}
.icon svg {
	min-width: 24px;
	max-width: 100%;
	max-height: 100%;
}
.ic_8 {
	width: 8px;
	height: 8px;
}
.ic_10 {
	width: 10px;
	height: 10px;
}
.ic_12 {
	width: 12px;
	height: 12px;
}
.ic_14 {
	width: 14px;
	height: 14px;
}
.ic_16 {
	width: 16px;
	height: 16px;
}
.ic_20 {
	width: 20px;
	height: 20px;
}
.ic_24 {
	width: 24px;
	height: 24px;
}
.ic_48 {
	width: 48px;
	height: 48px;
}

.card {
	margin: 35px 15px;
	padding: 15px;
	background-color: var(--black-025);
	border-radius: 15px;
}

.app {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.app_header {
	display: flex;
	flex-direction: column;
	background-color: var(--master-color);
	background-image: linear-gradient(90deg, var(--master-color) 50%, var(--master-color) 80%);
	position: relative;
}
.hdr_top {
	display: grid;
	grid-template-columns: 1fr auto;
	padding: 5px 15px;
	background-color: var(--hdr-top);
}
.hdr_links {
	display: flex;
	align-items: center;
	gap: 15px;
}
.hdr_links a {
	display: flex;
	align-items: center;
	color: var(--white-color)
}
.hdr_links a:after {
	content: '•';
	padding-left: 15px;
	color: var(--white-075);
}
.hdr_links a:last-child:after { display: none }
.hdr_links a:hover { color: var(--blue-light) }
.hdr_links a:hover:after { color: var(--white-075) }

.hdr_main {
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	gap: 15px;
	align-items: center;
	color: var(--white-color);
	background-color: var(--hdr-main);
	padding: 15px;
	position: relative;
}
.hdr_main .btn {
	background-color: var(--white-075);
	color: var(--white-color);
	font-size: 28px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	cursor: pointer;
	transition-property: background-color;
}
.hdr_main .btn:hover { background-color: var(--white-15) }

.hdr_main .btn svg {
	display: block;
	min-width: 20px;
	min-height: 20px;
	max-width: 20px;
}

.hdr_logo {
	display: grid;
	align-items: center;
}
.hdr_line { position: relative }
.hdr_line:after {
	content: '';
	position: absolute;
	right: 0;
	background-color: var(--white-075);
	width: 2px;
	height: 25px;
}
.app_logo {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 10px;
	align-items: center;
	cursor: pointer;
	padding-right: 25px;
}
.app_logo:hover .app_name { opacity: .8 }
.app_logo img { max-width: 100% }
.app_name {
	display: grid;
	color: var(--white-color);
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 700;
	line-height: 18px;
}

.hdr_menu {
	display: flex;
	align-items: center;
	justify-content: center;
}
.hdr_menu .menu_list { padding-right: 25px }
.menu_list {
	display: flex;
	gap: 25px;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	position: relative;
}
.menu_list a {
	display: flex;
	align-items: center;
	border-radius: 25px;
	font-size: var(--fs-lg);
	font-weight: 600;
	color: var(--white-color);
	padding: 5px 15px;
	transition-property: background-color;
	white-space: nowrap;
}
.menu_list a i { display: none }
.menu_list .menu_item:hover .menu_link { color: var(--blue-neon) }
.menu_list a.current {
	background-color: var(--yellow-color);
	color: var(--text-color);
}
.menu_item { display: block }

.menu_item:not(.is_sub):hover .sub_box {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}
.menu_item:not(:hover) .sub_box { transition: .15s }
.sub_box {
	z-index: 5;
	visibility: hidden;
	opacity: 0;
	transform: translateY(20px);
	transition: transform .3s ease, opacity .75s ease, visibility .3s;

	position: absolute;
	display: grid;
	grid-template-columns: 250px 1fr;
	border-radius: 12px;
	background-color: var(--white-025);
	backdrop-filter: blur(30px);
	border: 1px solid var(--white-055);
	box-shadow: 0 10px 40px var(--white-15);
	left: 15px;
	right: 35px;
	padding: 15px;
}
.sub_menu {
	margin: 0;
	padding: 0;
	padding-right: 15px;
	list-style: none;
	border-right: 1px solid var(--white-075);
}
.sub_menu a {
	border-radius: 5px;
	border: 1px solid transparent;
	opacity: .85;
	transition: .35s;
}
.sub_menu a:hover {
	opacity: 1;
	background-color: var(--white-025);
	border-color: var(--white-055);
	color: var(--blue-light);
	box-shadow: 0px 0px 1px 1px var(--white-015);
}

.sub_content {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(3, 1fr);
	padding-left: 15px;
}
.sub_content .news_box {
	border-radius: 5px;
	background-color: transparent;
	padding: 5px;
	border: 1px solid var(--white-075);
}
.sub_content .news_box:hover {
	background-color: var(--white-075);
	border-color: var(--white-25);
}
.sub_content .news_box .news_img {
	border-radius: 5px;
	overflow: hidden;
}
.sub_content .news_box .news_img i {
	bottom: 5px;
	right: 5px;
}
.sub_content .news_box h3 {
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	padding: 0;
}

.hdr_tools {
	display: flex;
	justify-content: end;
	align-items: center;
	gap: 25px;
}
.hdr_lang {
	cursor: pointer;
	position: relative;
}
.curr_lang {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 5px 15px;
	border-radius: 25px;
	transition: background-color .5s;
	color: var(--white-color);
	text-transform: uppercase;
	cursor: pointer;
}
.curr_lang .fill { fill: var(--white-color) }
.curr_lang:hover { background-color: var(--white-075) }
.curr_lang .chevron { transform: rotate(90deg) }
.curr_lang .chevron .stroke { stroke: var(--white-55) }
.lang_list {
	position: absolute;
	/* left: -20px; */
	right: 0;
	width: 125px;
	display: grid;
	border-radius: 5px;
	background-color: var(--white-025);
	backdrop-filter: blur(20px);
	border: 1px solid var(--white-055);

	z-index: 1;
	visibility: hidden;
	opacity: 0;
	transform: translateY(10px);
	transition: transform .5s ease, opacity .75s ease;
}
.lang_list a {
	padding: 10px;
	white-space: nowrap;
	color: var(--white-color);
	display: flex;
	align-items: center;
	gap: 10px;
}
.lang_list a.current strong {
	background-color: var(--white-color);
	color: var(--master-color);
}
.lang_list a.current span { font-weight: 500 }
.lang_list a:hover { background-color: var(--white-055) }
.lang_list a strong {
	font-weight: 600;
	font-size: 10px;
	border: 1px solid;
	border-radius: 3px;
	padding: 0 2px;
}

.hdr_lang .chevron { transition: all .15s ease-in-out }
.hdr_lang.show .chevron { transform: rotate(270deg) }
.hdr_lang.show .curr_lang { background-color: var(--white-075) }
.hdr_lang.show .lang_list {
	visibility: visible;
	opacity: 1;
	transform: translateY(2px);
}

.hdr_main .btn_search { font-size: 16px }

.hdr_matches {
	display: grid;
	align-items: center;
	gap: 15px;
	grid-template-columns: auto 1fr auto auto;
	background-color: var(--hdr-matches);
	padding: 15px;
}
.hdr_matches .btn_scroll {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 2px solid var(--white-color);
	background-color: transparent;
	border-radius: 50%;
	opacity: .75;
}
.hdr_matches .btn_scroll.prev svg { transform: rotate(180deg) }
.hdr_matches .btn_scroll .stroke { stroke: var(--white-color) }
.hdr_matches .btn_scroll:hover {
	opacity: 1;
	background-color: var(--white-color);
}
.hdr_matches .btn_scroll:hover .stroke { stroke: var(--master-color) }
.hdr_matches .btn_scroll.disabled {
	opacity: .15;
	pointer-events: none;
}

.hdr_match_wrap {
	display: grid;
	overflow-x: hidden;
	border-radius: 10px;
	user-select: none;
	-webkit-user-select: none;

	touch-action: pan-y;
	-ms-touch-action: pan-y;
	cursor: grab;
}
.hdr_match_wrap.dragging { cursor: grabbing }
.match_boxes {
	display: flex;
	gap: 10px;
	transition: .3s;
}

.match_box {
	position: relative;
	display: grid;
	gap: 10px;
	align-items: start;
	min-width: 300px;
	box-sizing: border-box;
	padding: 10px;
	border-radius: 10px;
	color: var(--white-color);
	background-color: var(--white-025);
	border: 1px solid var(--white-055);
	transition: .75s;
	cursor: pointer;

	scroll-snap-align: start;
	scroll-snap-stop: always;
}
.match_box .match_url {
	position: absolute;
	inset: 0;
}
.match_box:hover {
	border-color: var(--white-25);
	background-color: var(--white-055);
	box-shadow: 0px 0px 10px 1px var(--white-075);
}

.match_box .match_tourn {
	display: flex;
	align-items: center;
	gap: 10px;
	opacity: .45
}
.match_box:hover .match_tourn { opacity: 1 }
.match_box .match_tourn .gender {
	border: 1px solid var(--blue-neon);
	color: var(--blue-neon);
	border-radius: 5px;
	padding: 1px 4px;
	font-size: 10px;
	max-width: max-content;
	transition: .3s;
}
.match_box .match_tourn .gender.f {
	border-color: var(--yellow-neon);
	color: var(--yellow-neon);
}
.match_box .tourn_info {
	font-size: .75rem;
	color: var(--white-color);
	transition: .45s;
}

.match_box .match_data {
	display: grid;
	grid-template-columns: 3fr 2fr 3fr;
	align-items: start;
}
.match_box .match_team_box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}
.match_box .match_team_box img {
	max-width: 42px;
	border-radius: 5px;
	pointer-events: none;
}
.match_box .match_team_box span {
	padding: 2px 5px;
	border-radius: 5px;
	font: 600 12px 'Comfortaa';
}
.match_box .match_team_box.win span {
	font-weight: 700;
	background-color: var(--black-15);
}
.match_box .match_info {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.match_box .match_score {
	font: 600 1.5rem 'Raleway';
	padding: 5px 10px 10px;
	border-radius: 10px;
	background-color: var(--black-15);
}
.match_box .match_status {
	display: flex;
	gap: 5px;
	align-items: center;
	font: 400 .75rem 'Raleway';
	color: var(--white-75);
}
.match_box .match_info i {
	display: none;
	animation: blink 1.2s ease-in-out infinite;
}
@keyframes blink {
	0%, 100% { opacity: .2 }
	50% { opacity: 1 }
}
.match_box .match_info.live i { display: flex }
.match_box .match_info.live .match_score { color: var(--red-color) }
.match_box .match_info.live .match_status { color: var(--white-color) }

.btn_matches {
	align-items: center;
	padding: 10px 15px;
	color: var(--white-color);
	border: 1px solid var(--white-color);
	border-radius: 5px;
	opacity: .75;
}
.btn_matches svg {
	width: 20px;
	height: 20px;
}
.btn_matches:hover {
	color: var(--black-color);
	background-color: var(--white-color);
	opacity: 1;
}
.btn_matches:hover .stroke { stroke: var(--black-color) }

.slider {
	display: grid;
	min-height: 560px;
	position: relative;
	background-color: var(--hdr-matches);
	overflow: hidden;
	position: relative;
}
.slide {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 15px;
	padding-left: 35px;
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: .3s ease;
}
.slide:after {
	content: '';
	position: absolute;
	inset: 0;
	max-width: 75%;
	background: linear-gradient(90deg, var(--master-color) 45%, transparent 75%);
	opacity: .85;
	z-index: 1;
}
.slide.current {
	opacity: 1;
	z-index: 1;
}
.slide.current .slide_img {
	transform: translateX(0);
	opacity: 1;
}
.slide_img {
	position: absolute;
	inset: 0;
	background: center / cover no-repeat;
	transform: translateX(-145px);
	transition: .35s ease-in-out;
	opacity: .35;

}
.slide.current h2 {
	transform: translateX(0);
	opacity: 1;
}
.slide h2 {
	color: var(--white-color);
	font: 700 48px 'Comfortaa';
	max-width: 50%;
	transform: translateX(120px);
	transition: .25s ease-in-out;
	opacity: .35;
	z-index: 2;
}
.slide.current a { transform: translateX(0) }
.slide a {
	max-width: max-content;
	border-radius: 25px;
	font-size: 16px;
	font-weight: 600;
	padding: 10px 25px;
	background-color: var(--blue-light);
	color: var(--blue-dark);
	transform: translateX(30px);
	transition: .3s ease-out;
	z-index: 2;
}
.slider .progress_box {
	display: flex;
	gap: 10px;
	position: absolute;
	left: 25px;
	bottom: 25px;
	z-index: 3;
}
.slider .progress_bar {
	display: block;
	border-radius: 10px;
	width: 55px;
	height: 8px;
	background-color: var(--white-15);
	transition: color .3s ease;
	position: relative;
}
.slider .progress_bar i {
	display: block;
	position: absolute;
	inset: 0;;
	width: 0;
	border-radius: 16px;
	background-color: var(--white-color);
}
.slider .progress_bar i.current { background-color: var(--white-color) }

.gray_back { background: var(--gray-back) url(/static/images/back.webp) top / cover no-repeat }
.news {
	display: grid;
	gap: 15px;
	padding: 35px 15px;
}
.news .title {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
}
.news .title h2 {
	font: 700 24px 'Comfortaa';
	color: var(--text-color);
}
.news .title a {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 5px;
	color: var(--blue-color);
	transition: .3s;
	padding: 5px 15px;
	font-size: 12px;
	font-weight: 500;
}
.news .title a i { transition: all .3s ease-in-out }
.news .title a .stroke { stroke: var(--blue-color) }
.news .title a:hover i { transform: translateX(5px) }

.news_boxes {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 15px;
}
.news_box {
	position: relative;
	overflow: hidden;
	background-color: var(--white-color);
	border-radius: 15px;
	border: 1px solid var(--border-color);
	padding-bottom: 25px;
	cursor: pointer;
	transition: box-shadow .75s ease;
}
.news_box:hover { box-shadow: 0px 0px 5px 1px var(--shadow-color) }
.news_box:hover img { transform: scale(1.1) }

.news_img {
	overflow: hidden;
	width: 100%;
	aspect-ratio: 6 / 4;
	margin-bottom: 10px;
	position: relative;
}
.news_img i {
	position: absolute;
	bottom: 15px;
	right: 15px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background-color: var(--red-75);
	box-shadow: 0 0 0 3px var(--red-25);
	border-radius: 50%;
}
.news_img svg {
	width: 10px;
	height: 10px;
}
.news_img .fill { fill: var(--white-85) }

.news_img img {
	object-fit: cover;
	width: 100%;
	aspect-ratio: 6 / 4;
	transition: .3s;
}
.news_box span {
	display: flex;
	gap: 5px;
	align-items: center;
	color: var(--black-55);
	font-size: 12px;
	padding: 0 10px;
}
.news_box svg {
	width: 12px;
	height: 12px;
}
.news_box h3 { padding: 0 10px }
.news_box a {
	display: inline;
	border-radius: 0;
	padding: 0;
	white-space: normal;
}
.news_box a:after {
	content: '';
	position: absolute;
	inset: 0;
}

.moments {
	display: grid;
	gap: 15px;
	padding: 35px 15px;
}
.moments h2 {
	font: 700 24px 'Comfortaa';
	color: var(--text-color);
}
.moment_boxes {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 15px;
}
.moment_boxes:hover .moment_box { opacity: .75 }
.moment_box {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	padding-bottom: 25px;
	aspect-ratio: 4 / 6;
	cursor: pointer;
	background: center / cover no-repeat;
}
.moment_boxes .moment_box:hover {
	opacity: 1;
	box-shadow: 0px 0px 10px 1px var(--blue-25);
}
.moment_box:after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(1deg, var(--moment-5) 0%, var(--moment-0) 100%);
}
.moment_box i {
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 2px solid var(--white-85);
	border-radius: 50%;
}
.moment_box svg {
	width: 10px;
	height: 10px;
}
.moment_box .fill { fill: var(--white-85) }
.moment_box h3 {
	position: absolute;
	display: flex;
	min-height: 50px;
	padding: 0 5px;
	bottom: 5px;
	color: var(--white-85);
	z-index: 1;
}

.tables {
	display: grid;
	gap: 15px;
	padding: 35px 15px;
	background: var(--gray-back) url(/static/images/table_back.webp) top right / contain no-repeat;
}
.tables h2 {
	font: 700 24px 'Comfortaa';
	color: var(--text-color);
}
.table_tab {
	display: flex;
	border-bottom: 1px solid var(--border-color);
}
.btn_tab {
	padding: 5px 10px;
	font-size: 16px;
	font-weight: 500;
	color: var(--text-color);
	cursor: pointer;
}
.btn_tab.current {
	font-weight: 600;
	color: var(--blue-color);
	border-bottom: 2px solid var(--blue-color);
}
.table_boxes {
	display: none;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
}
.table_boxes.current { display: grid }
.table_box {
	display: flex;
	flex-direction: column;
	gap: 15px;
	background-color: var(--white-color);
	border-radius: 10px;
	border: 1px solid var(--border-color);
	padding: 15px;
	overflow: hidden;
}
.table_box h3 { font: 700 16px 'Comfortaa' }
.table_head,
.table_row {
	display: grid;
	grid-template-columns: 2fr 15fr 3fr 3fr 3fr 3fr 3fr;
	align-items: center;
	gap: 5px;
}
.table_row {
	padding: 10px 0;
	border-bottom: 1px solid var(--border-color);
}
.table_row:last-child { border-color: transparent }
.table_head span {
	font-size: 12px;
	color: var(--black-75);
	text-align: center;
}
.table_head span:first-child,
.table_head span:nth-child(2) { text-align: left }

.table_team {
	display: grid;
	grid-template-columns: 24px 1fr;
	align-items: center;
}
.table_row .table_team span {
	text-align: left;
	padding-right: 0;
	font-size: 14px;
	font-weight: 500;
}
.table_team img { max-height: 24px }
.table_row span:first-child {
	text-align: left;
	padding-left: 0;
	font: 400 14px 'Raleway';
}
.table_row span {
	text-align: center;
	padding: 0 5px;
	font-size: 12px;
	white-space: nowrap;
}
.table_row span:last-child { font: 700 16px 'Raleway' }

.players {
	display: grid;
	gap: 15px;
	padding: 35px 0;
	background-color: var(--gray-back);
}
.players h2 {
	font: 700 24px 'Comfortaa';
	color: var(--text-color);
	padding: 0 15px;
}
.player_boxes {
	display: flex;
	overflow-x: scroll;
	gap: 10px;
	scrollbar-width: none;
	padding-left: 15px;
}
.player_boxes::-webkit-scrollbar { display: none }
.player_box {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border-color);
	background-color: var(--white-color);
	border-radius: 15px;
	min-width: 360px;
	padding: 15px;
	overflow: hidden;
	position: relative;
	transition: .35s ease;
}
.player_box:hover { box-shadow: 0px 0px 5px 1px var(--shadow-color) }
.player_box:last-child { margin-right: 15px }
.player_back {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 30em;
	max-width: 80%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
	background: linear-gradient(to top left, var(--gray-back) 0%, var(--gray-back) 50%, transparent 0%);
}
.player_meta {
	display: grid;
	grid-template-columns: 7fr 3fr;
	gap: 10px;
	z-index: 1;
}
.player_name {
	display: grid;
	gap: 10px;
}
.player_name span { font: 700 48px 'Raleway' }
.player_name h4 { font: 700 20px 'Comfortaa' }
.player_img img {
	border-radius: 50%;
	object-fit: cover;
	width: 100%;
	aspect-ratio: 1 / 1;
}
.player_pos {
	text-transform: uppercase;
	color: var(--gray-dark);
	z-index: 1;
	margin-bottom: 15px;
}
.player_stats {
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 1;
}
.stat_row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 10px;
	padding-left: 0;
	border-bottom: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	border-radius: 0 0 15px 0;
	font: 400 14px 'Raleway'
}
.stat_row span:last-child {
	display: flex;
	gap: 5px;
	justify-content: end;
	font-weight: 500;
	font-size: 16px;
}
.stat_row span:last-child img { max-width: 18px }
.player_view {
	padding: 15px 0;
	text-align: right;
}
.player_view a {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 5px;
	color: var(--blue-color);
	transition: .3s;
	padding: 5px 15px;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
}
.player_view a i { transition: all .3s ease-in-out }
.player_view a:hover i { transform: translateX(5px) }

.mobile {
	display: flex;
	justify-content: center;
	padding: 35px;
	gap: 65px;
	text-transform: uppercase;
	background-color: var(--blue-back);
	max-width: max-content;
	border-radius: 15px;
	margin: 35px auto;
}
.mobile_meta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 45px;
}
.mobile_slogan {
	font: italic 600 64px 'Oswald';
	line-height: 56px;
	color: var(--blue-color);
}
.mobile_get {
	display: flex;
	align-items: center;
	gap: 15px;
	font: italic 600 32px 'Oswald';
}
.mobile_buttons {
	display: flex;
	align-items: center;
	gap: 15px;
}

.partners {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	padding: 35px 15px;
}
.partners a {
	flex: 0 0 20%;
	display: flex;
	align-items: center;
	background-color: var(--white-color);
	margin: 5px;
	padding: 5px;
	border: 1px solid var(--border-color);
	text-decoration: none;
	border-radius: 10px;
	transition: all .3s ease-in-out;
}
.partners a:hover {
	background-color: var(--black-025);
	border-color: var(--border-color);
}
.partners a img {
	object-fit: contain;
	width: 100%;
	aspect-ratio: 6 / 3;
	transition: .3s;
}

footer {
	display: grid;
	grid-template-columns: auto 2fr 1fr;
	gap: 35px;
	padding: 55px;
	color: var(--white-color);
	background:
		url(/static/images/pattern_right.webp) top right / contain no-repeat,
		url(/static/images/pattern_left.webp) bottom left / 300px no-repeat,
		var(--footer-back);
}
.footer_meta {
	display: flex;
	flex-direction: column;
	gap: 25px;
}
.footer_logo img { max-width: 86px }
.footer_mobile {
	display: grid;
	gap: 10px;
	text-transform: uppercase;
	font: italic 600 32px 'Oswald';
	line-height: 32px;
}
.footer_menu_box {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 35px;
}
.footer_block {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.footer_block h4 { font: italic 600 24px 'Oswald' }
.footer_menu {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font: 700 16px 'Comfortaa';
	padding-left: 10px;
}
.footer_menu a {
	max-width: max-content;
	color: var(--white-color);
}
.footer_menu a:hover { color: var(--blue-light) }

.footer_contact {
	display: flex;
	flex-direction: column;
	gap: 15px;
	font: 700 16px 'Comfortaa';
	padding-bottom: 15px;
	border-bottom: 1px solid var(--white-15);
}
.footer_contact a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--white-color);
}
footer .social_box a {
	width: 32px;
	height: 32px;
}

.social_box {
	display: flex;
	gap: 10px;
}
.social_box a {
	display: flex;
	width: 24px;
	height: 24px;
	font-size: 14px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 2px solid var(--white-075);
	background-color: var(--white-055);
	color: var(--white-color);
	transition: background .5s ease;
}
.social_box a:hover { border-color: var(--white-25) }
.social_box svg {
	width: 14px;
	height: 14px;
}
.social_box a.facebook:hover { background-color: var(--facebook-color) }
.social_box a.instagram:hover { background-color: var(--instagram-color) }
.social_box a.youtube:hover { background-color: var(--youtube-color) }

.watch { overflow: hidden }
.watch .watch_modal { display: grid }
.watch_modal {
	position: fixed;
	inset: 0;
	z-index: 9;

	display: none;
	align-items: center;
	justify-items: center;
	background-color: var(--black-85);
	backdrop-filter: blur(4px);
}

.watch_modal .watch_boxes {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100vh;
	transition: transform .4s cubic-bezier(.25, 1, .5, 1);
	padding: 0;
}
.watch_modal .watch_box {
	display: flex;
	max-height: 100%;
	width: auto;
	cursor: pointer;
	position: relative;
}

.watch_modal .video_player {
	display: grid;
	overflow: hidden;
	border-radius: 15px;
	aspect-ratio: 9 / 16;
	position: relative;
}
.watch_modal .video_player video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.watch_modal .btn_play {
	position: absolute;
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-items: center;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.watch_modal .btn_play .icon {
	width: 64px;
	height: 64px;
	background-color: var(--black-55);
	border-radius: 50%;
} 
.watch_modal .btn_play svg { max-width: 32px }
.watch_modal .btn_play .fill { fill: var(--white-color) }
.watch_modal .btn_play:hover { background-color: transparent }
.watch_modal .btn_play.hide { opacity: 0 }

.watch_modal .video_switch {
	position: absolute;
	right: 35px;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	gap: 15px;
}
.watch_modal .btn {
	background-color: var(--white-15);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	cursor: pointer;
	place-items: center;
}
.watch_modal .btn:hover { background-color: var(--white-25) }
.watch_modal .btn.disabled {
	opacity: .3;
	pointer-events: none;
}
.watch_modal .btn .fill { fill: var(--white-color) }
.watch_modal .btn .stroke { stroke: var(--white-color) }
.watch_modal .btn_close {
	position: absolute;
	top: 15px;
	right: 15px;
}

.list {
	margin: 0;
	padding: 35px 15px;
	background: transparent url(/static/images/title_back.webp) top right / contain no-repeat;
}
.list .title { padding: 0 }
.list .title h2 { font: 600 42px 'Raleway' }
.list .boxes { padding: 0 }

.single {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 0;
	margin-bottom: 35px;
	padding: 35px;
	background: transparent url(/static/images/title_back.webp) top right / contain no-repeat;
}
.single h1 { font: 600 42px 'Raleway' }
.single .wrap {
	display: grid;
	grid-template-columns: 3fr 7fr;
	gap: 25px;
	align-items: start;
}
.single .sidebar {
	padding: 15px 0;
	font: 600 18px 'Comfortaa';
	border: 1px solid var(--card-back);
}
.single .sidebar a {
	margin: 0 10px;
	padding: 10px;
	border-radius: 5px;
	position: relative;
}
.single .sidebar a:hover {
	background-color: var(--black-025);
	color: var(--text-color);
}
.single .sidebar a:after {
	content: '';
	position: absolute;
	left: -10px;
	top: 0;
	bottom: 0;
	width: 3px;
	border-radius: 0 5px 5px 0;
}
.single .sidebar .current { font-weight: 700 }
.single .sidebar .current:after { background-color: var(--blue-color) }

.page {
	display: grid;
	align-items: start;
	margin: 0;
	padding: 35px 0;
}
.page.two {
	gap: 35px;
	grid-template-columns: 6fr 4fr;
}
.page .header {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.page .header .time {
	display: flex;
	gap: 5px;
	align-items: center;
}
.page .title { padding: 0}
.page .title { font: 600 32px 'Raleway' }
.page .image img {
	padding: 5px;
	border: 1px solid var(--border-color);
	border-radius: 10px;
	max-width: 100%;
}
.page img { max-width: 100% }
.page .content {
	font-size: 16px;
	line-height: 18px;
}
.page .iframe {
	padding: 5px;
	border: 1px solid var(--border-color);
	border-radius: 10px;
}
.page iframe {
	width: 100%;
	aspect-ratio: 560 / 315;
	border-radius: 10px;
}
.page video {
	width: 100%;
	aspect-ratio: 560 / 315;
	border-radius: 10px;
}

.sidebar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	background-color: var(--card-back);
	border-radius: 15px;
	position: relative;
}
.sidebar .title {
	padding: 15px 0;
	margin-bottom: 15px;
	border-bottom: 1px solid var(--border-color);
	font: 600 24px 'Raleway'
}

.more_news {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.more_news .news_box {
	display: grid;
	grid-template-columns: 25fr 75fr;
	padding: 0;
	background-color: transparent;
	border: none;
	border-radius: 0;
}
.more_news .news_box img {
	border-radius: 5px;
	overflow: hidden;
}
.more_news .news_box .news_img i {
	bottom: 5px;
	right: 5px;
}
.more_news .news_box span { display: none }
.more_news .news_box:hover { box-shadow: none }

.pag_box {
	display: grid;
	align-items: center;
	justify-content: center;
	padding: 35px 15px;
	font: 600 18px 'Raleway';
}
.pag_pages {
	display: flex;
	align-items: center;
	gap: 10px;
}
.btn_page {
	display: flex;
	align-items: start;
	justify-content: center;
	text-align: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	box-shadow: 0 0 0 3px transparent;
	cursor: pointer;
}
.btn_page svg { max-width: 100% }
.btn_page:hover .fill { fill: var(--blue-color) }
.btn_page.number { }
.btn_page.current {
	background-color: var(--blue-color);
	box-shadow: 0 0 0 3px var(--blue-35);
	color: var(--white-color);
	font-weight: 700;
	pointer-events: none;
}
.btn_page.disabled {
	opacity: .5;
	pointer-events: none;
}
.btn_page:not(.current):hover { }

.documents {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.documents a {
	display: grid;
	grid-template-columns: auto 8fr 1fr;
	align-items: center;
	background-color: var(--white-color);
	border-radius: 10px;
	box-shadow: 0 10px 30px 0 var(--shadow-color);
	min-height: 70px;
	overflow: hidden;
	font: 600 18px 'Raleway';
	text-decoration: none;
	color: var(--text-color);
}
.documents a .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--blue-color);
	color: var(--white-color);
	transition: all .3s ease-in-out;
	width: 30px;
	height: 70px;
}
.documents a .icon svg {
	display: block;
	width: 18px;
	height: 18px
}
.documents a:hover .icon { width: 70px }
.documents a .name { padding: 0 25px }
.documents a:hover .meta { transform: translateX(25px) }
.documents a .meta {
	display: grid;
	gap: 5px;
	text-transform: uppercase;
	font-size: 12px;
	transition: all .3s ease-in-out;
}

.page_404 {
	display: grid;
	align-items: center;
	justify-items: center;
	gap: 25px;
	grid-template-columns: 3fr 7fr;
	margin-bottom: 25px;
}
.page_404 strong { font: 700 20rem 'Raleway' }
.page_404 img { max-width: 100% }
.page_404 h2 { font-size: 28px }
.page_404 .text_404 {
	max-width: 70%;
	text-align: center;
	font-size: 16px;
}
.container {
	margin-inline: auto;
	width: 100%;
}

.big_tab {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.big_tab:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-color: var(--border-color);
	z-index: 0;
}
.big_tab a:first-child {
	border-left: 1px solid var(--border-color);
	border-top-left-radius: 5px;
}
.big_tab a:last-child { border-top-right-radius: 5px }
.big_tab a {
	font: 600 18px 'Oswald';
	text-transform: uppercase;
	padding: 15px 25px;
	border-bottom: 2px solid transparent;
	border: 1px solid var(--border-color);
	background-color: var(--blue-back);
	border-left: 0;
	z-index: 1;
	cursor: pointer;
}
.big_tab a.current {
	color: var(--blue-color);
	background-color: var(--white-color);
	border-bottom: 1px solid var(--white-color);
}

.teams {
	display: grid;
	gap: 25px;
}
.teams .title {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 15px;
}

.big_tab.gender {
	justify-content: end;
	padding-right: 55px;
}
.big_tab.gender:after { left: 55px }

.team_boxes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
}
.team_boxes .team_box {
	display: flex;
	flex-direction: column;
	gap: 15px;
	box-sizing: border-box;
	border: 1px solid var(--border-color);
	background-color: var(--white-color);
	border-radius: 15px;
	padding: 15px;
	overflow: hidden;
	position: relative;
	transition: .35s ease;
}
.team_boxes .team_box:hover {
	background-color: var(--card-back);
	border-color: var(--border-color);
}
.team_boxes .team_box i { transition: .3s }
.team_boxes .team_box:hover i { transform: translateX(5px) }
.team_box .team_meta {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	align-items: center;
	gap: 10px;
	position: relative;
}
.team_box .team_meta a { font: 600 24px 'Comfortaa' }
.team_box .team_meta a:hover { }
.team_box .team_meta a:after {
	content: '';
	position: absolute;
	inset: 0;
}
.team_box .team_meta img { max-width: 100% }

.team_box .team_info .gender {
	border: 1px solid var(--blue-color);
	color: var(--blue-color);
	border-radius: 5px;
	padding: 2px 15px;
	font: 600 12px 'Raleway';
	text-transform: uppercase;
	max-width: max-content;
	transition: .3s;
}
.team_box .team_info .gender.f {
	border-color: var(--red-color);
	color: var(--red-color);
}

.single.team .sidebar {
	padding: 15px;
	border: 1px solid var(--border-color);
}
.single.team .team_meta {
	padding-bottom: 15px;
	grid-template-columns: 1fr;
	border-bottom: 1px solid var(--border-color);
	position: relative;
}
.single.team .team_meta h1 { font-size: 38px }
.single.team .team_meta img { max-width: 86px }
.single.team .team_info {
	position: absolute;
	top: 15px;
	right: 15px;
}
.single.team .team_info .gender {
	color: var(--white-color);
	background-color: var(--blue-color);
	padding: 5px 10px;
	border-radius: 5px;
}
.single.team .team_info .gender.f { background-color: var(--red-color) }
.team_contacts {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.team_col {
	display: grid;
	grid-template-columns: 24px 1fr;
	align-items: center;
	gap: 10px;
	font: 600 16px 'Raleway';
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}
.team_col svg { max-width: 20px }
.team_col .fill { fill: var(--text-color) }
.single.team .sidebar a {
	max-width: max-content;
	margin: 0;
	padding: 0;
	border-radius: 0;
	color: var(--blue-color);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.single.team .sidebar a:hover {
	background-color: transparent;
	border-color: var(--blue-color);
}

.single.team .content {
	display: flex;
	flex-direction: column;
	gap: 25px;
}
.single.team .content h2 { font: italic 600 42px 'Oswald' }
.team_squad {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}
.person_box {
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
.person_box strong {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background-color: var(--blue-color);
	box-shadow: 0 0 0 5px var(--blue-35);
	color: var(--white-color);
	border-radius: 50%;
	font: 700 24px 'Raleway';
}
.person_box img {
	max-width: 100%;
	border-radius: 5px;
}
.person_box:hover .person_meta {
	transform: translateY(0);
	height: 75%;
}
.person_box:hover .person_meta:after { background: linear-gradient(180deg, transparent 0%, var(--black-75) 100%) }
.person_meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: end;
	gap: 5px;

	transform: translateY(76px);
	transition: transform .3s ease-out, opacity .3s ease-out;
}
.person_meta:after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 0%, var(--black-75) 75%);
	opacity: .85;
	z-index: 1;
}
.person_meta h3 {
	color: var(--white-color);
	text-align: center;
	font: 600 24px 'Oswald';
	z-index: 2;
}
.person_meta h6 {
	color: var(--white-color);
	text-align: center;
	font: 700 14px 'Raleway';
	z-index: 2;
}
.person_info {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	width: 100%;
	box-sizing: border-box;

	color: var(--white-color);
	border-top: 1px solid var(--white-55);
	height: 75px;
	z-index: 2;
}
.person_row {
	display: grid;
	grid-template-rows: auto 1fr;
}
.info_head {
	padding: 5px;
	padding-bottom: 0;
	text-align: center;
	font: 700 14px 'Raleway';
	color: var(--white-95);
}
.info_body {
	padding: 5px;
	text-align: center;
	font: 600 28px 'Oswald';
	color: var(--white-color);
}
.person_info img { max-width: 42px }

.match_rows {
	display: flex;
	flex-direction: column;
}
.fixture {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.match_card {
	display: grid;
	border-bottom: 1px solid var(--border-color);
	padding: 30px 0;
	gap: 25px;
	cursor: pointer;
	position: relative;
	box-sizing: border-box;
}
.match_card .match_url {
	position: absolute;
	inset: 0;
}
.match_card:hover { background-color: var(--card-back) }
.match_card:hover .match_datetime time { color: var(--blue-color) }
.match_card:hover .match_score h5 { color: var(--blue-color) }

.match_card .match_meta {
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
}
.match_card .tourn {
	display: flex;
	gap: 5px;
	align-items: center;
	justify-content: center;
	color: rgb(81, 81, 81);
	text-transform: uppercase;
	font-weight: 600;
	font-size: 16px;
}
.match_card .match_teams {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	justify-items: center;
	justify-content: center;
	align-items: center;
	gap: 40px;
	position: relative;
	box-sizing: border-box;
}
.match_card .match_teams  a {
	position: absolute;
	inset: 0;
}
.match_teams .team_box {
	display: flex;
	width: max-content;
	width: 100%;
	box-sizing: border-box;
	align-items: center;
	gap: 25px;
	font: 700 28px 'Raleway';
}
.match_teams .team_box.home {
	justify-content: end;
	text-align: right;
}
.match_teams .team_box img { max-width: 80px }

.match_card .match_datetime {
	text-transform: uppercase;
	text-align: center;
	font: 600 32px 'Oswald';
}
.match_card .match_datetime h5 { font-size: 16px }

.match_card .match_more {
	display: flex;
	align-items: center;
	justify-content: end;
}
.match_card .match_more a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 25px;
	background-color: var(--blue-back);
	color: var(--blue-color);
	border-radius: 5px;
	font-weight: 500;
	font-size: 16px;
	transition: .3s;
}
.match_card .match_more a svg { width: 18px }
.match_card .match_more a .fill { fill: var(--blue-color) }
.match_card .match_more a:hover {
	background-color: var(--blue-color);
	color: var(--white-color);
}
.match_card .match_more a:hover .fill { fill: var(--white-color) }

.match_card .gender {
	border: 1px solid var(--blue-color);
	color: var(--blue-color);
	border-radius: 5px;
	padding: 2px 15px;
	font: 600 12px 'Raleway';
	text-transform: uppercase;
	max-width: max-content;
	transition: .3s;
}
.match_card .gender.f {
	border-color: var(--red-color);
	color: var(--red-color);
}


.match_card.result .match_datetime { font: 600 14px 'Oswald' }
.match_card.result .tourn { font-size: 14px }
.match_card.result {
	grid-template-columns: 3fr 6fr 3fr;
	gap: 15px;
}
.match_card.result .match_teams { gap: 15px }
.match_card.result .team_box {
	gap: 5px;
	font: 700 24px 'Raleway';
}
.match_card .match_score { text-align: center }
.match_card .match_score h5 { font: 600 46px 'Oswald' }
.match_card .match_score h6 { font: 500 16px 'Raleway' }
.match_card .match_result {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font: 600 18px 'Lato';
}
.match_card .match_result s {
	display: flex;
	align-items: center;
	background-color: var(--white-color);
	border-radius: 5px;
	padding: 2px 5px;
	text-decoration: none;
}
.match_card .match_result .wrap {
	display: flex;
	align-items: center;
	gap: 5px;
	max-width: max-content;
	padding: 3px;
	border-radius: 5px;
	background-color: var(--blue-back);
	border: 1px solid var(--border-color);
}
.match_teams .team_box img { max-width: 56px }

.filter_box {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 30px 0;
	border-bottom: 1px solid var(--border-color);
}
.filter_box .hide { display: none }

.matches.list .table_box {
	background-color: transparent;
	border: 1px solid transparent;
}

.single.match .match_card { cursor: default }
.single.match .match_card .match_meta {
	gap: 5px;
	align-items: center;
}
.single.match .match_card .match_datetime { font-size: 16px }
.single.match .match_card .tourn { font-size: 16px }
.single.match .match_teams .team_box { font-size: 20px }

.single.match .match_card:hover { background-color: transparent }
.single.match .match_card:hover .match_datetime time { color: var(--text-color) }
.single.match .match_card:hover .match_score h5 { color: var(--text-color) }
.single.match .big_tab.lineups {
	justify-content: left;
	padding-left: 55px;
}
.single.match .big_tab.gender:after { right: 55px }
.single.match .match_wrap {
	display: grid;
	grid-template-columns: 4fr 6fr;
	gap: 35px;
	align-items: start;
	padding: 30px 0;
}
.single.match .match_video iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: none;
	border-radius: 8px;
}

.lineups_box {
	display: none;
	flex-direction: column;
	gap: 10px;
	padding: 15px 0;
}
.lineups_box.current { display: flex }
.app_box {
	display: grid;
	align-items: center;
	grid-template-columns: 32px 56px 1fr;
	gap: 10px;
	padding: 10px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--border-color);
}
.app_box strong {
	font: 700 22px 'Raleway';
	color: var(--blue-color);
}
.app_box img {
	border-radius: 50%;
	max-width: 100%;
}
.app_box em {
	display: grid;
	align-items: center;
	padding: 5px;
	border-radius: 4px;
	font-style: normal;
	font-weight: 700;
	font-size: 12px;
	color: var(--white-color);
	width: 18px;
	height: 18px;
	text-align: center;
	line-height: 1.2;
}
.app_box em.red { background-color: var(--red-color) }
.app_box em.orange {background-color: var(--orange-color) }
.app_box em.green { background-color: var(--green-color) }
.app_box em.blue { background-color: var(--blue-best) }
.app_box .app_meta {
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
	gap: 5px;
	font-weight: 600;
	color: var(--black-65);
}
.app_box .app_name {
	display: flex;
	gap: 10px;
	align-items: center;
	font: 600 20px 'Oswald';
	color: var(--text-color);
} 

.nationals .title {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
}

@media (min-width: 576px) {
	.container { max-width: 540px }
}
@media only screen and (max-width: 768px) {
	.container { max-width: 720px }
	.hdr_menu { display: none }
	.hdr_links { gap: 10px }
	.hdr_links a:last-child { display: none }
	.hdr_links a:after { display: none }
	.social_box { gap: 5px }
	.watch_modal .video_switch { display: none }
	.hdr_main { grid-template-columns: auto 1fr }
	.hdr_line:after { display: none }
	.hdr_tools { display: none }
	.hdr_matches { grid-template-columns: 1fr }
	.hdr_matches .btn_scroll { display: none }
	.btn_matches { display: none }
	.slider { min-height: 300px }
	.slide h2 {
		font-size: 24px;
		max-width: 60%;
	}
	.slide a {
		position: absolute;
		inset: 0;
		opacity: 0;
		max-width: none;
		z-index: 3;
	}
	.news_boxes { grid-template-columns: 1fr }
	.table_boxes { grid-template-columns: 1fr }
	.moment_boxes { grid-template-columns: 1fr 1fr }
	.moment_box:last-child { display: none }
	.mobile {
		margin: 0;
		padding: 15px;
		flex-direction: column;
	}
	.mobile img { max-width: 100% }
	.mobile_meta { gap: 15px }
	.mobile_slogan {
		font-size: 48px;
		line-height: 48px;
	}
	.mobile_get svg { max-width: 48px }
	.partners {
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding: 15px;
		gap: 10px;
	}
	.partners a {
		margin: 0;
		padding: 0;
	}
	footer {
		grid-template-columns: 1fr;
		padding: 15px;
	}
	.footer_meta {
		flex-direction: row;
		gap: 10px;
	}
	.footer_menu_box {
		display: flex;
		justify-content: space-between;
	}

	.page.two { grid-template-columns: 1fr }
	.page .content { padding: 0 15px }
	.page .image img { padding: 0 }
	.sidebar { margin: 0 15px }

	.teams .title { grid-template-columns: 1fr }
	.big_tab.gender {
		justify-content: start;
		padding: 0;
	}
	.team_boxes { grid-template-columns: 1fr }

	.single { padding: 0 }
	.single h1 { padding: 15px 15px 0 }
	.single .wrap { grid-template-columns: 1fr }
	.single .sidebar {
		padding: 0;
		margin: 0;
		border-radius: 0;
		flex-direction: row;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.single .sidebar::-webkit-scrollbar { display: none }
	.single .sidebar a { margin: 0 }
	.single .sidebar a:after {
		left: 0;
		top: auto;
		width: 100%;
		height: 3px;
		border-radius: 5px 5px 0 0;
	}
	.single .content { padding: 0 15px }
	.documents a { font-weight: 500 }
	.documents a .name { padding: 0 10px }

	.single.team .sidebar {
		flex-direction: column;
		overflow-x: unset;
	}
	.team_squad { grid-template-columns: 1fr 1fr }

	.page_404 { grid-template-columns: 1fr }
	.page_404 img { display: none }
	.page_404 strong { font-size: 10rem }
	.page_404 h2 { font-size: 1.35rem }

	.match_card {
		padding: 10px 0;
		justify-content: center;
		gap: 10px;
	}
	.match_card .match_teams { gap: 10px }
	.match_teams .team_box { gap: 10px }
	.match_teams .team_box { font: 600 16px 'Raleway' }
	.match_card .match_datetime { font-size: 24px }
	.match_card.result {
		grid-template-columns: 1fr;
		gap: 15px;
	}
	.match_card.result .match_teams { gap: 10px }
	.match_card.result .match_meta { align-items: center }
	.match_card .match_datetime h5 { font-size: 12px }
	.match_card .match_score h5 { font-size: 24px }
	.match_card.result .team_box { font: 600 16px 'Raleway' }
	.match_card .gender {
		padding: 2px 5px;
		font-size: 10px;
	}
	.match_teams .team_box img { max-width: 38px }
	.match_card .match_more { justify-content: center }
	.matches.list .table_box { padding: 0 }

	.single.match .big_tab.lineups {
		justify-content: center;
		padding: 0;
	}
	.person_meta { transform: translateY(60px) }
	.person_meta h3 { font-size: 18px }
	.info_head {
		font-size: 12px;
		font-weight: 500;
	}
	.person_info img { max-width: 32px }
	.info_body { font-size: 20px }
	
	.single.match .match_wrap {
		padding: 0 15px;
		margin-bottom: 35px;
		grid-template-columns: 1fr;
	}
	.single.nationals .title {
		grid-template-columns: 1fr;
		padding: 0 15px;
	}
	.single.nationals .big_tab.gender { padding: 0 15px }
	.single.nationals .sidebar {
		padding: 0 15px;
		font-size: 14px;
	}
	.single.nationals .sidebar a { text-align: center }
}
@media (min-width: 992px) {
	.container { max-width: 960px }
}
@media (min-width: 1200px) {
	.container { max-width: 1080px }
}
@media (min-width: 1400px) {
	.container { max-width: 1440px }
}

.container.middle {
	max-width: 1280px;
}
.container.small {
	max-width: 1080px;
}