@charset "UTF-8";

/* ===============================================================
 Layout
================================================================*/

.header--primary .container,
.header__bottom .container,
.footer--primary .container,
.section--focus .container,
.knowledge-base {
  position: relative;
  max-width: 61rem;
  margin: 0 auto;
  padding: 0 .8rem;
  width: 100%;
}

/* main > .container {
  position: relative;
  z-index: 1;
} */

.container-divider {
  border-top: 1px solid #ddd;
  margin-bottom: 20px;
}

.md-content__inner {
  padding-top: 1rem;
}


/*****************************************************************
 Desktop & bigger 
*****************************************************************/

/* 945px */
@media screen and (min-width: 60em) {

  body > main {
    min-height: 65vh;
  }

}


/*****************************************************************
 Wide & bigger 
*****************************************************************/

/* 1220px */
@media (min-width: 76.1875em) {

  /* Layout */

  /* .container {
    padding: 0;
    width: 90%;
  } */

}


/*****************************************************************
 xl
*****************************************************************/

/* 1585px */
@media (min-width: 100em) {

  .md-sidebar {
    width: 13.5rem;
  }

  .md-sidebar--secondary:not([hidden])~.md-content>.md-content__inner {
    margin-left: 3.25rem;
  }

  .md-sidebar--primary:not([hidden])~.md-content>.md-content__inner {
    margin-right: 3.25rem;
  }

  /* since we changed the html font-size, rem sizing has changed
    so we need to compensate: 137.5% became 125% = 1.25% diff */

  .md-grid {
    max-width: 76.25rem; /* 61rem * 1.25 */
  }

}