@font-face {
	font-family: 'Raleway';
	src: url('/static/fonts/Raleway/Raleway_300.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'Raleway';
	src: url('/static/fonts/Raleway/Raleway_400.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Raleway';
	src: url('/static/fonts/Raleway/Raleway_500.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'Raleway';
	src: url('/static/fonts/Raleway/Raleway_600.ttf') format('truetype');
	font-weight: 600;
	font-style: bold;
}
@font-face {
	font-family: 'Raleway';
	src: url('/static/fonts/Raleway/Raleway_700.ttf') format('truetype');
	font-weight: 700;
	font-style: bold;
}
@font-face {
	font-family: 'Alice';
	src: url('/static/fonts/Alice/Alice_400.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Oswald';
	src: url('/static/fonts/Oswald/Oswald_700.ttf') format('truetype');
	font-weight: 700;
	font-style: bold;
}

:root {
	--back-color: rgb(4, 12, 24);
	--dark-back-color: rgb(4, 12, 24, .85);
	--white-color: rgb(255, 255, 255);
	--white-parent: rgb(255, 255, 255, .25);
	--white-light-parent: rgb(255, 255, 255, .055);
	--white-dark-parent: rgb(255, 255, 255, .025);
	--white-even-parent: rgb(255, 255, 255, .5);
	--white-odd-parent: rgb(255, 255, 255, .75);
	--text-color: rgb(26, 49, 60);
	--blue-color: rgb(46, 154, 254);
	--blue-even-parent: rgb(46, 154, 254, .5);
	--blue-back: rgb(30 56 89 / 1);
	--blue-parent: rgb(35, 101, 230, .85);
	--blue-light-parent: rgb(35, 101, 230, .25);
	--blue-dark-parent: rgb(35, 101, 230, .45);
	--video-back: linear-gradient(135deg, rgb(174, 103, 250), rgb(244, 152, 103) 97%);
	--yellow-color: rgb(255, 225, 68);
	--blue-parent-back: rgb(19, 56, 97);
	--blue-black-back: rgb(14, 40, 79);
	--modal-back-back: rgb(0, 0, 0, .35);
	--red-color: rgb(255, 0, 0);
	--red-odd-parent: rgb(255, 0, 0, .75);
}
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
body {
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	background-color: var(--back-color);
	color: var(--white-color);
}
h1, h2, h3, h4, h5, h6 { margin: 0 }
blockquote {
	border-left: 4px solid #ddd;
	margin-bottom: 5px;
	margin-top: 5px;
	padding-left: 16px;
	font-weight: 400;
}
button {
	display: flex;
	align-items: center;
	justify-content: center;
	outline: none;
	border: none;
	background-color: transparent;
}
.logo img { width: 240px }
.middle_container,
.container {
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.btn.filter {
	position: relative;
	display: flex;
	gap: 5px;
	justify-content: center;
	font-size: 20px;
	color: #fff;
	min-width: 250px;
	padding: 15px 0;
	border: 2px solid var(--white-parent);
	border-radius: 10px;
	outline: 0;
	cursor: pointer;
	box-sizing: border-box;
}
.btn.filter:hover { border-color: var(--white-color) }
.btn.filter.current {
	border-color: var(--yellow-color);
	color: var(--yellow-color);
}

a {
	color: var(---white-color);
	text-decoration: none;
}
.header_wrap {
	display: grid;
	grid-template-columns: auto 1fr auto;
	padding: 2.5rem 0;
	font-size: 16px;
}
.header_wrap .logo {
	display: grid;
	align-items: end;
}
.menu_bar {
	display: flex;
	align-items: end;
	justify-content: center;
	gap: 20px;
}
.menu_bar a {
	transition: .3s ease;
	border-bottom: 2px solid transparent;
}
.menu_bar a.current,
.menu_bar a:hover { border-color: var(--white-color) }
.social_bar {
	display: flex;
	align-items: end;
	justify-content: center;
	gap: 20px;
}
.social_bar a {
	display: grid;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	overflow: hidden;
	position: relative;
	border-radius: 50%;
	background-color: var(--white-color);
	border: 3px solid var(--blue-back);
	transition: .35s;
}
.social_bar a:hover { border-color: var(--blue-color) }
.header_news {
	display: grid;
	align-items: start;
	grid-template-columns: 6.5fr 3.5fr;
	gap: 20px;
}
.right_bar { display: grid }

.matches_wrap {
	display: grid;
	grid-template-columns: 250px 1fr;
	padding: 1.5rem 0 2.5em;
	gap: 15px;
}
.match_filter {
	display: grid;
	gap: 10px;
	align-content: start;
}
.nice_select {
	display: grid;
	position: relative;
	border: 2px solid var(--white-parent);
	border-radius: 5px;
	padding: 10px;
	width: 100%;
	cursor: pointer;
	box-sizing: border-box;
}
.nice_select:hover,
.nice_select.open { background-color: var(--white-light-parent) }
.nice_select .icon { transition: all .15s ease-in-out }
.nice_select.open .icon { transform: rotate(180deg) }
.nice_current {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 10px;
}
.nice_current span {
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--white-odd-parent);
}
.nice_select:hover .nice_current span,
.nice_select.open .nice_current span { color: var(--white-color) }

.nice_list {
	display: grid;
	position: absolute;
	top: 100%;
	opacity: 0;
	background-color: var(--dark-back-color);
	width: 100%;
	padding: 0;
	border: 2px solid var(--white-dark-parent);
	border-radius: 10px;
	border-top-left-radius: 0;
	box-shadow: 0px 5px 5px 2px var(--white-light-parent);
	overflow: hidden;
	transform-origin: 50% 0;
	transform: scale(.75) translateY(-21px);
	transition: all .2s cubic-bezier(.5, 0, 0, 1.25), opacity .15s ease-out;
	z-index: 9;
	pointer-events: none;
}
.nice_select.open .nice_list {
	opacity: 1;
	pointer-events: auto;
	transform: scale(1) translateY(5px);
}
.nice_select .option:first-child { padding-top: 15px }
.nice_select .option:last-child { padding-bottom: 15px }
.nice_select .option {
	justify-content: start;
	padding: 10px 10px;
	font-size: 1rem;
	color: var(--white-color);
	cursor: pointer;
}
.nice_select .option:hover:not(.current) { background-color: var(--white-light-parent) }
.nice_select .option.current {
	color: var(--white-even-parent);
	cursor: default;
	pointer-events: none;
}

.matches_boxes {
	display: flex;
	overflow-x: scroll;
	gap: 10px;
	scrollbar-width: none;
}
.matches_boxes::-webkit-scrollbar { display: none }
.matches_box {
	position: relative;
	display: grid;
	gap: 5px;
	align-items: start;
	min-width: 250px;
	box-sizing: border-box;
	padding: 10px;
	border-radius: 10px;
	background-color: var(--white-dark-parent);
	border: 1px solid var(--white-light-parent);
	transition: .45s;
}
.matches_box a {
	position: absolute;
	inset: 0;
}
.matches_box:hover {
	border-color: var(--white-parent);
	background-color: var(--white-light-parent);
}
.matches_box:hover .match_time { color: var(--white-color) }
.calendar_title {
	font-size: .75rem;
	color: var(--blue-even-parent);
	transition: .45s;
}
.matches_box:hover .calendar_title { color: var(--blue-color) }
.match_time {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	transition: .45s;
	color: var(--white-even-parent);
}
.match_time .icon { display: none }
.match_time.is_live {
	color: var(--red-color);
	grid-template-columns: auto 1fr auto;
}
.match_time.is_live .icon {
	display: inline;
	animation: blink 2s steps(1) infinite;
	transition: .3s;
}
@keyframes blink {
	0%, 83.33% { opacity: 1 }
	83.34%, 100% { opacity: 0 }
}
.match_time span {
	border: 1px solid var(--blue-color);
	color: var(--blue-color);
	border-radius: 5px;
	padding: 1px 4px;
	font-size: .75em;
	max-width: max-content;
	opacity: .45;
	transition: .3s;
}
.match_time span.clr_2 {
	border-color: var(--yellow-color);
	color: var(--yellow-color);
}
.matches_box:hover .match_time span { opacity: .95 }
.match_ads { display: none }

.match_data {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 40px;
}
.match_teams {
	display: grid;
	align-items: center;
	gap: 3px;
}
.match_teams img {
	max-width: 24px;
	border-radius: 5px;
	border: 2px solid var(--blue-back);
}
.match_team_box {
	display: flex;
	gap: 5px;
	align-items: center;
}
.match_team_box span { font-size: 1rem }
.match_team_box.winner span { font-weight: bold }
.match_score {
	display: grid;
	align-items: center;
	gap: 5px;
}
.match_score span {
	display: grid;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	min-width: 30px;
	padding: 0 5px;
	height: 24px;
	background-color: var(--white-light-parent);
	font-size: 1.1rem;
	font-weight: 500;
}

.slider_container {
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.slider_container * {
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
}
.slider_arrow {
	position: absolute;
	top: 0;
	left: 5px;
	bottom: 0;
	margin: auto 0;
	display: flex;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	border: none;
	outline: none;
	cursor: pointer;
	z-index: 2;
	transition: .25s;
}
.slider_arrow.next {
	left: auto;
	right: 5px;
}
.slider_arrow:hover {
	background-color: var(--white-parent);
	color: #fff;
}
.slider_wrap {
	display: flex;
	overflow: hidden;
}
.slider_boxes { display: flex }
.slider_box {
	display: grid;
	border-radius: 5px;
	overflow: hidden;
	height: 450px;
	position: relative;
}
.slider_box .circle {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 24px;
	height: 24px;
}
.slider_box .slider_img {
	position: absolute;
	margin: auto;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.slider_box .slider_title {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 5px;
	position: absolute;
	bottom: 0;
	background-color: var(--blue-parent);
	width: 100%;
	height: 120px;
	padding: 1rem 1.5rem;
	font-size: 1.1rem;
	font-weight: 600;
	box-sizing: border-box;
}
.slider_box .slider_title span {
	font-size: 1rem;
	font-weight: 500;
	color: #ffe144;
}
.slider_box a {
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.standings {
	display: grid;
	grid-template-rows: auto auto 1fr;
	align-items: start;
	background-color: var(--blue-back);
}
.standings h3 {
	background-color: var(--blue-dark-back);
	padding: 15px 0;
	text-align: center;
	text-transform: uppercase;
}

.tab_buttons {
	display: flex;
}
.btn_tab {
	flex: 1;
	display: grid;
	align-items: center;
	justify-content: center;
	padding: 10px;
	background-image: linear-gradient(to right, #1b5c98, #2e9afe);
	color: var(---white-color);
	cursor: pointer;
	font-size: 1rem;
	border-bottom: 4px solid transparent;
}
.tab_buttons .btn_tab.current { border-bottom: 4px solid var(--blue-color) }
.tab_content { display: none }
.tab_content.show { display: grid }

.middle_news {
	display: grid;
	grid-template-columns: 6.5fr 3.5fr;
	gap: 20px;
	margin: 20px 0;
}
.news_wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-columns: 1fr;
	gap: 15px;
}
.news_wrap.list {
	gap: 25px;
	margin-bottom: 35px;
}
.news_wrap.list .news_box { aspect-ratio: 480 / 360}
.news_box {
	position: relative;
	aspect-ratio: 480 / 360;
	background: no-repeat center / cover;
	overflow: hidden;
	border-radius: 5px;
}
.news_box:before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--blue-light-parent);
	transition: .3s ease;
}
.news_box a {
	position: absolute;
	inset: 0;
	cursor: pointer;
}
.news_box .news_title {
	position: absolute;
	bottom: 0;
	background-color: var(--blue-parent);
	width: 100%;
	min-height: 60px;
	padding: 10px;
	font-size: 1rem;
	font-weight: 300;
	box-sizing: border-box;
	transition: .3s ease;
}
.news_box .news_title strong { font-weight: 500 }
.news_box:hover:before { background-color: transparent }
.more_title {
	font-weight: 600;
	margin-bottom: 25px;
}
.mb_35 { margin-bottom: 35px!important }
.mb_55 { margin-bottom: 55px!important }

.interview_block {
	display: grid;
	gap: 25px;
	background-color: var(--blue-back);
	padding: 15px;
}
h2.title {
	display: flex;
	gap: 15px;
	align-items: center;
	color: var(--white-color);
}
h2.title i {
	display: block;
	background-color: var(--white-color);
	height: 5px;
	width: 30px;
}
.interview_wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-columns: 1fr;
	gap: 25px;
	color: var(--white-color);
}
.interview_wrap.list { margin: 35px 0 }
.interview_box {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 25px;
	position: relative;
	border: 1px solid transparent;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	padding: 15px;
}
.interview_box:after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 9px;
	background-color: var(--yellow-color);
	transform: translateY(9px);
	transition: transform 1.2s cubic-bezier(.23,1.25,.46,1);
	will-change: transform;
}
.interview_box:hover {
	border-color: var(--white-light-parent);
	background-color: var(--white-dark-parent);
}
.interview_box:hover:after { transform: translateY(1px) }
.interview_left_box {
	display: grid;
	gap: 10px;
}
.interview_img {
	background: no-repeat center / cover;
	width: 140px;
	height: 140px;
	border-radius: 50%;
}
.interview_author { text-align: center }
.interview_quote_box {
	display: flex;
	flex-direction: column;
	gap: 5px;
	max-width: 100%;
}
.interview_quote_top { display: grid }
.interview_quote_middle {
	font-size: 1.1rem;
	font-weight: 700;
	padding-left: 15px;
}
.interview_box a {
	position: absolute;
	inset: 0;
	cursor: pointer;
}
.line {
	display: block;
	background-color: var(--white-color);
	height: 5px;
	width: 100%;
}
.interview_quote_bottom {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 25px;
	padding-left: 15px;
	padding-bottom: 15px;
}

.page_pagination {
	display: grid;
	padding: 35px 0;
	margin-bottom: 55px;
}
.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	list-style-type: none;
}
.pagination .page-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background-color: var(--blue-back);
	position: relative;
}
.pagination .page-item .page-link {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset: 0;
}
.pagination .page-item .page-link:hover,
.pagination .page-item.active {
	border-radius: 50%;
	background-color: var(--blue-parent);
	color: var(--yellow-color);
}

.time_ago { color: var(--yellow-color) }
.author_boxes {
	display: flex;
	gap: 15px;
	align-items: center;
	margin: 15px 0;
}
.author_boxes a {
	display: flex;
	align-items: center;
	gap: 10px;
}
.author_boxes a img {
	max-width: 32px;
	border-radius: 50%;
}
.author_boxes a span { }

.video_block {
	display: grid;
	gap: 25px;
	background-image: var(--video-back);
	padding: 15px;
	margin: 25px 0;
}
.video_wrap {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-columns: 1fr;
	gap: 25px;
	color: var(--white-color);
}
.video_box textarea { display: none }
.video_box {
	display: grid;
	grid-template-rows: 1fr auto;
	align-items: stretch;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	position: relative;
	transition: .35s;
}
.video_box:hover .icon { z-index: 9 }
.video_box:hover .video_img:before { background-color: var(--blue-dark-parent) }
.video_img {
	display: flex;
	align-items: center;
	justify-content: center;
	background: no-repeat center / cover;
	aspect-ratio: 480 / 260;
	position: relative;
}
.video_img:before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--blue-light-parent);
	transition: .3s ease;
}
.video_box a {
	position: absolute;
	inset: 0;
}
.video_box span {
	display: grid;
	height: 80px;
	padding: 10px;
	background-color: var(--blue-parent);
}
.video_box img { max-width: 100% }
.media_content iframe {
	aspect-ratio: 480 / 260;
	height: auto!important;
}

