site-aurore/assets/css/perso.css

/* Sous-menu */

#header nav ul.left {
	position: absolute;
	right: 50%;
	border-radius: 4px 0 0 4px;
}

#header nav ul.right {
	position: absolute;
	left: 50%;
	border-left: 0;
	border-radius: 0 4px 4px 0;
}

#header nav ul.simple {
	display: none;
}

	#header nav ul li {
		display: block;
		position: relative;
		width: intrinsic;
		width: -moz-max-content;
		width: -webkit-max-content;
	}

		#header nav ul li ul {
			display: none;
			z-index: 1000;
			position: absolute;
			width: 100%;
			border-radius: 0 0 4px 4px;
		}

			#header nav ul li ul li {
				border-left: 0;
				border-top: solid 1px #ffffff;
				width: 100%;
			}

			#header nav ul li ul li:first-child {
				border-top: 0;
			}

		#header nav ul li:hover ul {
			display: block;
		}

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

	#header nav ul {
		max-width: none;
		width: -moz-max-content;
		width: -webkit-max-content;
		width: -ms-max-content;
		width: max-content;
	}

		#header nav ul li {
			width: 100%;
		}

}

@media screen and (max-width: 528px) {
	
	#header nav ul.left, #header nav ul.right {
		display: none;
	}

	#header nav ul.simple {
		display: block;
	}

}




/* Couleur non transparentes */

#header nav ul {
	background-color: rgba(27, 31, 34, 0.85);
}

#header .content {
	background-color: rgba(27, 31, 34, 0.85);
}




/* Soutien */

#header .soutien {
	background-color: rgba(27, 31, 34, 0.85);
	height: 100%;
	border-top: solid 1px #ffffff;
	border-bottom: solid 1px #ffffff;
	margin-top: calc(2.75rem + 3.5rem);
}

	#header .soutien .left, #header .soutien .right {
		margin: 0 2rem;
	}

	#header .soutien span {
		vertical-align: middle;
	}

	#header .soutien img {
		height: 130px;
		vertical-align: middle;
		padding: 10px;
	}

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

	#header .soutien {
		margin-top: calc(2.75rem + 2rem);
	}

		#header .soutien img {
			height: 100px;
		}

}

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

	#header .soutien {
		margin-top: calc(2*3rem + 2rem);
	}

		#header .soutien .left, #header .soutien .right {
			float: none;
		}
	
}

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

	#header .soutien {
		margin-top: calc(2rem);
	}

		#header .soutien img {
			height: 70px;
		}

}

.left {
	float: left;
}

.right {
	float: right;
}