.slidershow{
    width: 100%; 
    height: 500px; 
    overflow:  hidden;

}
/* .middle{
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);

} */
.navigation{
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex; 

}
.bar{
    width: 50px; 
    height: 10px; 
    border: 2px solid #fff; 
    cursor: pointer;
    margin: 6px; 

}
.bar:hover{
    background-color: #fff; 
    transition: 0.4s;

}
input[name="r"]{
    position: absolute;
    visibility: hidden;
}
.slides{
    width: 500%;
    height: 100%;
    display: flex; 
}
.slide{
    width: 20%;
    transition: 0.6s;
}
.slide img{
    width: 100%;
    height: 100%;
}

#r1:checked ~ .s1{
    margin-left: 0;
  }
  #r2:checked ~ .s1{
    margin-left: -20%;
  }
  #r3:checked ~ .s1{
    margin-left: -40%;
  }
  #r4:checked ~ .s1{
    margin-left: -60%;
  }
  #r5:checked ~ .s1{
    margin-left: -80%;
  }