.footer_wrap {
	display: grid;
	grid-template-columns: .5fr 1fr .3fr;
	gap: 20px;
	padding-top: 25px;
}
.footer_wrap .menu_bar { align-items: start }
.footer_wrap .social_bar { justify-content: end }
.footer_wrap .social_bar a { border-radius: 5px }
.middle_bar { display: grid }
.middle_bar .info_text {
	padding: 10px 25px;
	text-align: center;
	font-size: .86rem;
}
.middle_bar .info_text a { color: var(--blue-color) }
.middle_bar .info_text a:hover { text-decoration: underline }

.standing {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 1rem;
}
.standing .center { text-align: center }
.standing td { padding: 7px 5px }
.standing tr:nth-child(even) { background-color: rgb(0, 0, 0, .2 ) }
.standing tr:hover { background-color: rgb(255, 255, 255, .05) }
.standing thead tr { border-bottom: 1px solid var(--white-dark-parent) }
.standing th {
	text-align: left;
	font-size: 1.1em;
	font-weight: 700;
	padding: 10px 5px;
}
.standing .team_name {
	display: flex;
	gap: 5px;
	align-items: center;
}
.standing .team_name img {
	max-width: 20px;
	border-radius: 5px;
}
.standing .place {
	display: grid;
	align-items: center;
	font-size: 1.15rem;
	font-weight: 600;
}
.standing a:hover { color: var(--yellow-color) }
.national_teams .team_name img { border-radius: 2px }

