/* -------------------------------------------------------------
 * GRID
 * Reemplaza a bootstrap-grid.min.css (51K). Contiene solo las 11
 * clases que el proyecto usa de verdad, de las 1100 que traia
 * Bootstrap: .container, .row, .col-3, .col-9, .col-sm-2, .col-sm-3,
 * .col-md-4, .col-md-6, .col-md-8, .d-none, .justify-content-between.
 *
 * Se mantiene como archivo aparte (y no dentro de nuevo.css) porque
 * base/header.php invierte el orden de carga a proposito: en
 * lecciones/ver este archivo va DESPUES de nuevo.css para que gane el
 * .container de aca, y en el resto de la app va ANTES para que gane el
 * max-width de nuevo.css. Fusionarlo con nuevo.css romperia esa
 * distincion.
 * ------------------------------------------------------------- */

/* Venian en bootstrap-grid v4.4.1 y no son opcionales: ninguna otra hoja del
 * proyecto declara box-sizing global, asi que estas dos reglas son las que
 * ponen border-box en todo el documento y definen el ancho real de
 * .container, .row y las columnas. Sin ellas todo pasa a content-box y los
 * anchos cambian en todos los breakpoints. */
html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}
*,
::after,
::before {
  box-sizing: inherit;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-3,
.col-9,
.col-md-4,
.col-md-6,
.col-md-8,
.col-sm-2,
.col-sm-3 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}
.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}
@media (min-width: 576px) {
  .col-sm-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}
@media (min-width: 768px) {
  .col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
}

.d-none {
  display: none !important;
}
.justify-content-between {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}