*{
  box-sizing: border-box;
}


.nav-container{
width:200px;
  margin-top:15px;
  box-shadow: 0 2px 2px 2px #A2B5BF;
  transition: all 0.3s linear;
  opacity:0.8;
}
.nav{
  list-style-type:none;
  margin:0;
  padding:0;
  
}
li{
  height:40px; 
  position:relative;
  background: linear-gradient(#292929, #242424);

}

aside a {
  font-family: Arial, Verdana,  "Arial Black", sans-serif;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid black;
  text-decoration:none;
  display:block;
  height:100%;
  width:100%;
  line-height:40px;
  color:white;
  text-transform: capitalize;
  font-weight: bold;
  padding-left:10%;
  border-left:5px solid transparent;
  letter-spacing:1px;
  transition: all 0.3s linear;
  text-align:left;
}
aside a p {
  padding-left:5%;
  line-height:30px;
  color:#B7CA79;
}

.active a{
     font-family: Arial, Verdana,  "Arial Black", sans-serif;
 color: yellow;
  border-left:6px solid yellow;
  background-color: black;
  outline:0;
  text-transform: uppercase;
  font-size:1.1em;
}
.chapitre a{
  background-color: black;
}
.accueil a{
  color: #BDB55A;
  border-left:6px solid #BDB55A;
  background-color: black;
  outline:0;
}
.contact a{
  color: #63FFB2;
  border-left:6px solid #63FFB2;
  background-color: black;
  outline:0;
}
li:not(.active):hover a{
  color: yellow;
  background-color: #5C0515;
  color: white;
  opacity:1.0;
  }

li:not(.active):hover a p{
  color: white;
  background-color: #5C0515;
  opacity:1.0;
}

span[class ^= "icon"]{
  position:absolute;
  left:20px;
  font-size: 1.0em;
  transition: all 0.3s linear;
}

@media only screen and (max-width : 860px){
  
  .text{
    display:none;
  }
  
  .nav-container , a{
    width: 70px;
    
  }
   
  a:hover{
    width:200px; 
    z-index:1;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid black;
    box-shadow: 0 0 1px 1px black;
  opacity:1.0;
  }
  
  a:hover  .text {
    display:block;
    padding-left:30%;
  }
}
@media only screen and (max-width : 480px){
  .nav-container, a{ width:50px;}
  span[class ^= "icon"]{ left:8px;}
}