/* =============================================================================
 * Naranza Toco - 2024.2 - (c) Andrea Davanzo - License MPL v2.0 - naranza.org
 * ========================================================================== */

*, *:before, *:after { box-sizing: border-box; }

.toco-img {
  max-width: 100%;
  height: auto;
  display: block;
}

.toco-break { flex-basis: 100%; width: 0px; height: 0; overflow: hidden;}

/* flex containers */
.toco-colr,
.toco-col,
.toco-rowr,
.toco-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.toco-container {
  width: 100vw;
  max-width: 100vw;
}

.toco-nw {
  flex-wrap: nowrap;
}
.toco-colr { flex-direction: column-reverse; }
.toco-col { flex-direction: column; }
.toco-rowr { flex-direction: row-reverse; }
.toco-row { flex-direction: row; }

/* flex items */
.toco-auto { flex: 1 1 100%;}
.toco-flex { flex: 1 1 0%;}

.toco-1,
.toco-1-2,
.toco-2-2,
.toco-1-3,
.toco-2-3,
.toco-3-3,
.toco-1-4,
.toco-2-4,
.toco-3-4,
.toco-4-4,
.toco-1-5,
.toco-2-5,
.toco-3-5,
.toco-4-5,
.toco-5-5,
.toco-1-12,
.toco-2-12,
.toco-3-12,
.toco-4-12,
.toco-5-12,
.toco-6-12,
.toco-7-12,
.toco-8-12,
.toco-9-12,
.toco-10-12,
.toco-11-12,
.toco-12-12,
.toco-1-24,
.toco-2-24,
.toco-3-24,
.toco-4-24,
.toco-5-24,
.toco-6-24,
.toco-7-24,
.toco-8-24,
.toco-9-24,
.toco-10-24,
.toco-11-24,
.toco-12-24,
.toco-13-24,
.toco-14-24,
.toco-15-24,
.toco-16-24,
.toco-17-24,
.toco-18-24,
.toco-19-24,
.toco-20-24,
.toco-21-24,
.toco-22-24,
.toco-23-24,
.toco-24-24 {
  flex: 1 1 100%;
  width: 100%;
}

.toco-sm-1-24 { flex: 1 1 4.1667%; width: 4.1667%; }
.toco-sm-1-12, .toco-sm-2-24 { flex: 1 1 8.3333%; width: 8.3333%; }
.toco-sm-3-24 { flex: 1 1 12.5%; width: 12.5%; }
.toco-sm-2-12, .toco-sm-4-24 { flex: 1 1 16.6667%; width: 16.6667%;}
.toco-sm-1-5 { flex: 1 1 20%; width: 20%; }
.toco-sm-5-24 { flex: 1 1 20.8333%; width: 20.8333%; }
.toco-sm-1-4, .toco-sm-3-12, .toco-sm-6-24 { flex: 1 1 25%; width: 25%; }
.toco-sm-7-24 { flex: 1 1 29.1667%; width: 29.1667%; }
.toco-sm-1-3, .toco-sm-4-12, .toco-sm-8-24 { flex: 1 1 33.3333%; width: 33.3333%; }
.toco-sm-9-24 { flex: 1 1 37.5000%; width: 37.5000%; }
.toco-sm-2-5 { flex: 1 1 40%; width: 40%; }
.toco-sm-5-12, .toco-sm-10-24 { flex: 1 1 41.6667%; width: 41.6667%; }
.toco-sm-11-24 { flex: 1 1 45.8333%; width: 45.8333%; }
.toco-sm-1-2, .toco-sm-2-4, .toco-sm-6-12, .toco-sm-12-24 { flex: 1 1 50%; width: 50%; }
.toco-sm-13-24 { flex: 1 1 54.1667%; width: 54.1667%; }
.toco-sm-7-12, .toco-sm-14-24 { flex: 1 1 58.3333%; width: 58.3333%; }
.toco-sm-3-5 { flex: 1 1 60%; width: 60%; }
.toco-sm-15-24 { flex: 1 1 62.5%; width: 62.5%; }
.toco-sm-2-3, .toco-sm-8-12, .toco-sm-16-24 { flex: 1 1 66.6667%; width: 66.6667%;}
.toco-sm-17-24 { flex: 1 1 70.8333%; width: 70.8333%; }
.toco-sm-3-4, .toco-sm-9-12, .toco-sm-18-24 { flex: 1 1 75%; width: 75%; }
.toco-sm-19-24 { flex: 1 1 79.1667%; width: 79.1667%; }
.toco-sm-4-5 { flex: 1 1 80%; width: 80%;}
.toco-sm-10-12, .toco-sm-20-24 { flex: 1 1 83.3333%; width: 83.3333%;}
.toco-sm-21-24 { flex: 1 1 87.5%; width: 87.5%;}
.toco-sm-11-12, .toco-sm-22-24 { flex: 1 1 91.6667%; width: 91.6667%; }
.toco-sm-23-24 { flex: 1 1 95.8333%; width: 95.8333%; }
.toco-sm-1, .toco-sm-2-2, .toco-sm-3-3, .toco-sm-4-4, .toco-sm-5-5, .toco-sm-12-12, .toco-sm-24-24 { flex: 1 1 100%; width: 100%; }


