/* Existing CSS rules */
body {
	margin: 0;
	padding: 0;
}

.header {
  display: flex;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 50vh; /* Adjust the height as needed */
	margin: 0;
	padding-bottom: 0px;	
}

h2 {
	font-family: 'Bebas Neue', sans-serif;
}

h3 {
	font-family: 'Montserrat', sans-serif;
}

p {
	font-family: 'Montserrat', sans-serif;
}

h1{
	text-transform:uppercase;
}

table {
	font-family: 'Montserrat', sans-serif;	
}

button {
	font-family: 'Montserrat', sans-serif;
}

.menu {
	font-family: 'Montserrat', sans-serif;
}

label, .filter-select {
	font-family: 'Montserrat', sans-serif;	
}

@media screen and (min-width: 1024px) {
	.header {
  height: 90vh; /* Adjust the height as needed */
}}

@media screen and (orientation: landscape) {
	.header {
  height: 90vh; /* Adjust the height as needed */
}}

.image-container {
  flex: 1;
  position: relative;
}

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


.background img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  max-width: 200%;
  height: 100%;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

h1{
	text-transform:uppercase;
	font-family: 'Bebas Neue', sans-serif;
	color: black;
	font-size: 5em;
	text-align: center;
	padding-bottom: 0px;
	padding-top: 0px;
	height: 0px;
}



button {
	border: 2px solid white;
	background-color: transparent;
	color: white;
	font-size: 0.8em;
	padding-bottom: 6px;
	padding-top: 6px;
	padding-right: 6px;
	padding-left: 6px;
	height: 30px; 
    width: 80px;
	text-transform:uppercase;
	}

button:hover {
	border: 2px solid white;
	background-color: white;
	color: black;
	font-size: 0.8em;
	height: 30px; 
    width: 80px;
	text-transform:uppercase;
	}

/* Navbar styles */

