/* STYLE COMUNI A TUTTI */

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

body {
    background-color: floralwhite;
}

h2 {
    padding: 2%;
    margin-bottom: 5%;
    padding-left: 20%;
    padding-right: 20%;
    text-align: center;
    background-color: gold;
}

p {
    text-justify: distribute;
    margin-left: 10%;
    margin-right: 10%;
    padding-top: 5%;
    padding-bottom: 5%;
}

/* FRECCIA TORNA SU */
img#tornaSu {
    width: 10%;
    height: auto;
    position: absolute;
    right: 5%;
    /* proprietà TOP ricavata dinamicamente */
}

img#tornaSu:hover {
    cursor: pointer;
}


/* STYLE PER SMARTPHONE IN VERTICALE */

@media (max-width: 480px) {

    /* SEZIONE HEADER */

    header {
        width: 100%;
        background: linear-gradient(to right, rgba(255, 204, 0, 0.9), rgba(153, 204, 0, 0.9), rgba(255, 102, 0, 0.9));
    }

    /* INTESTAZIONE + LOGO */

    div#contenitore-logo {
        display: flex;
        flex-direction: column;
    }

    a#url-sito {
        text-align: center;
    }

    p#motto-sito {
        text-align: center;

    }

    img#immagine-logo {
        width: 40%;
        height: auto;
        margin-left: 30%;
        margin-right: auto;
        margin-top: 5%;
    }

    /* BARRA MENU + PULSANTI SOCIAL */

    .barra-header {
        display: flex;
        flex-direction: row;
        padding-top: 5%;
        padding-bottom: 5%;
        margin-left: 5%;
        margin-right: 5%;
    }

    /* PULSANTE MENU */

    .header-pulsanteMenu {
        width: 100%;
        object-fit: contain;
    }

    #menuToggle {
        background-color: black;
        color: white;
        padding: 10px 20px;
        cursor: pointer;
        border: none;
        font-size: 18px;
        /*margin-bottom: 10px;*/
    }

    /* PULSANTI SOCIAL */

    .social {
        width: 18%;
        height: auto;
        object-fit: contain;
        /* mantiene le proporzioni senza tagliare l'immagine */
        transition: transform 0.2s ease;
    }

    .header-pulsantiSocial {
        display: inline-flex;
        flex-direction: row;
        /*
    justify-content: flex-end; */
        /* Inizia da destra */
        gap: 10px;
        /* Spazio tra i box */
    }

    /* MODALE MENU */

    /* The Modal (background) */
    #headerContenitoreModale {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        left: 0;
        top: 0;
        width: 100vw;
        /* Full width */
        height: 100vh;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(194, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.9);
        /* Black w/ opacity */
    }

    /* Modal Content/Box */
    #headerContenutoModale {
        box-sizing: border-box;
        background-color: rgb(0, 0, 0);
        margin-top: 15%;
        padding: 2%;
        width: 75%;
        margin-left: 12.5%;
        margin-right: 0;
        /*border: 3px solid black;*/

    }

    /* The Close Button */
    .header-chiusura {
        color: #aaa;
        float: left;
        font-size: 30px;
        font-weight: bold;
    }

    .header-chiusura:hover,
    .header-chiusura:focus {
        color: rgb(255, 255, 255);
        text-decoration: none;
        cursor: pointer;
    }

    nav.menu-hidden#mainMenu {
        display: flex;
        flex-direction: column;
    }

    nav#mainMenu {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
        background-color: black;
        padding: 10px;
        transition: max-height 0.3s ease;
        overflow: hidden;
        height: fit-content;
    }

    nav#mainMenu button {
        background-color: #444;
        color: yellow;
        border: none;
        padding: 8px 16px;
        cursor: pointer;
        border-radius: 6px;
        font-size: 16px;
        transition: background-color 0.2s ease;
    }

    nav#mainMenu button:hover {
        background-color: #666;
    }

    nav#mainMenu a {
        color: white;
        text-decoration: none;
        font-weight: bold;
    }

    nav#mainMenu.show {
        max-height: fit-content;
    }

    .subMenuHomePage>button {
        width: 50%;
    }

    /* FINE SEZIONE HEADER */

    /* INIZIO SEZIONE TITOLO SITO (SEZIONE#1) */

    div#contenitore-sezione1 {
        display: flex;
        flex-direction: column;
    }

    img.sezione1 {
        margin-bottom: -15%;
    }

    img.sezione1#nome1,
    img.sezione1#nome2 {
        width: 90%;
        margin-left: 5%;
        margin-right: auto;
    }

    img.sezione1#nome3 {
        margin-bottom: 5%;
    }

    /* FINE SEZIONE TITOLO SITO (SEZIONE#1) */

    /* INIZIO SEZIONE PRESENTAZIONE NOSTRO SITO (SEZIONE#2) */

    div.sezione2#contenitore-sezione2 {
        position: relative;
        display: flex;
        flex-direction: column;
        padding-bottom: 5%;
    }

    div.sezione2#parte1,
    div.sezione2#parte2,
    div.sezione2#parte3 {
        display: flex;
        flex-direction: column;
    }

    video.sezione2#videoParte1,
    video.sezione2#videoParte2,
    video.sezione2#videoParte3 {
        margin-top: 10%;
        margin-bottom: 10%;
        width: 80%;
        margin-left: auto;
        margin-right: 10%;
    }

    @keyframes stretch {
        0% {
            transform: scaleX(1);
        }

        50% {
            transform: scaleX(1.5);
        }

        100% {
            transform: scaleX(1);
        }
    }

    .sezione2#tornaSu {
        top: 0.15%
    }

    /* VIGNETTA1 */

    #contenitore-video1,
    #contenitore-video2,
    #contenitore-video3 {
        position: relative;
        display: inline-block;
    }

    #videoParte1,
    #videoParte2,
    #videoParte3 {
        display: block;
        width: 100%;
        height: auto;
    }

    #vignettaVideo1,
    #vignettaVideo2,
    #vignettaVideo3 {

        height: auto;
        position: absolute;

        /* distanza dall'alto del video */

        /* distanza da sinistra */
        transform: translate(-50%, -50%);
        transform: scaleX(2.0);

        background: none;
        /* niente sfondo */
        border: none;
        /* niente bordo */
        padding: 0;
        /* nessun padding */
        text-shadow: 2px 2px 5px black;
        /* migliora la leggibilità sul video */

        /*background: white;
    padding: 10px 15px;
    border-radius: 15px;*/
        font-family: 'Comic Sans MS', cursive;
        font-size: 16px;
        /*box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);*/
    }

    #vignettaVideo1 {
        width: 25%;
        top: 1%;
        left: 60%;
    }

    #vignettaVideo2 {
        width: 25%;
        top: 3%;
        left: 51%;
    }

    #vignettaVideo3 {
        width: 27%;
        top: 1%;
        left: 58%;
    }

    #testo-vignetta1,
    #testo-vignetta2,
    #testo-vignetta3 {
        text-align: center;
        height: auto;
        position: absolute;

        /* distanza dall'alto del video */

        /* distanza da sinistra */
        transform: translate(-50%, -50%);

        background: none;
        /* niente sfondo */
        border: none;
        /* niente bordo */
        padding: 0;
        /* nessun padding */
        text-shadow: 2px 2px 5px black;
        /* migliora la leggibilità sul video */

        /*background: white;
    padding: 10px 15px;
    border-radius: 15px;*/
        font-family: 'Comic Sans MS', cursive;
        font-size: 1.1rem;
        /*box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);*/
    }

    #testo-vignetta1 {
        width: 40%;
        top: 6%;
        left: 73%;
    }

    #testo-vignetta2 {
        width: 40%;
        top: 8%;
        left: 63%;
    }

    #testo-vignetta3 {
        width: 40%;
        top: 6%;
        left: 71%;
    }

    /* FINE SEZIONE PRESENTAZIONE NOSTRO SITO (SEZIONE#2) */

    /* INIZIO SEZIONE PRESENTAZIONE NOSTRI OC (SEZIONE#3) */

    div.sezione3#contenitore-sezione3 {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-bottom: 5%;
    }

    h2.sezione3#titoloSezione3 {
        padding-top: 2%;
        padding-bottom: 2%;
        text-align: center;
        background-color: gold;

    }

    #contenitoreSlider {
        position: relative;
        overflow: hidden;
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
        padding-top: 2%;
        padding-bottom: 2%;
    }

    div.sezione3#contenitoreSlideOC {
        display: flex;
        transition: transform 0.5s ease-in-out;
        width: 100%*7;
        flex-shrink: 0;
        flex-direction: row;
        flex-wrap: nowrap;

    }

    img.sezione3 {
        flex-shrink: 0;
        width: 100%;

    }

    #contenitore-sezione3>p {
        margin-left: 10%;
        margin-right: 10%;
        margin: 10%;
        text-align: justify;
    }

    .sezione3#tornaSu {
        top: 0.3%;
    }

    /* FINE SEZIONE PRESENTAZIONE NOSTRI OC (SEZIONE#3) */

    /* INIZIO SEZIONE NOSTRI LAVORI E PATREON (SEZIONE#4) */

    h2.sezione4#titoloSezione4 {
        text-align: center;
        background-color: gold;
    }

    img.sezione4#samplePatreon {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
    }

    img.sezione4#sampleDeviantArt {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
    }

    div.sezione4#contenitore-sezione4 {
        position: relative;
        width: 100%;
        padding-bottom: 5%;
    }

    div.sezione4#contenitorePatreon,
    div.sezione4#contenitoreDeviantArt {
        display: inline-flex;
        flex-direction: row;
        justify-content: center;
        margin-left: 5%;
        margin-right: 5%;
        column-gap: 2%;
    }

    img.sezione4#logoPatreon,
    img.sezione4#logoDeviantArt {
        width: 10%;
        height: auto;
        object-fit: contain;
        /* mantiene le proporzioni senza tagliare l'immagine */
        transition: transform 0.2s ease;
    }

    button.sezione4#buttonPaginaPatreon {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
        margin-top: 5%;
        margin-bottom: 5%;
    }

    .sezione4#tornaSu {
        top: 1.3%;
    }

    /* FINE SEZIONE NOSTRI LAVORI E PATREON (SEZIONE#4) */

    /* INIZIO SEZIONE NOSTRE COLLEZIONI (SEZIONE#5) */

    div.sezione5#contenitore-sezione5 {
        position: relative;
        width: 100%;
        padding-bottom: 5%;
    }

    /* Position the image container (needed to position the left and right arrows) */
    .sezione5#container-slideShow {
        position: relative;
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
    }

    /* Hide the images by default */
    .sezione5#mySlides {
        display: none;
    }

    /* Add a pointer when hovering over the thumbnail images */
    .cursor {
        cursor: pointer;
    }


    /* Container for image text */
    .sezione5#caption-container {
        text-align: center;
        background-color: #222;
        padding: 2px 16px;
        color: white;
    }

    .sezione5#row:after {
        content: "";
        display: table;
        clear: both;
    }

    /* 2 columns side by side */
    .sezione5#column {
        float: left;
        width: 50%;
    }

    /* Add a transparency effect for thumnbail images */
    .demo {
        opacity: 0.6;
    }

    .active,
    .demo:hover {
        opacity: 1;
    }

    .sezione5#tornaSu {
        top: 1.5%;
    }

    /* FINE SEZIONE NOSTRE COLLEZIONI (SEZIONE#5) */

    /* INIZIO SEZIONE NOSTRE ULTIME USCITE (SEZIONE#6) */

    div.sezione6#contenitore-sezione6 {
        position: relative;
        overflow: hidden;
        padding-bottom: 5%;
    }

    #contenitoreSlider {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
    }

    div.sezione6#contenitoreSlideUltimiFumetti {
        display: flex;
        transition: transform 0.5s ease-in-out;
        width: 100%*7;
        flex-shrink: 0;
    }

    img.sezione6 {
        flex-shrink: 0;
        width: 100%;
    }

    button.sezione6#buttonCatalogo {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
        margin-top: 5%;
        margin-bottom: 5%;
    }

    .sezione6#tornaSu {
        top: 1.8%;
    }

    /* FINE SEZIONE NOSTRE ULTIME USCITE (SEZIONE#6) */

    /* INIZIO SEZIONE LAVORI MIGLIORI (SEZIONE#7) */

    .sezione7#contenitore-sezione7 {
        position: relative;
        overflow: hidden;
        padding-bottom: 5%;
    }

    .sezione7#contenitoreFlex {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 90%;
        margin-left: 5%;
        margin-right: auto;
    }

    .sezione7.fumetto {
        width: 50%;
    }

    /* The Modal (background) */
    .sezione7#modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4);
        /* Black w/ opacity */
    }

    /* Modal Content/Box */
    .sezione7#modalContent {
        background-color: #fefefe;
        margin: 15% auto;
        /* 15% from the top and centered */
        padding: 2%;
        border: 3px solid black;
        width: 90%;
        /* Could be more or less, depending on screen size */
    }

    .sezione7#sezione7ImmagineModale {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
    }

    /* The Close Button */
    .sezione7.close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .sezione7.close:hover,
    .sezione7.close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    button.sezione7#buttonCatalogo {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
        margin-top: 5%;
        margin-bottom: 5%;
    }

    .sezione7#tornaSu {
        top: 1.4%;
    }

    /* INIZIO SEZIONE LAVORI MIGLIORI (SEZIONE#7) */

    /* INIZIO SEZIONE CHI SIAMO (SEZIONE#8) */

    .sezione8#contenitore-sezione8 {
        position: relative;
        overflow: hidden;
        padding-bottom: 5%;
    }

    img.sezione8 {
        width: 40%;
    }

    #sezione8imgRic {
        float: left;
        padding-right: 5%;
        padding-left: 5%;
        padding-bottom: 5%;
    }

    #sezione8imgRio {
        float: right;
        padding: 5%;
    }

    .sezione8#tornaSu {
        top: 2%;
    }

    /* INIZIO SEZIONE CHI SIAMO (SEZIONE#8) */

    /* INIZIO SEZIONE FOOTER (SEZIONE#9) */

    footer {
        background: linear-gradient(to right, rgba(255, 204, 0, 0.9), rgba(153, 204, 0, 0.9), rgba(255, 102, 0, 0.9));
        position: relative;
        overflow: hidden;
        padding-bottom: 5%;

    }

    img.footerSocial {
        width: 12%;
    }

    .footer-pulsantiSocial {
        display: inline-flex;
        flex-direction: row;
        z-index: 1;
        /* Inizia da destra */
        gap: 10px;
        /* Spazio tra i box */
        margin-left: 10%;
    }

    .footer-disclaimer {
        background-color: yellow;
        font-size: 0.8em;
        color: black;
        text-align: justify;
        line-height: 1.4;
        padding: 20px;
    }

    #footer-contact {
        margin-left: 10%;
    }

    .footer-disclaimer a {
        color: blue;
        text-decoration: underline;
    }

    .footer#tornaSu {
        top: 1.8%;
    }

    /* FINE SEZIONE FOOTER (SEZIONE#9) */

}


