.menu
{
	position: fixed;
	-webkit-transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
	transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
	-webkit-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
	font-size: 1.5em;
	background-color: rgba(255, 255, 255, .8);
	line-height: 11mm;
	z-index: 9;
	font-family: DINNextLTPro;
	font-weight: 300;
	contain: layout;
}

@media (max-width:1023px)
{
	.menu
	{
		font-size:1.7em;
	}
}

@media (max-width:799px)
{
	.menu
	{
		font-size:2em;
	}
}

@media (max-width:639px)
{
	.menu
	{
		font-size:2.5em;
	}
}

.menu.menutop
{
	top:0;
	-webkit-transform:translateY(-100%);
	-ms-transform:translateY(-100%);
	transform:translateY(-100%);
}

.menu.menubottom
{
	bottom:0;
	-webkit-transform:translateY(100%);
	-ms-transform:translateY(100%);
	transform:translateY(100%);
}

.menu.menuleft
{
	left:0;
}

.menu.menuright
{
	right:0;
}

.menu.selected
{
	box-shadow:-2px 2px 10px rgba(136, 136, 136, .8);
	-webkit-transform:translateY(0);
	-ms-transform:translateY(0);
	transform:translateY(0);
	z-index:11;
}

.menu .menulabel
{
	background-color:black;
	color:white;
	display:block;
	padding:0 .5em;
	cursor:pointer;
	box-shadow:-2px 2px 10px rgba(136, 136, 136, .8);
	max-width:50vmin;
	white-space:nowrap;
}

.menu.menutop .menulabel
{
	margin-bottom:-11mm;
}

.menu.menubottom .menulabel
{
	margin-top:-11mm;
}

.menu .menulabel:hover
{
	box-shadow:-2px 2px 10px #888;
}

.menu.selected .menulabel
{
	max-width:100vw;
}

.menu .menulabel .fa + .label, .menu .sousmenu .fa + .label
{
	padding-left:.5em;
}

.menu .menulabel .label + .fa, .menu .sousmenu .label + .fa
{
	padding-left:.5em;
}

@media (max-width:639px)
{
	.menu:not(.selected) .menulabel .label
	{
		display:none;
	}
}

.menu .sousmenu
{
	margin:0;
	opacity:0;
	min-width:100%;
	max-width:100%;
	width:0;
	-webkit-transform:scale(0);
	transform:scale(0);
	border:none;
	text-align:left;
	padding:0;
	box-sizing:border-box;
	-webkit-transition:transform .5s ease-in-out, -webkit-transform .5s ease-in-out, opacity .5s ease-in-out, width .5s ease-in-out, max-width .5s ease-in-out;
	transition:transform .5s ease-in-out, -webkit-transform .5s ease-in-out, opacity .5s ease-in-out, width .5s ease-in-out, max-width .5s ease-in-out;
}

@media (max-width:639px)
{
	.menu:not(.selected) .sousmenu
	{
		max-width:0;
	}
}

.menu.menuleft .sousmenu
{
	-webkit-transform-origin:left center;
	transform-origin:left center;
}

.menu.menuright .sousmenu
{
	-webkit-transform-origin:right center;
	transform-origin:right center;
}

.menu.selected .sousmenu
{
	width:100%;
	opacity:1;
	-webkit-transform:scale(1);
	transform:scale(1);
}

.menu .sousmenu a
{
	display:block;
	padding:2mm 5mm;
	box-sizing:border-box;
	width:100%;
	background-size:cover;
	white-space:nowrap;
}

.menu .sousmenu a:hover
{
	background-color:#eee;
}

.menu .sousmenu a:active
{
	color:#ce361f;
	background-color:black;
}

.menu.connexion, .menu.connected
{
	z-index:11;
}

body.showvoile .menu.connexion, body.showvoile .menu.connected
{
	display:block;
}

.partages .sousmenu
{
	line-height:5mm;
	padding:5mm;
}

.partages .sousmenu a
{
	display:inline-block;
	padding:0;
	width:11mm;
	height:11mm;
	margin:1mm;
	background-color:#888;
	overflow:hidden;
	cursor:pointer;
	line-height:11mm;
	text-align:center;
	text-decoration:none;
	color:white;
}

.partages .sousmenu a:hover
{
	color:white;
	background-color:#999999;
}

.partages a.facebook
{
	background-color:#3b5998;
}

.partages a.facebook:hover
{
	background-color:#4264aa;
}

.partages a.twitter
{
	background-color:#00acee;
}

.partages a.twitter:hover
{
	background-color:#08bbff;
}

.partages a.linkedin
{
	background-color:#0e76a8;
}

.partages a.linkedin:hover
{
	background-color:#1087c0;
}

.partages a.pinterest
{
	background-color:#cd1d1f;
}

.partages a.pinterest:hover
{
	background-color:#e7383b;
}