.toco-none { flex: 0 0 auto; }
.toco-initial { flex: 0 1 auto; }


.toco-container {
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 80em) { /* min-width 1280px, large screens */

  .toco-auto { flex: 1 0 0%;}
  .toco-flex { flex: 1 0 0%;}

  .toco-1-24 { flex: 0 0 4.1667%; width: 4.1667%; }
  .toco-1-12, .toco-2-24 { flex: 0 0 8.3333%; width: 8.3333%; }
  .toco-3-24 { flex: 0 0 12.5%; width: 12.5%; }
  .toco-2-12, .toco-4-24 { flex: 0 0 16.6667%; width: 16.6667%;}
  .toco-1-5 { flex: 0 0 20%; width: 20%; }
  .toco-5-24 { flex: 0 0 20.8333%; width: 20.8333%; }
  .toco-1-4, .toco-3-12, .toco-6-24 { flex: 0 0 25%; width: 25%; }
  .toco-7-24 { flex: 0 0 29.1667%; width: 29.1667%; }
  .toco-1-3, .toco-4-12, .toco-8-24 { flex: 0 0 33.3333%; width: 33.3333%; }
  .toco-9-24 { flex: 0 0 37.5000%; width: 37.5000%; }
  .toco-2-5 { flex: 0 0 40%; width: 40%; }
  .toco-5-12, .toco-10-24 { flex: 0 0 41.6667%; width: 41.6667%; }
  .toco-11-24 { flex: 0 0 45.8333%; width: 45.8333%; }
  .toco-1-2, .toco-2-4, .toco-6-12, .toco-12-24 { flex: 0 0 50%; width: 50%; }
  .toco-13-24 { flex: 0 0 54.1667%; width: 54.1667%; }
  .toco-7-12, .toco-14-24 { flex: 0 0 58.3333%; width: 58.3333%; }
  .toco-3-5 { flex: 0 0 60%; width: 60%; }
  .toco-15-24 { flex: 0 0 62.5%; width: 62.5%; }
  .toco-2-3, .toco-8-12, .toco-16-24 { flex: 0 0 66.6667%; width: 66.6667%;}
  .toco-17-24 { flex: 0 0 70.8333%; width: 70.8333%; }
  .toco-3-4, .toco-9-12, .toco-18-24 { flex: 0 0 75%; width: 75%; }
  .toco-19-24 { flex: 0 0 79.1667%; width: 79.1667%; }
  .toco-4-5 { flex: 0 0 80%; width: 80%;}
  .toco-10-12, .toco-20-24 { flex: 0 0 83.3333%; width: 83.3333%;}
  .toco-21-24 { flex: 0 0 87.5%; width: 87.5%;}
  .toco-11-12, .toco-22-24 { flex: 0 0 91.6667%; width: 91.6667%; }
  .toco-23-24 { flex: 0 0 95.8333%; width: 95.8333%; }
  .toco-1, .toco-2-2, .toco-3-3, .toco-4-4, .toco-5-5, .toco-12-12, .toco-24-24 { flex: 0 0 100%; width: 100%; }
}

@media only screen and (min-width: 80em) { /* min-width 1280px, large screens */
  body {
    font-size: 1.1rem;
  }
  .toco-container {
    max-width: 1140px;
  }
}

@media only screen and (min-width: 90em) { /* min-width 1440px, xlarge screens */
  body {
    font-size: 1.2rem;
  }
  .toco-container {
    max-width: 1320px;
  }
}

@media only screen and (min-width: 120em) { /* min-width 1920px, xxlarge screens */
  body {
    font-size: 1.4rem;
  }
  .toco-container {
    max-width: 1760px;
  }
}