/* Keep every breadcrumb position below the fixed site header. */
body.sticky-header #sp-section-bread,
body.sticky-header #sp-reemake-navigation {
  padding-top: 60px;
}

/*
 * The template normally reserves 100px above the main content. Once the
 * breadcrumb section reserves the header height, only normal spacing is
 * required. The general-sibling selector also works when another section is
 * rendered between the breadcrumbs and #sp-main-body.
 */
body.sticky-header #sp-section-bread ~ #sp-main-body,
body.sticky-header #sp-reemake-navigation ~ #sp-main-body {
  padding-top: 20px !important;
}

/* The compact mobile header is approximately 50px high. */
@media (max-width: 600px) {
  body.sticky-header #sp-section-bread,
  body.sticky-header #sp-reemake-navigation {
    padding-top: 50px;
  }

  body.sticky-header #sp-section-bread ~ #sp-main-body,
  body.sticky-header #sp-reemake-navigation ~ #sp-main-body {
    padding-top: 15px !important;
  }
}