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


body{
	font-family: 'Poppins', sans-serif;
	margin: 0;
}

/*Section1*/


.section1 .container{
	 padding: 50px 100px;
}
.show{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	background-color: #161616;
	border-radius: 20px;
}

.show-element{
	padding: 45px;
	margin-left: 40px;

}

.show-heading h1{
	color: #ffffff;
	font-weight: bold;
	font-size: 50px;
	margin: 30px 0px 0px 0px;
}

.show-details p{
	color: #ffffff;

}
.show-element{
	margin: 25px 0 100px 0;
}

.watch{
	margin-top: 35px;

}
.watch a{
	text-decoration: none;
	color: #ffffff;
	background-color: #DD0000;
	border-radius: 5px;
	padding: 15px 20px 15px 20px;
}

.watch:hover{
	transform: translateY(40px);
	transition: 0.5s;
}

.watch a:hover{
    /*transform: translateY(40px);*/
    background-color: #161616;
    color: #FFFFFF;
    border: 2px solid #ffffff;
    transition: 0.5s;
}


.show-img{
	margin-top: 25px;
}
.show-img img{
	height: 100%;
	margin-right: 20px;
}


/*Section2*/

.section2 .container{
	 padding: 60px 100px;
}

.blog{
	display: flex;


}

#sidebar1{
	display: none;
}

#sidebar{
	background-color: #161616;
	width: 50%;
	height: 40%;
	border-radius: 10px;

}

.sidebar-btn{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 15px;
}

.sidebar-btn a{
	text-decoration: none;
	background-color: #ffffff;
	border-radius: 10px;
	padding:20px 25px;
	width: 70%;
	text-align: center;
	margin: 15px;
	color: #161616;
}

.sidebar-btn a:hover{
	background-color: #161616;
	color: #ffffff;
	border: 2px solid #FFFFFF;
	transition: 0.5s;
}

.current{
	background-color: #DD0000 !important;
	color: #ffffff !important;
}

.blog-details{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0 10px;
	
}