/* STYLE PER I TABLET */

@media (min-width: 481px) and (max-width: 1025px) {

    /* STILE GENERALE */

    p {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    /* SEZIONE HEADER */

    header {
        width: 100%;
        background: linear-gradient(to right, rgba(255, 204, 0, 0.9), rgba(153, 204, 0, 0.9), rgba(255, 102, 0, 0.9));
    }

    /* INTESTAZIONE + LOGO */

    div#contenitore-logo {
        display: flex;
        flex-direction: column;
    }

    a#url-sito {
        text-align: center;
        font-size: 1.5rem;
    }

    p#motto-sito {
        text-align: center;
        font-size: 1.5rem;
    }

    img#immagine-logo {
        width: 40%;
        height: auto;
        margin-left: 30%;
        margin-right: auto;
        margin-top: 5%;
    }

    /* BARRA MENU + PULSANTI SOCIAL */

    .barra-header {
        display: flex;
        flex-direction: row;
        padding-top: 5%;
        padding-bottom: 5%;
        margin-left: 5%;
        margin-right: 5%;
    }

    /* PULSANTE MENU */

    .header-pulsanteMenu {
        width: 100%;
        object-fit: contain;
    }

    #menuToggle {
        background-color: black;
        color: white;
        padding: 10px 20px;
        cursor: pointer;
        border: none;
        font-size: 1.6rem;
        /*margin-bottom: 10px;*/
    }

    /* PULSANTI SOCIAL */

    .social {
        width: 18%;
        height: auto;
        object-fit: contain;
        /* mantiene le proporzioni senza tagliare l'immagine */
        transition: transform 0.2s ease;
    }

    .header-pulsantiSocial {
        display: inline-flex;
        flex-direction: row;
        /*
justify-content: flex-end; */
        /* Inizia da destra */
        gap: 10px;
        /* Spazio tra i box */
    }

    /* MODALE MENU */

    /* The Modal (background) */
    #headerContenitoreModale {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        left: 0;
        top: 0;
        width: 100vw;
        /* Full width */
        height: 100vh;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(194, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.9);
        /* Black w/ opacity */
    }

    /* Modal Content/Box */
    #headerContenutoModale {
        box-sizing: border-box;
        background-color: rgb(0, 0, 0);
        margin-top: 10%;
        padding: 2%;
        width: 75%;
        margin-left: 12.5%;
        margin-right: 0;
        /*border: 3px solid black;*/

    }

    /* The Close Button */
    .header-chiusura {
        color: #aaa;
        float: left;
        font-size: 50px;
        font-weight: bold;
    }

    .header-chiusura:hover,
    .header-chiusura:focus {
        color: rgb(255, 255, 255);
        text-decoration: none;
        cursor: pointer;
    }

    nav.menu-hidden#mainMenu {
        display: flex;
        flex-direction: column;
    }

    nav#mainMenu {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
        background-color: black;
        padding: 10px;
        transition: max-height 0.3s ease;
        overflow: hidden;
        height: fit-content;
    }

    nav#mainMenu button {
        background-color: #444;
        color: yellow;
        border: none;
        padding: 8px 16px;
        cursor: pointer;
        border-radius: 6px;
        font-size: 1.5rem;
        transition: background-color 0.2s ease;
        width: 100%;
    }

    nav#mainMenu button:hover {
        background-color: #666;
    }

    nav#mainMenu a {
        color: white;
        text-decoration: none;
        font-weight: bold;
    }

    nav#mainMenu.show {
        max-height: fit-content;
    }

    .subMenuHomePage>button {
        width: 50%;
    }

    /* FINE SEZIONE HEADER */

    /* INIZIO SEZIONE TITOLO SITO (SEZIONE#1) */

    div#contenitore-sezione1 {
        display: flex;
        flex-direction: column;
    }

    img.sezione1 {
        margin-bottom: -15%;
    }

    img.sezione1#nome1,
    img.sezione1#nome2 {
        width: 90%;
        margin-left: 5%;
        margin-right: auto;
    }

    img.sezione1#nome3 {
        margin-bottom: 5%;
    }

    /* FINE SEZIONE TITOLO SITO (SEZIONE#1) */

    /* INIZIO SEZIONE PRESENTAZIONE NOSTRO SITO (SEZIONE#2) */

    div.sezione2#contenitore-sezione2 {
        position: relative;
        display: flex;
        flex-direction: column;
        padding-bottom: 5%;
    }

    div.sezione2#parte1,
    div.sezione2#parte2,
    div.sezione2#parte3 {
        display: flex;
        flex-direction: column;
    }

    video.sezione2#videoParte1,
    video.sezione2#videoParte2,
    video.sezione2#videoParte3 {
        margin-top: 10%;
        margin-bottom: 10%;
        width: 80%;
        margin-left: auto;
        margin-right: 10%;
    }

    @keyframes stretch {
        0% {
            transform: scaleX(1);
        }

        50% {
            transform: scaleX(1.5);
        }

        100% {
            transform: scaleX(1);
        }
    }

    .sezione2#tornaSu {
        top: 0%
    }

    /* VIGNETTA1 */

    #contenitore-video1,
    #contenitore-video2,
    #contenitore-video3 {
        position: relative;
        display: inline-block;
    }

    #videoParte1,
    #videoParte2,
    #videoParte3 {
        display: block;
        width: 100%;
        height: auto;
    }

    #vignettaVideo1,
    #vignettaVideo2,
    #vignettaVideo3 {

        height: auto;
        position: absolute;

        /* distanza dall'alto del video */

        /* distanza da sinistra */
        transform: translate(-50%, -50%);
        transform: scaleX(2.0);

        background: none;
        /* niente sfondo */
        border: none;
        /* niente bordo */
        padding: 0;
        /* nessun padding */
        text-shadow: 2px 2px 5px black;
        /* migliora la leggibilità sul video */

        /*background: white;
padding: 10px 15px;
border-radius: 15px;*/
        font-family: 'Comic Sans MS', cursive;
        font-size: 16px;
        /*box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);*/
    }

    #vignettaVideo1 {
        width: 25%;
        top: 1%;
        left: 60%;
    }

    #vignettaVideo2 {
        width: 25%;
        top: 3%;
        left: 51%;
    }

    #vignettaVideo3 {
        width: 27%;
        top: 1%;
        left: 58%;
    }

    #testo-vignetta1,
    #testo-vignetta2,
    #testo-vignetta3 {
        text-align: center;
        height: auto;
        position: absolute;
        /* distanza dall'alto del video */

        /* distanza da sinistra */
        transform: translate(-50%, -50%);

        background: none;
        /* niente sfondo */
        border: none;
        /* niente bordo */
        padding: 0;
        /* nessun padding */
        text-shadow: 2px 2px 5px black;
        /* migliora la leggibilità sul video */

        /*background: white;
padding: 10px 15px;
border-radius: 15px;*/
        font-family: 'Comic Sans MS', cursive;
        font-size: 2rem;
        /*box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);*/
    }

    #testo-vignetta1 {
        width: 40%;
        top: 6%;
        left: 73%;
    }

    #testo-vignetta2 {
        width: 40%;
        top: 8%;
        left: 63%;
    }

    #testo-vignetta3 {
        width: 40%;
        top: 6%;
        left: 71%;
    }

    /* FINE SEZIONE PRESENTAZIONE NOSTRO SITO (SEZIONE#2) */

    /* INIZIO SEZIONE PRESENTAZIONE NOSTRI OC (SEZIONE#3) */

    div.sezione3#contenitore-sezione3 {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-bottom: 5%;
    }

    h2.sezione3#titoloSezione3 {
        padding-top: 2%;
        padding-bottom: 2%;
        text-align: center;
        background-color: gold;

    }

    #contenitoreSliderSezione3 {
        float: left;
        position: relative;
        overflow: hidden;
        width: 40%;
        margin-left: 10%;
        margin-right: 5%;
        padding-top: 2%;
        padding-bottom: 2%;
    }

    div.sezione3#contenitoreSlideOC {
        display: flex;
        transition: transform 0.5s ease-in-out;
        width: 100%*7;
        flex-shrink: 0;
        flex-direction: row;
        flex-wrap: nowrap;

    }

    img.sezione3 {
        flex-shrink: 0;
        width: 100%;

    }

    #contenitore-sezione3>p {
        margin-left: 10%;
        margin-right: 10%;
        padding-top: 0;
        text-align: justify;
    }

    .sezione3#tornaSu {
        top: 0%;
    }

    /* FINE SEZIONE PRESENTAZIONE NOSTRI OC (SEZIONE#3) */

    /* INIZIO SEZIONE NOSTRI LAVORI E PATREON (SEZIONE#4) */

    h2.sezione4#titoloSezione4 {
        text-align: center;
        background-color: gold;
    }

    img.sezione4#samplePatreon {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
    }

    img.sezione4#sampleDeviantArt {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
    }

    div.sezione4#contenitore-sezione4 {
        position: relative;
        width: 100%;
        padding-bottom: 5%;
    }

    div.sezione4#contenitorePatreon,
    div.sezione4#contenitoreDeviantArt {
        display: inline-flex;
        flex-direction: row;
        justify-content: center;
        margin-left: 5%;
        margin-right: 5%;
        column-gap: 2%;
    }

    img.sezione4#logoPatreon,
    img.sezione4#logoDeviantArt {
        width: 10%;
        height: auto;
        object-fit: contain;
        /* mantiene le proporzioni senza tagliare l'immagine */
        transition: transform 0.2s ease;
    }

    button.sezione4#buttonPaginaPatreon {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
        margin-top: 5%;
        margin-bottom: 5%;
        font-size: 1.4rem;
    }

    button#buttonPatreon.sezione4,
    button#buttonDeviantArt.sezione4 {
        font-size: 1.5rem;
    }

    .sezione4#tornaSu {
        top: 1%;
    }

    /* FINE SEZIONE NOSTRI LAVORI E PATREON (SEZIONE#4) */

    /* INIZIO SEZIONE NOSTRE COLLEZIONI (SEZIONE#5) */

    div.sezione5#contenitore-sezione5 {
        position: relative;
        width: 100%;
        padding-bottom: 5%;
    }

    /* Position the image container (needed to position the left and right arrows) */
    .sezione5#container-slideShow {
        position: relative;
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
    }

    /* Hide the images by default */
    .sezione5#mySlides {
        display: none;
    }

    /* Add a pointer when hovering over the thumbnail images */
    .cursor {
        cursor: pointer;
    }


    /* Container for image text */
    .sezione5#caption-container {
        text-align: center;
        background-color: #222;
        padding: 2px 16px;
        color: white;
    }

    .sezione5#row:after {
        content: "";
        display: table;
        clear: both;
    }

    /* 2 columns side by side */
    .sezione5#column {
        float: left;
        width: 50%;
    }

    /* Add a transparency effect for thumnbail images */
    .demo {
        opacity: 0.6;
    }

    .active,
    .demo:hover {
        opacity: 1;
    }

    .sezione5#tornaSu {
        top: 1.2%;
    }

    /* FINE SEZIONE NOSTRE COLLEZIONI (SEZIONE#5) */

    /* INIZIO SEZIONE NOSTRE ULTIME USCITE (SEZIONE#6) */

    div.sezione6#contenitore-sezione6 {
        position: relative;
        overflow: hidden;
        padding-bottom: 5%;
    }

    #contenitoreSliderSezione6 {
        width: 45%;
        margin-left: 27.5%;
        margin-right: auto;
        overflow: hidden;
    }

    div.sezione6#contenitoreSlideUltimiFumetti {
        display: flex;
        transition: transform 0.5s ease-in-out;
        width: 100%*7;
        flex-direction: row;
        flex-wrap: nowrap;

        /*flex-shrink: 0;*/
    }

    img.sezione6 {
        flex-shrink: 0;
        width: 100%;
    }

    button.sezione6#buttonCatalogo {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 5%;
        margin-bottom: 5%;
        font-size: 2rem;
    }

    .sezione6#tornaSu {
        top: 1.8%;
    }

    /* FINE SEZIONE NOSTRE ULTIME USCITE (SEZIONE#6) */

    /* INIZIO SEZIONE LAVORI MIGLIORI (SEZIONE#7) */

    .sezione7#contenitore-sezione7 {
        position: relative;
        overflow: hidden;
        padding-bottom: 5%;
    }

    .sezione7#contenitoreFlex {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 90%;
        margin-left: 5%;
        margin-right: auto;
    }

    .sezione7.fumetto {
        width: 50%;
    }

    /* The Modal (background) */
    .sezione7#modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4);
        /* Black w/ opacity */
    }

    /* Modal Content/Box */
    .sezione7#modalContent {
        background-color: #fefefe;
        margin: 15% auto;
        /* 15% from the top and centered */
        padding: 2%;
        border: 3px solid black;
        width: 90%;
        /* Could be more or less, depending on screen size */
    }

    .sezione7#sezione7ImmagineModale {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
    }

    /* The Close Button */
    .sezione7.close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .sezione7.close:hover,
    .sezione7.close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    button.sezione7#buttonCatalogo {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 5%;
        margin-bottom: 5%;
        font-size: 2rem;
    }

    .sezione7#tornaSu {
        top: 1%;
    }

    /* INIZIO SEZIONE LAVORI MIGLIORI (SEZIONE#7) */

    /* INIZIO SEZIONE CHI SIAMO (SEZIONE#8) */

    .sezione8#contenitore-sezione8 {
        position: relative;
        overflow: hidden;
        padding-bottom: 5%;
    }

    img.sezione8 {
        width: 40%;
    }

    #sezione8imgRic {
        float: left;
        padding-right: 5%;
        padding-left: 5%;
        padding-bottom: 5%;
    }

    #sezione8imgRio {
        float: right;
        padding: 5%;
    }

    .sezione8#tornaSu {
        top: 0%;
    }

    /* INIZIO SEZIONE CHI SIAMO (SEZIONE#8) */

    /* INIZIO SEZIONE FOOTER (SEZIONE#9) */

    footer {
        background: linear-gradient(to right, rgba(255, 204, 0, 0.9), rgba(153, 204, 0, 0.9), rgba(255, 102, 0, 0.9));
        position: relative;
        overflow: hidden;
        padding-bottom: 5%;

    }

    img.footerSocial {
        width: 12%;
    }

    .footer-pulsantiSocial {
        display: inline-flex;
        flex-direction: row;
        z-index: 1;
        /* Inizia da destra */
        gap: 10px;
        /* Spazio tra i box */
        margin-left: 10%;
    }

    .footer-disclaimer {
        background-color: yellow;
        font-size: 1.2em;
        color: black;
        text-align: justify;
        line-height: 1.4;
        padding: 20px;
    }

    #footer-contact {
        margin-left: 10%;
        font-size: 1.5rem;
    }

    .footer-disclaimer a {
        color: blue;
        text-decoration: underline;
    }

    .footer#tornaSu {
        top: 1.8%;
    }

    /* FINE SEZIONE FOOTER (SEZIONE#9) */

}


