*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
 nav a {
  text-decoration: none;
  font-size: 20px;
 }
nav{
  background: #222;  
  padding: 15px;
}
.list-menu{
  display: flex;
  list-style: none;
}
.list-menu > li > a{
  color: #fff;
  display: block;
  padding: 5px 15px;
}
.list-menu > li > a:hover{
  background: #4169E1;
}

#btn-menu{
  display: none;
}
#btn-menu + label{
  display: none; 
  position: relative;
  color:#fff ; 
  height: 20px;
  z-index: 1;
  cursor: pointer;
}
#btn-menu + label:before{
  content: '\f0c9';  
  display: inline-block;
  font-family:'FontAwesome';
  font-size: 22px;
}
#btn-menu:checked + label:before{
  content: '\f00d';
  color: #4682B4;
}

@media screen and (max-width: 767px) {
 
   #btn-menu + label{
      display: inline-block;
   }
  #btn-menu + label + .list-menu{
    display: none;
  }
  #btn-menu:checked + label + .list-menu{
    display: block;
  }
}