@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
	--primary: #f50053;
	--secondary: #262263;
	--black: #090f24;
	--dark: #23252d;
	--text: #535767;
	--cloud: #c6ced6;
	--snow: #e8effd;
	--white: #ffffff;
	--shadow-light: 0 8px 32px rgba(0,0,0,.08);
	--shadow-dark: 0 8px 32px rgba(0,0,0,.24);
	--transition: all 0.24s ease-in-out;
}


* {
	box-sizing: border-box;
	}

html,
body {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-size: 16px;
	line-height:1.5;
	font-weight: 400;
	margin: 0;
	padding: 0;
	background: var(--snow);
	color: var(--dark);
	max-width: 100%;
  	max-height: 100%;
	overflow-x: hidden;
	position: relative;
	}
	
	
/* LAYOUT */

section {
	padding:0px 32px;}
	
container {
	padding:144px 64px;
	gap: 64px;
	max-width: 1680px;
	}
content {
	padding:0;
	gap: 64px;
	max-width: 1280px;
	}
section,
container,
content {
	width: 100%;
	margin:0 auto;
	display: flex;
	flex-direction: column;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	}
.boxed {
	max-width: 1440px;
	padding:72px;
	}
.horizontal {
	flex-direction: row;
	flex-wrap: wrap;
	}
.horizontal.wide {
	justify-content: space-between;
	}

.item {
	transition: var(--transition);
	}
.item.horizontal {
	display: flex;
	flex-direction: row;
	gap: 48px;
	}
.two .item,
.three .item,
.four .item,
.five .item {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
	}
.two .item {
	width: calc(50% - 32px);
	}
.three .item {
	width:calc (33.333% - 22px);
	}

.one-two .item:first-child {
	width:33.333%;
	}
.one-two .item:last-child {
	width:66.666%;
	}

.item.scale:hover {
	transform: scale(1.02);
	z-index: 1;
	}
.item.shadow:hover {
	box-shadow: 0 16px 32px rgba(0,0,0,.16);
	}
.footer {
	border-top:8px solid var(--primary);
	}
.footer container {
	padding-top:48px;
	padding-bottom:48px;
	}
.footer container img {
	width:160px;
	height:auto;
	}
.footer container ul {
	margin:24px 0;
	}

	
/* VARIABLES */

.full-width {padding-left:0; padding-right:0; margin-left:0; margin-right:0; max-width:100%; width:100%}
.no-padding {padding:0}
.no-gap {gap:0}
.wrap {flex-wrap:wrap;}
.center {text-align:center; align-items:center !important; margin-left: auto; margin-right:auto;}
.centered {align-items:center; justify-content:center}

.shadow-light {box-shadow: var(--shadow-light);}
.shadow-dark {box-shadow: var(--shadow-dark);}
.sharp {border-radius: 0;}
.rounded {border-radius: 16px;}

.light {filter: brightness(88%);}
.light:hover {filter: brightness(100%); border-radius:4px}

.padding-xl {padding:64px;}
.padding-lg {padding:48px;}
.padding-md {padding:40px;}
.padding-sm {padding:32px;}
.padding-xs {padding:24px;}

.white {color:var(--white) !important}
.snow {color:var(--snow) !important}
.cloud {color:var(--cloud) !important}
.dark {color:var(--dark) !important}
.primary {color:var(--primary) !important}
.secondary {color:var(--secondary) !important}

.bg-white {background-color:var(--white) !important}
.bg-snow {background-color:var(--snow) !important}
.bg-cloud {background-color:var(--cloud) !important}
.bg-dark {background-color:var(--dark) !important}
.bg-primary {background-color:var(--primary) !important}
.bg-secondary {background-color:var(--secondary) !important}
.bg-gradient {background-image: linear-gradient(335deg, var(--primary), var(--secondary));}

/* FONTS */

h1 {
	font-size: 3.5rem;
	line-height: 4rem;
	font-weight:800;
	margin:1.5rem auto;
	letter-spacing: -0.4px;
	color: var(--white);
	text-shadow: 0 4px 16px rgba(0,0,0,0.08);
	width:75%;
	}
h2 {
	font-size: 2.5rem;
	line-height: 3rem;;
	font-weight:800;
	margin:0 0 1rem;
	letter-spacing: -0.2px;
	color:var(--black);
	}
h3 {
	font-size: 1.75rem;
	line-height: 2.25rem;
	font-weight: 600;
	margin:0 0 0.75rem;
	color:var(--dark);
	}
h4 {
	font-size: 1.375rem;
	line-height: 1.75rem;
	font-weight: 800;
	margin:0 0 0.75rem;
	color:var(--dark);
	}
h1 span,
h2 span,
h3 span,
h4 span {
	font-weight:600;
	color: var(--white);
	background-color: var(--secondary);
	padding:0 6px
	}
	
.intro {
	font-size: 0.875rem;
	line-height: 1.125rem;
	font-weight:400;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin:0 0 0.5rem;
	color:var(--text);
	}
.subtitle {
	font-size: 1.375rem;
	line-height: 1.875rem;
	font-weight:400;
	margin:1.5rem 0 1rem 0;
	color:var(--dark);
	}
