.header, main, footer { padding-right: 1em; padding-left: 1em; }

@media all and (min-width: 62em) { .header, main, footer { padding-left: 0; padding-right: 0; } }

html, body, .with-sticky-footer { height: 100%; }

.sticky-footer-container { display: flex; flex-direction: column; }

.highlighted { display: flex; justify-content: center; }

main { flex: 1 0 auto; }

footer { flex-shrink: 0; }

body { width: 100%; margin: 0 auto; }

main aside { padding: 1em; }

@media all and (max-width: 36em) { main aside { padding: 0; display: none; background: #333333cc; width: 100vw; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; }
  main aside nav, main aside .facet { border: 50px solid #333333cc; background: white; margin: 0 !important; padding: 0; }
  main aside nav ul, main aside .facet ul { margin: 0 !important; }
  main aside nav h2, main aside .facet h2 { display: none; }
  main aside nav a, main aside .facet a { padding: 1em; border-bottom: 1px solid #ccc; }
  main aside nav .is-active, main aside .facet .is-active { background: #1d2124; color: #FFF !important; font-weight: 700; }
  main aside nav .facets-soft-limit-link, main aside .facet .facets-soft-limit-link { display: block; } }

@media all and (min-width: 36em) { main aside { grid-area: lside; display: block !important; } }

/* HEADER GRID */
.header { display: block; position: relative; padding-top: 10px; padding-bottom: 10px; border-bottom: 2px solid #DBE2E6; width: 100%; }

@media all and (min-width: 62em) { .header > div { padding: 0 1em; display: flex; justify-content: space-between; } }

/* MAIN GRID */
main { display: grid; grid-template-columns: 0px auto; grid-template-areas: "lside content"; position: relative; }

@media all and (min-width: 36em) { main { grid-template-columns: 250px auto; grid-column-gap: 1rem; max-width: 1200px; padding: 0; } }

@media all and (min-width: 62em) { main { grid-column-gap: 4rem; margin: 1em auto; width: 100%; } }

main .layout-content { grid-area: content; }

@supports not (display: grid) { main { max-width: 1200px; margin: 0 auto; }
  @media all and (min-width: 62em) { main { margin: 2em auto; } }
  @media all and (min-width: 36em) { main aside { float: left; margin-right: 20px; width: 250px; display: block !important; } }
  @media all and (min-width: 36em) { main .layout-content { float: right; width: 600px; } } }

@media all and (-ms-high-contrast: none) { main { max-width: 1200px; margin: 0 auto; } }

@media all and (-ms-high-contrast: none) and (min-width: 62em) { main { margin: 2em auto; } }

@media all and (-ms-high-contrast: none) and (min-width: 36em) { main aside { float: left; margin-right: 20px; width: 250px; display: block !important; } }

@media all and (-ms-high-contrast: none) and (min-width: 36em) { main .layout-content { float: right; width: 600px; } }

/* FOOTER */
footer { clear: both; padding-top: 1rem; padding-bottom: 1rem; font-size: 1rem; }

footer .footer__separator { display: none; }

@media all and (min-width: 62em) { footer { text-align: center; }
  footer .footer__separator { display: inline-block; padding: 0 5px; } }

footer .footer__block { margin: 1em; width: 100%; }

@media all and (min-width: 62em) { footer .footer__block { width: auto; display: inline-block; vertical-align: middle; margin: 0; font-size: 1rem; }
  footer .footer__block > div { display: inline-block; }
  footer .footer__block > nav { display: inline-block; padding-right: 20px; position: relative; }
  footer .footer__block > nav:after { content: "-"; display: inline-block; padding: 0 5px; position: absolute; top: 0; right: 0; } }