.slider {
    position: relative;
    width: 100%;
    height: 60vh; /* Altezza a schermo intero */
    overflow: hidden; /* Nasconde le parti che escono dal contenitore */
    background-color: black; /* Imposta uno sfondo nero */
}

.slide {
    min-width: 100%; /* Ogni slide occupa il 100% della larghezza */
    display: flex; /* Utilizza flexbox per centrare il contenuto */
    justify-content: center; /* Centro orizzontale */
    align-items: center; /* Centro verticale */
    opacity: 0; /* Inizialmente invisibile */
    transition: opacity 1s ease-in-out; /* Transizione per l'opacita */
}

.slide img, .slide video {
    position: absolute; /* Posizionare l'immagine o il video in modo assoluto */
    top: 50%; /* Sposta verso il basso di meta dell'altezza del contenitore */
    left: 50%; /* Sposta verso destra di meta  della larghezza del contenitore */
    min-width: 100%; /* Imposta la larghezza minima al 100% */
    min-height: 100%; /* Imposta l'altezza minima al 100% */
    object-fit: cover; /* Copre il contenitore mantenendo le proporzioni */
    transform: translate(-50%, -50%); /* Centra l'immagine o il video */
}

.slide.active {
    opacity: 1; /* Rende visibile la slide attiva */
}

.navigation {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 150; /* Posiziona sopra le immagini */
}

button {
    font-size:30px;
    background-color: rgb(0 0 0);
    color:#ffffff;
    border: none;
    padding: 10px 25px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: rgb(0 0 0);
}


/* Stili responsivi per immagini */
@media (max-width: 768px) {

#cont_slogan {
	bottom:10%;
}
	
#slogan {
	width:90%;
	padding:0 30px;
}
    
.slide img.full, .slide video {
        display: none;
}
    
.slide img.responsive {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
}
    
.slider {
    height: 50vh; /* Altezza a schermo intero */
}

.slide img, .slide video {
    height: 100%;
    transform: translate(-70%, -50%); /* Centra l'immagine o il video */
}

button {
    font-size:20px;
    padding: 10px 15px;
}
    
}

@media (min-width: 769px) {
    .slide img.responsive, .slide video {
        display: none;
    }
    .slide img.full {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}