/* Stili schermo responsivi */

/* Cellulari */
@media screen and (max-width: 450px) {
  html {
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;
  }

  body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-position: 150px -80px; /* Cielo */
  }

  p, div {
    font-size: 1.1rem;
    overflow-wrap: anywhere;
    overflow-wrap: break-word;
  }

  #main,
  #wrap,
  #piepagina {
    width: 99%;
    margin: 1px auto;
    padding: 0;
  }

  #barra-intro {
    display: block;
    float: none;
  }

  #piepagina {
    background-position: 570px; /* Erba */
  }

  #piepagina .lista-orizzontale {
    padding-bottom: 0;
    margin-bottom: 0;
    font-size: 90%;
  }

  input[type="submit"],
  input[type="text"],
  input[type="url"],
  input[type="number"],
  input[type="email"] {
    max-width: 98% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 1.1rem;
    resize: horizontal;
  }

  textarea {
    max-width: 99% !important;
    width: 98%;
    padding-left: 2px !important;
    padding-right: 2px !important;
    margin-left: 0 !important;
    margin-right: 1px !important;
    font-size: 1.1rem;
    resize: vertical;
  }

  @supports (box-sizing: border-box) {
    input[type="text"],
    input[type="url"],
    input[type="number"],
    input[type="email"],
    textarea {
      padding: 0.5rem !important;
      box-sizing: border-box;
    }
  }

  label {
    font-size: 1.1rem;
  }

  #contenuto ul,
  #contenuto ol,
  #barra-laterale ul {
    list-style-position: outside;
    text-indent: 0 !important;
  }

  img, video, iframe {
    max-width: 99% !important;
  }

  #racconto img,
  #articolo img,
  article img,
  section img {
    max-width: 90%;
    height: auto;
    float: none !important;
    display: block;
    margin: 1em auto !important;
  }

  #contenuto.wide,
  #contenuto {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #intestazione,
  #intestazione-home {
    background-position: 0 top !important;
    background-size: 100% auto !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
  }

  #testata {
    background-position: 0 top !important;
    background-size: 100% auto;
    padding: 0;
  }

  ul#informazioni {
    padding: 38% 0 0 0 !important;
    margin: 0 0 10px 0 !important;
    text-align: center !important;
  }

  ul#informazioni-home {
    padding: 31% 0 0 0 !important;
    margin: 0 0 10px 0 !important;
    text-align: center !important;
  }

  ul#informazioni li,
  ul#informazioni-home li {
    font-size: 0 !important;
    width: 100% !important;
  }

  ul#informazioni li a,
  ul#informazioni-home li a {
    display: inline !important;
    font-size: 14px !important;
    margin: 2px 5px !important;
  }

  ul#informazioni li:last-child,
  ul#informazioni-home li:last-child {
    display: block !important;
    margin-top: 6px !important;
  }

  ul#informazioni li:last-child a,
  ul#informazioni-home li:last-child a {
    font-size: 18px !important;
  }

  .listamc {
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-gap: normal;
    -moz-column-gap: normal;
    -webkit-column-gap: normal;
  }

  #navigatore {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto 1em auto !important;
  }

  #posizione {
    width: 100% !important;
  }

  #link-rapidi {
    display: none !important;
  }

  #intro-home,
  #intro,
  #intro h2 {
    padding-left: 0 !important;
    width: 100% !important;
    font-size: 95%;
  }

  #menu-rubriche {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #menu-crea-e-condividi,
  #menu-comunica-e-gioca,
  #menu-scopri-e-impara,
  #menu-cerca-e-trova {
    width: 100% !important;
    background-size: 100% auto;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  #menu-crea-e-condividi h2,
  #menu-comunica-e-gioca h2,
  #menu-scopri-e-impara h2,
  #menu-cerca-e-trova h2 {
    width: 99% !important;
  }

  #menu-crea-e-condividi ul,
  #menu-comunica-e-gioca ul,
  #menu-scopri-e-impara ul,
  #menu-cerca-e-trova ul {
    width: 99% !important;
    padding: 80px 0 0 0 !important;
    text-align: center;
  }

  #menu-crea-e-condividi li,
  #menu-comunica-e-gioca li,
  #menu-scopri-e-impara li,
  #menu-cerca-e-trova li {
    width: 100% !important;
    display: block !important;
  }

  #menu-rubriche li {
    width: 50% !important;
    margin: 0;
    padding: 0;
    float: left;
  }

  #barra-laterale {
    float: none;
    width: 99% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 auto 0.5em auto !important;
  }

  .riquadrievidenziati {
    padding: 0 !important;
  }

  #elenco-voci .riquadro2 img,
  #elenco-articoli #toc {
    float: none;
    margin: 0 auto;
  }

  #elenco-voci ul, #elenco-voci li {
    list-style-type: none;
    list-style-position: inside;
    margin-left: 0;
  }

  .elencotv td:nth-child(1)::before { content: "Nome: "; }
  .elencotv td:nth-child(2)::before { content: "Canale: "; }

  .lista-eventi > ul, .lista-eventi ul > li {
    list-style-position: inside;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .forum-nick,
  .bacheca-nick {
    width: 100% !important;
    float: none !important;
    margin: 0 auto 1em auto !important;
  }

  .bacheca-msg,
  .bacheca-msg-importante,
  .forum-msg,
  .forum-msg-importante {
    float: none !important;
    width: 100% !important;
  }

  #menu-discussioni tr th:nth-child(2),
  #menu-discussioni tr td:nth-child(2),
  #menu-sondaggi tr th:nth-child(2),
  #menu-sondaggi tr td:nth-child(2) {
    display: none;
  }

  #menu-discussioni tbody tr,
  #menu-sondaggi tbody tr {
    border-bottom: 2px solid red;
  }

  .bacheca-msg img,
  .bacheca-msg-importante,
  .forum-msg img,
  .forum-msg-importante img {
    padding: 0 !important;
    margin: 0 !important;
  }

  .forum-cat-info, .sondaggi-cat-info {
    text-align: center !important;
  }

  .forum-cat-ultimo {
    display: block;
    margin: 0 auto -1em auto;
  }

  .blog-info {
    text-align: center;
  }

  .ugc-firma {
    margin-left: 0 !important;
  }

  tr, td {
    width: 98% !important;
    display: block !important;
    padding: 5px !important;
  }

  thead, th {
    display: none;
  }

  tr.filo td {
    text-align: center !important;
  }

  table td.forum-cat-totali::before,
  table td.forum-cat-totali::after {
    clear: both !important;
    content: " ";
  }

  table td.forum-cat-totali,
  table td.center {
    width: 100%;
    display: inline;
  }

  .menu-img-categoria {
    display: block;
    float: none;
    margin: 0 auto 0.5em auto;
  }

  .elenco-scadenza { display: none; }
  .elenco-titolo::before { content: "Titolo: "; }
  .elenco-autore::before { content: "Autore: "; }
  .elenco-data::before { content: "Data: "; }
  .elenco-ultimo::before { content: "Ultimo msg: "; }
  .elenco-tot::before { content: "Messaggi: "; }
  .elenco-voti::before { content: "Voti: "; }

  #elenco-sondaggi td, #elenco-discussioni td {
    margin-bottom: -0.7em !important;
  }

  #toc {
    width: 85% !important;
    font-size: medium;
  }

  .pagination a {
    font-size: 105%;
  }

  .domanda-titolo {
    text-align: left !important;
    font-size: 102%;
  }

  .avviso-https {
    width: 95% !important;
  }

  #intestazione-articolo h4, #intestazione-articolo p,
  #intestazione-intervista h4, #intestazione-intervista p,
  #intestazione-racconto h4, #intestazione-racconto p {
    font-size: inherit !important;
  }

  #qa-ricerca {
    text-align: left !important;
  }

  #qa-ricerca #search {
    width: 98%;
  }

  #qa-ricerca label {
    margin-top: 0.5rem;
    display: block;
  }

  #qa-ricerca label[for="search"] {
    display: inline;
  }

  /* Compatibilita' con VoiceOver */

  #elenco-voci ul li::before,
  .lista-eventi ul > li {
    content: "\200B";
  }

  .gomitolini-calendario img {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-right: -5px !important;
    width: auto;
    max-width: initial;
  }
}

