/* CSS Document */
.radio {
  display: none;
}

.slider {
  position: relative;
  margin: auto;
  height: 400px;
  width: 600px;
}

.slide  {
  position: absolute;
  z-index: 1;
  width: 600px;
  height: 400px;
  opacity: 0;
  transition: opacity 0s linear 0.3s;
  background-color: gray;
  font-size: 10rem;
  text-align: center;
  line-height: 400px;
}

.btn {
  display: none;
  position: absolute;
  top: 50%;
  padding: 20px;
  background: white;
  margin-top: -29px;
  z-index: 3;
  cursor: pointer;
}

.thumbs {
  margin-top: 20px;
  text-align: center;
}

.thumb {
  padding: 4px;
  cursor: pointer;
}

/* show current slide */
.diashow-1 #s1:checked ~ .slider .slide-1,
.diashow-1 #s2:checked ~ .slider .slide-2,
.diashow-1 #s3:checked ~ .slider .slide-3,
.diashow-1 #s4:checked ~ .slider .slide-4,
.diashow-1 #s5:checked ~ .slider .slide-5,
.diashow-1 #s6:checked ~ .slider .slide-6,
.diashow-1 #s7:checked ~ .slider .slide-7,
.diashow-1 #s8:checked ~ .slider .slide-8,
.diashow-1 #s9:checked ~ .slider .slide-9 {
  transition: opacity 0.3s linear 0s;
  opacity: 1;
  z-index: 2;
}

/* current thumb */
.diashow-1 #s1:checked ~ .thumbs .thumb-1,
.diashow-1 #s2:checked ~ .thumbs .thumb-2,
.diashow-1 #s3:checked ~ .thumbs .thumb-3,
.diashow-1 #s4:checked ~ .thumbs .thumb-4,
.diashow-1 #s5:checked ~ .thumbs .thumb-5,
.diashow-1 #s6:checked ~ .thumbs .thumb-6,
.diashow-1 #s7:checked ~ .thumbs .thumb-7,
.diashow-1 #s8:checked ~ .thumbs .thumb-8,
.diashow-1 #s9:checked ~ .thumbs .thumb-9 {
  font-weight: bold;
}

/* current previos button */
.diashow-1 #s2:checked ~ .slider .btn-1,
.diashow-1 #s3:checked ~ .slider .btn-2,
.diashow-1 #s4:checked ~ .slider .btn-3,
.diashow-1 #s5:checked ~ .slider .btn-4,
.diashow-1 #s6:checked ~ .slider .btn-5,
.diashow-1 #s7:checked ~ .slider .btn-6,
.diashow-1 #s8:checked ~ .slider .btn-7,
.diashow-1 #s9:checked ~ .slider .btn-8 {
  display: block;
  left: 0;
}
.diashow-1 #s2:checked ~ .slider .btn-1:before,
.diashow-1 #s3:checked ~ .slider .btn-2:before,
.diashow-1 #s4:checked ~ .slider .btn-3:before,
.diashow-1 #s5:checked ~ .slider .btn-4:before,
.diashow-1 #s6:checked ~ .slider .btn-5:before,
.diashow-1 #s7:checked ~ .slider .btn-6:before,
.diashow-1 #s8:checked ~ .slider .btn-7:before,
.diashow-1 #s9:checked ~ .slider .btn-8:before{
  content: "<";
}

/* current next button */
.diashow-1 #s1:checked ~ .slider .btn-2,
.diashow-1 #s2:checked ~ .slider .btn-3,
.diashow-1 #s3:checked ~ .slider .btn-4,
.diashow-1 #s4:checked ~ .slider .btn-5,
.diashow-1 #s5:checked ~ .slider .btn-6,
.diashow-1 #s6:checked ~ .slider .btn-7,
.diashow-1 #s7:checked ~ .slider .btn-8,
.diashow-1 #s8:checked ~ .slider .btn-9 {
  display: block;
  right: 0;
}
.diashow-1 #s1:checked ~ .slider .btn-2:before,
.diashow-1 #s2:checked ~ .slider .btn-3:before,
.diashow-1 #s3:checked ~ .slider .btn-4:before,
.diashow-1 #s4:checked ~ .slider .btn-5:before,
.diashow-1 #s5:checked ~ .slider .btn-6:before,
.diashow-1 #s6:checked ~ .slider .btn-7:before,
.diashow-1 #s7:checked ~ .slider .btn-8:before,
.diashow-1 #s8:checked ~ .slider .btn-9:before,
.diashow-1 #s9:checked ~ .slider .btn-10:before{
  content: ">";
}