/* _____________________________Smartphones */

@media all and (max-width: 768px) 
{

	#row
	{
	  opacity: 0;
	}
	

	#menu a
	{
	  text-decoration: none;
	  color: #F2F2F2;
	  transition: color 0.3s ease;
	  font-family: OpenSans, OpenSansIE;
	  font-weight: normal;
	  font-size: 14px;
	}
	
	

	#menuToggle
	{
	  display: block;
	  position: fixed;
	  right: 15px;
	  top: 10px;
	  z-index: 1;
	  -webkit-user-select: none;
	  user-select: none;
	}

	#menuToggle input
	{
	  display: block;
	  width: 40px;
	  height: 32px;
	  position: absolute;
	  top: -7px;
	  left: -5px;
	  cursor: pointer;
	  opacity: 0; /* on masque la checkbox */
	  z-index: 2; /* et on la place en premier plan */
	  -webkit-touch-callout: none;
	}

	#menuToggle span /* Gestion de chacune des trois tranches du menu hamburger */
	{
	  display: block;
	  width: 33px;
	  height: 4px;
	  margin-bottom: 5px;
	  margin-left: 10px;
	  position: relative;
	  background: #2D88C2;
	  border-radius: 3px;
	  z-index: 1;
	  transform-origin: 4px 0px;
	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				  opacity 0.55s ease;
	}

	#menuToggle span:first-child
	{
	  transform-origin: 0% 0%;
	}

	#menuToggle span:nth-last-child(2)
	{
	  transform-origin: 0% 100%;
	}

	#menuToggle input:checked ~ span /* Transition visuelle du hamburger */
	{
	  opacity: 1;
	  transform: rotate(45deg) translate(-2px, -1px);
	  background: #2D88C2;   /* Couleur croix */
	}

	#menuToggle input:checked ~ span:nth-last-child(3) /* Transition visuelle du hamburger */
	{
	  opacity: 0;
	  transform: rotate(0deg) scale(0.2, 0.2);
	}

	#menuToggle input:checked ~ span:nth-last-child(2) /* Transition visuelle du hamburger */
	{
	  transform: rotate(-45deg) translate(0, -1px);
	}

	#menu
	{
	  position: absolute;
	  width: 100vw;	  /* 100% de la largeur de fenêtre */
	  background: #F3F3F3;   /* #FCFCFC */
	  list-style-type: none;
	  -webkit-font-smoothing: antialiased; /* to stop flickering of text in safari */
	  transform-origin: 0% 0%;
	  transform: translate(15%, -54px);  /* position du menu quand il masqué (hors viewport) */
	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	}

	#menu li
	{
	  text-align: center;
	  font-weight: normal;
	  font-size: 1em;
	  letter-spacing:1px;
	  line-height:3;
	  color: #30494E;
	  transform: translate(0px,0); 
	}

	#menu li:hover
	{
	  color: #FE1ECC;
	  background-color: #F7F7F7;
	}
	
	#menuToggle input:checked ~ ul
	{
	  transform: translate(-90%, -54px);     /* position du menu après démasquage */
	}
	
}

/* _____________________________Tablettes et ordinateurs */

@media all and (min-width: 768px) and (max-width: 991px) 
{
	.menu-spe
	{
		background-color: #F07DA9;
		padding-right: 15px;
		padding-left: 15px;
		color: white;
	}
	
	.menu-spe:hover
	{
		background-color: #EE6A9C;
		padding-right: 15px;
		padding-left: 15px;
		color: white;
	}

	#menuToggle input
	{
		display: none;
	}
	
	#menuToggle 
	{
		Margin-top: 45px; /* Espace au dessus du menu texte  */
		position: absolute;
		right: 0px;
		top: 0px;
	}
	
	#menu
	{
		list-style-type: none;
		background-color: transparent;
		height: 55px;
		margin-top: 0px;
	}

	#menu a
	{
		display: inline-block;
		text-decoration: none;
		font-family: OpenSans, OpenSansIE;
		font-weight: normal;
		font-size: 16px;
		padding-left: 1.2em;   /* __Espace inter-menu faible sur petit écran */
		padding-right: 0.8em;
		Line-Height: 55px;
		text-align: center;
		vertical-align: middle;
		color: #30494E;
	}

	#menu a:hover 
	{
		font-weight: normal;
		color: black;
	}
	
	#centrage-horizontal
	{
		display: flex;
		margin-left: -40px;
		justify-content: center;
		align-items: center;
	}
	
}

@media all and (min-width: 991px)
{
		.menu-spe
	{
		background-color: #F07DA9;
		padding-right: 15px;
		padding-left: 15px;
		color: white;
	}
	
	.menu-spe:hover
	{
		background-color: #EE6A9C;
		padding-right: 15px;
		padding-left: 15px;
		color: white;
	}	
	
	#menuToggle input
	{
		display: none;
	}
	
	#menuToggle 
	{
		Margin-top: 45px; /* Espace au dessus du menu texte  */
		position: absolute;
		right: 0px;
		top: 0px;
	}
	
	#menu
	{
		list-style-type: none;
		background-color: transparent;
		height: 55px;
		margin-top: 0px;
	}

	#menu a
	{
		display: inline-block;
		text-decoration: none;
		font-family: OpenSans;
		font-weight: normal;
		font-size: 17px;
		padding-left: 1.8em;   /* __Espace inter-menu moyen sur grand écran */
		padding-right: 1.8em;
		Line-Height: 55px;
		text-align: center;
		vertical-align: middle;
		color: #30494E;
	}

	#menu a:hover 
	{
		font-weight: normal;
		color: black;
	}
	
	#centrage-horizontal
	{
		display: flex;
		margin-left: -40px;
		justify-content: center;
		align-items: center;
	}
}

@media all and (min-width: 1310px)  /* 1130px */
{
	#menuToggle 
	{
		left: 550px;  /* DECOLLE LE MENU DU BORD GAUCHE DE L'ECRAN SI TRES LARGE -- 350px */
	}
}