p {
	font-size: 1.0625rem;
	line-height: 1.625rem;
	color: var(--text);
	margin:0 0 0.5rem;
	}
	
/* LINKS */

a {
	text-decoration:none;
	color: var(--secondary);
	transition: var(--transition);
	}
a:hover {
	color: var(--primary);
	}
.opposite a {
	color: var(--snow);
	}
.opposite a:hover {
	color: var(--white);
	}


ul {
	padding:0;
	margin:8px 0;
	list-style: none;
	}
ul li {
	padding: 0;
	margin: 0 0 12px 24px;
	font-size:1rem;
	line-height:1.5rem;
	position:relative;
	}
ul li:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    top: 6px;
    left: -24px;
	background-image: url('data:image/svg+xml,<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m19.41 10.59-10-10c-.78-.78-2.05-.78-2.83 0-.78.78-.78 2.05 0 2.83l8.59 8.59-8.59 8.59a2.004 2.004 0 0 0 1.41 3.42c.51 0 1.02-.2 1.41-.59l10-10c.78-.78.78-2.05 0-2.83Z" style="fill:%235446ff"/></svg>');
	background-repeat: no-repeat;
	transition: var(--transition);
	}
ul.opposite li {
	display:inline;
	margin: 0 12px;
	}
ul.opposite li:before {
	display:none
	}
	
/* GRAPHICS */

img {
	width:100%;
	height:auto;
	display: inline;
	}
.icon {
	width:48px;
	min-width:48px;
	height:auto;
	fill:var(--primary);
	}
.chart {
	width:100%;
	max-width:560px;
	height: auto;
	margin-bottom:8px;
	}
.platform {
	height:40px;
	width:auto;
	margin-bottom:8px;
	}
.partner {
	width:auto;
	height:40px;
	margin:16px 16px;
	}
.player img {
	width:96px;
	height:auto;
	border-radius:48px;
	float: left;
    margin: 0 16px 16px 0;
}
	
	
/* NAVIGATION */

section.navigation {
	width:100%;
	position:sticky;
	top:0;
	left:0;
	z-index: 99;
	background-color: var(--white);
	box-shadow: var(--shadow-light);
	}
section.navigation container {
	padding-top: 24px;
	padding-bottom: 24px;
	}
navi {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	}
navi .logo a {
	opacity:1;
	}
navi .logo a img {
	height:48px;
	width:auto;
	display:block;
	fill: var(--primary);
	}
navi #menu ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	}
navi #menu ul li {
	display: inline-block;
	margin: 0;
	padding:8px 12px;
	}
navi #menu ul li:before {
	display: none;
	}
navi #menu ul li a {
	color: var(--text);
	font-size: 1rem;
	font-weight:500;
	}
navi #menu ul li a.active {
	color: var(--dark);
	font-weight:700;
	}
navi #menu ul li a:hover {
	color: var(--black);
	}
.hamburger,
.close {
	width:32px;
	height:32px;
	padding:6px;
	display:none;
	cursor: pointer;
	}
.hamburger svg,
.close svg {
	fill:none;
	stroke:var(--text);
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-width:4px
	}
	
/* DRAW */

.draw {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content:space-between;
	align-items: stretch;
	padding:64px 0 0;
	}
.draw.leg {
	justify-content: flex-start;
	gap: 1.3333%;
	}
.round {
	width:24%;
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content:space-around;
	}
.round .header {
	background: var(--primary);
	color:#fff;
	padding:16px;
	border-radius:8px;
	position: absolute;
	top: -64px;
	width: 100%;
	}
.pair {
	padding: 24px;
	background: var(--snow);
	border-radius: 8px;
	margin: 8px 0;
}
.details {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content:space-between;
	align-items:center;
	padding: 0 0 16px 0;
	font-size:0.875rem;
	font-weight:600;
	color:var(--text);
	}
.time,
.place,
.name {
	padding: 0 0 0 24px;
	position: relative;
	}
.time::before,
.place::before {
	content:"";
	position: absolute;
	top:0;
	left:0px;
	height: 18px;
	width: 18px;
	background-size: 18px 18px;
	background-repeat: no-repeat;
	}
.players {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content:space-between;
	}
.players .player:first-child {
	border-bottom: 1px solid var(--cloud);
	}
.player {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content:space-between;
	padding:8px 0;
	font-size:0.9375rem;
	gap:8px;
	}
.player.won {
	font-weight:800;
	}
.name {
	width:80%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}
.name:before {
	content:"";
	position: absolute;
	top:2px;
	left:0px;
	height: 16px;
	width: 16px;
	background-size: 16px 16px;
	background-repeat: no-repeat;
	border-radius: 32px;
	background-color: var(--white);
	}
.name.pol:before {
	background-image: url('assets/flag-pol.png');
	}
.name.sui:before {
	background-image: url('assets/flag-sui.png');
	}
.name.ger:before {
	background-image: url('assets/flag-ger.png');
	}
.name.esp:before {
	background-image: url('assets/flag-esp.png');
	}
.name.nor:before {
	background-image: url('assets/flag-nor.png');
	}
