@media (min-width: 320px)and (max-width: 480px) {
  .sliders {
  float: left;
    width: 282px;
    margin-left: 45px;
}

.slider {
  position: relative;
  float: left;
  width: 282px;
  margin: 50px auto;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}

.slides img {
  width: 282px;
  height: 160px;
  float: left;
}

.texts p {
    text-align: center;
    font-size: 1.3em;
    font-style: italic;
}

.switch label {
    display: inline-block;
    width: 28px;
    height: 28px;
 }

 .switch {
    bottom: -52px;
}

#btn1:checked~slider-inner slides {
  transform: translate(0);
}

#btn2:checked~.slider-inner .slides {
  transform: translate(-282px);
}

#btn3:checked~.slider-inner .slides {
  transform: translate(-563px);
}

#btn4:checked~slider-inner slides {
  transform: translate(0);
}

#btn5:checked~.slider-inner .slides {
  transform: translate(-282px);
}

#btn6:checked~.slider-inner .slides {
  transform: translate(-563px);
}

#btn7:checked~slider-inner slides {
  transform: translate(0);
}

#btn8:checked~.slider-inner .slides {
  transform: translate(-282px);
}

#btn9:checked~.slider-inner .slides {
  transform: translate(-563px);
}

#btn10:checked~slider-inner slides {
  transform: translate(0);
}

#btn11:checked~.slider-inner .slides {
  transform: translate(-282px);
}

#btn12:checked~.slider-inner .slides {
  transform: translate(-563px);
}

#btn13:checked~slider-inner slides {
  transform: translate(0);
}

#btn14:checked~.slider-inner .slides {
  transform: translate(-282px);
}

#btn15:checked~.slider-inner .slides {
  transform: translate(-563px);
}

#btn16:checked~slider-inner slides {
  transform: translate(0);
}

#btn17:checked~.slider-inner .slides {
  transform: translate(-282px);
}

#btn18:checked~.slider-inner .slides {
  transform: translate(-563px);
}

}

@media (min-width: 481px) and (max-width: 640px) {
  
}

@media (min-width: 641px) and (max-width: 1024px) {
  
}