.large_wrap {
	display: grid;
	margin: 25px 0 55px;
}
.large_tab {
	display: grid;
	grid-template-columns: 200px 200px;
}
.large_tab button {
	font-size: 1.5rem;
	background-image: unset;
	background-color: var(--blue-black-back);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.large_tab button.current { background-color: var(--blue-parent-back) }
.large_wrap h1 {
	padding: 25px 0;
	text-align: center;
	background-color: var(--blue-parent-back)
}
.large_wrap .tab_content { background-color: var(--blue-parent-back) }

.calendar_box {
	display: grid;
	grid-template-columns: auto 1fr .5fr;
	gap: 15px;
	padding: 15px 25px;
	margin-bottom: 5px;
	cursor: pointer;
	border-radius: 5px;
	position: relative;
}
.calendar_box a {
	position: absolute;
	inset: 0;
}
.calendar_box:hover { background-color: rgb(255, 255, 255, .05) }
.calendar_box:hover h4 { color: var(--yellow-color) }
.calendar_box img {
	border-radius: 5px;
	max-width: 50px;
}
.calendar_box h4 {
	font-size: 1.2rem;
	font-weight: 500;
}
.calendar_info {
	display: grid;
	grid-template-rows: auto 1fr;
	align-items: start;
	gap: 5px;
}
.calendar_location {
	display: flex;
	gap: 5px;
	align-items: center;
	opacity: .9;
	font-size: .8rem;
}
.calendar_date {
	display: grid;
	gap: 5px;
	justify-content: end;
	align-items: center;
	font-size: 1.1rem;
}

.single.calendar_box { grid-template-columns: 1fr auto }
.calendar_meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 15px;
}
.single.calendar_box img {
	max-width: 100px;
	border: 3px solid var(--blue-back);
}
.single.calendar_box h4 { font-size: 2rem }
.single .calendar_info { grid-template-rows: auto auto 1fr }
.single .calendar_gender {
	border: 1px solid var(--blue-color);
	color: var(--blue-color);
	border-radius: 10px;
	font-size: 1rem;
	padding: 5px 10px;
	max-width: max-content;
}
.single .calendar_gender.female {
	border-color: var(--yellow-color);
	color: var(--yellow-color);
}
.single .calendar_location { font-size: 1.2rem }
.single .calendar_date {
	grid-template-rows: auto 1fr;
	align-items: start;
	font-size: 1.4rem;
}
.single.calendar_box:hover { background-color: transparent }
.single.calendar_box:hover h4 { color: var(--white-color) }
.calendar.matches_table {
	background-color: var(--blue-parent-back);
	border-radius: 15px;
	margin: 25px 0 35px;
	padding: 15px;
}

