*{
  margin: 0;
  padding: 0;
}

.clear{
  clear: both;
}


.slide-toggle{
  display: none;
}

.slidemenu{
  
   width: 600px;
  margin: 0px auto;
  overflow: hidden;
  border: 0px solid blue;
}

.slidemenu label{
  width: 25%;
  text-align: center;
  display: block;
  float: left;
  color: #333;
  opacity: 0.5;
  

  padding: 0px;    
  font: 20px 'Agency FB';

}

.slidemenu label:hover{
  cursor: pointer;
  color: #383838;
}

.slidemenu label span{
  
}



/*Bar Style*/

.slider{
   width: 600px;
  height: 5px;
  display: block;
  background: #ccc;
  margin-top: 0px;
  border-radius: 5px;
  border: 0px solid red;
}

.slider .bar{
  width: 25%;
  height: 5px;
  background: #333;
  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: 25%; }
.slidemenu #slide-item-3:checked ~ .slider .bar{ margin-left: 50%; }
.slidemenu #slide-item-4:checked ~ .slider .bar{ margin-left: 75%; }

/*  EL MENU OCULTO, EL QUE ES PARA  */
/*  EL MENU OCULTO, EL QUE ES PARA  */
/*  EL MENU OCULTO, EL QUE ES PARA  */

.slide-toggle2{
  display: none;
}

.slidemenu2{
  
  width: 400px;
  margin: 0px auto;
  overflow: hidden;
  border: 0px solid blue;
}

.slidemenu2 label{
  width: 25%;
  text-align: center;
  display: block;
  float: left;
  color: #333;
  opacity: 0.5;
  

  padding: 0px;    
  font: 13px 'Agency FB';

}

.slidemenu2 label:hover{
  cursor: pointer;
  color: #383838;
}

.slidemenu2 label span{
  
}



/*Bar Style*/

.slider2{
   width: 400px;
  height: 5px;
  display: block;
  background: #ccc;
  margin-top: 0px;
  border-radius: 5px;
  border: 0px solid red;
}

.slider2 .bar2{
  width: 25%;
  height: 5px;
  background: #333;
  border-radius: 5px;
}

/*Animations*/
.slidemenu2 label, .slider2 .bar2 {
  transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
}

/*Toggle*/

.slidemenu2 .slide-toggle2:checked + label{
  opacity: 1;
}



.slidemenu2 #slide-item-5:checked ~ .slider2 .bar2{ margin-left: 0; }
.slidemenu2 #slide-item-6:checked ~ .slider2 .bar2{ margin-left: 25%; }
.slidemenu2 #slide-item-7:checked ~ .slider2 .bar2{ margin-left: 50%; }
.slidemenu2 #slide-item-8:checked ~ .slider2 .bar2{ margin-left: 75%; }