/* STYLE PER I LAPTOP */

@media (min-width: 1025px) and (max-width: 1366px) {

    /* STILE GENERALE */

    p {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 4rem;
    }

    /* SEZIONE HEADER */

    header {
        width: 100%;
        background: linear-gradient(to right, rgba(255, 204, 0, 0.9), rgba(153, 204, 0, 0.9), rgba(255, 102, 0, 0.9));
    }

    /* INTESTAZIONE + LOGO */

    div#contenitore-logo {
        display: flex;
        flex-direction: column;
    }

    a#url-sito {
        text-align: center;
        font-size: 2.5rem;
    }

    p#motto-sito {
        text-align: center;
        font-size: 2.5rem;
    }

    img#immagine-logo {
        width: 40%;
        height: auto;
        margin-left: 30%;
        margin-right: auto;
        margin-top: 5%;
    }

    /* BARRA MENU + PULSANTI SOCIAL */

    .barra-header {
        display: flex;
        flex-direction: row;
        padding-top: 5%;
        padding-bottom: 5%;
        margin-left: 5%;
        margin-right: 5%;
    }

    /* PULSANTE MENU */

    .header-pulsanteMenu {
        width: 100%;
        object-fit: contain;
    }

    #menuToggle {
        background-color: black;
        color: white;
        padding: 10px 20px;
        cursor: pointer;
        border: none;
        font-size: 4rem;
        /*margin-bottom: 10px;*/
    }

    /* PULSANTI SOCIAL */

    .social {
        width: 18%;
        height: auto;
        object-fit: contain;
        /* mantiene le proporzioni senza tagliare l'immagine */
        transition: transform 0.2s ease;
    }

    .header-pulsantiSocial {
        display: inline-flex;
        flex-direction: row;
        /*
justify-content: flex-end; */
        /* Inizia da destra */
        gap: 10px;
        /* Spazio tra i box */
    }

    /* MODALE MENU */

    /* The Modal (background) */
    #headerContenitoreModale {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        left: 0;
        top: 0;
        width: 100vw;
        /* Full width */
        height: 100vh;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(194, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.9);
        /* Black w/ opacity */
    }

    /* Modal Content/Box */
    #headerContenutoModale {
        box-sizing: border-box;
        background-color: rgb(0, 0, 0);
        margin-top: 10%;
        padding: 2%;
        width: 75%;
        margin-left: 12.5%;
        margin-right: 0;
        /*border: 3px solid black;*/

    }

    /* The Close Button */
    .header-chiusura {
        color: #aaa;
        float: left;
        font-size: 80px;
        font-weight: bold;
    }

    .header-chiusura:hover,
    .header-chiusura:focus {
        color: rgb(255, 255, 255);
        text-decoration: none;
        cursor: pointer;
    }

    nav.menu-hidden#mainMenu {
        display: flex;
        flex-direction: column;
    }

    nav#mainMenu {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
        background-color: black;
        padding: 10px;
        transition: max-height 0.3s ease;
        overflow: hidden;
        height: fit-content;
    }

    nav#mainMenu button {
        background-color: #444;
        color: yellow;
        border: none;
        padding: 8px 16px;
        cursor: pointer;
        border-radius: 6px;
        font-size: 2.5rem;
        transition: background-color 0.2s ease;
        width: 100%;
    }

    nav#mainMenu button:hover {
        background-color: #666;
    }

    nav#mainMenu a {
        color: white;
        text-decoration: none;
        font-weight: bold;
    }

    nav#mainMenu.show {
        max-height: fit-content;
    }

    .subMenuHomePage>button {
        width: 50%;
    }

    /* FINE SEZIONE HEADER */

    /* INIZIO SEZIONE TITOLO SITO (SEZIONE#1) */

    div#contenitore-sezione1 {
        display: flex;
        flex-direction: column;
    }

    img.sezione1 {
        margin-bottom: -15%;
    }

    img.sezione1#nome1,
    img.sezione1#nome2 {
        width: 90%;
        margin-left: 5%;
        margin-right: auto;
    }

    img.sezione1#nome3 {
        margin-bottom: 5%;
    }

    /* FINE SEZIONE TITOLO SITO (SEZIONE#1) */

    /* INIZIO SEZIONE PRESENTAZIONE NOSTRO SITO (SEZIONE#2) */

    div.sezione2#contenitore-sezione2 {
        position: relative;
        display: flex;
        flex-direction: column;
        padding-bottom: 5%;
    }

    div.sezione2#parte1,
    div.sezione2#parte2,
    div.sezione2#parte3 {
        display: flex;
        flex-direction: column;
    }

    video.sezione2#videoParte1,
    video.sezione2#videoParte2,
    video.sezione2#videoParte3 {
        margin-top: 10%;
        margin-bottom: 10%;
        width: 80%;
        margin-left: auto;
        margin-right: 10%;
    }

    @keyframes stretch {
        0% {
            transform: scaleX(1);
        }

        50% {
            transform: scaleX(1.5);
        }

        100% {
            transform: scaleX(1);
        }
    }

    .sezione2#tornaSu {
        top: 0%
    }

    /* VIGNETTA1 */

    #contenitore-video1,
    #contenitore-video2,
    #contenitore-video3 {
        position: relative;
        display: inline-block;
    }

    #videoParte1,
    #videoParte2,
    #videoParte3 {
        display: block;
        width: 100%;
        height: auto;
    }

    #vignettaVideo1,
    #vignettaVideo2,
    #vignettaVideo3 {

        height: auto;
        position: absolute;

        /* distanza dall'alto del video */

        /* distanza da sinistra */
        transform: translate(-50%, -50%);
        transform: scaleX(2.0);

        background: none;
        /* niente sfondo */
        border: none;
        /* niente bordo */
        padding: 0;
        /* nessun padding */
        text-shadow: 2px 2px 5px black;
        /* migliora la leggibilità sul video */

        /*background: white;
padding: 10px 15px;
border-radius: 15px;*/
        font-family: 'Comic Sans MS', cursive;
        font-size: 16px;
        /*box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);*/
    }

    #vignettaVideo1 {
        width: 25%;
        top: 1%;
        left: 60%;
    }

    #vignettaVideo2 {
        width: 25%;
        top: 3%;
        left: 51%;
    }

    #vignettaVideo3 {
        width: 27%;
        top: 1%;
        left: 58%;
    }

    #testo-vignetta1,
    #testo-vignetta2,
    #testo-vignetta3 {
        text-align: center;
        height: auto;
        position: absolute;
        /* distanza dall'alto del video */

        /* distanza da sinistra */
        transform: translate(-50%, -50%);

        background: none;
        /* niente sfondo */
        border: none;
        /* niente bordo */
        padding: 0;
        /* nessun padding */
        text-shadow: 2px 2px 5px black;
        /* migliora la leggibilità sul video */

        /*background: white;
padding: 10px 15px;
border-radius: 15px;*/
        font-family: 'Comic Sans MS', cursive;
        font-size: 3rem;
        /*box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);*/
    }

    #testo-vignetta1 {
        width: 40%;
        top: 6%;
        left: 73%;
    }

    #testo-vignetta2 {
        width: 40%;
        top: 8%;
        left: 63%;
    }

    #testo-vignetta3 {
        width: 40%;
        top: 6%;
        left: 71%;
    }

    /* FINE SEZIONE PRESENTAZIONE NOSTRO SITO (SEZIONE#2) */

    /* INIZIO SEZIONE PRESENTAZIONE NOSTRI OC (SEZIONE#3) */

    div.sezione3#contenitore-sezione3 {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-bottom: 5%;
    }

    h2.sezione3#titoloSezione3 {
        padding-top: 2%;
        padding-bottom: 2%;
        text-align: center;
        background-color: gold;

    }

    #contenitoreSliderSezione3 {
        float: left;
        position: relative;
        overflow: hidden;
        width: 40%;
        margin-left: 10%;
        margin-right: 5%;
        padding-top: 2%;
        padding-bottom: 2%;
    }

    div.sezione3#contenitoreSlideOC {
        display: flex;
        transition: transform 0.5s ease-in-out;
        width: 100%*7;
        flex-shrink: 0;
        flex-direction: row;
        flex-wrap: nowrap;

    }

    img.sezione3 {
        flex-shrink: 0;
        width: 100%;

    }

    #contenitore-sezione3>p {
        margin-left: 10%;
        margin-right: 10%;
        padding-top: 0;
        text-align: justify;
    }

    .sezione3#tornaSu {
        top: 0%;
    }

    /* FINE SEZIONE PRESENTAZIONE NOSTRI OC (SEZIONE#3) */

    /* INIZIO SEZIONE NOSTRI LAVORI E PATREON (SEZIONE#4) */

    h2.sezione4#titoloSezione4 {
        text-align: center;
        background-color: gold;
    }

    img.sezione4#samplePatreon {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
    }

    img.sezione4#sampleDeviantArt {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
    }

    div.sezione4#contenitore-sezione4 {
        position: relative;
        width: 100%;
        padding-bottom: 5%;
    }

    div.sezione4#contenitorePatreon,
    div.sezione4#contenitoreDeviantArt {
        display: inline-flex;
        flex-direction: row;
        justify-content: center;
        margin-left: 5%;
        margin-right: 5%;
        column-gap: 2%;
    }

    img.sezione4#logoPatreon,
    img.sezione4#logoDeviantArt {
        width: 10%;
        height: auto;
        object-fit: contain;
        /* mantiene le proporzioni senza tagliare l'immagine */
        transition: transform 0.2s ease;
    }

    button.sezione4#buttonPaginaPatreon {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
        margin-top: 5%;
        margin-bottom: 5%;
        font-size: 2rem;
    }

    button#buttonPatreon.sezione4,
    button#buttonDeviantArt.sezione4 {
        font-size: 2.5rem;
    }

    .sezione4#tornaSu {
        top: 1%;
    }

    /* FINE SEZIONE NOSTRI LAVORI E PATREON (SEZIONE#4) */

    /* INIZIO SEZIONE NOSTRE COLLEZIONI (SEZIONE#5) */

    div.sezione5#contenitore-sezione5 {
        position: relative;
        width: 100%;
        padding-bottom: 5%;
    }

    /* Position the image container (needed to position the left and right arrows) */
    .sezione5#container-slideShow {
        position: relative;
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
    }

    /* Hide the images by default */
    .sezione5#mySlides {
        display: none;
    }

    /* Add a pointer when hovering over the thumbnail images */
    .cursor {
        cursor: pointer;
    }


    /* Container for image text */
    .sezione5#caption-container {
        text-align: center;
        background-color: #222;
        padding: 2px 16px;
        color: white;
    }

    .sezione5#row:after {
        content: "";
        display: table;
        clear: both;
    }

    /* 2 columns side by side */
    .sezione5#column {
        float: left;
        width: 50%;
    }

    /* Add a transparency effect for thumnbail images */
    .demo {
        opacity: 0.6;
    }

    .active,
    .demo:hover {
        opacity: 1;
    }

    .sezione5#tornaSu {
        top: 1.2%;
    }

    /* FINE SEZIONE NOSTRE COLLEZIONI (SEZIONE#5) */

    /* INIZIO SEZIONE NOSTRE ULTIME USCITE (SEZIONE#6) */

    div.sezione6#contenitore-sezione6 {
        position: relative;
        overflow: hidden;
        padding-bottom: 5%;
    }

    #contenitoreSliderSezione6 {
        width: 45%;
        margin-left: 27.5%;
        margin-right: auto;
        overflow: hidden;
    }

    div.sezione6#contenitoreSlideUltimiFumetti {
        display: flex;
        transition: transform 0.5s ease-in-out;
        width: 100%*7;
        flex-direction: row;
        flex-wrap: nowrap;

        /*flex-shrink: 0;*/
    }

    img.sezione6 {
        flex-shrink: 0;
        width: 100%;
    }

    button.sezione6#buttonCatalogo {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 5%;
        margin-bottom: 5%;
        font-size: 2.5rem;
    }

    .sezione6#tornaSu {
        top: 1.8%;
    }

    /* FINE SEZIONE NOSTRE ULTIME USCITE (SEZIONE#6) */

    /* INIZIO SEZIONE LAVORI MIGLIORI (SEZIONE#7) */

    .sezione7#contenitore-sezione7 {
        position: relative;
        overflow: hidden;
        padding-bottom: 5%;
    }

    .sezione7#contenitoreFlex {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 90%;
        margin-left: 5%;
        margin-right: auto;
    }

    .sezione7.fumetto {
        width: 50%;
    }

    /* The Modal (background) */
    .sezione7#modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4);
        /* Black w/ opacity */
    }

    /* Modal Content/Box */
    .sezione7#modalContent {
        background-color: #fefefe;
        margin: 15% auto;
        /* 15% from the top and centered */
        padding: 2%;
        border: 3px solid black;
        width: 90%;
        /* Could be more or less, depending on screen size */
    }

    .sezione7#sezione7ImmagineModale {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
    }

    /* The Close Button */
    .sezione7.close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .sezione7.close:hover,
    .sezione7.close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    button.sezione7#buttonCatalogo {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 5%;
        margin-bottom: 5%;
        font-size: 2.5rem;
    }

    .sezione7#tornaSu {
        top: 1%;
    }

    /* INIZIO SEZIONE LAVORI MIGLIORI (SEZIONE#7) */

    /* INIZIO SEZIONE CHI SIAMO (SEZIONE#8) */

    .sezione8#contenitore-sezione8 {
        position: relative;
        overflow: hidden;
        padding-bottom: 5%;
    }

    img.sezione8 {
        width: 40%;
    }

    #sezione8imgRic {
        float: left;
        padding-right: 5%;
        padding-left: 5%;
        padding-bottom: 5%;
    }

    #sezione8imgRio {
        float: right;
        padding: 5%;
    }

    .sezione8#tornaSu {
        top: 2%;
    }

    /* INIZIO SEZIONE CHI SIAMO (SEZIONE#8) */

    /* INIZIO SEZIONE FOOTER (SEZIONE#9) */

    footer {
        background: linear-gradient(to right, rgba(255, 204, 0, 0.9), rgba(153, 204, 0, 0.9), rgba(255, 102, 0, 0.9));
        position: relative;
        overflow: hidden;
        padding-bottom: 5%;

    }

    img.footerSocial {
        width: 12%;
    }

    .footer-pulsantiSocial {
        display: inline-flex;
        flex-direction: row;
        z-index: 1;
        /* Inizia da destra */
        gap: 10px;
        /* Spazio tra i box */
        margin-left: 10%;
    }

    .footer-disclaimer {
        background-color: yellow;
        font-size: 1.6em;
        color: black;
        text-align: justify;
        line-height: 1.4;
        padding: 20px;
    }

    #footer-contact {
        margin-left: 10%;
        font-size: 2.5rem;
    }

    .footer-disclaimer a {
        color: blue;
        text-decoration: underline;
    }

    .footer#tornaSu {
        top: 1.8%;
    }

    /* FINE SEZIONE FOOTER (SEZIONE#9) */

}