.team_box {
	display: grid;
	gap: 15px;
	grid-template-columns: 1fr auto;
	margin-bottom: 35px;
}
.team_box img {
	width: 100px;
	border-radius: 5px;
	border: 3px solid var(--blue-back);
}
.team_meta {
	display: flex;
	gap: 20px;
	align-items: center;
	font-size: 1.3rem;
}
.meta_box {
	display: grid;
	gap: 5px;
}
.meta_box span {
	font-size: 1rem;
	opacity: .85;
}
.team_info {
	display: grid;
	align-items: center;
}
.info_box {
	display: grid;
	gap: 15px;
	align-items: center;
	grid-template-columns: 1fr 1fr;
	font-size: 1.1rem;
}
.info_box strong {
	font-family: 'Alice';
	font-size: 1.2rem;
}

.team_matches .bold { font-weight: 700 }
.team_matches .green { color: #00c292 }
.team_matches .red { color: #e46a76 }

.league_tab {
	display: flex;
	gap: 10px;
	background-color: var(--blue-parent-back);
	padding: 25px 25px 0;
}

.club_boxes {
	grid-template-columns: repeat(4, 1fr);
	grid-auto-columns: 1fr;
	gap: 15px;
	padding: 25px;
}
.club_boxes.show { display: grid }
.club_box {
	display: none;
	gap: 15px;
	padding: 15px;
	position: relative;
	border-radius: 15px;
	background-color: rgb(0, 0, 0, .2 );
	border: 1px solid rgb(0, 0, 0, .1);
	transition: box-shadow 1.2s cubic-bezier(.23, 1.25, .46, 1);
	overflow: hidden;
}
.club_box.show { display: grid }
.club_box img {
	opacity: .85;
	border-radius: 10px;
	max-width: 50px;
}
.club_meta {
	display: grid;
	grid-template-columns: 1fr auto;
	font-size: 1.1rem;
	font-weight: 500;
}
.club_box a {
	position: absolute;
	inset: 0;
}
.club_box:hover:after { transform: translateY(1px) }
.club_box:after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 9px;
	background-color: var(--yellow-color);
	transform: translateY(9px);
	transition: transform 1.2s cubic-bezier(.23,1.25,.46,1);
	will-change: transform;
}
.club_box:hover .club_meta i{
	transform: translate3d(5px, 0px, 0px);
	transition: transform 1.2s cubic-bezier(.23, 1.25, .46, 1);
}
.club_box .club_back {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 30em;
	max-width: 80%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(to top left, rgb(0, 0, 0,.25) 0%, rgb(0, 0, 0,.25) 50%, transparent 0%);
}

.players_boxes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-columns: 1fr;
	gap: 15px;
	padding: 25px;
	background-color: var(--blue-parent-back);
}
.players_box {
	display: grid;
	grid-template-columns: 6fr 4fr;
	gap: 5px;
	padding: 15px;
	position: relative;
	border-radius: 15px;
	background-color: rgb(0, 0, 0, .2);
	border: 1px solid rgb(0, 0, 0, .1);
	transition: box-shadow 1.2s cubic-bezier(.23, 1.25, .46, 1);
	overflow: hidden;
}
.players_box:after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 9px;
	background-color: var(--yellow-color);
	transform: translateY(9px);
	transition: transform 1.2s cubic-bezier(.23,1.25,.46,1);
	will-change: transform;
}
.players_box:hover:after { transform: translateY(1px) }
.players_box:hover .players_number { color: var(--yellow-color) }
.players_box a {
	position: absolute;
	inset: 0;
}
.players_meta {
	display: grid;
	align-content: space-between;
}
.players_name {
	display: grid;
	gap: 1px;
}
.players_name h4 {
	font-size: 1.15rem;
	font-weight: 500;
}
.players_name h5 {
	font-size: 1.3rem;
	font-weight: 600;
}
.players_number {
	font-family: Oswald, Arial, sans-serif;
	font-size: 3rem;
	font-weight: 700;
}
.players_box img {
	border-radius: 5px;
	max-width: 100%;
}

