.nav-container
{
	position: absolute;
	left: -50%;
	top: 0;
	height: 100%;
	width: 400px;
	z-index:9997;
	background: #555555;
	visibility:hidden;
	overflow-y:auto;
}

.item_titre {color#ffffff;text-transform: uppercase;}
.item_lien {color:#FFFFFF;text-decoration:none;}
.item_lien:hover {color:#FFFFFF;text-decoration:underline;}

@keyframes 
showNav { from {
 left: -100%;
}

to { left: 0; }
}

@-webkit-keyframes 
showNav { from {
 left: -100%;
}

to { left: 0; }
}

@-moz-keyframes 
showNav { from {
 left: -100%;
}

to { left: 0; }
}

@-o-keyframes 
showNav { from {
 left: -100%;
}

to { left: 0; }
}

.showNav {
  -webkit-animation: showNav .5s ease forwards;
  -moz-animation: showNav 1s ease forwards;
  -o-animation: showNav 1s ease forwards;
  animation: showNav .5s ease forwards;
}

@keyframes 
hideNav { from {
 left: 0;
}

to { left: -100%; }
}

@-webkit-keyframes 
hideNav { from {
 left: 0;
}

to { left: -100%; }
}

@-moz-keyframes 
hideNav { from {
 left: 0;
}

to { left: -100%; }
}

@-o-keyframes 
hideNav { from {
 left: 0;
}

to { left: -100%; }
}

.hideNav {
	-webkit-animation: hideNav 1s ease forwards;
	-moz-animation: hideNav 1s ease forwards;
	-o-animation: hideNav 1s ease forwards;
	animation: hideNav 1s ease forwards;
}

button {
	background: none;
	border: none;
}

.btn-nav:hover { cursor: pointer; }

.btn-nav:hover .bar { background: #ffffff; }

.bar {
	display: block;
	height: 5px;
	width: 40px;
	background: #fff;
	margin: 10px auto;
}

.btn-nav {
	display: block;
	padding: 0;
	padding-top:3px;
	width: 40px;
	position: fixed;
	left: 10px;
	margin: 0 auto;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	z-index:9998;
}

.btn-nav:focus { outline: none; }

.middle { margin: 0 auto; }

.bar {
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}

.animated { z-index: 9999; }

.animated .arrow-top-r {
  -webkit-transform: rotateZ(-45deg) translateY(11px);
  -moz-transform: rotateZ(-45deg) translateY(11px);
  -ms-transform: rotateZ(-45deg) translateY(11px);
  -o-transform: rotateZ(-45deg) translateY(11px);
  transform: rotateZ(-45deg) translateY(11px);
  width: 25px;
}

.animated .arrow-middle-r {
  -webkit-transform: translateX(25px);
  -moz-transform: translateX(25px);
  -ms-transform: translateX(25px);
  -o-transform: translateX(25px);
  transform: translateX(25px);
}

.animated .arrow-bottom-r {
  -webkit-transform: rotateZ(45deg) translateY(-11px);
  -moz-transform: rotateZ(45deg) translateY(-11px);
  -ms-transform: rotateZ(45deg) translateY(-11px);
  -o-transform: rotateZ(45deg) translateY(-11px);
  transform: rotateZ(45deg) translateY(-11px);
  width: 25px;
}