nav { 
    float:left; position:relative; width:100%; height:100%; text-align:center; z-index:3000;
}
nav .wrapper {
	position:relative; 
	height:100%;
	font-size:15px; 
	text-align:left;
	margin:0;
    padding:0;
	box-sizing:border-box;
	list-style-type:none;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
    align-content:baseline;
    flex-wrap:wrap;
}

/* BASIK */
nav .wrapper li { position:relative; margin:0 3px; box-sizing:border-box; list-style-type:none; text-align:center; }
nav .wrapper li.inter { color:#FFF; margin:0; padding:0; }
/* PREMIER RANG */
nav .wrapper li a, nav .wrapper li a:visited { font-family: 'Fira Sans', sans-serif; margin: 0px; padding:15px 10px; display:block; text-decoration:none; color: #FFF; font-size: 14px; font-weight:500; line-height:20px; text-transform:uppercase; }
nav .wrapper li a:hover { background:#FFF; color: #5d8bb7; }
nav .wrapper li a:hover:before, nav .wrapper li a.on:before { position:absolute; content:""; top:0; left:0; width:100%; height:5px; background:#ffba27; }
nav .wrapper li a:hover:after, nav .wrapper li a.on:after { position:absolute; content:""; bottom:0; left:0; width:100%; height:5px; background:#ffba27; }

nav .wrapper li.retour { display:none;}

nav .wrapper li ul { position:absolute; left:0px; width:300px; margin:0; padding:0; background:#FFF; overflow-x:hidden; z-index:1200; display:none; }
nav .wrapper li ul li a, nav .wrapper li ul li a:visited { line-height:20px; padding:5px 10px; box-sizing:border-box; color:#5d8bb7; text-align:left; transition:all 0.2s; }
nav .wrapper li ul li { margin: 0; padding:5px; }
nav .wrapper li ul li a { margin: 0; }
nav .wrapper li:hover ul { display:block; }

/* rollover */
/* SECOND RANG */
nav .wrapper li:hover ul li:hover a.hide:hover, nav .wrapper li:hover ul li:hover a.on { background:none; color: #383160; } 

/* RESP */
nav.resp { position:fixed; top:100px; left:-100%; width:100%; height:calc(100vh - 70px); background: #FFF; overflow-y:scroll; z-index:3000; } 
nav.resp .wrapper { flex-direction:column; padding: 30px 30px 0 30px; align-items:stretch; justify-content:start; list-style-type:none; overflow-y:scroll; }

/* BASIK */
nav.resp .wrapper li { position:unset; width:100%; padding:0 0px; box-sizing:border-box; list-style-type:none; }
nav.resp .wrapper li.inter { display:none; }
/* PREMIER RANG */
nav.resp .wrapper li a, nav.resp .wrapper ul li a:visited { font-family: 'Fira Sans', sans-serif; margin: 0; padding:12px; display:block; text-decoration:none; color: #383160; text-align:left; font-size: 13px; font-weight:500; line-height:normal;  }
nav.resp .wrapper li a:hover { background-color: #383160; color: #FFF } 

nav.resp .wrapper li ul { position:absolute; top:0; left:0; width:100%; height:100vh; background:#FFF; overflow-y:scroll; z-index:3003; display:none; }
nav.resp .wrapper li ul li a, nav.resp .wrapper li ul li a:hover, nav.resp .wrapper li ul li a:visited{ line-height:20px; background:transparent; padding:8px 15px; box-sizing:border-box; color: #383160; transition:all 0.2s; }
nav.resp .wrapper li:hover ul { /*display:block;*/ }
nav.resp .wrapper li ul li.retour { padding: 10px; text-align: left; background: #383160; color: #FFF; display:block;}

/* rollover */
nav.resp .wrapper li:hover a.title, nav.resp .wrapper li a.title.on { color: #FFF; background-color:#383160; }																							
/* SECOND RANG */
nav.resp .wrapper li:hover ul li:hover a.hide:hover, nav.resp .wrapper li:hover ul li:hover a.on { background:#FFF; color: #383160; } 

.hamburger { position:fixed; top:10px; right:10px; color:#383160; z-index:3002; display:none; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after,
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after
{ background:#FFF; }