.player_box {
	display: grid;
	gap: 15px;
	grid-template-columns: 1fr auto;
	margin-bottom: 35px;
	padding: 25px 15px;
	background-color: var(--blue-parent-back);
	border-radius: 25px;
}
.player_meta {
	display: flex;
	gap: 20px;
	align-items: center;
	font-size: 1.2rem;
}
.player_box img {
	width: 150px;
	border-radius: 5px;
}
.player_info {
	display: grid;
	align-items: center;
}

.match_info {
	display: grid;
	align-content: start;
	gap: 15px;
	margin: 25px 0 55px;
	padding: 25px 15px;
	background-color: var(--blue-parent-back);
	border-radius: 25px;
}
.match_info h3 {
	text-align: center;
	font-size: 1rem;
	font-weight: 400;
	color: var(--white-even-parent);
}
.match_info h4 {
	text-align: center;
	font-size: 1rem;
	font-weight: 400;
	color: var(--white-color);
}
.match_info h2 {
	display: flex;
	gap: 10px;
	justify-content: center;
	font-size: 3rem;
	font-weight: 500;
	color: var(--white-color);
}
.match_info_box {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
}
.match_info_box h1 { font-size: 1.3rem }
.match_info_box .team_box { grid-template-columns: none }
.match_info_box .home_box.team_box .meta_box { text-align: right }
.meta_box a:hover { color: var(--yellow-color) }
.home_box .team_meta { justify-content: end }
.match_score_box table {
	background-color: transparent;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}