/* STYLE PER I DESKTOP */

@media (min-width: 1367px) {

    /* STILE GENERALE */

    p {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    /* SEZIONE HEADER */

    header {
        width: 100%;
        background: linear-gradient(to right, rgba(255, 204, 0, 0.9), rgba(153, 204, 0, 0.9), rgba(255, 102, 0, 0.9));
    }

    /* INTESTAZIONE + LOGO */

    div#contenitore-logo {
        display: flex;
        flex-direction: column;
    }

    a#url-sito {
        text-align: center;
        font-size: 1.5rem;
    }

    p#motto-sito {
        text-align: center;
        font-size: 1.5rem;
    }

    img#immagine-logo {
        width: 40%;
        height: auto;
        margin-left: 30%;
        margin-right: auto;
        margin-top: 5%;
    }

    /* BARRA MENU + PULSANTI SOCIAL */

    .barra-header {
        display: flex;
        flex-direction: row;
        padding-top: 5%;
        padding-bottom: 5%;
        margin-left: 5%;
        margin-right: 5%;
    }

    /* PULSANTE MENU */

    .header-pulsanteMenu {
        width: 100%;
        object-fit: contain;
    }

    #menuToggle {
        background-color: black;
        color: white;
        padding: 10px 20px;
        cursor: pointer;
        border: none;
        font-size: 1.6rem;
        /*margin-bottom: 10px;*/
    }

    /* PULSANTI SOCIAL */

    .social {
        width: 18%;
        height: auto;
        object-fit: contain;
        /* mantiene le proporzioni senza tagliare l'immagine */
        transition: transform 0.2s ease;
    }

    .header-pulsantiSocial {
        display: inline-flex;
        flex-direction: row;
        /*
justify-content: flex-end; */
        /* Inizia da destra */
        gap: 10px;
        /* Spazio tra i box */
    }

    /* MODALE MENU */

    /* The Modal (background) */
    #headerContenitoreModale {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        left: 0;
        top: 0;
        width: 100vw;
        /* Full width */
        height: 100vh;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(194, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.9);
        /* Black w/ opacity */
    }

    /* Modal Content/Box */
    #headerContenutoModale {
        box-sizing: border-box;
        background-color: rgb(0, 0, 0);
        margin-top: 10%;
        padding: 2%;
        width: 75%;
        margin-left: 12.5%;
        margin-right: 0;
        /*border: 3px solid black;*/

    }

    /* The Close Button */
    .header-chiusura {
        color: #aaa;
        float: left;
        font-size: 50px;
        font-weight: bold;
    }

    .header-chiusura:hover,
    .header-chiusura:focus {
        color: rgb(255, 255, 255);
        text-decoration: none;
        cursor: pointer;
    }

    nav.menu-hidden#mainMenu {
        display: flex;
        flex-direction: column;
    }

    nav#mainMenu {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
        background-color: black;
        padding: 10px;
        transition: max-height 0.3s ease;
        overflow: hidden;
        height: fit-content;
    }

    nav#mainMenu button {
        background-color: #444;
        color: yellow;
        border: none;
        padding: 8px 16px;
        cursor: pointer;
        border-radius: 6px;
        font-size: 1.5rem;
        transition: background-color 0.2s ease;
        width: 100%;
    }

    nav#mainMenu button:hover {
        background-color: #666;
    }

    nav#mainMenu a {
        color: white;
        text-decoration: none;
        font-weight: bold;
    }

    nav#mainMenu.show {
        max-height: fit-content;
    }

    .subMenuHomePage>button {
        width: 50%;
    }

    /* FINE SEZIONE HEADER */

    /* INIZIO SEZIONE TITOLO SITO (SEZIONE#1) */

    div#contenitore-sezione1 {
        display: flex;
        flex-direction: column;
    }

    img.sezione1 {
        margin-bottom: -15%;
    }

    img.sezione1#nome1,
    img.sezione1#nome2 {
        width: 90%;
        margin-left: 5%;
        margin-right: auto;
    }

    img.sezione1#nome3 {
        margin-bottom: 5%;
    }

    /* FINE SEZIONE TITOLO SITO (SEZIONE#1) */

    /* INIZIO SEZIONE PRESENTAZIONE NOSTRO SITO (SEZIONE#2) */

    div.sezione2#contenitore-sezione2 {
        position: relative;
        display: flex;
        flex-direction: column;
        padding-bottom: 5%;
    }

    div.sezione2#parte1,
    div.sezione2#parte2,
    div.sezione2#parte3 {
        display: flex;
        flex-direction: column;
    }

    video.sezione2#videoParte1,
    video.sezione2#videoParte2,
    video.sezione2#videoParte3 {
        margin-top: 10%;
        margin-bottom: 10%;
        width: 80%;
        margin-left: auto;
        margin-right: 10%;
    }

    @keyframes stretch {
        0% {
            transform: scaleX(1);
        }

        50% {
            transform: scaleX(1.5);
        }

        100% {
            transform: scaleX(1);
        }
    }

    .sezione2#tornaSu {
        top: 0%
    }

    /* VIGNETTA1 */

    #contenitore-video1,
    #contenitore-video2,
    #contenitore-video3 {
        position: relative;
        display: inline-block;
    }

    #videoParte1,
    #videoParte2,
    #videoParte3 {
        display: block;
        width: 100%;
        height: auto;
    }

    #vignettaVideo1,
    #vignettaVideo2,
    #vignettaVideo3 {

        height: auto;
        position: absolute;

        /* distanza dall'alto del video */

        /* distanza da sinistra */
        transform: translate(-50%, -50%);
        transform: scaleX(2.0);

        background: none;
        /* niente sfondo */
        border: none;
        /* niente bordo */
        padding: 0;
        /* nessun padding */
        text-shadow: 2px 2px 5px black;
        /* migliora la leggibilità sul video */

        /*background: white;
padding: 10px 15px;
border-radius: 15px;*/
        font-family: 'Comic Sans MS', cursive;
        font-size: 16px;
        /*box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);*/
    }

    #vignettaVideo1 {
        width: 25%;
        top: 1%;
        left: 60%;
    }

    #vignettaVideo2 {
        width: 25%;
        top: 3%;
        left: 51%;
    }

    #vignettaVideo3 {
        width: 27%;
        top: 1%;
        left: 58%;
    }

    #testo-vignetta1,
    #testo-vignetta2,
    #testo-vignetta3 {
        text-align: center;
        height: auto;
        position: absolute;
        /* distanza dall'alto del video */

        /* distanza da sinistra */
        transform: translate(-50%, -50%);

        background: none;
        /* niente sfondo */
        border: none;
        /* niente bordo */
        padding: 0;
        /* nessun padding */
        text-shadow: 2px 2px 5px black;
        /* migliora la leggibilità sul video */

        /*background: white;
padding: 10px 15px;
border-radius: 15px;*/
        font-family: 'Comic Sans MS', cursive;
        font-size: 2rem;
        /*box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);*/
    }

    #testo-vignetta1 {
        width: 40%;
        top: 6%;
        left: 73%;
    }

    #testo-vignetta2 {
        width: 40%;
        top: 8%;
        left: 63%;
    }

    #testo-vignetta3 {
        width: 40%;
        top: 6%;
        left: 71%;
    }

    /* FINE SEZIONE PRESENTAZIONE NOSTRO SITO (SEZIONE#2) */

    /* INIZIO SEZIONE PRESENTAZIONE NOSTRI OC (SEZIONE#3) */

    div.sezione3#contenitore-sezione3 {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-bottom: 5%;
    }

    h2.sezione3#titoloSezione3 {
        padding-top: 2%;
        padding-bottom: 2%;
        text-align: center;
        background-color: gold;

    }

    #contenitoreSliderSezione3 {
        float: left;
        position: relative;
        overflow: hidden;
        width: 40%;
        margin-left: 10%;
        margin-right: 5%;
        padding-top: 2%;
        padding-bottom: 2%;
    }

    div.sezione3#contenitoreSlideOC {
        display: flex;
        transition: transform 0.5s ease-in-out;
        width: 100%*7;
        flex-shrink: 0;
        flex-direction: row;
        flex-wrap: nowrap;

    }

    img.sezione3 {
        flex-shrink: 0;
        width: 100%;

    }

    #contenitore-sezione3>p {
        margin-left: 10%;
        margin-right: 10%;
        padding-top: 0;
        text-align: justify;
    }

    .sezione3#tornaSu {
        top: 0%;
    }

    /* FINE SEZIONE PRESENTAZIONE NOSTRI OC (SEZIONE#3) */

    /* INIZIO SEZIONE NOSTRI LAVORI E PATREON (SEZIONE#4) */

    h2.sezione4#titoloSezione4 {
        text-align: center;
        background-color: gold;
    }

    img.sezione4#samplePatreon {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
    }

    img.sezione4#sampleDeviantArt {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
    }

    div.sezione4#contenitore-sezione4 {
        position: relative;
        width: 100%;
        padding-bottom: 5%;
    }

    div.sezione4#contenitorePatreon,
    div.sezione4#contenitoreDeviantArt {
        display: inline-flex;
        flex-direction: row;
        justify-content: center;
        margin-left: 5%;
        margin-right: 5%;
        column-gap: 2%;
    }

    img.sezione4#logoPatreon,
    img.sezione4#logoDeviantArt {
        width: 10%;
        height: auto;
        object-fit: contain;
        /* mantiene le proporzioni senza tagliare l'immagine */
        transition: transform 0.2s ease;
    }

    button.sezione4#buttonPaginaPatreon {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
        margin-top: 5%;
        margin-bottom: 5%;
        font-size: 1.4rem;
    }

    button#buttonPatreon.sezione4,
    button#buttonDeviantArt.sezione4 {
        font-size: 1.5rem;
    }

    .sezione4#tornaSu {
        top: 1%;
    }

    /* FINE SEZIONE NOSTRI LAVORI E PATREON (SEZIONE#4) */

    /* INIZIO SEZIONE NOSTRE COLLEZIONI (SEZIONE#5) */

    div.sezione5#contenitore-sezione5 {
        position: relative;
        width: 100%;
        padding-bottom: 5%;
    }

    /* Position the image container (needed to position the left and right arrows) */
    .sezione5#container-slideShow {
        position: relative;
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
    }

    /* Hide the images by default */
    .sezione5#mySlides {
        display: none;
    }

    /* Add a pointer when hovering over the thumbnail images */
    .cursor {
        cursor: pointer;
    }


    /* Container for image text */
    .sezione5#caption-container {
        text-align: center;
        background-color: #222;
        padding: 2px 16px;
        color: white;
    }

    .sezione5#row:after {
        content: "";
        display: table;
        clear: both;
    }

    /* 2 columns side by side */
    .sezione5#column {
        float: left;
        width: 50%;
    }

    /* Add a transparency effect for thumnbail images */
    .demo {
        opacity: 0.6;
    }

    .active,
    .demo:hover {
        opacity: 1;
    }

    .sezione5#tornaSu {
        top: 1.2%;
    }

    /* FINE SEZIONE NOSTRE COLLEZIONI (SEZIONE#5) */

    /* INIZIO SEZIONE NOSTRE ULTIME USCITE (SEZIONE#6) */

    div.sezione6#contenitore-sezione6 {
        position: relative;
        overflow: hidden;
        padding-bottom: 5%;
    }

    #contenitoreSliderSezione6 {
        width: 45%;
        margin-left: 27.5%;
        margin-right: auto;
        overflow: hidden;
    }

    div.sezione6#contenitoreSlideUltimiFumetti {
        display: flex;
        transition: transform 0.5s ease-in-out;
        width: 100%*7;
        flex-direction: row;
        flex-wrap: nowrap;

        /*flex-shrink: 0;*/
    }

    img.sezione6 {
        flex-shrink: 0;
        width: 100%;
    }

    button.sezione6#buttonCatalogo {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 5%;
        margin-bottom: 5%;
        font-size: 2rem;
    }

    .sezione6#tornaSu {
        top: 1.8%;
    }

    /* FINE SEZIONE NOSTRE ULTIME USCITE (SEZIONE#6) */

    /* INIZIO SEZIONE LAVORI MIGLIORI (SEZIONE#7) */

    .sezione7#contenitore-sezione7 {
        position: relative;
        overflow: hidden;
        padding-bottom: 5%;
    }

    .sezione7#contenitoreFlex {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 90%;
        margin-left: 5%;
        margin-right: auto;
    }

    .sezione7.fumetto {
        width: 50%;
    }

    /* The Modal (background) */
    .sezione7#modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4);
        /* Black w/ opacity */
    }

    /* Modal Content/Box */
    .sezione7#modalContent {
        background-color: #fefefe;
        margin: 15% auto;
        /* 15% from the top and centered */
        padding: 2%;
        border: 3px solid black;
        width: 90%;
        /* Could be more or less, depending on screen size */
    }

    .sezione7#sezione7ImmagineModale {
        width: 80%;
        margin-left: 10%;
        margin-right: auto;
    }

    /* The Close Button */
    .sezione7.close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .sezione7.close:hover,
    .sezione7.close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    button.sezione7#buttonCatalogo {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 5%;
        margin-bottom: 5%;
        font-size: 2rem;
    }

    .sezione7#tornaSu {
        top: 1%;
    }

    /* INIZIO SEZIONE LAVORI MIGLIORI (SEZIONE#7) */

    /* INIZIO SEZIONE CHI SIAMO (SEZIONE#8) */

    .sezione8#contenitore-sezione8 {
        position: relative;
        overflow: hidden;
        padding-bottom: 5%;
    }

    img.sezione8 {
        width: 40%;
    }

    #sezione8imgRic {
        float: left;
        padding-right: 5%;
        padding-left: 5%;
        padding-bottom: 5%;
    }

    #sezione8imgRio {
        float: right;
        padding: 5%;
    }

    .sezione8#tornaSu {
        top: 0%;
    }

    /* INIZIO SEZIONE CHI SIAMO (SEZIONE#8) */

    /* INIZIO SEZIONE FOOTER (SEZIONE#9) */

    footer {
        background: linear-gradient(to right, rgba(255, 204, 0, 0.9), rgba(153, 204, 0, 0.9), rgba(255, 102, 0, 0.9));
        position: relative;
        overflow: hidden;
        padding-bottom: 5%;

    }

    img.footerSocial {
        width: 12%;
    }

    .footer-pulsantiSocial {
        display: inline-flex;
        flex-direction: row;
        z-index: 1;
        /* Inizia da destra */
        gap: 10px;
        /* Spazio tra i box */
        margin-left: 10%;
    }

    .footer-disclaimer {
        background-color: yellow;
        font-size: 1.2em;
        color: black;
        text-align: justify;
        line-height: 1.4;
        padding: 20px;
    }

    #footer-contact {
        margin-left: 10%;
        font-size: 1.5rem;
    }

    .footer-disclaimer a {
        color: blue;
        text-decoration: underline;
    }

    .footer#tornaSu {
        top: 1.8%;
    }

    /* FINE SEZIONE FOOTER (SEZIONE#9) */

}