/* Tablet e netbook */
@media screen and (min-width: 451px) and (max-width: 760px) {
  html {
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;
  }

  body {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background-position: 180px -80px;
  }

  p, div {
    font-size: 1.1rem;
    overflow-wrap: anywhere;
    overflow-wrap: break-word;
  }

  #main {
    overflow: hidden;
  }

  #main,
  #wrap,
  #piepagina {
    width: 99%;
    padding: 0 !important;
    margin: 1px auto !important;
  }

  #piepagina .lista-orizzontale {
    font-size: 90%;
  }

  #barra-intro {
    display: block;
    float: none;
  }

  input[type="submit"],
  input[type="text"],
  input[type="url"],
  input[type="number"],
  input[type="email"] {
    max-width: 98% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 1.1rem;
    resize: horizontal;
  }

  textarea {
    max-width: 99% !important;
    width: 98%;
    padding-left: 2px !important;
    padding-right: 2px !important;
    margin-left: 0 !important;
    margin-right: 1px !important;
    font-size: 1.1rem;
    resize: vertical;
  }

  @supports (box-sizing: border-box) {
    input[type="submit"],
    input[type="text"],
    input[type="url"],
    input[type="number"],
    input[type="email"],
    textarea {
      padding: 0.5rem !important;
      box-sizing: border-box;
    }
  }

  label {
    font-size: 1.1rem;
  }

  #contenuto ul, #contenuto ol,
  #barra-laterale ul {
    list-style-position: outside;
    text-indent: 0 !important;
  }

  img, video, iframe {
    max-width: 99% !important;
  }

  #racconto img, #articolo img {
    height: auto;
  }

  #contenuto.wide,
  #contenuto {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #intestazione,
  #intestazione-home {
    background-position: 0 top !important;
    position: relative !important;
    width: 100%;
    height: auto !important;
    padding: 36px 0 0 0;
    margin: 0;
  }

  #intestazione-home {
    background-size: 100% auto !important;
    max-width: 600px;
  }

  #testata {
    background-position: 0 top !important;
    background-size: 100% auto;
    max-width: 434px;
  }

  ul#informazioni {
    padding: 100px 0 0 0 !important;
    margin: 0 0 10px 0 !important;
    text-align: center !important;
    width: 400px;
  }

  ul#informazioni-home {
    padding: 31% 0 0 0 !important;
    margin: 0 0 10px 0 !important;
    text-align: center !important;
  }

  ul#informazioni li,
  ul#informazioni-home li {
    font-size: 0 !important;
    width: 100% !important;
  }

  ul#informazioni li a,
  ul#informazioni-home li a {
    display: inline !important;
    font-size: 14px !important;
    margin: 2px 5px !important;
  }

  ul#informazioni li:last-child,
  ul#informazioni-home li:last-child {
    display: block !important;
    margin-top: 6px !important;
  }

  ul#informazioni li:last-child a,
  ul#informazioni-home li:last-child a {
    font-size: 18px !important;
  }

  .listamc {
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-gap: normal;
    -moz-column-gap: normal;
    -webkit-column-gap: normal;
  }

  #navigatore {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto 1em auto !important;
  }

  #posizione {
    width: 100% !important;
  }

  #link-rapidi {
    display: none !important;
  }

  #intro-home,
  #intro,
  #intro h2 {
    width: 100% !important;
  }

  #menu-rubriche {
    width: 100% !important;
    padding: 0;
    margin: 0;
    clear: both;
  }

  #menu-crea-e-condividi,
  #menu-comunica-e-gioca,
  #menu-scopri-e-impara,
  #menu-cerca-e-trova {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    clear: both;
  }

  #menu-crea-e-condividi h2,
  #menu-comunica-e-gioca h2,
  #menu-scopri-e-impara h2,
  #menu-cerca-e-trova h2 {
    width: 100% !important;
    max-width: 369px;
    background-size: 100% auto;
  }

  #menu-crea-e-condividi ul,
  #menu-comunica-e-gioca ul,
  #menu-scopri-e-impara ul,
  #menu-cerca-e-trova ul {
    width: 96% !important;
    padding: 75px 0 0 30px;
    clear: both;
    white-space: normal !important;
  }

  #menu-rubriche {
    margin-top: 2rem;
  }

  #menu-rubriche li {
    width: 33% !important;
    margin: 0;
    padding: 0;
    float: left;
  }

  #barra-laterale {
    display: block;
    float: none;
    width: 99% !important;
    height: auto !important;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 auto 0.5em auto !important;
  }

  .lista-eventi > ul, .lista-eventi ul > li {
    list-style-position: inside;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .forum-nick,
  .bacheca-nick {
    width: 100% !important;
    float: none !important;
    margin: 0 auto 1em auto !important;
  }

  .forum-msg,
  .bacheca-msg,
  .bacheca-msg-importante,
  .forum-msg-importante {
    float: none !important;
    width: 100% !important;
  }

  .forum-msg img,
  .bacheca-msg img,
  .bacheca-msg-importante,
  .forum-msg-importante img {
    padding: 0 !important;
    margin: 0 !important;
  }

  #elenco-discussioni tr th:nth-child(2),
  #elenco-discussioni tr td:nth-child(2),
  #elenco-sondaggi tr th:nth-child(2), #elenco-sondaggi tr td:nth-child(2),
  #elenco-sondaggi tr th:nth-child(4), #elenco-sondaggi tr td:nth-child(4) {
    display: none;
  }

  .ugc-firma {
    margin-left: 0 !important;
  }

  #elenco-voci .riquadro2 img,
  #elenco-articoli #toc {
    float: none;
    margin: 0 auto;
  }

  #toc {
    width: 85% !important;
    font-size: medium;
  }

  .pagination a {
    font-size: 105%;
  }

  .avviso-https {
    width: 95% !important;
  }

  #intestazione-articolo h4, #intestazione-articolo p,
  #intestazione-intervista h4, #intestazione-intervista p,
  #intestazione-racconto h4, #intestazione-racconto p {
    font-size: inherit !important;
  }

  #qa-ricerca {
    text-align: left !important;
  }

  #qa-ricerca #search {
    width: 98%;
  }

  #qa-ricerca label {
    margin-top: 0.5rem;
    display: block;
  }

  #qa-ricerca label[for="search"] {
    display: inline;
  }

  /* Compatibilita' con VoiceOver */

  #elenco-voci ul li::before,
  .lista-eventi ul > li {
    content: "\200B";
  }
}


/* Desktop grandi */
@media screen and (min-width: 1000px) {
  #main, #wrap, #piepagina {
    width: 99% !important;
    max-width: 1536px !important;
  }

  #piepagina {
    max-width: 100% !important;
    overflow-x: hidden;
  }

  #intro, #contenuto {
    width: 75% !important;
  }

  #contenuto.wide {
    width: 100% !important;
  }

  #barra-laterale {
    width: 23% !important;
  }

  #piepagina {
    width: 100% !important;
  }
}