div#banniere
{
	position:fixed;
	background-color:#000000;
	height:130px;
	width:100%;
    z-index:1000;
}

div#menu
{
	font-size:1.45vw;
	color:#FFF;
	margin:20px;
	margin-bottom:10px;
	margin-top:50px;
	float:left;
	display:table;
	font-family:Arial;
	width:calc(100% - 330px);
	text-align:center;
	position:relative;
	background-color:#000;
}

div#menu li
{
	list-style-type:none;
	list-style-position:inside;
	padding:0px;
	display:inline-block;
	float:none;
}

ul.mainul
{
	display:inline-block;
	margin:0px;
	padding:0px;
	height:auto;
}

ul.subul
{
	background-color:#000;
	z-index:4;
	word-spacing:1px;
	letter-spacing:0px;
	display:none;
	margin:0px;
	padding:20px;
	margin:0px;
	text-align:center;
	position:absolute;
	left:0px;
	top:1.7vw;
	width: 100%;
}

ul.subul li.vue
{
	margin:5px;
	width:200px;
	height:100px;
	vertical-align:top;
}

ul.subul li.vue a div
{ 
	font-weight:bold;
	color:#FFF;
	padding:5px;
	font-size:25px;
	text-shadow: 0px 1px 2px #000, 0px -1px 2px #000;
	margin-top:-80px;
}

div#menu li:hover ul
{
	display:inline-block;
}

ul.subul li.vue a:hover div
{
	background-color:#111;
	color:#F9DC6C;
}

li.vue a img
{
	border-radius: 10px;
}

div#menu img.social
{
	 float:right;
	 margin:3px;
	 margin-top:-10px;
}

img.niveau-suivant
{
	display:none;
	float:right;
}

div#menu input
{
    display: none;
}

div#menu label
{
	border:solid 1px #FFF;
	display:none;
	padding:10px;
	border-radius:20px;
	color:#FFF;
	text-align:center;
}

div#menu a
{
	text-decoration:none;
	color:#FFF;
}

img#menu-ico
{
	display:none;
}

input#btnControl
{
	display:none;
}

img#logofice
{
	float:left;
	margin-left:20px;
	margin-top:6px;
	left:0;
	top:0;
	width:200px;
}

div#social
{
	text-align:center;
	position:absolute;
	right:0;
	top:0;
	margin:20px;
}

div#social img
{
	width:30px;
}

input.switcher
{
	display:none;
}

@media only screen and (max-width: 815px)
{
	div#banniere
	{
		height:100px;
	}
	
	div#menu li ul img
	{
		width:100px;
	}

	ul.subul li.vue
	{
		margin:5px;
		width:100px;
		height:50px;
		vertical-align:top;
	}
	
	ul.subul li.vue a div
	{ 
		font-size:13px;
		margin-top:-40px;
	}
	
	div#menu img.etoile
	{
		display:none;
		position:absolute;
	}
	
	img#logofice
	{
		float:right;
		margin-left:0;
		margin-right:100px;
		width:150px;
	}
}

@media only screen and (max-width: 630px)
{
	body
	{
		width:100%;
	}
	
	div#menu li ul img
	{
		width:50px;
		height:50px;
		float:left;
		margin-right:5px;
	}
	
	div#menu
	{
		float:left;
		text-align:left;
		font-size:12px;
		width:calc(100% - 250px);
		position:absolute;
		margin:10px;
		background:none;
	}

	div#menu li
	{
		width:100%;
		float: left;
	}

	div#menu li div
	{
		white-space:normal;
		display:contents;
	}

	ul.mainul,
	ul.subul
	{
		display:none;
		padding:5px;
		margin:0px;
		width:45vw;
		text-align:left;
	}

	ul.mainul
	{
		text-indent:20px;
		background-color:#000;
	}

	ul.subul
	{
		text-indent:0px;
		margin-top:20px;
		left:-5px;
	}	

	img#menu-ico
	{
		display:inline;
		margin-left:20px;
		margin-top:-120px;
	}

	img.niveau-suivant
	{
		display:inline;
		float:right;
	}

	input.switcher
	{
		color:#000000;
	}

	input.switcher + label > ul
	{
		display: none;
	}
	
	div#menu input.switcher,
	div#menu input.switcher1
	{
		color:#0000AA;
	}
	
	div#menu label#mainmenulbl
	{
		display:inline-block;
	}
	
	div#menu input.switcher:checked + label
	{
		border-color:#00FF00;
		color:#00FF00;
	}
	
	div#menu input.switcher:checked + label + div ul.mainul
	{
		display: inline-block;
	}

	div#menu li.vue
	{
		width:100%;
		text-align:center;
		height:50px;
		text-align:left;
	}
	
	div#menu span
	{
		display:none;
	}
	
	div#banniere div#menu ul.mainul input[type=radio] + label
	{
		background-image:url("/images/icones/isocele-blanc-37x37.png");
		background-repeat:no-repeat;
		background-position:center;
		background-size:cover;
		display:inline;
		float:right;
		width:20px;
		height:20px;
		background-color:#000;
	}
	
	div#banniere div#menu ul.mainul input[type=radio]:checked + label
	{
		background-image:url("/images/icones/isocele-rose-37x37.png");
		transform:rotateZ(180deg);
	}
	
	div#banniere div#menu ul.mainul input[type=radio]:checked + label + ul.subul
	{
		display:inline-block;
		text-indent:0px;
		margin-top:20px;
		position:absolute;
		left:45vw;
		width:50vw;
	}
	
	div#menu li:hover ul
	{
		display:none;
	}

}