@import "https://fonts.googleapis.com/css?family=Titillium+Web:200";
body {
	font-family: 'Titillium Web', Arial, sans-serif;
}
h1 {
	width: 100%;
	float: left;
	margin: 15px 0 0 0;
	text-align: center;
	color: #7AA47C;
	font-weight: normal;
}
.form {
	position: relative;
	width: 400px;
	margin: 40px auto;
	padding-bottom: 20px;
	background-color: #9C9;
	box-shadow: 10px 10px 0 #7AA47C;
}
.form:before, .form:after {
	position: absolute;
	display: block;
	content: '';
	background-color: #7AA47C;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
}
.form:before {
	width: 100%;
	height: 10px;
	top: 100%;
	-webkit-transform: skewX(45deg);
	-moz-transform: skewX(45deg);
	transform: skewX(45deg);
}
.form:after {
	width: 10px;
	height: 100%;
	top: 0;
	left: 100%;
	-webkit-transform: skewY(45deg);
	-moz-transform: skewY(45deg);
	transform: skewY(45deg);
}

.input-cnt {
	position: relative;
	display: inline-block;
	width: 360px;
	margin: 20px;
	background-color: white;
	border-left: 10px solid #7AA47C;
	border-top: 10px solid #7AA47C;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
}
.input-cnt.nomargin {
	margin-top: 0;
}
input[type=text], input[type=password] {
	width: 100%;
	height: 50px;
	border: none;
	outline: none;
	padding: 0;
	border-bottom: 6px solid #F9F9F9;
	border-right: 6px solid #F9F9F9;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	font-family: 'Titillium Web', Arial, sans-serif;
	font-size: 18px;
	padding: 8px 12px 0 12px;
}

/* checkbox */
input[type=checkbox] {
	display: none;
}
 
.remember {
	position: relative;
	width: 20px;
	height: 20px;
	background-color: #93C59B;
	box-shadow: 4px 4px 0 #7AA47C;
	margin-left: 20px;
	left: -4px;
	top: -4px;
	border: 0px solid #7AA47C;
	float: left;
	z-index: 10;
	cursor: pointer;
	-webkit-transition: .2s;
	-moz-transition: .2s;
	-ms-transition: .2s;
	transition: .2s;
}
.remember:before, .remember:after {
	position: absolute;
	display: block;
	content: '';
	background-color: #7AA47C;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transition: .2s;
	-moz-transition: .2s;
	-ms-transition: .2s;
	transition: .2s;
}
.remember:before {
	width: 100%;
	height: 4px;
	top: 100%;
	-webkit-transform: skewX(45deg);
	-moz-transform: skewX(45deg);
	transform: skewX(45deg);
}
.remember:after {
	width: 4px;
	height: 100%;
	top: 0;
	left: 100%;
	-webkit-transform: skewY(45deg);
	-moz-transform: skewY(45deg);
	transform: skewY(45deg);
}

p {
	float: right;
	position: relative;
	top: -15px;
	width: 350px;
	color: #668869;
	font-size: 14px;
}

.remember:hover {
	left: -2px;
	top: -2px;
	box-shadow: 2px 2px 0 #7AA47C;
}
.remember:hover:before { height: 2px; }
.remember:hover:after { width: 2px; }

