#mobile
{
	display:none;
}

ul{ margin:0; padding:0;} /*  A cause d'un espace relou tout en haut */

#nav
{
	height:7.5em;
	background-color: white;
	width:100%;
	box-shadow:0px 7px 11px 0px rgba(64,50,50,0.4);
}

#menu
{
	line-height : 1.5em; /* Interligne du texte */
	font-family:'Open Sans';
	font-size:1em; /* Font size de la barre */
	white-space:nowrap;
	width:80%;
}


/* Rectangle LI jaune base du menu déroulant */
#sous_menu
{
	background:#f3d210;
	display:block;
	width:9.44em;
	padding:8px;
	margin-bottom:11px; /* Pour l'aligner verticalement */
	background-size:200px auto;
	text-align:center;
	font-size:0.9em;
	white-space:nowrap;
}

#fleche
{
	width:10px;
	vertical-align:middle;
}

#marge
{
	margin-top:20px;
}

#logo
{
	width:22em;
	height:auto;
	margin-left:5%;
}

#menu li a
{
	/* display:inline-block;   Alignement des liens
	/*  vertical-align:middle;*/
}

#menu a
{
	color: black;
	text-align : center;
	text-decoration:none;
}

#menu > li
{
	position: relative;
	display:inline-block; /* Alignement vertical des li */
	vertical-align:middle;
	min-width: 0;
	margin: 1% 6% 0 0; /*Ecartement vertical et horizontal des li */
	white-space:normal;
}


#menu > li li {

	padding: 0px 0px; /* Pas de padding, l'espace cliquable est defini sur la balise a */
	white-space:normal;
	background: transparent none;
}


#sous_menu:hover
{
	color:white;
}

#menu > li a :hover {
	color: black;
	font-weight:bold;
}

/* Liens du sous menu */
#menu > li li a {
	color: black;
	font-size:0.7em;
	font-family:'Open Sans';
	text-transform:uppercase;
	text-align:left;
	display:block;
	width:12.7em; /* Largeur du lien */
	height:100%; /* Hauteur du lien */
	padding:20px 0px 20px 10px; /* Permet de generer de l'espace autour du lien */
}

#menu > li li:hover
{
	color:black;
}

#menu > li li a:hover
{
	color: black;
	font-weight:bold;
	background:#9E85D8;
}

#menu > li ul { /* sous menu */
	position: absolute;
	top: 2.8em; left:0; /* Positionnement du sous menu */
	max-height:0em; /*Cache le menu d�roulant */
	overflow:hidden; /*Cache le menu d�roulant */
	margin:0; padding:0;
	background-color:white; /*blanc*/
	/* transition: 1s max-height 0.5s; */
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-ms-transition-duration:1s;
	transition-duration:1s; /*Propriété récente */
	border-radius: 0 0 0px 0px;
	text-align:left;
}
/* ici on change la valeur de max-height au :hover */
#menu  > li:hover ul {
	/* need an adaptation, lower is better, but see it large   */
	max-height:200em;
}

#three
{
	display:none;
	width:0px;
}

#submenu
{
	z-index: 99;
}

/*NEw css */

.rond
{
	border:1px dotted darkgrey;
	width:60px;
	height:60px;
	border-radius: 50%;
	white-space:nowrap;
	margin:0 45px 0 45px;
	font-size: 14px;

}

#rond1
{
	background:#a6d9d5;
}

#rond2
{
	background:#ef8797;
}

#rond4,#rond3
{
	background:#f2996e;
}

#rond5
{
	background:#f6e15c;
}

.sous_rond
{
	margin:12px auto 0 auto;
	letter-spacing: 0.4px;
}

#cercle1
{
	margin-left:-30px;
}

#cercle2
{
	margin-left:-30px;
}

#cercle3
{
	margin-left:-23px;
}

#cercle4
{
	margin-left:-30px;
}

#cercle5
{
	margin-left:-25px;
}