header {
  background-color: #4365b4; /* Change this to your preferred background color */
  color: white;
  padding: 10px;
	padding-left: 2% ;
	padding-right: 2%;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu {
  list-style-type: none;
  display: flex;
}

.menu-icon {
    display: none;
  }

.menu-close-icon {
  display: none;
}

nav .logo img {
	height: 50px;
}

.menu li {
  margin-right: 20px;
font-size: 1.2em;

}


.menu li a {
  color: #fff;
  text-decoration: none;
	padding-left: 10px;
	padding-right: 10px;
}

.menu li a:hover {
	color: #4365b4;
	  border-radius: 25px;
  background: #fff;
	  padding: 10px;
  }

/* Responsive design for smaller screens */

@media screen and (max-width: 767px) {
 .menu {
  display: none;
  /* Additional styles for sliding effect */
  position: fixed;
  top: 63px; /* Adjust based on your header's height */
  background-color: #4365b4; /* Change this to your preferred background color */
width: 45%;
  transition: transform 0.3s ease-in-out;
  z-index: 1000; /* Ensure menu is above other content */
	 align-items: flex-end;
	 padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
	 right: 0;
}

  .menu-icon {
    display: block;
  }

	nav .logo img {
	height: 40px;
}
	
  .menu-icon img {
    width: auto; /* Adjust this to fit your menu icon */
    height: 20px;
    cursor: pointer;
  }

  .menu.active {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
}
	
	.menu li {
    margin: 5px 0; /* Add margin to create space between items */
    padding: 5px; /* Add padding for internal spacing */
	font-size: 0.9em;

  }
	.menu {
		padding-bottom: 10px;
	}

}


	/* Sample CSS for footer styling */
footer {
	background-color: #5b616a; /* Change the background color as needed */
	padding: 20px;
	text-align: center;
  }
  
  .social-icons {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
  }
  
  .social-icons img {
	width: 30px; /* Adjust the width of the icons as needed */
	margin: 0 6px; /* Adjust the spacing between icons */
  }
  
  .footer-site-logo {
	display: block;
	margin: 0 auto; /* Center the logo horizontally */
	width: 150px; /* Adjust the width of the site logo as needed */
	margin-top: 10px; /* Adjust the space between social icons and site logo */
  }

  footer p {
	color: #fff;
  }

.social-icons img:hover {
opacity: 0.5;
}

/* Chasing Ten CSS */

.chasing-ten-background {
	background-image: url('chasing-ten-4k.jpg');
	position: relative;
	background-size: cover;
	background-position: 50%;
  }

  .chasing-ten-intro {
	width: 40%;
	padding-left: 10%;
	padding-bottom: 10%;
	position: absolute;
	bottom: 0;
  	left:0;
	top: 25%;
  }

  .chasing-ten-intro h2{
	color: #fff;
  }

  .profile{
	font-family: 'Montserrat', sans-serif;
  }

  .profile img {
	max-width: 60%;
	max-height: 200px;
	display: block;
  	margin-left: auto;
  	margin-right: auto;
	border-radius: 20px;
  }

  .profile-name {
padding: 0;
text-decoration: none;
font-size: 1.6em;	
font-weight: 600;
color: #4365b4;
margin: auto;
text-align: center;
align-content: center;
/* text-transform: uppercase; */
display:grid;
  }

  .profile-role {
	padding: 0;
	text-decoration: none;
	font-size: 0.8em;	
	font-weight: 600;
	color: #676c75;
	width: 60%;
	margin: 0 auto;
	text-align: center;
	/* text-transform: uppercase; */
	display:grid
	  }


.profile-box table {
width: 80%;
text-align: center;
}

table {
	padding-top: 10px;
	padding-bottom: 10px;
	margin-left: auto;
  margin-right: auto;
	
  }

  /*table, th, td {
	border: 1px solid;
	
  }*/

  .profile-pb {
	margin-bottom: 10px; /* Adjust the margin-bottom value as needed */
	text-decoration: none;
	font-size: 1.6em;
	font-weight: 600;
	width: 60%;
	margin: 0 auto;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	/* text-transform: uppercase; */
	padding-bottom: 5px;
  }



.profile-event {
	font-weight: 500;
	text-align: left;
	font-size: 1em;
	color: #676c75;
	
}

.profile-meet {
	text-align: left;
	font-size: 0.6em;
	color: grey;
}

.countdown {
	background-color: #d5d8e0;
	text-align: center;
	display:grid;
}

.timer {

	text-align: center;
	margin-top: 0px;
	padding: 0;
	padding-top: 15px;
	text-decoration: none;
	font-size: 2em;	
	font-weight: 600;
	color: #4365b4;
	width: 60%;
	margin: 0 auto;
}

.countdown-title {
	text-decoration: none;
	font-size: 1.3em;
	padding: 0;
	text-transform: uppercase;
}

.countdown-message {
	padding: 0;
	text-decoration: none;
	font-size: 1em;	
	font-weight: 300;
	color: #676c75;
}

.countdown-logo {
    max-height: 200px;
/*	width: 30%;*/
	display: block;
  	margin-left: auto;
  	margin-right: auto;	
  }

       /* Media Query for countdown */
@media only screen and (max-width: 600px) {
	.countdown {
		background-color: #d5d8e0;
		text-align: center;
		display:grid;
	}
	
	.timer {
		text-align: center;
		margin-top: 0px;
		padding: 0;
		padding-top: 15px;
		text-decoration: none;
		font-size: 1.2em;	
		font-weight: 600;
		color: #4365b4;
		width: 60%;
		margin: 0 auto;
	}
	
	.countdown-title {
		text-decoration: none;
		font-size: 0.8em;
		padding: 0;
		text-transform: uppercase;
	}
	
	.countdown-message {
		padding: 0;
		text-decoration: none;
		font-size: 1em;	
		font-weight: 300;
		color: #676c75;
	}
	
	.countdown-logo {
	    max-height: 200px;
		/* width: 50%; */
		display: block;
		  margin-left: auto;
		  margin-right: auto;	
	  }
}

  .profile {
	max-width: 60%;
	border: 1px solid #4365b4;
	margin-left: auto;
  	margin-right: auto;
	border-radius: 20px;
	padding-top: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.ten-headings {
	padding-top: 2%;
	padding-bottom: 2%;
  background-color: #d5d8e0;
  margin: 0;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
}

h3 {
	padding-top: 2%;
	padding-bottom: 2%;
	width: 50%;
	margin: 0 auto;
	align-items: center;
	color: #4365b4;
	text-align: center;
	position: relative;
	display: contents;
	font-size: 1.4em;	
}

.ten-headings h1 {
	padding-top: 2%;
	padding-bottom: 2%;
	margin: 0 auto;
	align-items: center;
	color: #4365b4;
	text-align: center;
	position: relative;
	display: contents;
	font-size: 3em;
}

.ten-headings p {
	padding-left: 20%;
	padding-right: 20%;
	padding-top: 8px;
	padding-bottom: 8px;
	margin: 0 auto;
	align-items: center;
	text-align: center;
	position: relative;


}

.profile-inside {
	border: 2px solid #4365b4;
	background-color: transparent;
	color: #4365b4;
	font-size: 0.6em;
	height: 30px; 
	width: fit-content;
	text-transform: uppercase;
	margin: 0 auto;
	align-items: center;
	display: flex;
	margin-bottom: 10px;
	padding: 8px;
	text-decoration: none; /* Add this line to remove underline */
  }
  
  .profile-inside a {
	text-decoration: none; /* Add this line to remove underline */
  }
  
  .profile-inside:hover {
	position: inherit;
	border: 2px solid #4365b4;
	background-color: #4365b4;
	color: #fff;
	font-size: 0.6em;
	height: 30px; 
	width: fit-content;
	text-transform: uppercase;
  }

  
  
  


	/* For teeny screens */
@media screen and (min-width: 279px) and (max-width: 379px)
{

	.chasing-ten-intro{
		width: 40%;
		padding-left: 10%;
		padding-bottom: 10%;
		position: absolute;
		bottom: 0;
		left:0;
		top: 35%;
		
	}

	.chasing-ten-intro h2{
		font-size: 165%;
		text-shadow: 2px 2px 2px black;
		padding-bottom: 0px;
		margin-bottom: 2px;
		color: #fff;
		

	}
	.chasing-ten-intro p {
		color: white;
		font-size: 75%;
		text-shadow: 2px 2px 2px black;
		padding-top: 0px;
		margin-top: 5px;
}

.chasing-ten-intro button {
	border: 1px solid white;
	background-color: transparent;
	color: white;
	font-size: 0.6em;
	padding-bottom: 6px;
	padding-top: 6px;
	padding-right: 6px;
	padding-left: 6px;
	height: 30px; 
	width: 60%;
	text-transform:uppercase;
	}

	.chasing-ten-intro button:hover {
	border: 2px solid white;
	background-color: white;
	color: black;
	font-size: 0.6em;
	padding-bottom: 6px;
	padding-top: 6px;
	padding-right: 6px;
	padding-left: 6px;
	height: 30px; 
	width: 60%;
	text-transform:uppercase;
	}

}

	/* For tiny screens */
@media screen and (min-width: 380px) and (max-width: 500px)
{

	.chasing-ten-intro{
		width: 40%;
		padding-left: 10%;
		padding-bottom: 10%;
		position: absolute;
		bottom: 0;
		left:0;
		top: 24%;
	}

	.chasing-ten-intro h2{
		font-size: 160%;
		text-shadow: 2px 2px 2px black;
		padding-bottom: 0px;
		margin-bottom: 2px;

	}
	.chasing-ten-intro p {
		color: white;
		font-size: 100%;
		text-shadow: 2px 2px 2px black;
		padding-top: 0px;
		margin-top: 5px;
	}
	.chasing-ten-intro button {
		border: 1px solid white;
		font-family: 'Montserrat', sans-serif;
		background-color: transparent;
		color: white;
		font-size: 0.8em;
		padding-bottom: 6px;
		padding-top: 6px;
		padding-right: 6px;
		padding-left: 6px;
		height: 30px; 
		width: 60%;
		text-transform:uppercase;
		}
	
		.chasing-ten-intro button:hover {
		border: 2px solid white;
		background-color: white;
		color: black;
		font-size: 0.8em;
		padding-bottom: 6px;
		padding-top: 6px;
		padding-right: 6px;
		padding-left: 6px;
		height: 30px; 
		width: 60%;
		text-transform:uppercase;
		}
}


/* For small screens */
@media screen and (min-width: 501px) and (max-width: 768px)
{
	.chasing-ten-intro{
		width: 40%;
		padding-left: 10%;
		padding-bottom: 10%;
		position: absolute;
		bottom: 0;
		left:0;
		top: 30%;
	}

	.chasing-ten-intro h2{
		font-size: 210%;
		text-shadow: 2px 2px 2px black;
		padding-bottom: 0px;
		margin-bottom: 2px;

	}
	.chasing-ten-intro p {
		color: white;
		font-size: 100%;
		text-shadow: 2px 2px 2px black;
		padding-top: 0px;
		margin-top: 5px;
	}
	.chasing-ten-intro button {
		font-family: 'Montserrat', sans-serif;
		border: 1px solid white;
		background-color: transparent;
		color: white;
		font-size: 80%;
		padding-bottom: 6px;
		padding-top: 6px;
		padding-right: 6px;
		padding-left: 6px;
		height: 30px; 
		width: 40%;
		text-transform:uppercase;
		}
	
		.chasing-ten-intro button:hover {
		border: 2px solid white;
		background-color: white;
		color: black;
		padding-bottom: 6px;
		padding-top: 6px;
		padding-right: 6px;
		padding-left: 6px;
		height: 30px; 
		width: 40%;
		text-transform:uppercase;
		}
}


/* For medium screens */
@media screen and (min-width: 769px) and (max-width: 1023px) {
    
		.chasing-ten-intro{
			width: 40%;
			padding-left: 10%;
			padding-bottom: 10%;
			position: absolute;
			bottom: 0;
			left:0;
			top: 37%;
		}
	
		.chasing-ten-intro h2{
			font-size: 240%;
			text-shadow: 2px 2px 2px black;
			padding-bottom: 0px;
			margin-bottom: 2px;
	
		}
		.chasing-ten-intro p {
			color: white;
			font-size: 140%;
			text-shadow: 2px 2px 2px black;
			padding-top: 0px;
			margin-top: 5px;
		}
		.chasing-ten-intro button {
			border: 1px solid white;
			font-family: 'Montserrat', sans-serif;
			background-color: transparent;
			color: white;
			font-size: 0.8em;
			padding-bottom: 6px;
			padding-top: 6px;
			padding-right: 6px;
			padding-left: 6px;
			height: 30px; 
			width: 40%;
			text-transform:uppercase;
			}
		
			.chasing-ten-intro button:hover {
			border: 2px solid white;
			background-color: white;
			color: black;
			padding-bottom: 6px;
			padding-top: 6px;
			padding-right: 6px;
			padding-left: 6px;
			height: 30px; 
			width: 40%;
			text-transform:uppercase;
			}
}

/* For larger screens */
@media screen and (min-width: 1024px) and (max-width: 1439px) {

	.chasing-ten-intro{
		width: 40%;
		padding-left: 10%;
		padding-bottom: 10%;
		position: absolute;
		bottom: 0;
		left:0;
		top: 50%;
	}

	.chasing-ten-intro h2{
		font-size: 280%;
		text-shadow: 2px 2px 2px black;
		padding-bottom: 0px;
		margin-bottom: 2px;

	}
	.chasing-ten-intro p {
		color: white;
		font-size: 140%;
		text-shadow: 2px 2px 2px black;
		padding-top: 0px;
		margin-top: 5px;
	}
	.chasing-ten-intro button {
		border: 1px solid white;
		font-family: 'Montserrat', sans-serif;
		background-color: transparent;
		color: white;
		font-size: 1em;
		padding-bottom: 6px;
		padding-top: 6px;
		padding-right: 6px;
		padding-left: 6px;
		height: 30px; 
		width: 30%;
		text-transform:uppercase;
		}
	
		.chasing-ten-intro button:hover {
		border: 2px solid white;
		background-color: white;
		color: black;
		padding-bottom: 6px;
		padding-top: 6px;
		padding-right: 6px;
		padding-left: 6px;
		height: 30px; 
		width: 30%;
		text-transform:uppercase;
		}

}

/* For much larger screens */
@media screen and (min-width: 1440px) {

	.chasing-ten-intro{
		width: 40%;
		padding-left: 10%;
		padding-bottom: 10%;
		position: absolute;
		bottom: 0;
		left:0;
		top: 50%;
	}

	.chasing-ten-intro h2{
		font-size: 340%;
		text-shadow: 2px 2px 2px black;
		padding-bottom: 0px;
		margin-bottom: 2px;

	}
	.chasing-ten-intro p {
		color: white;
		font-size: 180%;
		text-shadow: 2px 2px 2px black;
		padding-top: 0px;
		margin-top: 5px;
	}
	.chasing-ten-intro button {
		border: 1px solid white;
		font-family: 'Montserrat', sans-serif;
		background-color: transparent;
		color: white;
		font-size: 1em;
		padding-bottom: 6px;
		padding-top: 6px;
		padding-right: 6px;
		padding-left: 6px;
		height: 30px; 
		width: 30%;
		text-transform:uppercase;
		}
	
		.chasing-ten-intro button:hover {
		border: 2px solid white;
		background-color: white;
		color: black;
		padding-bottom: 6px;
		padding-top: 6px;
		padding-right: 6px;
		padding-left: 6px;
		height: 30px; 
		width: 30%;
		text-transform:uppercase;
		}

}

.profile-name p {
	color:#4365b4;
}
	/* Stats Zone CSS */

.stats-zone-background {
	background-image: url('stats-zone/maks-profile.jpg');
	position: relative;
	background-size: cover;
	background-position: 50%;
  }

  .stats-central {
	padding-top: 10px;
	padding-bottom: 10px;
	margin: auto;
  }

  .stats-central h3 {
display: block;
  }

   /* Stats Zone Table */


  .filter-select {
	width: 100px;
	padding: 10px;
	font-size: 15px;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-bottom: 10px;
	margin-left: 10px;
  }
  

.filter-container {
	margin-top: 20px;
	margin-bottom: 10px;
}

.filter-container label {
	font-size: 15px;
	font-size: 15px;
	font-weight: bold;
	color: #333;
	margin-bottom: 20px;
	margin-left: 5%;
	display: inline-block; /* Display label inline */
}

.stats-zone-table{
	padding-top: 0px;
	padding-bottom: 50px;
	overflow-x: auto;
	text-align: left;
	
}
.stats-zone-table table {
	width: 90%;
	border-collapse: collapse;
	margin-left: 5%;
	border: none;
  }
  
  .stats-zone-table caption {
	background-color: black;
	color: white;
	padding: 10px;
	font-weight: bold;
	font-size: 1em;
	text-align: left;
	border: none;
	
  }
  
  .stats-zone-table th {
	background-color: #4365b4;
	color: white;
	padding: 10px;
  }
  
  .stats-zone-table tr:nth-child(even) {
	background-color: #f2f2f2;
	
  }
  
  .stats-zone-table td, th {
	border: 1px solid #dddddd;
	padding: 8px;
	border: none;
  }

  .stats-zone-table .country-flag {
	max-width: 25px; /* Adjust the maximum width as needed */
	height: auto;
	vertical-align: middle;
  }
  
 /* Media Query for smaller screens */
@media only screen and (max-width: 600px) {
	
	th, td {
	  font-size: 14px;
	}
	caption {
	  font-size: 1em;
	}
  }



  .video-container {
    position: relative;
    width: 100%; /* Default width */
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    margin: 0 auto; /* Center the container */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Default width */
    height: 100%;
}

/* Media query for medium-sized screens */
@media screen and (min-width: 768px) {
    .video-container {
        width: 50%; /* Adjusted width for medium-sized screens */
        padding-bottom: 28.125%; /* Adjusted aspect ratio for medium-sized screens */
    }
}