/*
You can type here custom CSS code, which will be loaded both on your admin and front-end pages. Please make sure to not override layout properties (positions and sizes), as they can interfere with the sliders built-in responsive functionality. Here are few example targets to help you get started:
*/

.ls-container { /* Slider container */

}

.ls-layers { /* Layers wrapper */ 

}

.ls-3d-box div { /* Sides of 3D transition objects */ 

}
/* Allinea lo slider mobile al centro ed elimina lo spazio bianco a sinistra */
@media screen and (max-width: 767px) {
    .creative-slider, 
    [id*="creative-slider"], 
    .layerslider-wrapper,
    .ls-wp-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        left: 0 !important;
        right: 0 !important;
        float: none !important;
        display: block !important;
    }
    
    /* Sistema l'immagine all'interno */
    .ls-bg {
        width: 100% !important;
        left: 0 !important;
    }
}
/* Spegne lo slider del PC sugli smartphone */
@media screen and (max-width: 767px) {
    /* Trova il contenitore dello slider PC e lo elimina da mobile */
    .creative-slider-id-1, 
    #layerslider_1, 
    .layerslider-id-1 { 
        display: none !important; 
    }
    
    /* Forza lo slider Mobile ad essere centrato e a tutto schermo */
    .creative-slider-id-2, 
    #layerslider_2, 
    .layerslider-id-2 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
}

/* Spegne lo slider Mobile sui computer grandi */
@media screen and (min-width: 768px) {
    .creative-slider-id-2, 
    #layerslider_2, 
    .layerslider-id-2 { 
        display: none !important; 
    }
}
/* Blocca lo scorrimento orizzontale e lo zoom errato su mobile */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative;
}

@media screen and (max-width: 767px) {
    /* Forza tutti i contenitori principali a non allargarsi oltre lo schermo */
    #page, #wrapper, .header-container, #footer, .creative-slider, .ls-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-hidden: hidden !important;
    }
}
/* Impedisce a Creative Slider di tagliare l'immagine di sfondo su mobile */
@media screen and (max-width: 767px) {
  /* Forza l'immagine di sfondo a stare nei bordi senza zoom */
  .ls-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Mostra l'immagine intera al 100% */
    object-position: center center !important; /* La mantiene centrata */
    left: 0 !important;
    top: 0 !important;
  }
}