/* Flexnav Base Styles */
.flexnav {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  transition: none;
  -webkit-transform-style: preserve-3d;
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  max-height: 0; 
  z-index: 999;
}


.menu-button {
  position: relative;
  display: block;
  cursor: pointer;
}
  
.menu-button .touch-button {
	position: absolute;
	z-index: 999;
	top: 0;
	right: 0;
	display: inline-block;
	text-align: center; 
}
.menu-button .touch-button .navicon {
	position: relative;
}


.flexnav, .flexnav ul, .flexnav li {
  vertical-align: baseline;
  margin: 0;
  padding: 0; 
}
.flexnav.opacity { /* apparition sous menu en version accordeon */
   opacity: 0; 
}

.flexnav.show { /* apparition sous menu en version accordeon OBLIGATOIRE */ 
    max-height: 2000px;
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out; 
}
  
.flexnav li {  /* menu et sous menu  */
	position: relative;
	overflow: hidden;
	width: 100%;
	z-index: 100;
}
.flexnav li a {  /* lien menu et sous menu */
    position: relative;
    z-index: 200;
    overflow: hidden;

}
.flexnav li ul {
    width: 100%; 
}

.flexnav li ul li {
	position: relative;
	overflow: hidden; 
}
.flexnav li ul.show li {
	overflow: visible; 
}

.flexnav .touch-button {
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0;
    display: inline-block;

}
.flexnav .touch-button:hover {
	cursor: pointer; 
}
.flexnav .touch-button .navicon {
	position: relative;
}


@media all and (min-width: 700px) {

	.menu-button {
		display: none; 
	} 
	
	.flexnav .touch-button { /* bouton fleche du menu */
		display: none; 
	}

	.flexnav {
		overflow: visible; 
	}
	
	.flexnav.opacity {
		opacity: 1; 
	}
		
	.flexnav li {
		position: relative;
		list-style: none;
		float: left;
		display: block;
		overflow: visible; 
	}
	
	.flexnav li > ul {
		position: absolute;
		top: auto;
		left: 0; 
	}
	
	.flexnav li > ul li {
		width: 100%; 
	}
	
	.flexnav li ul li > ul {
		margin-left: 100%;
		top: 0; 
	}
	
	.flexnav li ul.open {
		display: block;
		opacity: 1;
		visibility: visible;
		z-index: 100; 
	}
	
	.flexnav li ul.open li {
		overflow: visible;
		max-height: 100px; 
	}
	
	.flexnav li ul.open ul.open {
		margin-left: 100%;
		top: 0; 
	}

}