input[type=checkbox]:checked ~ label .remember {
    left: 0;
	top: 0;
	background-color: #93C59B;
	box-shadow: 0 0 0 #7AA47C;
	border-left: 4px solid #7AA47C;
	border-top: 4px solid #7AA47C;
	width: 16px;
	height: 16px;
}
input[type=checkbox]:checked ~ label .remember:before { height: 0;background-color: #7AA47C; }
input[type=checkbox]:checked ~ label .remember:after { width: 0;background-color: #7AA47C; }

/* enter btn */
.enter {
	position: relative;
	width: 360px;
	margin: 20px;
	margin-bottom: 0;
	padding: 10px 0;
	background-color: #93C59B;
	box-shadow: 10px 10px 0 #7AA47C;
	top: -10px;
	left: -10px;
	color:  #7AA47C;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
	clear: both;
	-webkit-transition: .2s;
	-moz-transition: .2s;
	-ms-transition: .2s;
	transition: .2s;
}
.enter:before, .enter:after {
	position: absolute;
	display: block;
	content: '';
	background-color: #7AA47C;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transition: .2s;
	-moz-transition: .2s;
	-ms-transition: .2s;
	transition: .2s;
}
.enter:before {
	width: 100%;
	height: 10px;
	top: 100%;
	-webkit-transform: skewX(45deg);
	-moz-transform: skewX(45deg);
	transform: skewX(45deg);
}
.enter:after {
	width: 10px;
	height: 100%;
	top: 0;
	left: 100%;
	-webkit-transform: skewY(45deg);
	-moz-transform: skewY(45deg);
	transform: skewY(45deg);
}
.enter:hover {
	top: -6px;
	left: -6px;
	box-shadow: 6px 6px 0 #7AA47C;
}
.enter:hover:before { height: 6px; }
.enter:hover:after { width: 6px; }
.enter:active {
	top: 0px;
	left: 0px;
	box-shadow: 0px 0px 0 #7AA47C;
}
.enter:active:before { height: 0; }
.enter:active:after { width: 0; }

body{
	background-color: #d7f6e6;
  }
  * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
  }
  
  *:focus {
	outline: 0;
  }
  
  ::selection {
	background-color: #e44646;
	color: #ffffff;
  }
  
  ::-moz-selection {
	background-color: #e44646;
	color: #ffffff;
  }
  
  html {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   
  }
  
  a {
	text-decoration: none;
  }
  
  .menu-flex {
	background-color: rgba(83, 82, 82, 0.5);
	font-family: 'Poiret One', sans-serif;
	left: 0;
	position: fixed;
	top: 0;
	user-select: none;
	width: 100%;
	z-index: 200;
  }
  
  .menu {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: auto;
	max-width: 1000px;
	width: 90%;
   
	
  }
  
  .logo-menu {
	display: inline-block;
	margin-right: 1em;
   
  }
  
  .title-logo-menu {
	color: #ffffff;
	font: normal 2em 'Dancing Script', sans-serif;
	text-shadow: 1px 1px 5px #000000;
	transition: 0.3s ease all;
  }
  
  .title-logo-menu:hover,
  .title-logo-menu:focus,
  .title-logo-menu:active {
	-webkit-background-clip: text;
	background-image: linear-gradient(
						#ffffff 50%,
						#ffffff 100%
					  );
	text-shadow: 0 0 15px #ffffff;
  }
  
  .btn-menu {
	color: #ffffff;
	display: none;
	font-size: 1.5em;
	text-shadow: 1px 1px 5px #000000;
  }
  
  .links {
	display: inline-block;
	font-weight: bold;
	text-align: right;
  }
  
  .links-menu:before {
	content: '';
	height: 0;
	left: 100%;
	position: absolute;
	top: 0;
	transition-duration: 0.3s;
	width: 100%;
	z-index: -1;
  }
  
  .links-menu {
	color: #ffffff;
	display: inline-block;
	font-size: 1em;
	padding: 1.5em;
	position: relative;
	text-align: center;
	text-shadow: 1px 1px 5px #000000;
  }
  
  .links-menu:hover:before,
  .links-menu:focus:before,
  .links-menu:active:before {
	background-color: rgba(84, 35, 228, 0.7);
	height: 100%;
	left: 0;  
  }
  
  .links-menu-active:before {
	content: none;
  }
  
  .links-menu-active {
	  
  }
  
  .icons-menu {
	margin-right: 5px;
  }
  
  .first-section:before {
	background-attachment: fixed;
   
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
  }
  
  .first-section {
	background: url('') rgb(250, 240, 240) center center / cover no-repeat fixed;
	height: 100vh;
	width: 100%;
	z-index: 100;
   
  }
  
  .ctn-title {
	color: #ffffff;
	font: bold 2em 'Dancing Script', sans-serif;
	left: 50%;
	letter-spacing: 5px;
	position: absolute;
	text-shadow: 1px 1px 10px #000000;
	top: 50%;
	transform: translate(-50%);
  }
  
  @media screen and (max-width: 900px) {
	.menu {
	  flex-direction: column; 
	}
	
	.logo-menu {
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  padding: 1em 0;
	  width: 100%;
	}
	
	.title-logo-menu {
	  font-size: 1.5em;
	}
	
	.btn-menu {
	  display: block;
	}
	
	.links {
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  justify-content: space-around;
	  width: 100%;
	}
	
	.links-menu {
	  
	}
  }
  
  @media screen and (max-width: 700px) {
	.ctn-title {
	  font-size: 25px;
	  text-align: center;
	} 
  }
  
  /* Home*/
  
  .liveImg1{
   
  border-radius: 20px;
   height: 100px;
  }
  .liveImg2{
	height: 200px;
	width: 168px;
  }
  
  .liveImageContainer{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	opacity: 0.9;
	margin-top: 50px;
	
  }
  
  .mainContainer{
	border: 1px solid gray;
	
	text-align: center;
	margin-bottom: 10px;
	margin-right: 1px;
	background-color: #ece6e6;
	border-radius: 5px;
	width: 168px;
	height: 240px;
	
	
  }
   
  
  
  
  .liveImageContainer:hover,
  .liveImageContainer:focus,
  .liveImageContainer:active{
	
	opacity: 1;
  }
  
  
  
  
  
  .mainWord{
   
	padding: 8px;
	font-size: 17px; 
	width: 168px;
	height: 100px;
	}
	/*
	.mainContainer:hover .mainWord {
	  animation: marquee 2s linear infinite;  Apply marquee animation on hover 
	
	
	@keyframes marquee {
	  0% {
		transform: translateX(0%); /* Start offscreen to the right 
	  }
	  50% {
		transform: translateX(50%); /* Start offscreen to the right 
	  }
	  100% {
		transform: translateX(-30%); /* Move to offscreen to the left 
	  }
	} 
	*/
	/* channel and Movie*/
  
	.movieColor{
	  color: red;
	  padding: 10px;
	  
	}
	
	.movieImg{
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	 padding: 10px;
	  margin-top: 5px;
  }
	
	.movieImg1{
	  text-align: center;
	  border: 1px solid rgb(235, 230, 223);
	  background-color: white;
	}
	
  
	.imgLocal{
	  width: 116px;
	  height: 100px;
	  border-radius: 5px;
  }
  
  .channelContainer1{
	  display: flex;
	  flex-wrap:wrap;
	  justify-content: center;
	  margin-top: 50px;
	  
	  }
  h6{
	  width: 116px;
	  display: flex;
	  flex-direction: row;
	  justify-content: center;
	  
  }
  .videoContainer2 {
	  opacity: 0.8;
	  margin: 5px;
	  margin-right: 0px;
	  margin-left: 0px;
	  border: 2px solid rgb(21, 20, 20);
	  border-radius: 5px;
	 
	 }
	 .videoContainer2:active,
	 .videoContainer2:focus,
	.videoContainer2:hover {
	 color: red;
	 opacity: 0.9;
	 background-color: transparent;
	 background-repeat: no-repeat; 
	 cursor: pointer; 
	 overflow: hidden; 
	 outline: none;
	 border: 3px solid gold;
	 opacity: 1.2;
	}
  
	 .videoContainer2 h6 {
	  text-align: center;
	  font-size: 15px;
	  margin-top: 5px;
	  color: rgb(11, 22, 230);
	 
  }
  
  .h1test{
	color: red;
  }  
	
  a{
	text-decoration: none;
  }
  
  /* nextBtn */
  
  .nextBtnClass{
	display: none;
	font-size: 20px;
	width: 40%;
	border: 1px solid gray;
	border-radius: 5px 30px;
	text-align: center;
  }
  
  .previousBtnClass{
	display: none;
	font-size: 20px;
	width: 40%;
	border: 1px solid gray;
	border-radius: 5px 30px;
	text-align: center;
  }
  
  .nextContainer{
	display: flex;
	flex-direction: row;
	justify-content: center;
	text-align: center;
	position: relative;
	top: 100px;
  }
  
  .first-section1{
	background: url('') rgb(237, 229, 229) center center / cover no-repeat fixed;
	
	
  }
  
  .liveImageContainer1{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	opacity: 0.9;
	margin-top: 60px;
   
   
  }
  .mainContainer1{
	border: 1px solid grey;
	height: 180px;
	width: 160px;
	margin: 5px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	border-radius: 5px;
	background-color: rgb(243, 233, 233);  
  }
  
  .liveImg1{
	width: 160px;
	height: 120px;
   
	border-radius: 0%;
  }
  
  /* animationTitle*/
  
  .animationTitle{
	position: absolute;
	top: 0px;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	
  }
  .category1{
	max-width: 160px;        /* Set the maximum width to 120px */
	text-align: center;     /* Center the text horizontally */
	white-space: normal;
	 /* Allow text to wrap to the next line */
		 /* Hide any text that overflows the container */
   
	
  }
  .h1 {
	top: 40%; left: 10%;
	display: inline-block;
	
	padding: 10px 15px;
	
	color: hsla(0,0%,100%,.7);
	text-transform: uppercase;
	text-shadow: 0 0 8px hsla(0,0%,100%,.6);
	font-family: 'Signika Negative', sans-serif;
	font-size: 1.8em;
	font-weight: normal;
	
	background-image:
	  radial-gradient(
		40% 30%,
		white,
		transparent
		),
	  radial-gradient(
		100% 8%,
		hsla(0,0%,100%,.6),
		transparent
		),
	 linear-gradient(
		transparent,
		hsla(0,0%,0%,.5)
		);
	background-repeat: no-repeat;
	
	opacity: 0;
	
	animation: enter 3s ease-in;
	animation-fill-mode: forwards;
	}
	.h1:before, .h1:after {
	  position: absolute;
	  background-repeat: no-repeat;
	  pointer-events: none;
	  }
	.h1:after {
	  height: 50px;
	  width: 100%;
	  top: 50%; left: 0;
	  
	  background-image:
	  radial-gradient(
		hsla(0,0%,100%,.6),
		transparent 70%
		  );
	  }
	.h1:before {
	  height: 100%;
	  width: 200%;
	  top: 10%; left: -50%;
	  
	  background-image:
	  radial-gradient(
		circle,
		hsla(0,0%,100%,.6),
		hsla(0,0%,100%,.7) 35%,
		transparent 55%
		),
	  radial-gradient(
		circle,
		hsla(0,0%,100%,.6),
		hsla(0,0%,100%,.7) 40%,
		transparent 70%
		),
	  radial-gradient(
		circle,
		hsla(0,0%,100%,.6),
		hsla(0,0%,100%,.7) 35%,
		transparent 65%
		),
	  radial-gradient(
		circle,
		hsla(0,0%,100%,.6),
		hsla(0,0%,100%,.7) 5%,
		transparent 35%
		),
	  radial-gradient(
		circle,
		hsla(0,0%,100%,.6),
		hsla(0,0%,100%,.7) 15%,
		transparent 35%
		  );
	  background-size: 
		40px 40px,
		45px 45px,
		65px 65px,
		40px 40px,
		40px 40px;
	  background-position: 
		50% 50%,
		20% 50%,
		60% 50%,
		80% 50%,
		30% 50%;
	  animation: enter-2 3s;
	  animation-fill-mode: forwards;
	  }
	.h1 > span {
	  font-size: .6em;
	  }
  
  @keyframes enter {
	0% {
	  background-position:
		-500px 0,
		-400px 0,
		0 0;
	  opacity: 0;
	  }
	100% {
	  background-position:
		600px 0,
		800px 0,
		0 0;
	  opacity: 1;
	  }  
	}
  @keyframes enter-2 {
	0% {
	  background-position: 
		50% 50%,
		50% 50%,
		50% 50%,
		50% 50%,
		50% 50%;
	  opacity: 0;
	  }
	50% {
	  opacity: 1;
	  }
	100% {  
	  background-position: 
		40% 50%,
		20% 50%,
		60% 50%,
		80% 50%,
		30% 50%;
	  opacity: 0;
	  }  
	}
  /* animationTitle*/
  
  
  .mainCategory{
	display: none;
	
  }
  
  .textAni{
	display: none;
  }
  
  
  /*lionel Messi */
  
  .imgContainer{
  
   position: relative;
	
	
  }
  .imgContainer img {
	width: 100%; /* Make the image full width */
	height: 400px; /* Maintain the image's aspect ratio */
	opacity: 0.85;
  }
  
  
  
  .whiteDot {
	position: absolute;
	background-color: white;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: flex;
	flex-direction: row;
	justify-content: center;
  }
  
  .dot1 { top: 380px; left: 760px; }
  .dot2 { top: 380px; left: 780px; }
  .dot3 { top: 380px; left: 800px; }
  .dot4 { top: 380px; left: 820px; }
  .dot5 { top: 380px; left: 840px; }
  
   /* Media query for desktop screens */
   @media (min-width: 768px) {
	.imgContainer {
		max-width: 100%; /* Limit the container's width on desktop screens */
		margin: 0 auto; /* Center the container horizontally */
	}
  }
  
  /* Media query for smaller screens (e.g., mobile) */
  @media (max-width: 767px) {
	.imgContainer {
		max-width: 100%; /* Ensure full width on smaller screens */
	}
	.whiteDot {
		display: none; /* Hide the dots on smaller screens if needed */
	}
  }
  
  .textOverlay {
	position: absolute;
	top: 40%;
	left: 30%;
	transform: translate(-50%, -50%);
	font-size: 20px; /* Adjust the font size as needed */
	color: white;
	padding: 10px; /* Adjust the padding to your liking */
	 /* Adjust the font size as needed */
	text-align: center;
  }
  .textOverlay1 {
	position: absolute;
	top: 55%;
	left: 30%;
	transform: translate(-50%, -50%);
   
	color: white;
	padding: 10px; /* Adjust the padding to your liking */
   
	text-align: center;
  }
  
  .textOverlay {
	animation: fadeIn 2s ease-in-out forwards; /* Apply fade-in animation */
  }
  
  .textOverlay1 {
	animation: fadeIn 2s ease-in-out 1s forwards; /* Delayed fade-in animation */
  }
  
  @keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
  }