.match_score_box thead tr {
	border-bottom: 1px solid var(--white-even-parent);
	color: var(--white-even-parent);
	font-weight: 500;
}
.match_score_box th { padding: 5px 0 }
.match_score_box td { padding: 5px 0 }
.match_score_box table .point { text-align: center }
.match_score_box table .team_col { text-align: left }
.match_score_box.mobile { display: none }
.match_video {
	display: grid;
	justify-content: center;
}
.match_video iframe {
	aspect-ratio: 480 / 260;
	width: 720px;
	max-width: 100%;
	height: auto;
	border-radius: 15px;
}

.filter_date {
	font-size: 1.5rem;
	font-weight: 500;
	padding: 15px 0;
}
.btn.filter input {
	opacity: 0;
	position: absolute;
	inset: 0;
	cursor: pointer;
}
.match_center {
	display: grid;
	gap: 15px;
	background-color: var(--blue-parent-back);
	border-radius: 15px;
	padding: 15px;
	margin-bottom: 35px;
}
.filter_buttons {
	display: grid;
	gap: 15px;
	grid-template-columns: 1fr 1fr 1fr 1fr auto;
}
.match_center .btn.filter { min-width: max-content }
.btn.filter svg {
	margin: 0 20px;
	min-width: 24px;
}
.btn.filter .svg_fill { fill: var(--white-color) }
.btn.filter.current .svg_fill { fill: var(--yellow-color) }

.matches_table { display: grid }
.no_matches {
	padding: 5px 0;
	color: var(--white-even-parent);
}
.col_match {
	display: grid;
	align-items: center;
	grid-template-columns: auto 6fr 3fr;
	background-color: var(--white-dark-parent);
	border-bottom: 1px solid var(--white-light-parent);
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
}
.col_match a {
	position: absolute;
	inset: 0;
}
.col_match:hover {
	border-color: var(--white-parent);
	background-color: var(--white-light-parent);
}
.col_match_ts {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 15px;
}
.col_match_time {
	width: 50px;
	font-size: 1.1rem;
	font-weight: 500;
}
.col_match_status {
	display: grid;
	align-items: center;
	white-space: nowrap;
	text-transform: lowercase;
	width: 100px;
}
.col_match_status.is_live { color: var(--red-color) }
.is_finished { font-weight: 700 }

.col_match_data {
	display: grid;
	gap: 5px;
	justify-content: center;
}
.col_match_calendar {
	font-size: .86rem;
	text-align: center;
	color: var(--blue-color);
}
.col_match_teams {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 5px;
	align-items: center;
	justify-content: center;
}
.col_team_box {
	display: flex;
	gap: 5px;
	align-items: center;
}
.col_team_box:first-child { justify-content: end }
.col_team_box img {
	max-width: 24px;
	border-radius: 5px;
	border: 2px solid var(--blue-back);
}
.col_team_box span { }
.col_team_box.winner { font-weight: 700 }
.col_score {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 3px;
	width: 86px;
	height: 32px;
	padding: 0 5px;
	border-radius: 5px;
	background-color: var(--white-light-parent);
	font-size: 1.1rem;
	font-weight: 500;
}
.col_score.mobile { display: none }
.col_score.is_live { background-color: var(--red-odd-parent) }
.col_score span { }
.match_more {  }

.air-datepicker {
	background-color: var(--back-color);
	color: var(--white-odd-parent);
	border-color: var(--white-parent);
}
.air-datepicker--pointer:after {
	background-color: var(--back-color);
	border-color: var(--back-color);
}
.air-datepicker-nav { border-color: var(--white-parent) }
.air-datepicker-nav--action:hover { background-color: var(--white-light-parent) }
.air-datepicker-nav--title:hover { background-color: var(--white-light-parent) }
.air-datepicker-cell.-focus- { background-color: var(--white-light-parent) }
.air-datepicker-body--day-name { color: var(--blue-color) }
.air-datepicker-cell.-selected- { background-color: var(--blue-color) }
.air-datepicker-nav--title i { color: var(--white-odd-parent) }

.contact_block {
	display: grid;
	gap: 15px;
}
.create_by {
	font-size: .9rem;
	text-align: right;
}
.create_by a {
	color: var(--blue-color);
	font-weight: 600;
}
.create_by a:hover { text-decoration: underline }

