/*------------------------ NAVIGATION --------------------- */
*{
	box-sizing: border-box;
}

a{
	text-decoration: none;
}

#NAVIGATION{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.Logo{
	margin-right: 50px;
}

#LogoMmiNav{
	width: 10%;
}

#LogoMmiNav:hover{
	cursor: pointer;
}

#LogoMmiNav{
	display: none;
}

#LogoMmiNavHamburger{
	display: none;
}

nav{
	z-index: 10;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	padding: 10px 100px;
	box-sizing: border-box;
	transition: .3s;
}

nav.black{
	background: rgba(0, 0, 0, 0.65); /* rgba(89, 25, 75, 0.8); */
	height: 100px;
	padding: 10px 100px;
}

nav .Logo{
	padding: 22px 20px;
	transition: .3s;
}

nav.black .Logo{
	color: #fff;
}

nav ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

nav ul li{
	list-style: none;
}

nav ul li a{
	font-family: 'Oswald', sans-serif;
	line-height: 80px;
	color: #fff;
	font-size: 1.5rem;
	font-weight: bold;
	border-style: none;
	padding: 12px 30px;
	text-decoration: none;
	text-transform: uppercase;
	transition: .3s;
}

nav a:hover{
	color: #59194b;
}

nav.black ul li{
	color: #fff;
}

nav ul li a:focus{
	outline: none;
	color: #59194b;
}

.toggle{
	width: 100%;
	padding: 10px 20px;
	background: rgba(0, 0, 0, 0.8);
	text-align: right;
	box-sizing: border-box;
	color: #fff;
	font-size: 60px;
	display: none;
}

.v-header{
	height: 100vh;
	display: flex;
	align-items: center;
	color: #fff;
}

.container{
	max-width: 960px;
	padding-left: 1rem;
	padding-right: 1rem;
	margin: auto;
	text-align: center;
}

.fullscreen-video-wrap{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.fullscreen-video-wrap video{
		min-width: 100%;
		min-height: 100%;
}

.header-overlay{
	height: 100vh;
	width: 100vw;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(34, 33, 33, 0.65);
	z-index: 1;
	opacity: 0.85;
}

.header-content{
	z-index: 2;
}

.LogoMmiAccueil{
	width: 70%;
}

@media(max-width: 960px) {
		nav.black{
		background: none !important;

		}
		#LogoMmiNav{
			display: none !important;
		}

		#LogoMmiNavHamburger{
			display: block;
			position: absolute;
		}

		#LogoMmiNavHamburger:hover{
			cursor: pointer;
		}

		#LogoMmiNavHamburger{
			width: 12%;
		}
		.container{
			padding-left: 3rem;
			padding-right: 3rem;
		}
		.toggle{
			display: block;
		}
		.active{
			display: block;
		}
		nav ul{
			width: 100%;

		}
		nav ul {
	    list-style: none;
	    margin: 0;
	    padding: 0;
	    display: none;
		}
		ul li{
			text-align: center;
			display: block;
		}
		li{
			background: rgba(0, 0, 0, 0.5);
		}
		li:hover{
			background: rgba(0, 0, 0, 0.7);
		}
		#NAVIGATION{
			padding: 0;
		}

		#NAVIGATION{
			display: block;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: center;
			align-content: center;
		}
}

@media screen and (min-width: 720px) and (max-width: 870px) {
	#LogoMmiNavHamburger{
		width: 13%;
	}
	.toggle{
		font-size: 55px;
	}
}

@media screen and (min-width: 600px) and (max-width: 720px) {
	#LogoMmiNavHamburger{
		width: 15%;
	}
	.toggle{
		font-size: 50px;
	}
}

@media screen and (min-width: 540px) and (max-width: 600px) {
	#LogoMmiNavHamburger{
		width: 15%;
	}
	.toggle{
		font-size: 45px;
	}
}

@media screen and (min-width: 440px) and (max-width: 540px) {
	#LogoMmiNavHamburger{
		width: 16%;
	}
	.toggle{
		font-size: 40px;
	}
}

@media screen and (min-width: 340px) and (max-width: 440px) {
	#LogoMmiNavHamburger{
		width: 17%;
	}
	.toggle{
		font-size: 35px;
	}
}

@media(max-width: 340px) {
	#LogoMmiNavHamburger{
		width: 25%;
	}
	.toggle{
		font-size: 30px;
	}
}

/*------------------------ Fin NAVIGATION --------------------- */