@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap);

*,
:after,
:before {
box-sizing: border-box
}

:root {
tab-size: 4
}

html {
-webkit-text-size-adjust: 100%;
line-height: 1.15;
scroll-behavior: smooth;
}

body {
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
margin: 0
}

hr {
color: inherit;
height: 0
}

abbr[title] {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted
}

b,
strong {
font-weight: bolder
}

code,
kbd,
pre,
samp {
font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
font-size: 1em
}

small {
font-size: 80%
}

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}

sub {
bottom: -.25em
}

sup {
top: -.5em
}

table {
border-color: inherit;
text-indent: 0
}

button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0
}

button,
select {
text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
-webkit-appearance: button
}

::-moz-focus-inner {
border-style: none;
padding: 0
}

:-moz-focusring {
outline: 1px dotted ButtonText
}

:-moz-ui-invalid {
box-shadow: none
}

legend {
padding: 0
}

progress {
vertical-align: baseline
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto
}

[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}

::-webkit-search-decoration {
-webkit-appearance: none
}

::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}

summary {
display: list-item
}

ul {
list-style: none;
padding: 0
}

.top-bar-component {
background-color: #054959;
display: flex;
justify-content: end
}

.top-bar-component a {
color: #fff;
font-size: 16px
}

@media(min-width:1023px) {
.top-bar-component a {
	font-size: 17px
}
}

@media(min-width:1280px) {
.top-bar-component a {
	font-size: 19px
}
}

@media(min-width:1600px) {
.top-bar-component a {
	font-size: 20px
}
}

.header-component {
background-color: #0488a6;
height: 70vh;
padding: 15px;
position: relative
}

@media(min-width:1023px) {
.header-component {
	height: auto
}
}

.header-component .logo {
display: block;
height: auto;
margin: 15px;
width: 200px;
z-index: 1
}

.header-component .logo svg,
.header-component .logo svg * {
fill: #fff
}

.header-component .content {
color: #fff;
left: 50%;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%, -50%);
width: 80vw;
z-index: 1
}

@media(min-width:1023px) {
.header-component .content {
	width: 60vw
}
}

.header-component .content h1 {
font-size: 23px;
text-transform: uppercase
}

@media(min-width:1023px) {
.header-component .content h1 {
	font-size: 24px
}
}

@media(min-width:1280px) {
.header-component .content h1 {
	font-size: 26px
}
}

@media(min-width:1600px) {
.header-component .content h1 {
	font-size: 28px
}
}

@media(min-width:1023px) {
.header-component .content h1 {
	font-size: 38px
}
}

@media(min-width:1023px)and (min-width:1023px) {
.header-component .content h1 {
	font-size: 40px
}
}

@media(min-width:1023px)and (min-width:1280px) {
.header-component .content h1 {
	font-size: 41px
}
}

@media(min-width:1023px)and (min-width:1600px) {
.header-component .content h1 {
	font-size: 43px
}
}

.header-component .content h2 {
font-size: 16px;
font-weight: 300
}

@media(min-width:1023px) {
.header-component .content h2 {
	font-size: 17px
}
}

@media(min-width:1280px) {
.header-component .content h2 {
	font-size: 19px
}
}

@media(min-width:1600px) {
.header-component .content h2 {
	font-size: 20px
}
}

@media(min-width:1023px) {
.header-component .content h2 {
	font-size: 18px
}
}

@media(min-width:1023px)and (min-width:1023px) {
.header-component .content h2 {
	font-size: 20px
}
}

@media(min-width:1023px)and (min-width:1280px) {
.header-component .content h2 {
	font-size: 21px
}
}

@media(min-width:1023px)and (min-width:1600px) {
.header-component .content h2 {
	font-size: 23px
}
}

.header-component.has-video {
background-color: #054959;
padding: 0
}

.header-component.has-video .logo {
left: 0;
position: absolute;
top: 0
}

.header-component.has-video video {
height: 100%;
mix-blend-mode: multiply;
object-fit: cover;
width: 100%
}

.footer-component {
font-size: 12px;
padding: 60px 0 15px;
text-align: center
}

@media(min-width:1023px) {
.footer-component {
	font-size: 13px
}
}

@media(min-width:1280px) {
.footer-component {
	font-size: 14px
}
}

@media(min-width:1600px) {
.footer-component {
	font-size: 15px
}
}

@media(min-width:1023px) {
.index-page .key-features {
	padding: 30px 90px
}
}

.index-page .key-features>div {
margin: 30px 0 60px
}

@media(min-width:1023px) {
.index-page .key-features>div {
	margin: 90px 0
}
}

.index-page .key-features>div h2 {
color: #0488a6;
font-size: 38px
}

@media(min-width:1023px) {
.index-page .key-features>div h2 {
	font-size: 40px
}
}

@media(min-width:1280px) {
.index-page .key-features>div h2 {
	font-size: 41px
}
}

@media(min-width:1600px) {
.index-page .key-features>div h2 {
	font-size: 43px
}
}

.index-page .key-features>div p {
font-size: 20px
}