.icon {
	display: block;
	background: no-repeat center / contain;
}
.ic_12 {
	width: 12px;
	height: 12px;
}
.ic_16 {
	width: 16px;
	height: 16px;
}
.ic_24 {
	width: 24px;
	height: 24px;
}
.ic_32 {
	width: 32px;
	height: 32px;
}
.ic_48 {
	width: 48px;
	height: 48px;
}
.ic_globe { background-image: url(/static/images/icons/ic_globe.svg) }
.ic_chevron { background-image: url(/static/images/icons/ic_chevron.svg) }
.ic_search { background-image: url(/static/images/icons/ic_search.svg) }
.ic_play { background-image: url(/static/images/icons/ic_play.svg) }
.ic_instagram_round { background-image: url(/static/images/icons/ic_instagram_round.svg) }
.ic_telegram_round { background-image: url(/static/images/icons/ic_telegram_round.svg) }
.ic_youtube_round { background-image: url(/static/images/icons/ic_youtube_round.svg) }
.ic_youtube_outline { background-image: url(/static/images/icons/ic_youtube_outline.svg) }
.ic_youtube_red { background-image: url(/static/images/icons/ic_youtube_red.svg) }
.ic_youtube { background-image: url(/static/images/icons/ic_youtube.svg) }
.ic_instagram { background-image: url(/static/images/icons/ic_instagram.svg) }
.ic_telegram { background-image: url(/static/images/icons/ic_telegram.svg) }
.ic_close { background-image: url(/static/images/icons/ic_close.svg) }
.ic_burger { background-image: url(/static/images/icons/ic_burger.svg) }
.ic_quote { background-image: url(/static/images/icons/ic_quote.svg) }
.ic_prev_arrow { background-image: url(/static/images/icons/ic_prev_arrow.svg) }
.ic_next_arrow { background-image: url(/static/images/icons/ic_next_arrow.svg) }
.ic_location { background-image: url(/static/images/icons/ic_location.svg) }
.ic_right_arrow { background-image: url(/static/images/icons/ic_right_arrow.svg) }
.ic_white_play { background-image: url(/static/images/icons/ic_white_play.svg) }
.ic_calendar { background-image: url(/static/images/icons/ic_calendar.svg) }
.ic_live { background-image: url(/static/images/icons/ic_dot.svg) }

.burger_box { display: none }
.modal_back {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9;
	background-color: var(--modal-back-back);
}
body.modal { overflow: hidden }
body.modal .modal_back { display: grid }
.modal_back .card {
	position: fixed;
	z-index: 11;
	top: 35px;
	left: 0;
	right: 0;
	margin: auto;
	transition: .3s;
	border: 2px solid rgb(0, 0, 0, .05);
	box-shadow: 0 12px 16px rgb(20 36 56 / 4%);
}
.modal_back .card.iframe {
	width: 900px;
	padding: 0;
}
.modal_back .card.iframe iframe {
	width: 900px;
	height: 600px;
	border-radius: 15px;
}
body.modal .modal_back .close {
	position: absolute;
	top: -12px;
	right: -12px;
	z-index: 12;
	border-radius: 50%;
	background-size: 65%;
	background-color: var(--white-color);
	border: 1px solid var(--transparent-black);
	cursor: pointer;
}
body.modal .modal_back .close:hover { background-color: rgb(255, 255, 255, .5) }
.menu .sidebar { transform: translateX(0) }
.sidebar {
	display: grid;
	position: fixed;
	top: 0;
	right: 0;
	background-color: #fff;
	height: 100%;
	z-index: 99;
	transform: translateX(100%);
	transition-duration: .3s;
	min-width: 80%;
}

/* smi24 */
.smi24-grid-item { background-color: transparent }
/* smi24 */