/*----------------------------------------------Format smartphone------------------------------------*/
@media screen and (max-width:767px)
{
	#nav,#marge
	{
		display:none;  /* En format mobile, on masque le menu classique */
	}

	#mobile /* entete */
	{
		background: #0686af;
		box-shadow: 0 0 3px 2px rgba(0,0,0,0.3);
		display:block;
		margin-bottom:8px;
	}

	html
	{ /*Empeche le highlight sur mobile */

		-webkit-tap-highlight-color: transparent;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}

	a
	{
		text-decoration:none;
	}

	#mmenu
	{
		display:none;
	}

	#toggle-bar
	{
		margin-bottom:0px; /* Espace de respiration sous la barre de menu */
	}

	#logo_mob
	{
		margin:8px 0 0 5px;
		width:230px;
	}

	#mobile #toggle-bar
	{
		line-height:70px;
		height:70px; /* Epaisseur de la barre */
	}

	#mobile strong a
	{
		margin-left:30px;
		border:1px solid #444;
		padding:10px;
	}

	#mobile .navicon
	{
		float: right;
		height: 5px; /* Ecart entre 2nd et 3eme ligne */
		width: 30px;
		margin: 24px;
		border-top: 13px double #FFF; /* Epaisseur des 2 premières lignes*/
		border-bottom: 4px solid #FFF;  /* Epaisseur de la dernière ligne */
		font-size:30px;
	}

	#mobile ul li {
		clear:both;
		list-style:none;
		width:95%;
	}

	/* La liste d'items */
	#mobile ul li a {
		display:block;
		color:white;
		text-transform:uppercase;
		letter-spacing:.12em;
		margin:5px 0;
		padding:6px 0 6px 8px;
		font-family:'open sans';
		font-weight:bold;
		text-decoration:none;
	}

}
/*----------------------------------------------Petit format------------------------------------*/
@media screen and (min-width:768px) and (max-width:979px)
{
	#nav
	{
		border:solid 0px red;
		height:6em;
	}

	#menu
	{
		font-size:0.7em; /* Font size de la barre */
		white-space:nowrap;
		width:80%;
		margin:0;
	}

	#sous_menu
	{
		width:7em;
		font-size:0.7em;
	}


	#menu > li ul  /* sous menu */
	{
		top: 3.2em; left:0;
	}

	#logo
	{
		width:19em;
		height:auto;
		margin-left:2%;
		margin-right:3%;
	}

	#menu > li
	{
		margin: 1.5% 3.5% 0 0; /*Ecartement des li */
	}

	#menu > li li a {

		width:8.5em; /* Largeur du lien */
		font-size:0.6em;
	}

	.rond
	{
		width:50px;
		height:50px;
		margin:0 22px 0 22px;
		font-size: 11px;
	}

	.sous_rond
	{
		margin:10px auto 0 auto;
	}

}

/*----------------------------------------------Moyen format------------------------------------*/

@media screen and (min-width:980px) and (max-width:1199px)
{
	#nav
	{
		border:solid 0px pink;
		height:6.5em;
	}

	#menu
	{
		font-size:0.8em; /* Font size de la barre */
		white-space:nowrap;
		width:80%;
		margin:0;
	}

	#sous_menu
	{
		width:9.7em;
		font-size:0.8em;
	}

	#menu > li ul  /* Positionnemennt du sous menu */
	{
		top: 3em; left:0;
	}

	#logo
	{
		width:23em;
		height:auto;
		margin-left:8%;
		margin-right:3%;
	}

	#menu > li
	{
		margin: 1.5% 5% 0 0; /*Ecartement des li */
	}

	#menu > li li a {

		width:11.8em; /* Largeur du lien */
	}

	.rond
	{
		width:55px;
		height:55px;
		margin:0 29px 0 29px;
		font-size: 12px;
	}

	.sous_rond
	{
		margin:11px auto 0 auto;
	}

}

/*----------------------------------------------Grand format------------------------------------*/
@media screen and (min-width:1600px)
{
	#nav
	{
		border:solid 0px blue;
		height:8em;
	}

	#menu
	{
		font-size:1em; /* Font size de la barre */
		width:80%; /* Agit sur l'�cartement des li */
	}

	#menu > li ul  /* sous menu */
	{
		top: 2.1em; left:0em;
	}

	#logo
	{
		width:24em;
		height:auto;
		margin-left:8%;
		margin-right:6%;
	}

	#menu > li
	{
		margin: 1% 2% 0% 3.5%; /* marge verticale et Ecartement des li */
	}

	#menu > li ul /* sous menu */
	{
		top: 3em; left:0; /* Positionnement vertical du sous menu */
	}
}