@media only screen and ( max-width: 1536px ) {

    :root {
    
        --content-width: 1080px;

    }


    /* ---------- Main ----------- */

    h2 { font-size: 46px; }


    /* ---------- Hero ----------- */

    #hero { height: 680px; }

    nav .logo a { width: 164px; }

    .inner-hero h1 { font-size: 78px; }
    .inner-hero h3 { font-size: 17.5px; }

    .arduino { width: 430px; }


    /* ---- Course Description ---- */

    #course img { width: 500px; }
    .desc-margin { margin-bottom: 35px; }


    /* --------- Profiles --------- */

    #profiles { margin: 135px auto 115px; }
    .profile p { font-size: 15px; }

}



@media only screen and ( max-width: 1366px ) {

    :root {
    
        --content-width: 1040px;
        --nav-height: 110px;

    }


    /* ---------- Main ----------- */

    h2 { font-size: 43px; }


    /* ---------- Hero ----------- */

    .arduino { width: 425px; }
    .inner-hero h3 { font-size: 17px; }


    /* ---- Course Description ---- */

    #course img { width: 480px; }
    .desc-text p { font-size: 15.5px; }


    /* ---- Profiles ---- */

    #accordion { font-size: 15.5px; }


    /* ---------- Works ----------- */

    .carousel-cell-image {
        width: 370px;
        height: 370px;
    }


    /* ----- Contact + footer ----- */

    .lato-info{ height: 380px; }

    .finanziatori { 
        width: 410px;
        margin-bottom: 30px; 
    }

}



@media only screen and ( max-width: 1280px ) {

    :root {
    
        --content-width: 1040px;
        --nav-height: 110px;

    }


    /* ---------- Main ----------- */

    h2 { font-size: 41px; }


    /* ---------- Hero ----------- */

    .inner-hero h1 { font-size: 76px; }


    /* ---- Course Description ---- */

    #course img { width: 480px; }
    .desc-text { margin-left: 75px; }


    /* ---------- Works ----------- */

    .carousel-cell-image {
        width: 350px;
        height: 350px;
    }

    /* --------- Profiles --------- */

    #profiles { margin: 125px auto 105px; }


    /* ----- Contact + footer ----- */

    .lato-info{ height: 370px; }
    footer { padding: 70px 0 65px; }

}



@media only screen and ( max-width: 1150px ) {

    :root {
    
        --content-width: 90%;
        --nav-height: 100px;
        --pf-sec-width: 850px;

    }


    /* ---------- Main ----------- */

    h2 { font-size: 39px; }


    /* ---------- Hero ----------- */

    #hero { height: 650px; }

    nav .logo a { width: 150px; }

    .inner-hero h1 { font-size: 72px; }
    .inner-hero h3 { font-size: 16px; }

    .arduino { width: 400px; }


    /* ---- Course Description ---- */

    #course img { width: 450px; }


    /* --------- Profiles --------- */

    #profiles { margin: 125px auto 105px; }
    #accordion { font-size: 16px; }


    /* ---------- Works ----------- */

    .carousel-cell-image {
        width: 330px;
        height: 330px;
    }


    /* ----- Contact + footer ----- */

    #contacts { margin-bottom: 130px; }
    .lato-info{ height: 350px; }

    .finanziatori { 
        width: 370px;
        margin-bottom: 30px; 
    }

}



@media only screen and ( max-width: 1024px ) {

    :root {
    
        --pf-sec-width: 840px;

    }


    /* ---------- Main ----------- */

    h2 { font-size: 36px; }


    /* ---------- Hero ----------- */

    nav .logo a { width: 145px; }

    .inner-hero h1 { font-size: 66px; }
    .inner-hero h3 { font-size: 16px; }

    .arduino { width: 380px; }


    /* ---- Course Description ---- */

    #course img { 
        width: 45%;
        align-self: center;
    }
    .desc-text p { font-size: 14.5px; }


    /* --------- Profiles --------- */

    #profiles { margin: 130px auto 100px; }
    .profile p { font-size: 14.5px; }

    .profile:after {
        top: 4.2%;
        right: 5%;
        height: 11px;
        width: 11px;
        background-size: 11px 11px;
    }

    #accordion { font-size: 15px; }


    /* ----- Contact + footer ----- */

    #contacts { margin-bottom: 130px; }
    .lato-mappa { width: 47%; }

    .lato-info{ 
        height: 340px;
        font-size: 14.5px; 
    }

    .info-button { margin-bottom: 70px; }

    .finanziatori { 
        width: 340px;
        margin-bottom: 30px; 
    }

}



@media only screen and ( max-width: 962px ) {

    :root {
    
        --nav-height: 85px;
        --pf-sec-width: 800px;

    }


    /* ---------- Main ----------- */

    h2 { font-size: 33px; }


    /* ---------- Hero ----------- */

    #hero { height: 540px; }

    nav .logo a { width: 140px; }
    nav .link { font-size: 23px; }

    .inner-hero h1 { font-size: 56px; }
    .inner-hero h3 { font-size: 15px; }

    .arduino { width: 330px; }


    /* ---- Course Description ---- */

    #course img { width: 42%;}
    .desc-text p { font-size: 13.5px; }


    /* --------- Profiles --------- */

    #profiles { margin: 130px auto 95px; }
    .profile p { font-size: 13.5px; }

    .profiles-intro-inner {
        width: 550px; 
        margin: 40px auto;
        font-size: 14px; 
    }

    #accordion { font-size: 14.5px; }



    /* ---------- Works ----------- */

    .carousel-cell-image {
        width: 300px;
        height: 300px;
    }

    .works-intro { height: 200px; }

    .works-intro p { 
        font-size: 14px;
        width: 600px; 
    }

    #works { margin: 0 auto 180px;}
    



    /* ----- Contact + footer ----- */

    .info-button { padding: 4px 8px; }

    .finanziatori { 
        width: 340px;
        margin-bottom: 30px; 
    }

    footer { 
        padding: 60px 0;
        font-size: 12px;
    }

}