.place::before {
	background-image: url('assets/tennis-court.svg');
	}
.time::before {
	background-image: url('assets/notes-clock.svg');
	}


/* HERO */

.hero container {
	background-color: var(--secondary);
	background-image: url('assets/hero_hp.webp');
	}
.hero container img {
	width:240px;
	height:auto;
	}
.hero_pages container {
	background-color: var(--secondary);
	background-image: url('assets/hero_pages.jpg');
	padding: 80px 24px
	}
	
/* 1280 - - - - - - - - - - - - - - - - - - - - - - */

@media screen and (max-width: 1280px) {
		

	/* LAYOUT */
	
	section {
		}
	container {
		padding:144px 48px;
		}
	content {
		gap: 48px;
		}
	content.boxed {
		padding:64px;
		}
	content.horizontal {
		flex-direction: row;
		}
	content.four {
		flex-wrap: wrap;
		}
	content.four .item {
		width: calc(50% - 24px);
		}
	content.two .item,
	content.three .item,
	content.four .item {
		display: flex;
		gap: 1rem;
		}
	.five .item {
	width:25%;
		}
		
	/* NAVIGATION */

	navi .logo a img {
		height:40px;
		min-height:40px;
		}
		
}

/* 1024 - - - - - - - - - - - - - - - - - - - - - - */

@media screen and (max-width: 1024px) {


	/* LAYOUT */
	
	section {
		}
	container {
		padding:96px 48px;
		}
	content {
		gap:40px;
		padding:0;
		}
	content.boxed {
		padding:48px;
		}
	content.horizontal {
		flex-direction: column;
		}
	content.horizontal.wrap {
		flex-direction: row;
		}
	content.two .item,
	content.three .item,
	content.four .item {
		width:100%;
		}
	content.one-two .item:first-child, 
	content.one-two .item:last-child {
		width:100%;
		}
	content.two .item,
	content.three .item,
	content.four .item {
		align-items: flex-start;
		}
	content .item.icon {
		flex-direction: row;
		gap:16px;
		}
	.five .item {
		width:33.333%;
		}

	/* FONTS */

	h1 {
		font-size: 3rem;
		line-height: 3.5rem;
		margin:1rem auto;
		width:80%;
		}
	h2 {
		font-size: 2.25rem;
		line-height: 2.75rem;
		}

	/* NAVIGATION */
	
	navi .logo a img {
		height:32px;
		min-height:32px;
		}

	/* DRAW */
	
	.draw {
  	  display: flex;
 	   flex-direction: column;
 	   flex-wrap: nowrap;
 	   justify-content:space-between;
 	   align-items: stretch;
 	   padding:0;
		}
	.round {
		width:100%;
		position: relative;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content:space-around;
		margin:0 0 48px 0;
		}
	.round .header {
		color:#fff;
		padding:16px;
		border-radius:8px;
		position: relative;
		top: 0;
		margin: 0 0 16px;
		}
}

/* 820 - - - - - - - - - - - - - - - - - - - - - - */

@media screen and (max-width: 820px) {

	/* LAYOUT */
	
	section {
		padding:0;
		}
	container {
		padding:96px 32px;
		}
	content {
		padding:0;
		}
	content.two .item {
		width:100%;
		}
	content.two .item,
	content.three .item,
	content.four .item {
		align-items: flex-start;
		}	
	.five .item {
		width:50%;
		}

	/* FONTS */

	h1 {
		font-size: 2.75rem;
		line-height: 3.25rem;
		margin:1rem auto;
		width:90%;
		}
	h2 {
		font-size: 1.75rem;
		line-height: 2.25rem;
		}

	/* NAVIGATION */
	
	section#navi {
		padding-top: 420px;
		padding-bottom: 20px;
		}
	navi #menu {
		padding: 20px 48px 20px 16px;
		position:absolute;
		top:0;
		right:-60%;
		transition: all ease 0.3s;
		background-color: var(--white);
		box-shadow: 0 0 32px rgba(0,0,0,.08);
		width:60%;
		height:100vh;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap:6rem;
		align-items: flex-end;
		}
	navi #menu.opened {
		right:0;
		}
	navi #menu ul {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
		width: 100%;
		}
	.hamburger,
	.close {
		display: block;
		}
		
}

/* 480 - - - - - - - - - - - - - - - - - - - - - - */

@media screen and (max-width: 480px) {

	/* LAYOUT */
	
	section {
		padding:0;
		}
	container {
		padding:96px 32px;
		}
	content {
		padding:0;
		}
	content.two .item,
	content.three .item,
	content.four .item {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		align-items: flex-start;
		}	
	.five .item {
		width:100%;
		}

	/* FONTS */
		
	h1 {
		font-size: 2.5rem;
		line-height: 3.0rem;
		margin:1rem auto;
		width:100%;
		}

	/* NAVIGATION */
	
	navi #menu {
		padding: 24px 32px 24px 8px;
		}

	/* HERO */
	
	.hero container {
		background-image: url('assets/hero_hp_mobile.webp');
		}
		
	/* CLIENTS */
		
	.clients  {
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 48px;
		grid-row-gap: 48px;
		}

}