#sliders{
    position: relative;
    width: 35%;
    height: 32vw ;
    
    margin: 30px auto;
    transform-style: preserve-3d;
    font-family: "Helvetica Neue", "sanas-serif";
    perspective: 1400px;

   
}

input[type="radio"]{
    position: relative;
    top: 108%;
    left: 50%;
    width: 18px;
    margin: 0 15px 0 0;
    transform: translateX(-83px);
    cursor: pointer;
    opacity: 1;
}

input[type="radio"]:nth-child(5) {
    margin-right: 0px;
}

input[type="radio"]:checked{
    opacity: 1;
}

#sliders label,
#sliders label img{
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    color: white;
    font-size: 70px;
    font-weight: bold; 
    cursor: pointer;
    transition: transform 400ms ease;   
    
         

}





/* se activa el slider */

#f1:checked ~ #slide1,
#f2:checked ~ #slide2,
#f3:checked ~ #slide3,
#f4:checked ~ #slide4,
#f5:checked ~ #slide5 {
    transform: translate3d(0%, 0, 0px);
    box-shadow: 0 13px 26px rgba(0, 0, 0, 0.3), 0 12px 6px
    rgba(0, 0, 0, 0.2);
}

/* siguiente slider */

#f1:checked ~ #slide2,
#f2:checked ~ #slide3,
#f3:checked ~ #slide4,
#f4:checked ~ #slide5,
#f5:checked ~ #slide1 {
    transform: translate3d(20%, 0, -100px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3), 0 2px 2px
    rgba(0, 0, 0, 0.2);
}

/* anterior slider */

#f1:checked ~ #slide5,
#f2:checked ~ #slide1,
#f3:checked ~ #slide2,
#f4:checked ~ #slide3,
#f5:checked ~ #slide4 {
    transform: translate3d(-20%, 0, -100px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3), 0 2px 2px
    rgba(0, 0, 0, 0.2);
}

/* siguien a siguiente slider */

#f1:checked ~ #slide3,
#f2:checked ~ #slide4,
#f3:checked ~ #slide5,
#f4:checked ~ #slide1,
#f5:checked ~ #slide2 {
    transform: translate3d(40%, 0, -250px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* anterior a anterior slider */
#f1:checked ~ #slide4,
#f2:checked ~ #slide5,
#f3:checked ~ #slide1,
#f4:checked ~ #slide2,
#f5:checked ~ #slide3 {
    transform: translate3d(-40%, 0, -250px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

@media screen and (max-width: 68.75em){
    #sliders{
        width: 65%;
        height: 15.625em;
       margin-top: 2px;
    }

}