.slide {
    position: relative;
}


.slide-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 540px; 
}


.slide-open:checked+.slide-item {
    position: static;
    opacity: 1; 
}


.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
}


.slide-item img {
    display: block;
    height: 100%; 
    width: 100%;
    object-fit: cover; 
}


.slide-control {
    
    border-radius: 50%; 
    color: #ffffff;
    cursor: pointer;
    display: none; 
    font-size: 100px; 
    height: 60px;
    line-height: 35px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    text-align: center;
    width: 60px; 
    z-index: 10;
}


.slide-control.prev {
    left: 2%;
}

.slide-control.next {
    right: 2%;
}

#slide-1:checked~.control-1,
#slide-2:checked~.control-2,
#slide-3:checked~.control-3 {
    display: block;
}


.slide-control:hover {
    
    color: #aaaaaa; 
}


#titulo {
    position: absolute;
    top: 65%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; 
    padding: 10px;
    text-align: center;
}

#titulo h1 {
    font-family: 'Albert Sans', sans-serif; 
    font-weight: 900; 
    font-size: 70px; 
    color: #ffffff; 
    margin: 0;
    line-height: 1.2;
}
/* ESTILOS PARA CUANDO EN EL CARRUSEN TIENEN DOS LINEAS DE TEXTO. */
#titulo .banner1 {
    cursor: pointer;
    margin-top: 50px;
    font-family: 'Albert Sans', sans-serif;
    font-weight: bold;
    background-color: #EC1E24; 
    font-size: 30px; 
    color: white;
    padding: 15px 30px; 
    border-radius: 15px; 
    border: none; 
}

#titulo .banner2 {
    cursor: pointer;
    margin-top: 110px;
    font-family: 'Albert Sans', sans-serif;
    font-weight: bold;
    background-color: #EC1E24; 
    font-size: 30px; 
    color: white;
    padding: 15px 30px; 
    border-radius: 15px; 
    border: none; 
}

/* Small devices such as large phones (max-width: 640px) */
@media only screen and (max-width: 640px) {
    #titulo h1 {
        font-size: 30px; 
    }

    #titulo button {
        font-size: 20px; 
    }
}

/* Medium devices such as tablets (min-width: 641px) and (max-width: 768px) */
@media only screen and (min-width: 641px) and (max-width: 768px) {
    #titulo h1 {
        font-size: 35px; 
    }

    #titulo button {
        font-size: 20px; 
    }
}

/* Large devices such as laptops (min-width: 769px) and (max-width: 1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    #titulo h1 {
        font-size: 40px; 
    }

    #titulo button {
        font-size: 25px; 
    }
}

/* Largest devices such as desktops (min-width: 1025px) and (max-width: 1400px) */
@media only screen and (min-width: 1025px){
    #titulo h1 {
        font-size: 50px; 
    }

    #titulo button {
        font-size: 25px; 
    }
}
