/* corpo */


  /* maxi video */
  div.maxiVideo {margin-bottom: 1rem; position: relative; z-index: 0}
    div.maxiVideo figure {margin: 0; position: relative; z-index: 1}
    div.maxiVideo figcaption {background: rgba(255,255,255,0.85); bottom: 0; color: #444D3C; font: 700 1.1rem/2rem "Roboto", sans-serif; letter-spacing: 0.05rem; padding: 0.5rem 0; position: absolute; text-align: center; width: 100%; z-index: 2}


  /* strilli */
    div.strilli .strillo a {background: #4D4D4F}
    div.strilli .strillo:hover a {background: #231F20}
      div.strilli .strillo a {color: #FFF; display: block; font: 1.2rem/1.2rem "Roboto", sans-serif; letter-spacing: .05rem; margin-bottom: 1px; padding: .4rem .5rem; width: 100%}
      div.strilli .strillo:last-child a {margin-bottom: 0}


  /* navigazione */
  section#navigazione {padding: 0 .5rem .5rem}
    section#navigazione nav {border-bottom: 1px solid #E6E6E6; margin-bottom: 5px}
      section#navigazione nav:last-child {border-bottom: 0; margin-bottom: 0}
    section#navigazione .breadcrumbs {margin-bottom: 0; margin-top: -0.2rem}
    section#navigazione .breadcrumbs:not(*:root) {margin-top: -0.15rem}
      section#navigazione .breadcrumbs li {font-size: 0.8rem; line-height: 1.2; text-transform: none}
      section#navigazione .breadcrumbs li span.last {color: #b0b0b0}
      .breadcrumbs li:not(:last-child)::after {content: ">"; margin: 0 .5rem; top: -1px}
      section#navigazione .breadcrumbs a {color: #333}
        section#navigazione .breadcrumbs a:hover, section#navigazione .breadcrumbs a.current {color: #F60}

  section#desc_marca {line-height: 1rem; margin-bottom: 2rem}



  /* categorie */
  section#categorie {border-right: 1px solid #F3F3F3; border-bottom: 1px solid #F3F3F3; font-size: .9rem; margin-bottom: 2rem; padding: 0 .1rem .5rem 0}
  section#categorie ul {list-style: none; margin: 0}
  section#categorie ul a {color: #000}
  section#categorie ul a:hover, section#categorie ul a.active {color: #F60 !important}
  section#categorie ul a.active {font-weight: bold}

  section#categorie ul.lvl1 > li > a {font-weight: bold}

  section#categorie ul.lvl2 {margin-bottom: .8rem}
  section#categorie ul.lvl2 > li {line-height: 1.5; margin-bottom: 0}
  section#categorie ul.lvl2 > li > a {font-size: .95em}
  section#categorie ul.lvl2 .spazio, section#categorie ul.lvl2 .spazio2 {display:none; }
  section#categorie ul.lvl2 .spazio2 {width: 12px; }
  section#categorie ul.lvl2 .fa-angle-right {display: inline-block; width: 9px}

  section#categorie ul.lvl3 {margin: 0 0 .5rem .8rem}
  section#categorie ul.lvl3 > li {line-height: 1.5; margin-bottom: 0}
  section#categorie ul.lvl3 > li > a {font-size: .9em}

  section#categorie ul.lvl4 {margin: 0 0 .5rem 1rem}
  section#categorie ul.lvl4 > li {line-height: 1.5; margin-bottom: 0}
  section#categorie ul.lvl4 > li > a {font-size: .85em}
  section#categorie ul.lvl1 li,section#categorie ul.lvl2 li, section#categorie ul.lvl3 li,section#categorie ul.lvl4 li { line-height:1rem; margin-top:8px; }


  /* ordinamento */
  #ordinamento  {margin-top: 0.3rem}

  section#ordinamento label, section#ordinamento select {margin-top: 0}
  section#ordinamento .order-price a:hover, section#ordinamento .order-price a.attivo {color: #F60}
  section#ordinamento .order-price i {border: 1px solid #ccc; padding: .3rem; margin-top: -.1rem}
  section#ordinamento .order-price p {margin-right: 5px}


  /* cloud categorie ricerca  */
  #catCloud  {background: #f7f7f7; line-height: 1.7; margin-bottom: 0.3rem; padding: 10px;}
  section#catCloud h3 {font-size: 15px; font-weight: bold; margin-bottom: 0}
  section#catCloud a {color: #060; display: inline-block; margin-right: 1rem;}
  section#catCloud a:hover {color: #f60; font-size: 13px; font-weight: bold}


  /* prodotti */
  section#prodotti {background: #FFF; padding: .5rem 1rem 0; position: relative}

    /* anteprime categorie */
    div.anteprimaCat {margin-bottom: 2rem}
    div.anteprimaCat h2 {color: #000; font-size: 1.1rem; font-weight: bold}
    div.anteprimaCat p {display: block; margin-bottom: 1rem}
    div.anteprimaCat .bottone {background: #000; color: #FFF; display: inline-block; font-size: .95rem; font-weight: bold; padding: 1em}


    /* prodotti normali */
    section#prodotti .prodotto {margin-bottom: 2rem}
      section#prodotti .prodotto a {background: #FFF; display: block; position: relative; overflow: hidden}
        section#prodotti .prodotto a div.wrapImg {background: #F8F8F8; height: 0; margin-bottom: .25rem; overflow: hidden; padding-bottom: 118.421052631% /* (height/width)*100 */; position: relative}
        section#prodotti .prodotto a div.wrapImg.nonDisp::after {
          content: "Momentaneamente non disponibile";
          position: absolute;
          bottom: 0;
          left: 0;
          line-height: 1.5;
          color: #fff;
          font-size: 15px;
          font-weight: bold;
          padding: 5px;
          background-color: #797979;
          text-align: center;
          text-transform: uppercase;
          display: block;
          width: 100%;
          z-index: 2;
        }
        section#prodotti .prodotto a div.wrapImg.nonDisp img {filter: opacity(50%)}
        section#prodotti .prodotto a img {left: 0; position: absolute; top: 0; width: 100%}
        section#prodotti .prodotto a div.wrapColori {min-height: 1.3rem; overflow: hidden; text-align: center}
        section#prodotti .prodotto a div.wrapColori i {display: inline-block; text-shadow: 1px 1px 1px #000}
          section#prodotti .prodotto a div.wrapColori img {height: 1rem; margin-bottom: .5rem; position: relative; width: 1px}
          section#prodotti .prodotto a div.wrapColori img.colori {height: 12px; margin-top: 0.36rem; width: 12px}
        section#prodotti .prodotto a div.prezzi {border-top: 1px solid #C9C9C9; padding-top: 0.25rem}
        @media screen and (max-width:640px) {
          section#prodotti .prodotto a div.prezzi {border-top: 0; border-bottom: 0; padding: 0}
        }
          section#prodotti .prodotto a .prezzo1 {color: #333; font: .7rem "Roboto", sans-serif}
            section#prodotti .prodotto a .prezzo1 span {text-decoration: line-through}
          section#prodotti .prodotto a .prezzo2 {font: 900 1.05rem/1rem "Roboto", sans-serif; color: #060}
        section#prodotti .prodotto a div.spedizione {height: 20px; overflow: hidden}
          section#prodotti .prodotto a div.spedizione .gratis {display: block; color: #F60; font-size: .7rem; line-height: 1.5}
          section#prodotti .prodotto a div.spedizione .prezzo {color: #666; line-height: .8rem; text-align: right; text-decoration: line-through}
        @media screen and (max-width:640px) {
          section#prodotti .prodotto a div.spedizione {height: auto}
          section#prodotti .prodotto a div.spedizione .gratis {font-size: .85rem}
        }
        section#prodotti .prodotto a p.descrizione {color: #000; height: 90px; line-height: .85rem; margin-bottom: 0}
        section#prodotti .prodotto select.selectTaglie {font-size: .75rem; height: 1.4rem; padding-top: .1rem; padding-bottom: .1rem}

        /* hover fade gallery prodotti */
        [class^="product-img-hover-"] { position: relative; width: 100%; height: 0; padding-bottom: 118.3%; overflow: hidden; }
        [class^="product-img-hover-"] img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease-in-out; }
        [class^="product-img-hover-"] img:first-child { opacity: 1; }







    /* pappe */
    section#prodotti .pappa {border-bottom: 1px solid #E6E6E6; margin-bottom: 1rem; padding-bottom: 1rem}
    section#prodotti .pappa h2 {color: #060; font-size: 1rem; font-weight: bold; line-height: 1.15rem; margin-bottom: 1rem}
    section#prodotti .pappa .testo {font-size: .8rem; line-height: .7; margin-top: .5rem; text-align: center}
      section#prodotti .pappa .testo strong {color: #000; display: block; margin-bottom: -.3rem}
    section#prodotti .pappa th {background: #DBDBDB; color: #3B1B01; font: 400 .7rem/.5 "Roboto", sans-serif; text-transform: uppercase}
    section#prodotti .pappa td {color: #000; font-size: .8rem; padding: .3rem .625rem .3rem}
      section#prodotti .pappa .td1 {position: relative}
        section#prodotti .pappa span.prezzoTop {background: #F60; border-radius: .5rem; bottom: 25%; color: #FFF; font-size: .65rem; font-weight: bold; margin-right: 1rem; padding: .3rem .5rem; position: relative; display: inline-block;margin:5px 0;}
      section#prodotti .pappa .td2 .col1 {color: #666; font-size: .7rem}
        section#prodotti .pappa .td2 .col1 span {color: #060; font: 700 1.1rem/1.1 "Roboto", sans-serif; display: block}
          section#prodotti .pappa .td2 .col1 span.noCad {margin-top: .3rem; }
        section#prodotti .pappa .td2 .col1 strong {color: #000; font-family:"Roboto", sans-serif}
        section#prodotti .pappa .td2 .col2 .button {background: #107710; color: #FFF; font-size: .75rem; font-weight: bold; margin-bottom: 0; padding: .5rem}
          section#prodotti .pappa .td2 .col2 .button:hover {background: #060; color: #FEFEFE}
      section#prodotti .pappa .td3 {font-size: .8rem}


  /* conferma aggiunta carrello */
  div.reveal h2 {color: #060 !important; font-size: 1.2rem; font-weight: bold; margin-bottom: 1rem}
  div.reveal p {font-size: .9rem}
  div.reveal .button.grigio {margin-bottom: 1rem}


  /* paginazione */
  section#paginatore .n_prodotti {margin-top: 4px}

  .pagination li {display: inline-block}
  .pagination li.pagination-previous strong, .pagination li.pagination-next strong {display: inline-block; margin-right: 5px}
  .pagination li.pagination-next strong {margin-right: 0; margin-left: 5px}



/* --------------------------- */



/* Small only */
@media screen and (max-width: 39.9375em) {
  /* prodotti */
          section#prodotti .prodotto a .prezzo1 {margin-bottom: 0.5rem}

  /* cloud categorie ricerca */
  section#catCloud a {display: block; margin-right: 0;}          
}

/* Medium and up */
@media screen and (min-width: 40em) {
  /* prodotti */
          section#prodotti .prodotto a .prezzo2 {text-align: right}


}


/* Large and up */
@media screen and (min-width: 64em) {
  /* strilli */
      div.strilli .strillo a {font-size: 1rem; line-height: 1rem};
      section#prodotti .pappa span.prezzoTop {position: absolute; right: 0; }
                  section#categorie ul.lvl2 .spazio, section#categorie ul.lvl2 .spazio2 {display: inline-block;width: 9px}


}


  /* corsi online - colonna sinistra */
  #corsi-col-sx {
    margin-bottom: 2rem;
  }
  
  #corsi-col-sx .corsi-intro {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
  }
  
  #corsi-col-sx .corsi-intro-img {
    flex-shrink: 0;
    margin-right: 10px;
  }
  
  #corsi-col-sx .corsi-intro-img img {
    width: 60px;
    height: auto;
    display: block;
  }
  
  #corsi-col-sx .corsi-intro-testo {
    flex: 1;
  }
  
  #corsi-col-sx .corsi-intro-testo p {
    margin-bottom: 0;
    line-height: 1.4;
  }

  #corsi-col-sx .corsi-intro-testo p strong {
    color: #f60
  }
  
  #corsi-col-sx .corsi-lista {
    display: block;
    margin-top: 1rem;
  }
  
  #corsi-col-sx .corso-item {
    display: flex;
    align-items: flex-start;
    padding: 0.5rem 0;
    background: #fff;
    border-bottom: 1px dotted #e0e0e0;
    text-decoration: none;
    color: inherit;
  }
  
  #corsi-col-sx .corso-item:hover {
    background: #f7f7f7;
    text-decoration: none;
  }
  
  #corsi-col-sx .corso-item:first-child {
    border-top: 1px dotted #e0e0e0;
  }
  
  #corsi-col-sx .corso-item:last-child {
    border-top: 1px dotted #e0e0e0;
  }
  
  #corsi-col-sx .corso-icona {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
  
  #corsi-col-sx .corso-icona img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #90EE90;
    display: block;
  }
  
  #corsi-col-sx .corso-titolo {
    flex: 1;
    line-height: 1.3;
    color: #F60;
    font-size: 0.85rem;
    font-weight: bold;
  }