.blog-elements:hover {
    transform: translateY(-20px);
    transition: 0.5s;
}
.blog-elements{
	margin: 0 10px 20px 10px;
	border: 1px solid #E8E8E8;
	border-radius: 10px;
	background-color: lightgray;
}
.blog-elements img{
	width: 100%;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.blog-elements-details{
	margin: 15px 15px;

}
.blog-elements-details a{
	text-decoration: none;
	border-radius: 5px;
	color: #FFFFFF;
	background-color: #161616;
	padding: 5px 10px;

}

.blog-elements-details p{
	font-weight: bold;
}

.blog-accessories span{
	margin: 15px;

}

.view{
	display: none;
}



.match-schedule{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	width: 100%;
}
.match-elements{
	margin: 0 10px 20px 10px;
	border: 1px solid #E8E8E8;
	border-radius: 10px;
	padding: 35px 20px 40px 20px;
	background-color: lightgray;

}
.match-elements:hover{
    transform: translateY(-20px);
    transition: 0.5s;
}


.match-flag{
	display: flex;
	justify-content: center;
}

.match-flag img,.match-flag h5{
	padding: 10px;
}
.match-name{
		display: flex;
	justify-content: center;
	padding: 10px;
}
.match-name h4{
	font-size: 18px;
	margin: 0;

}

.match-time{
	display: flex;
	justify-content: center;

}

.match-time span{
	font-size: 15px;
}

.group-elements{
	margin: 0 10px 20px 10px;
	border: 1px solid #E8E8E8;
	border-radius: 10px;
	padding: 35px 20px 40px 20px;
	background-color: lightgray;

}
.group-elements:hover {
    transform: translateY(-20px);
    transition: 0.5s;
}


.group-title{
	display: flex;
	justify-content: center;
}
.group-details{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 100%;
}
.group-names{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
}

.group-names a{
	text-decoration: none;
	background-color: #161616;
	border-radius: 5px;
	width: 80%;
	padding:5px;
	text-align: center;
	margin: 15px;
	color: #ffffff;
}
.group-names a:hover{
	background-color: #ffffff;
	color: #000000;
	transition: 0.5s;
}
.group-names1{
	display: flex;
	flex-direction: column;
}





/*Footer*/

footer{
	background-color: #161616;
}

footer .container{
	 padding: 60px 180px;
}

.footer-heading{
	display: flex;
	justify-content: center;
	padding: 25px;
}

.footer-heading h3{
	color: #ffffff;
	font-weight: bold;
	font-size: 40px;
}

.footer-elements ul{
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.footer-elements ul li{
	list-style: none;
	padding: 20px;

}

.footer-elements ul li a{
	text-decoration: none;
	color: #ffffff;
}

#footer-ul1,#footer-ul2{
	display: none;
}

.social i{
    background: rgba(218, 208, 208, 0.1);
    width: 32px;
    height: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 8px;
    border-radius: 50%;
}

.social ul{
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.social ul li{
	list-style: none;
}
.social ul li a{
	text-decoration: none;
	padding: 5px;
	color: white;

}







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

	.show-heading h1{
	font-size: 35x;
}

	.show-details p{
		 white-space: nowrap; 
  		width: 250px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.show-img img{
	height: 100%;
	width: 100%;
	margin-right: 40px;
}

	.blog{
	display: flex;
	flex-direction: column;
	padding: 10px;
}
	.blog-details,.match-schedule,.group-details{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin: 0 10px;
}

	.blog-elements-img img{
		width: 100%;
	}
	.blog-elements:nth-child(7),.blog-elements:nth-child(8),.blog-elements:nth-child(9){
		display: none;
	}

	#sidebar{
		display: none;
	}
	#sidebar1{
		display: block;
	}
	#sidebar1 .sidebar-btn{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	/*padding: 15px;*/
}
	#sidebar1 .sidebar-btn a{
		border: 1px solid #E8E8E8;
		background-color: lightgray;
	}

	#sidebar1 .current{
	color: #FFFFFF !important;
    background-color: #161616 !important;
	}

	.view{
		display: block;
		margin: 40px;
		text-align: center;
	}
	.view a{
		text-decoration: none;
		background-color: #DD0000;
		color: #ffffff;
		border-radius: 10px;
		text-align: center;
		padding:20px 25px;
		width: 70%;


	}

	#footer-ul{
	display: none;
}

	#footer-ul1,#footer-ul2{
	display: block;
}

	.footer-elements ul li a{
		font-size: 10px;
	}

	.footer-elements #footer-ul1,.footer-elements #footer-ul2{
	display: flex;
	flex-direction: row;
	justify-content: center;
	}


}


@media only screen and (max-width: 600px) {
	.section1 .container{
	 padding: 50px 20px;
}
	.show{
		width: 100%;
		grid-template-columns: repeat(1, 1fr);
		text-align: center;
	}
	.show-element{
    margin-top: 25px;
    margin-bottom: 0;
}
	.show-heading h1{
	font-size: 25px;
	margin: 30px 0px 0px 0px;
}
	.show-details p{
		 white-space: nowrap; 
  		width: 250px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/*#showp{
		display: none;
	}

	#showp1{
		display: block;
	}*/
	.show-img{
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.show-img img{
	height: 100%;
	width: 80%;
	margin-right: 0;
}

	.section2 .container{
	 padding: 0 20px;
}

	.blog-details{
	grid-template-columns: repeat(1, 1fr);

}

	.blog{
	width: 100%;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	}

	#sidebar{
	width: 100%;
	height: 100%;
	background-color:#ffffff;

}
	.sidebar a{
		font-weight: bold;
	}
	.sidebar-btn a{
		border: 2px solid #E8E8E8;
	}
	.blog-elements:nth-child(7),.blog-elements:nth-child(8),.blog-elements:nth-child(9){
		display: none;
	}

	.match-schedule,.group-details{
	grid-template-columns: repeat(1, 1fr);
}

	footer .container {
    padding: 20px 20px;
}


	#footer-ul{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0;
	}

	.social i{
		margin: 0;
	}

	.social ul li a{
		padding: 2px;
	}

}