/* Carusel de Imagenes */

.slider{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 65vh;
}

.wrapper{
    position: relative;
    height: 60vh;
    width: 90%;
}

.wrapper .img{
    position: absolute;
    height: 100%;
    width: 100%;
}

.wrapper .img img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    clip-path: circle(0% at 0% 100%);
    transition: all 0.7s;
    border-radius: 20px;
}

#one:checked ~ .i1 img{
    clip-path: circle(150% at 0% 100%);
}

#two:checked ~ .i1 img,
#two:checked ~ .i2 img{
    clip-path: circle(150% at 0% 100%);
}

#three:checked ~ .i1 img,
#three:checked ~ .i2 img,
#three:checked ~ .i3 img{
    clip-path: circle(150% at 0% 100%);
}

#four:checked ~ .i1 img,
#four:checked ~ .i2 img,
#four:checked ~ .i3 img,
#four:checked ~ .i4 img{
    clip-path: circle(150% at 0% 100%);
}

#five:checked ~ .i1 img,
#five:checked ~ .i2 img,
#five:checked ~ .i3 img,
#five:checked ~ .i4 img,
#five:checked ~ .i5 img{
    clip-path: circle(150% at 0% 100%);
}

.wrapper .sliders{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
}

.wrapper .sliders label{
    height: 13px;
    width: 13px;
    border: 2px solid var(--principal);
    margin: 0 3px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
}

#one:checked ~ .sliders label.one,
#two:checked ~ .sliders label.two,
#three:checked ~ .sliders label.three,
#four:checked ~ .sliders label.four,
#five:checked ~ .sliders label.five{
    width: 35px;
    border-radius: 14px;
    background: var(--principal);
}

.sliders label:hover{
     background: var(--principal);
}

.wrapper input[type="radio"]{
    display: none;
}