*{
    margin: 0;
    padding: 0;
  }
  
  .clear{
    clear: both;
  }
  
  
  .slide-toggle{
    display: none;
  }
  
  .slidemenu{
    background-color: white;
    font-family: arial, sans-serif;
    max-width: 600px;
    margin: 50px auto;
    overflow: hidden;
    margin-bottom: -1px;
   
  }
  
  .slidemenu label{
    width: 20%;
    text-align: center;
    display: block;
    float: left;
    color: rgb(99, 56, 0);
    opacity: 0.2;
  
  }
  
  .slidemenu label:hover{
    cursor: pointer;
    color: #666;
  }
  
  .slidemenu label span{
    display: block;
    padding: 10px;    
  }
  
  .slidemenu label .icon{
    font-size: 20px;
    border: solid 2px rgb(80, 27, 2);
    text-align: center;
    height: 50px;
    width: 50px;
    display: block;
    margin: 0 auto;
    line-height: 50px;
    border-radius: 50%;
  }
  
  /*Bar Style*/
  
  .slider{
    width: 100%;
    height: 5px;
    display: block;
    background: #ccc;
    margin-top: 10px;
    border-radius: 5px;
  }
  
  .slider .bar{
    width: 20%;
    height: 5px;
    background: rgb(110, 74, 20);
    border-radius: 5px;
  }
  
  /*Animations*/
  .slidemenu label, .slider .bar {
    transition: all 500ms ease-in-out;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
  }
  
  /*Toggle*/
  
  .slidemenu .slide-toggle:checked + label{
    opacity: 1;
  }
  
  
  
  .slidemenu #slide-item-1:checked ~ .slider .bar{ margin-left: 0; }
  .slidemenu #slide-item-2:checked ~ .slider .bar{ margin-left: 20%; }
  .slidemenu #slide-item-3:checked ~ .slider .bar{ margin-left: 40%; }
  .slidemenu #slide-item-4:checked ~ .slider .bar{ margin-left: 60%; }
  .slidemenu #slide-item-5:checked ~ .slider .bar{ margin-left: 80%; }