Passion-Sport/CSS/style.css

* {
	margin: 0px;
	padding: 0px;
}

/*#################################################*/
footer {
	position: static;
	color: white;
	text-align: right;
	height: 100%;
	padding-right: 5%;
	font-size: 1.5vw;
	background-size: 100%;
	background-color: black;
}

body{
	background-size: 100%;
	background-color: #d6dbdf;
	display: block;
	padding-top: 50px;
}



p{
	text-align: justify;

}


.menu_liste {
	position: fixed;
	display: flex;
	width: 100%;
	top: 0;
	left: 0;
	background-color: #1C1C1C;
	height: 40px;
	width: 100%;
	align-items: center;
	justify-content: space-around;
	box-shadow:8px 8px 10px 0 rgba(255,255,255,0.2);
}

.menu_liste li {
	list-style: none;
	color: #BCBCBC;
}

.menu_liste a{
	text-decoration: none;
	color: #BCBCBC;
}

.menu_liste a:hover {
	color: white;
}

.menu_liste li:hover {
	color: white;
}

.sous-menu {
	display: none;
	position: relative;
	flex-direction: column;
	background-color: #1C1C1C;
	right: 0;
	z-index: -1;
	width: 20%;
}

.sous-menu li {
	text-align: center;
	padding: 10px;
	z-index: 2;
}

#contact:hover .sous-menu{
	display: flex;
	position: absolute;
}
#contact img {
  		width: 100%;
  		position: inherit;
  		display: none;
  		padding: 0;
  }

  #contact li:hover img {
  	display: flex;
  }

  #contact p {
  	text-align: center;
  	font-weight: bold;
  }
  #contact p:hover {
  	color: #BCBCBC;
  }

.menu_liste a:active {
	font-size: 110%;
	text-decoration: underline blink;
}

.menu_liste a.active {
	text-decoration: underline;
}

#liens_block a {
	text-align: center;
}

.menu_button {
	display: none;
}

.reseaux-mobile {
	display: none;
}


::-webkit-scrollbar {
	display: none;
}




/*#############################################*/
/*POUR MOBILE*/
@media only screen and (max-device-width: 480px) {

	body {
		margin-top: 80px;
	}

  .sous-menu {
  	display: none;
  }

	.menu_button {
		background-color: rgba(89, 89, 89, 0.2);
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0px;
		justify-content: center;
		width: 100%;
		margin: 0px;
		height: 14vw;
		z-index: 2;
		}

	.menu_button a {
		font-size: 8vw;
		color: gainsboro;
		padding-left: 7%;
		font-weight: bold;
	}

  .menu_button img{
  	position: absolute;
  	width: 14vw;
  	height: 14vw;
  	top: &px;
  	right: 15px;
  	z-index: 2;
  }

  .reseaux-mobile {
  	display: flex;
  }

  .reseaux-mobile img {
  	width: 50%;
  }

  .reseaux-mobile a {
  	width: 25%;
  }

  .menu_liste {
  	text-align: center;
  	display: flex;
  	flex-direction: column;
  	background-color: rgba(255, 255, 255, 0.2);
  	backdrop-filter: blur(10px);
  	width: 100%;
  	height: 100%;
  	justify-content: center;
  	z-index: 2;
  	left: 100%;
  	transition: all 0.5s ease;
  }

  .menu_liste li {
  	text-align: center;
  	padding: 7%;
  }

  .menu_liste a {
  	color: Black;
  	font-size: 15vw;
  	padding: 0;
  }

  .menu_liste a:active {
  	font-size: 15vw;
  }



	.mobile-menu {
		left: 0;
  }
  #contact {
  	background-color: #1C1C1C;
  	font-size: 10vw;
  	justify-content: center;
  	padding-top: 10px;
  	padding-bottom: 5px;
  	padding-left: 40px;
  	padding-right: 40px;
  	z-index: 2;
  }

  #contact li {
  	width: 300%;
  	background-color: #1C1C1C;
  	font-size: 9vw;
  }

  #contact a {
	list-style: none;
	color: #BCBCBC;
	font-size: 8vw;
  }

  #contact:hover .sous-menu{
  	display: flex;
  	bottom: 9%;
  	left: 18.5%;
  }

  #contact:hover {
  	background-color: rgba(0, 0, 0, 0.3);
  }

  footer {
  	margin-top: 50px;
  }

  #contact img {
  		width: 100%;
  		position: inherit;
  		display: none;
  		padding: 0;
  }

  #contact li:hover img {
  	display: flex;
  }

  .sous-menu li div .coodonnees {
  		position: absolute;
  		display: none;
  		width: 100%;
  		padding: 0;
  		margin: 0;
  		left: 0;
  }

  #contact p {
  	display: none;
  }

}