[type=radio] {
  display: none;
}

#slider {
  height:380px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  margin-top:20px;
}
.caption {
position:absolute;
bottom:0;
width: 100%;
height:40px;
color:#FFF;
}
.caption h1 {
color:#FFF!important;
text-align:center;
font-size:1em!important;
font-weight:400!important;
text-transform:uppercase!important;
}
#slider label {
  margin: auto;
  width:60%;
  height: 100%;
  position: absolute;
  left: 0; right: 0;
  cursor: pointer;
  transition: transform 0.4s ease;
}
#slider label img { width:100%;}
#s1:checked ~ #slide4, #s2:checked ~ #slide5,
#s3:checked ~ #slide1, #s4:checked ~ #slide2,
#s5:checked ~ #slide3 {
  transform: translate3d(-60%,0,-400px);
}

#s1:checked ~ #slide5, #s2:checked ~ #slide1,
#s3:checked ~ #slide2, #s4:checked ~ #slide3,
#s5:checked ~ #slide4 {
  transform: translate3d(-30%,0,-200px);
}

#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3, #s4:checked ~ #slide4,
#s5:checked ~ #slide5 {
  transform: translate3d(0,0,0);
}

#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide4, #s4:checked ~ #slide5,
#s5:checked ~ #slide1 {
  transform: translate3d(30%,0,-200px);
}

#s1:checked ~ #slide3, #s2:checked ~ #slide4,
#s3:checked ~ #slide5, #s4:checked ~ #slide1,
#s5:checked ~ #slide2 {
  transform: translate3d(60%,0,-400px);
}

@media all and (max-width : 768px) {
#slider label {
  margin: auto;
  width: 80%;
  height: 100%;
  position: absolute;
  left: 0; right: 0;
  cursor: pointer;
  transition: transform 0.4s ease;
}
#slider {
  height:320px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  margin-top:20px;
}
.caption {
position:absolute;
bottom:0;
width: 100%;
height:40px;
color:#FFF;
}
.caption h1 {
color:#FFF!important;
text-align:center;
font-size:12px!important;
font-weight:400!important;
text-transform:uppercase!important;
}
#slider label img { width:100%;}
#s1:checked ~ #slide4, #s2:checked ~ #slide5,
#s3:checked ~ #slide1, #s4:checked ~ #slide2,
#s5:checked ~ #slide3 {
  transform: translate3d(-20%,0,-150px);
}

#s1:checked ~ #slide5, #s2:checked ~ #slide1,
#s3:checked ~ #slide2, #s4:checked ~ #slide3,
#s5:checked ~ #slide4 {
  transform: translate3d(-10%,0,-75px);
}

#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3, #s4:checked ~ #slide4,
#s5:checked ~ #slide5 {
  transform: translate3d(0,0,0);
}

#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide4, #s4:checked ~ #slide5,
#s5:checked ~ #slide1 {
  transform: translate3d(10%,0,-75px);
}

#s1:checked ~ #slide3, #s2:checked ~ #slide4,
#s3:checked ~ #slide5, #s4:checked ~ #slide1,
#s5:checked ~ #slide2 {
  transform: translate3d(20%,0,-150px);
}
}
@media all and (max-width : 1080px) {
#slider {
  height:310px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  margin-top:20px;
}
.caption {
position:absolute;
bottom:0;
width: 100%;
height:40px;
color:#FFF;
}
}
@media all and (max-width : 1050px) {
#slider {
  height:310px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  margin-top:20px;
}
.caption {
position:absolute;
bottom:0;
width: 100%;
height:40px;
color:#FFF;
}
}
@media all and (max-width : 1024px) {
#slider {
  height:310px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  margin-top:20px;
}
.caption {
position:absolute;
bottom:0;
width: 100%;
height:40px;
color:#FFF;
}
}
@media all and (max-width : 980px) {
#slider {
  height:240px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  margin-top:20px;
}
.caption {
position:absolute;
bottom:0;
width: 100%;
height:40px;
color:#FFF;
}
}
@media all and (max-width : 900px) {
#slider {
  height:240px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  margin-top:20px;
}
.caption {
position:absolute;
bottom:0;
width: 100%;
height:40px;
color:#FFF;
}
}
@media all and (max-width : 800px) {
#slider {
  height:240px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  margin-top:20px;
}
.caption {
position:absolute;
bottom:0;
width: 100%;
height:40px;
color:#FFF;
}
}
@media all and (max-width : 640px) {
#slider {
  height:240px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  margin-top:20px;
}
.caption {
position:absolute;
bottom:0;
width: 100%;
height:40px;
color:#FFF;
}
}
@media all and (max-width : 480px) {
#slider {
  height:200px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  margin-top:20px;
}
.caption {
position:absolute;
bottom:0;
width: 100%;
height:20px;
color:#FFF;
}
}
@media all and (max-width : 414px) {
#slider {
  height:180px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  margin-top:20px;
}
.caption {
position:absolute;
bottom:0;
width: 100%;
height:35px;
color:#FFF;
}
}
@media all and (max-width : 375px) {
#slider {
  height:160px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  margin-top:20px;
}
.caption {
position:absolute;
bottom:0;
width: 100%;
height:30px;
color:#FFF;
}
}
@media all and (max-width : 360px) {
#slider {
  height:150px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  margin-top:20px;
}
.caption {
position:absolute;
bottom:0;
width: 100%;
height:25px;
color:#FFF;
}
}
@media all and (max-width : 320px) {
.caption {
position:absolute;
bottom:0;
width: 100%;
height:40px;
color:#FFF;
}
}