@media(min-width:1023px) {
.index-page .key-features>div p {
	font-size: 21px
}
}

@media(min-width:1280px) {
.index-page .key-features>div p {
	font-size: 23px
}
}

@media(min-width:1600px) {
.index-page .key-features>div p {
	font-size: 24px
}
}

@media(min-width:1023px) {
.index-page .key-features .has-image {
	grid-gap: 60px;
	display: grid;
	grid-template-columns: 3fr 2fr;
	grid-template-rows: auto
}

.index-page .key-features .has-image.grid-1fr-1fr {
	grid-gap: 60px;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto
}
}

.index-page .key-features .has-image img {
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
height: auto;
width: 100%
}

.index-page .start-now {
background-color: #0488a6;
color: #fff;
padding: 60px
}

@media(min-width:1023px) {
.index-page .start-now {
	grid-gap: 60px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	padding: 90px
}
}

.index-page .start-now h2 {
font-size: 38px
}

@media(min-width:1023px) {
.index-page .start-now h2 {
	font-size: 40px
}
}

@media(min-width:1280px) {
.index-page .start-now h2 {
	font-size: 41px
}
}

@media(min-width:1600px) {
.index-page .start-now h2 {
	font-size: 43px
}
}

.index-page .start-now h3 {
font-size: 23px;
font-weight: 300
}

@media(min-width:1023px) {
.index-page .start-now h3 {
	font-size: 24px
}
}

@media(min-width:1280px) {
.index-page .start-now h3 {
	font-size: 26px
}
}

@media(min-width:1600px) {
.index-page .start-now h3 {
	font-size: 28px
}
}

.index-page .start-now div {
margin: 0 0 30px
}

.index-page .start-now div h4 {
font-size: 18px
}

@media(min-width:1023px) {
.index-page .start-now div h4 {
	font-size: 20px
}
}

@media(min-width:1280px) {
.index-page .start-now div h4 {
	font-size: 21px
}
}

@media(min-width:1600px) {
.index-page .start-now div h4 {
	font-size: 23px
}
}

.index-page .start-now div p {
font-size: 12px
}

@media(min-width:1023px) {
.index-page .start-now div p {
	font-size: 13px
}
}

@media(min-width:1280px) {
.index-page .start-now div p {
	font-size: 14px
}
}

@media(min-width:1600px) {
.index-page .start-now div p {
	font-size: 15px
}
}

.index-page .start-now svg {
	height: 60px;
	width: auto;
}

.index-page .trusted-by h3 {
font-size: 12px;
font-weight: 300;
text-align: center
}

@media(min-width:1023px) {
.index-page .trusted-by h3 {
	font-size: 13px
}
}

@media(min-width:1280px) {
.index-page .trusted-by h3 {
	font-size: 14px
}
}

@media(min-width:1600px) {
.index-page .trusted-by h3 {
	font-size: 15px
}
}

.index-page .trusted-by>div {
grid-gap: 30px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
align-items: center;
padding: 0 30px
}

@media(min-width:1023px) {
.index-page .trusted-by>div {
	grid-gap: 10vw;
	padding: 0 30vw
}
}

.index-page .trusted-by>div img {
align-self: center;
height: auto;
width: 100%
}

body,
html {
font-family: Poppins, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.2;
scroll-behavior: smooth
}

@media(min-width:1023px) {

body,
html {
	font-size: 17px
}
}

@media(min-width:1280px) {

body,
html {
	font-size: 19px
}
}

@media(min-width:1600px) {

body,
html {
	font-size: 20px
}
}

section {
padding: 15px
}

@media(min-width:767px) {
section {
	padding: 30px
}
}

section.short {
padding: 7.5px 15px
}

@media(min-width:767px) {
section.short {
	padding: 7.5px 30px
}
}

h1,
h2,
h3,
h4,
h5 {
font-weight: 700;
margin: 0 0 15px
}

a {
color: #054959;
text-decoration: none
}

a:hover {
text-decoration: underline
}

a.button,
button {
background-color: #f2b707;
border: 0;
color: #054959;
display: inline-block;
padding: 7.5px 15px
}

a.button:hover,
button:hover {
text-decoration: none
}

@media(hover:hover) {

a.button:hover,
button:hover {
	background-color: #0488a6;
	color: #fff
}
}

.search {
margin: 20px 60px;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
background-color: #EFEFEF;
border-radius: 50px;
}
.search .search-form {
display: flex;
gap: 10px;
align-items: center;
}
.search .search-form input {
flex: 1;
padding: 10px 20px;
border: 0 none;
border-radius: 20px;
}
.search .search-form button {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
width: 60px;
border-radius: 20px;
}
.search .search-results .search-results-content {
margin: 30px 0 0;
}
.search .search-results img {
width: 80px;
height: 80px;
border-radius: 50%;
}
.search .searchresults-player {
display: flex;
align-items: center;
gap: 20px;
height: 90px !important;
}
.search .mbc-gamebox-awayteam {
display: flex;
align-items: center;
gap: 10px;
}