@media only screen and (max-width: 768px) {
	.header_wrap {
		grid-template-columns: 1fr auto;
		gap: 25px;
		padding: 1em 0;
	}
	.header_wrap .menu_bar { display: none }
	.match_data { display: flex }
	.match_teams { flex: 1 }
	.match_teams,
	.match_score {
		display: flex;
		flex-direction: column;
	}
	.match_team_box { width: 100% }
	.social_bar a {
		width: 24px;
		height: 24px;
	}
	.social_bar a .icon {
		width: 18px;
		height: 18px;
	}
	.social_bar { gap: 10px }
	.footer_wrap .social_bar {
		gap: 5px;
		justify-content: center;
	}
	.sidebar .menu_bar {
		display: grid;
		background-color: var(--back-color);
		align-content: start;
		justify-content: start;
		gap: 0;
		padding-top: 25px;
		padding-left: 25px;
	}
	.sidebar .menu_bar a {
		padding: 10px 15px;
		text-transform: uppercase;
		font-size: 1.15rem;
		font-weight: 500;
	}
	.burger_box {
		display: grid;
		align-items: start;
		justify-content: end;
	}
	.btn_burger { padding: 0 }
	.logo img { max-width: 100% }
	.header_news {
		grid-template-columns: auto;
		margin-top: 25px;
	}
	.slider_box { height: 270px }
	.slider_box .slider_title { padding: 5px }
	.middle_news { grid-template-columns: auto }
	.news_wrap { grid-template-columns: auto }
	.interview_wrap { grid-template-columns: auto }
	.interview_quote_middle { font-weight: 600 }
	.video_wrap { grid-template-columns: auto }
	.footer_wrap { grid-template-columns: auto }
	.footer_wrap .menu_bar {
		gap: 5px 15px;
		flex-wrap: wrap;
	}
	.contact_text p {
		margin: 0;
		font-size: .86rem;
	}
	.middle_bar .info_text { padding: 0 }
	.news_image img { max-width: 100% }
	.contact_block { padding-bottom: 25px }
	.no_mobile { display: none }
	.player_box { grid-template-columns: auto }
	.player_box img { max-width: 100px }
	.player_meta h1 { font-size: 1.2rem }
	.player_meta .meta_box span { font-size: 1.1rem }
	.page_pagination { margin-bottom: 0 }
	.pagination {
		gap: 5px;
		padding: 0;
	}
	.pagination .page-item {
		width: 25px;
		height: 25px;
	}
	.btn.filter {
		width: max-content;
		padding: 5px 10px;
	}
	.club_boxes { grid-template-columns: auto }
	.players_boxes { grid-template-columns: auto }
	.large_wrap .tab_content { gap: 10px }
	.large_tab { grid-template-columns: 1fr 1fr }
	.large_tab button {
		font-size: 1.2rem;
		padding: 5px 0;
	}
	.teams_wrap .btn.filter {
		font-size: 1rem;
		min-width: auto;
	}
	.calendar_box {
		grid-template-columns: auto 6fr 2fr;
		padding: 5px 10px;
		gap: 5px;
	}
	.calendar_box .ic_location {
		width: 12px;
		height: 12px;
	}
	.calendar_box h4 { font-size: 1rem }
	.large_wrap h1 { font-size: 1.2rem }
	.calendar_info { grid-template-rows: 1fr auto }
	.calendar_box img { max-width: 40px }
	.calendar_location { font-size: .7rem }
	.calendar_date {
		font-size: .86rem;
		gap: 0;
	}
	.team_box { grid-template-columns: none }
	.team_name a {}
	.modal_back .card.iframe { width: calc( 100% - 20px ) }
	.modal_back .card.iframe iframe {
		max-width: 100%;
		max-height: 260px;
	}
	body.modal .modal_back .close { right: 5px }
	.interview_box { grid-template-columns: 100px 1fr }
	.interview_img {
		width: 100px;
		height: 100px;
	}
	.standing td { padding: 4px 2px }
	.middle_container { padding: 0 }
	.matches_wrap { grid-template-columns: none }
	.match_filter { display: flex }
	.match_time { font-size: .86rem }
	.match_info_box .team_box img { max-width: 30px }
	.match_info_box .meta_box span { display: none }
	.match_info_box h1 {
		font-size: 1rem;
		font-weight: 500;
	}
	.team_meta { gap: 5px }
	.match_score_box { display: none }
	.match_score_box.mobile { display: grid }
	.match_info_box { grid-template-columns: 1fr 1fr }
	.match_info_box .team_box { margin: 0 }
	.nice_select { border: 1px solid var(--white-parent) }
	.nice_current span { font-size: 1rem }
	.footer_logo {
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: 10px;
	}
	.contact_block { justify-content: center }
	.match_center { padding: 15px 10px }
	.filter_date { font-size: 1.2rem }
	.filter_buttons { gap: 5px }
	.filter_buttons .btn.filter {
		border: 1px solid var(--white-parent);
		font-size: .86rem;
		padding: 2px 5px;
		border-radius: 7px;
		width: 100%;
	}
	.btn.filter.current { border-color: var(--yellow-color) }
	.btn.filter svg {
		margin: 0 5px;
		min-width: 16px;
	}
	.col_match_data { justify-content: start }
	.col_match {
		grid-template-columns: 75px 1fr 50px;
		padding: 2px 5px;
		gap: 5px;
	}
	.col_match_ts {
		gap: 5px;
		grid-template-columns: none;
		font-size: .86rem;
		min-width: 75px;
	}
	.col_match_status {
		font-size: .86rem;
		width: auto;
	}
	.col_match_calendar {
		text-align: left;
		font-size: .66rem;
	}
	.col_match_teams {
		grid-template-columns: none;
		justify-content: start;
	}
	.col_team_box:first-child {
		display: flex;
		flex-direction: row-reverse;
		justify-content: start;
	}
	.col_team_box img { max-width: 1.1rem }
	.col_match_teams .col_score { display: none }
	.col_team_box span { font-size: .86rem }
	.is_finished { font-weight: 600 }
	.col_score.mobile {
		display: flex;
		width: 38px;
	}
	.match_more { display: none }
	.single.calendar_box {
		gap: 15px;
		grid-template-columns: none;
	}
	.single.calendar_box h4 { font-size: 1.3rem }
	.single .calendar_gender {
		padding: 2px 10px;
		border-radius: 5px;
	}
	.single .calendar_date {
		grid-template-rows: none;
		grid-template-columns: auto auto;
		justify-content: start;
		gap: 5px;
	}
	.single .calendar_date span:first-child:after { content: ' - ' }
	.single .calendar_date span { text-align: center }
}
@media (min-width: 640px) {
	.container { max-width: 640px }
	.middle_container { max-width: 640px }
}
@media (min-width: 768px) {
	.container { max-width: 768px }
	.middle_container { max-width: 768px }
}
@media (min-width: 1024px) {
	.container { max-width: 1024px }
	.middle_container { max-width: 900px }
}
@media (min-width: 1280px) {
	.container { max-width: 1280px }
	.middle_container { max-width: 900px }
}