@media only screen and ( max-width: 896px ) {

    :root {
    
        --pf-sec-width: 740px;

    }

}



@media only screen and ( max-width: 780px ) {

    :root {

        --pf-numb: 5;

    }



    h2 { font-size: 3.8vw; }


    /* ---------- Hero ----------- */

    nav .logo a { width: 110px; }
    nav .link { font-size: 20px; }

    .inner-hero h1 { font-size: 6.3vw; }
    .inner-hero h3 { font-size: 1.8vw; }

    #hero { height: calc(10em + 42vw) }

    .arduino { width: 42%; }



    /* ---- Course Description ---- */

    #course { margin: calc(2em + 6vw) auto; }

    .desc-text { margin-left: 8%; }
    .desc-text p { font-size: 1.7vw; }
    .desc-text h2 { margin-bottom: calc(0.2em + 1vw); }



    /* --------- Profiles --------- */

    #profiles { 
        width: 80%;
        margin: 12vw auto;
    }

    .profiles-intro-inner { 
        width: 90%; 
        font-size: 2vw;
        margin: 5vw auto;
    }

    .profile { 
        width: 19.3%; 
        margin-top: 10px;
    }

    .profile img { 
        height: auto; 
        aspect-ratio: 1 / 1;
    }

    .profile-none { 
        display: block;
        visibility: hidden; 
    }

    #accordion { font-size: 11.5px; }

    .accordion-bt-container {
        width: 100%;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .accordion-bt-container span {
        padding: 2.5px 7px;
    }

    .accordion-cv {
        width: 100%;
        margin-top: 40px;
        margin-left: 0;
        display: flex;
        justify-content: center;
        padding: 2.5px 0;
        height: 28px;
    }


    /* ---------- Works ----------- */

    .works-intro { height: 30vw; }

    .works-intro p {
        width: 80%;
        font-size: 2vw;
    }

    .carousel-cell-image {
        width: 220px;
        height: 220px;
    }


    /* ----- Contact + footer ----- */

    .lato-mappa { width: 43%; }
    .lato-info { font-size: 2vw; }

}



@media only screen and ( max-width: 428px ) {

    :root {

        --pf-numb: 3;

    }


    h2 { font-size: 31px; }


    /* ---------- Hero ----------- */

    nav {
        padding-top: 1.5px;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        background-color: var(--blue-dark);
    }

    nav .link { display: none; }
    nav .hamburger { 
        display: flex; 
        font-size: 25px;
        margin-top: -0.2%;
    }

    nav.light { background-color: white; }

    nav .logo a { width: 140px; }
    nav .link { font-size: 23px; }

    #hero { height: 500px; }

    .cta-hero { width: 90%; }

    .inner-hero h1 { font-size: 50px; }
    .inner-hero h3 { font-size: 14px; }

    .arduino { display: none; }



    /* ---- Course Description ---- */

    #course { margin: 25px auto 0; }

    #course img { 
        width: 100%; 
        margin: 25px 0; 
    }

    .desc-margin { margin: 0; }

    .desc-text { 
        width: 100%;
        margin: 0 0 25px;
    }

    .desc-text p { font-size: 13px; }



    /* --------- Profiles --------- */

    #profiles { 
        width: 90%;
        margin: 100px auto 95px;
    }

    .profiles-intro-inner { 
        width: 90%; 
        font-size: 13px;
    }

    .profile { 
        width: 32.5%; 
        margin-top: 10px;
    }

    .profile-none { display: none; }

    #accordion { font-size: 13.5px; }

    .accordion-inner { padding: 6% 5% 7%; }

    .accordion-description { 
        width: 100%; 
        margin-bottom: 15px;
    }

    .accordion-bt-container {
        width: 100%;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .accordion-bt-container span {
        padding: 2.5px 7px;
    }

    .accordion-cv {
        width: 100%;
        margin-top: 40px;
        margin-left: 0;
        display: flex;
        justify-content: center;
        padding: 2.5px 0;
        height: 28px;
    }
    



    /* ---------- Works ----------- */

    .works-intro { height: 200px; }

    .works-intro p { 
        width: 100%; 
        font-size: 13px;
    }

    .carousel-cell-image {
        width: 250px;
        height: 250px;
    }




    /* ----- Contact + footer ----- */

    #contacts { 
        margin-bottom: 80px; 
        flex-wrap: wrap;
    }
    .lato-mappa { width: 100%; }

    .lato-info{ 
        width: 100%;
        height: 340px;
        font-size: 14.5px; 
        margin: 10px  15px;
    }

    .info-button { margin-bottom: 40px; }

    footer { padding: 60px 20px 55px; }

    .finanziatori { 
        width: 280px;
        margin-bottom: 30px; 
    }

}



@media only screen and ( max-width: 400px ) {

    #profiles { margin: 90px auto 90px; }
    #profiles p { font-size: 13px; }
    .profiles-intro-inner { width: 95%; }
}