/* Media queries per varie risoluzioni (mobile-first approach) */

/* default */
@media screen and (min-width: 0px) {
    h1, .sh1 { font-size:23px; }
    h2, .sh2 { font-size:20px; }
    h3, .sh3 { font-size:17px; }
    h4, .sh4 { font-size:15px; }
    h5, .sh5 { font-size:11px; }
    main { width: 80%;  }
    nav { width: 20%; padding: 1%; }
    nav ul li span { display: none; }
    nav ul li { height: 15vw; width:15vw; }
    nav ul li { height: 100%; width:auto; border-radius: 0px; }
    #sidebar { width: 100%; padding-left: 0%; }
}	

/* Schermi solitamente di 480px */
@media screen and (min-width: 440px) {
    h1, .sh1 { font-size:23px; }
    h2, .sh2 { font-size:20px; }
    h3, .sh3 { font-size:17px; }
    h4, .sh4 { font-size:15px; }
    h5, .sh5 { font-size:11px; }
    main { width: 80%;  }
    nav { width: 20%; padding: 1%; }
    nav ul li span { display: none; }
    nav ul li { height: 15vw; width:15vw; }
    nav ul li { height: 100%; width:auto; border-radius: 0px; }
    #sidebar { width: 100%; padding-left: 0%; }
}

/* Schermi solitamente di 600px */
@media screen and (min-width: 560px) {
    h1, .sh1 { font-size:35px; }
    h2, .sh2 { font-size:27px; }
    h3, .sh3 { font-size:20px; }
    h4, .sh4 { font-size:15px; }
    h5, .sh5 { font-size:12px; }
    main { width: 85%;  }
    nav { width: 15%; padding: 1%; }
    nav ul li span { display: none; }
    nav ul li { height: 100%; width:auto; border-radius: 0px; }
    #centrale { width: 100%; padding-bottom: 20px; }
    #sidebar { width: 100%; padding-left: 0%; }
}

/* Schermi solitamente di 768px */
@media screen and (min-width: 720px) {
    h1, .sh1 { font-size:35px; }
    h2, .sh2 { font-size:27px; }
    h3, .sh3 { font-size:20px; }
    h4, .sh4 { font-size:15px; }
    h5, .sh5 { font-size:12px; }
    main { width: 90%;  }
    nav { width: 10%; padding: 1%; }
    nav ul li span { display: none; }
    nav ul li { height: 100%; width:auto; border-radius: 0px; }
    #centrale { width: 100%; padding-bottom: 20px; }
    #sidebar { width: 100%; padding-left: 0%; }
}

/* Schermi solitamente di 1024px o superiori */
@media screen and (min-width: 960px) {
    h1, .sh1 { font-size:35px; }
    h2, .sh2 { font-size:27px; }
    h3, .sh3 { font-size:23px; }
    h4, .sh4 { font-size:17px; }
    h5, .sh5 { font-size:12px; }
    main { width: 90%;  }
    nav { width: 10%; padding: 1%; }
    nav ul li span { display: block; }
    nav ul li { height: 100%; width:auto; border-radius: 0px; }
    #centrale { width: 55%; }
    #sidebar { width: 45%; padding-left: 2%; }
}

@media screen and (min-width: 1400px) {
    h1, .sh1 { font-size:35px; }
    h2, .sh2 { font-size:27px; }
    h3, .sh3 { font-size:20px; }
    h4, .sh4 { font-size:17px; }
    h5, .sh5 { font-size:12px; }
    main { width: 90%;  }
    nav { width: 10%; padding: 1%; }
    nav ul li span { display: block; }
    nav ul li { height: 100%; width:auto; border-radius: 0px; }
    #centrale { width: 55%; }
    #sidebar { width: 45%; padding-left: 2%; }
}