/*
 * Compatibilidad: el plugin Helix3 3.x genera clases de rejilla de Bootstrap 4
 * (col-8, col-4, col-lg-*), pero esta plantilla (2.5.6) carga Bootstrap 3.
 * Sin esto, por debajo de 1200px el logo y el menu se apilan, la cabecera
 * desborda sus 90px y, al hacerse fija (sticky), tapa el contenido.
 * Se replica el comportamiento anterior (col-xs-* / col-sm-* / col-md-*).
 */
.col-4,
.col-8 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
}
.col-4 {
  width: 33.33333333%;
}
.col-8 {
  width: 66.66666667%;
}

@media (min-width: 768px) {
  .col-lg-3,
  .col-lg-6,
  .col-lg-9,
  .col-lg-12 {
    float: left;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-12 {
    width: 100%;
  }
}

/*
 * Menu principal: con 8 elementos no cabia junto al icono del menu lateral
 * y bajaba por debajo de la cabecera (90px). Al fijarse la cabecera al hacer
 * scroll, quedaba superpuesto al contenido. Se reduce el espaciado para que
 * quepa en una sola linea.
 */
@media (min-width: 992px) {
  #sp-header .sp-megamenu-parent > li > a,
  #sp-header .sp-megamenu-parent > li > span {
    padding: 0 7px;
    letter-spacing: 0.5px;
  }
}
@media (min-width: 1200px) {
  #sp-header .sp-megamenu-parent > li > a,
  #sp-header .sp-megamenu-parent > li > span {
    padding: 0 12px;
    letter-spacing: 1px;
  }
}