body{
  margin: 0;
  padding: 0;
  background: #34495e;
}
.slidershow{
  width: 696px;
  height: 950px;
  overflow: hidden;
}
.middle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.navigation1{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.navigation2{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.bar1{
  width: 73px;
  height: 20px;  
  border: 1px solid #bbb;
  margin: 2px;
  cursor: pointer;
  background: #AAA;
  transition: 0.4s;
}

.bar2{
  width: 95px;
  height: 20px;
  border: 1px solid #bbb;
  margin: 2px;
  cursor: pointer;
  transition: 0.4s;
}

.bar1:hover{
  background: #ddd;
}

.bar2:hover{
  background: #ddd;
}

input[name="r"]{
    position: absolute;
    visibility: hidden;
}

input[name="t"]{
    position: absolute;
    visibility: hidden;
}


.slides1{
  width: 800%;
  height: 100%;
  display: flex;
}
.slides2{
  width: 500%;
  height: 100%;
  display: flex;
}  

.slide1{
  width: 12.5%;
  transition: 0.6s;
}
.slide2{
  width: 20%;
  transition: 0.6s;
}

.slide1 img{
  width: 100%;
  height: 100%;
}
.slide2 img{
  width: 100%;
  height: 100%;
}
 
#r1:checked ~ .s1{
  margin-left: 0;
}
#r2:checked ~ .s1{
  margin-left: -12.5%;
}
#r3:checked ~ .s1{
  margin-left: -25%;
}
#r4:checked ~ .s1{
  margin-left: -37.5%;
}
#r5:checked ~ .s1{
  margin-left: -50%;
}
#r6:checked ~ .s1{
  margin-left: -62.5%;
}
#r7:checked ~ .s1{
  margin-left: -75%;
}
#r8:checked ~ .s1{
  margin-left: -87.5%;