@charset "UTF-8";

/* ===============================================================
 Git
================================================================*/

.md-header__source {
  width: auto;
  max-width: none;
  margin-left: 1rem;
}

.md-source {
  padding-top: .5rem;
  padding-bottom: .5rem;
  height: auto;
}

.md-source,
.md-source:visited {
  text-decoration: none;
  color: var(--color-white);
}

.md-source__icon {
  height: 1rem;
  padding-left: .8rem;
  border-left: 1px solid white;
}

.md-source__icon svg {
  margin-top: 0;
  margin-left: 0;
  height: 1rem;
  width: 1rem;
}

.md-source__icon+.md-source__repository {
  margin-left: 0;
  padding-left: 0;
  max-width: none;
  font-size: .8rem;
  line-height: 1rem;
  font-weight: var(--font-weight-bold);
}


/* ===============================================================
 Header
================================================================*/

/* top header */

.md-header {
  background-color: var(--color-primary);
}

.md-header__inner {
  display: flex;
  justify-content: flex-end;
}

/* main header */

.header--primary,
.header__bottom {
  color: var(--color-white);
  background-color: var(--color-primary);
}

.branding--header {
  display: flex;
  align-items: flex-start;
}

.branding__slogan--header {
  margin-left: 1rem; /* 20px */
  padding: .2rem .5rem;
  font-size: 0.7rem; /* 14px */
  font-weight: var(--font-weight-bold);
  line-height: .9rem;
  color: var(--color-primary-dark);
  background-color: var(--color-secondary);
  border-radius: 10px;
}

/* bottom header */

.header__bottom {
  position: relative;
  z-index: 1; /* make sure breadcrumb can partially overlap with content below */
  margin-bottom: 1.7rem; /*34*/
}

.header__bottom .container {
  padding-top: 2rem;
  padding-bottom: 2rem;
}


/* ===============================================================
 Social icons
================================================================*/

.header__bottom .social-icons {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-white);
  box-shadow: 0 0 13px 0px rgba(0,0,0,0.1);
  border-radius: 3px 0 0 3px;
  transition: all .25s ease;
}

.header__bottom .social-icons:hover {
  background: var(--color-secondary);
}

.social-icons__link {
	display: block;
  padding: .5rem;
  width: 2rem;
  height: 2rem;
  text-decoration: none;
  overflow: hidden;
  transition: all .25s ease;
}

.social-icons__link:hover {
  opacity: .65;
}

.social-icons__link:last-child {
  margin-bottom: 0;
}

.social-icons__link--phone {
  background: url('../../assets/images/phone-blue-20.png') center center no-repeat;
}

.social-icons__link--mail {
  background: url('../../assets/images/email-blue-20.png') center center no-repeat;
}

.social-icons__link .text {
	font-size: 0;
  position: absolute;
  left: -9999px;
}


/* ===============================================================
 Navigation
================================================================*/
/* 
.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}

.user-nav[aria-expanded="true"] {
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 1;
}

.user-nav[aria-expanded="true"] > a {
  display: block;
  margin: 20px;
} */

.nav-wrapper {
  display: none;
}

.nav-wrapper .md-tabs__list {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}

.nav-wrapper .md-tabs__item,
.nav-wrapper li {
  padding: 0;
  margin: 0 1rem 0 0;
  height: auto;
  font-weight: var(--font-weight-bold);
}

.nav-wrapper .md-tabs__item:last-child,
.nav-wrapper li:last-child {
  margin-right: 0;
}

.nav-wrapper .md-tabs__link,
.nav-wrapper a {
  padding: 0;
  width: auto;
  font-size: .8rem;
  line-height: 1.2;
  color: var(--color-white);
  border: 0;
  opacity: 1;
}

[dir="rtl"] .nav-wrapper a {
  padding: 0 0 0 20px;
}

.nav-wrapper a:hover,
.nav-wrapper a:active,
.nav-wrapper a:focus {
  background-color: transparent;
  color: var(--color-white);
  text-decoration: underline;
}

.nav-wrapper a:after {
  color: var(--color-secondary);
}

.nav-wrapper a.login {
  display: inline-block;
}

.nav-wrapper .icon-menu {
  border: 0;
  color: var(--color-secondary);
  cursor: pointer;
  display: inline-block;
  margin-right: 10px;
  padding: 0;
  width: auto;
}

[dir="rtl"] .nav-wrapper .icon-menu {
  margin-left: 10px;
  margin-right: 0;
}

.nav-wrapper .icon-menu:hover,
.nav-wrapper .icon-menu:active,
.nav-wrapper .icon-menu:focus {
  background-color: transparent;
  color: var(--color-secondary);
}

/* --------------------------------------------------------------
 Sub nav
---------------------------------------------------------------*/

.sub-nav {
  display: flex;
  /* flex-direction: column; */
  flex-direction: row;
  /* justify-content: space-between; */
  justify-content: flex-start;
  margin-bottom: 1.5rem;
  min-height: 2.5rem;
  padding-bottom: .75rem;
  display: none;
}

.sub-nav input[type="search"]::after {
  font-size: .75rem;
}


/* ===============================================================
 Breadcrumb
================================================================*/

.sub-nav--breadcrumbs {
  position: absolute;
  bottom: -.85rem; /* overlap with content below */
  left: .8rem; /* match padding on container */
}

.breadcrumbs {
  display: none;
  list-style: none;
  /* display: flex;
  flex-wrap: wrap; */
  margin: 0;
  padding: .2rem .6rem ;
  color: var(--color-primary);
  border-radius: 17px;
  background-color: var(--color-secondary-light-2);
}

.breadcrumbs li {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .8rem;
  line-height: 1.3rem;
}

.breadcrumbs li:last-child {
  font-weight: var(--font-weight-bold);
}

.breadcrumbs a,
.breadcrumbs a:visited {
  text-decoration: underline;
  color: var(--color-primary);
}

.breadcrumbs a:hover,
.breadcrumbs a:active {
  text-decoration: none;
  color: var(--color-primary-dark);
}


/* ===============================================================
 Footer
================================================================*/

.footer--primary {
  border-top: 1px solid #ddd;
  padding: 1rem 0;
}

.footer--primary .container {
  display: flex;
  justify-content: flex-end;
}

.footer--primary .logo {
  position: absolute;
  top: -1.65rem;
  left: 1rem;
}

.footer--primary .logo a {
  display: block;
}

.footer--primary .logo img {
  display: block;
  max-width: 2.25rem; /*45px*/
}

.footer--primary a,
.footer--primary a:visited {
  color: var(--color-primary);
}

.footer--primary .link--back {
  display: inline-block;
  font-size: 1rem;
  line-height: 1.5rem;
}

.footer--primary .link--back,
.footer--primary .link--back:visited {
  text-decoration: none;
}

.footer--primary .link--back .icon {
  display: inline-block;
  position: relative;
  top: 3px;
  margin-right: .3rem;
  width: .9rem;
  height: .9rem;
  background-position: 0 -18px;
}

.footer--primary .link--back .text {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
  transition: all .25s ease;
}

.footer--primary .link--back .text:hover {
  color: var(--color-primary-light);
}

.footer-language-selector {
  color: #78868e;
  display: inline-block;
  font-weight: 300;
}

.cookie-settings {
  font-size: 0.7rem;
  line-height: 1.5rem;
  display: inline-block;
  position: relative;
  text-align: center;
  margin-right: .3rem;
  margin-left: 5rem;
  height: .9rem;
  background-position: 0 -18px;
}

/* Focus banner
----------------------------------------------------------------*/

.page__bottom {
  margin: 2.5rem 0 0;
}

.section--focus {
  position: relative;
  padding: 2rem 0; /*40px*/
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-white);
  background-color: var(--color-primary);
}

.section--focus a,
.section--focus a:visited {
  color: var(--color-secondary);
}

.section--focus a:hover,
.section--focus a:active {
  color: var(--color-secondary-light);
}

.section--focus .graphic {
  display: none;
}

.block__title--focus {
  margin-bottom: 1.5rem;
  font-size: 1.75rem; /*35px*/
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
}

.section--focus .block__title--focus {
  color: var(--color-white);
}


/* ===============================================================
 Overview blocks
================================================================*/

/* Used in Homepage#categories and Community#topics */

.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}

/* #blocks-list {
  display: flex;
} */

.blocks-item {
  box-sizing: border-box;
  display: flex;
  /* flex: 1 0 340px; */
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: center;
  margin: 0 0 1rem;
  max-width: 100%;
  text-align: center;
}

.blocks-item > a {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  /* padding: 3rem; */
  height: 100%;
  align-items: center;
  color: var(--color-primary);
  background-color: var(--color-white);
  box-shadow: 0 0 13px 0 rgba(0,0,0,0.1);
  transition: transform 0.35s ease-in-out, color 0.35s ease-in-out, background-color 0.35s ease-in-out;
}

.blocks-item > a:hover {
  color: var(--color-primary);
  background-color: var(--color-secondary);
	transform: scale(1.03); 
}

.blocks-item:hover *,
.blocks-item:focus *,
.blocks-item:active * {
  color: var(--color-primary);
  text-decoration: none;
}

.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}

.blocks-item-internal .icon-lock::before {
  content: "\1F512";
  font-size: 15px;
  bottom: 5px;
  position: relative;
}

.blocks-item-internal a {
  color: var(--color-secondary);
}

.blocks-item-link,
.blocks-item-link:visited {
  text-decoration: none;
}

.blocks-item-link:hover,
.blocks-item-link:active,
.blocks-item-link:focus {
  text-decoration: none;
}

.blocks-item-title {
  /* margin-bottom: 1.5rem; */
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: var(--font-weight-normal);
  color: var(--color-primary);
}

.blocks-item-description {
  flex-grow: 1; /* push 'read-more' to the bottom for alingment */
  font-weight: var(--font-weight-normal);
  color: var(--color-secondary-dark);
}

/* .blocks-item-description:not(:empty) {
  margin-top: 10px;
} */

.blocks-item .read-more {
  position: relative;
}

.blocks-item .read-more .text {
  color: var(--color-secondary-dark);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 1px;
  text-decoration-color: var(--color-secondary);
}

.blocks-item .read-more .icon {
  display: inline-block;
  position: relative;
  top: 3px;
  margin-left: .3rem;
  width: .9rem;
  height: .9rem;
  background-position: -18px -18px;
}

.blocks-item > a:hover .read-more .text {
  color: var(--color-primary);
}

.blocks-item > a:hover .read-more .icon {
  background-position: -18px -18px;
}

/* Homepage specific*/

.section > section.blocks {
  margin: 0 1rem;
  /* margin-bottom: 2rem; */
}

.section h2 {
  margin-bottom: .5rem;
  text-align: center;
}


/* ===============================================================
 Page
================================================================*/

/* --------------------------------------------------------------
 Page header
---------------------------------------------------------------*/
/* 
.hero {
  background-image: url(//theme.zdassets.com/theme_assets/2172663/afcc301f9588869f22ae3aa4bfd8bfbc8225d0a7.jpg);
  background-position: center;
  background-size: cover;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}

.hero-inner {
  position: relative;
  max-width: 630px;
  margin: 0 auto;
  padding: 0 30px;
} */

.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: .5rem 0 2.5rem;
  min-height: 300px;
}

.page-header .section-subscribe {
  flex-shrink: 0;
  margin-bottom: .5rem;
}

.page-header h1 {
  flex-grow: 1;
}

.page-header-description {
  /* font-style: italic;
  font-weight: 300; */
  margin: 0 0 1.5rem 0;
  word-break: break-word;
}

.page-header .icon-lock::before {
  content: "\1F512";
  font-size: 1rem;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

/* --------------------------------------------------------------
 Sidebar nav
---------------------------------------------------------------*/




/* ===============================================================
 Category pages
================================================================*/

.category-container {
  display: flex;
}

.category-content {
  flex: 1;
}

.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 3.5rem;
}

.section-tree .section {
  flex: initial;
}

.md-typeset .section-tree-title,
.section-tree-title {
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 0;
  font-size: 1rem; /*20px*/
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
}

.section-tree-title a {
  text-transform: none;
  font-size: .9;
  font-weight: var(--font-weight-normal);
}

.section-tree-title a,
.section-tree-title a:visited {
  text-decoration: none;
  color: var(--color-primary);
}

.section-tree-title a:hover,
.section-tree-title a:active {
  color: var(--color-primary);
}

.section-tree .see-all-articles {
  display: block;
  padding: .75rem 0;
}

.article-list,
.md-typeset .article-list {
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.article-list-item,
.md-typeset .article-list-item {
  list-style: none;
  margin: 0 0 1rem 0;
  padding: 0;
  font-size: .8rem;
  line-height: 1.2;
}

.article-list-item a {
  display: block;
  position: relative;
  padding: 1.3rem 3rem 1.3rem 1.3rem;
  color: var(--color-primary);
  font-weight: bold;
  text-decoration: none;
  background-color: var(--color-white);
  box-shadow: 0 0 13px 0px rgba(0,0,0,0.1);
  transition: transform 0.35s ease-in-out, color 0.35s ease-in-out, background-color 0.35s ease-in-out;
}

.article-list-item a,
.article-list-item a:visited {
  /**/
}

.article-list-item a:hover,
.article-list-item a:active {
  color: var(--color-primary);
  background-color: var(--color-secondary);
  transform: scale(1.03);
}

.article-list-item .icon--arrow {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: .9rem;
  height: .9rem;
  background-position: -18px -18px;
  transform: translateY(-50%);
}

.article-list-item .icon-lock::before {
  vertical-align: baseline;
}

.icon-star::before {
  color: rgba(0, 44, 79, 1);
  font-size: 18px;
}


/* ===============================================================
 Section pages
================================================================*/

.section-container {
  display: flex;
}

.section-content {
  flex: 1;
}

.section-subscribe .dropdown-toggle::after {
  display: none;
}

.section-list {
  margin: 40px 0;
}

.section-list--collapsed .section-list-item:nth-child(1n + 6) {
  display: none;
}

.section-list-item {
  border-bottom: 1px solid #ddd;
  font-size: .8rem;
  padding: .75rem 0;
}

.section-list-item:first-child {
  border-top: 1px solid #ddd;
}

.section-list-item a {
  align-items: center;
  color: var(--color-secondary-dark);
  display: flex;
  justify-content: space-between;
}

.see-all-sections-trigger {
  cursor: pointer;
  display: block;
  padding: 15px;
  text-align: center;
}

.see-all-sections-trigger[aria-hidden="true"] {
  display: none;
}


/* ===============================================================
 Agency switch
================================================================*/

/* hide title visually */

.block--id-agencyswitch__wrapper {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  padding-right: 1rem;
  padding: .5rem 1rem .5rem .5rem;
}

.block--id-agencyswitch {
  position: relative;
  border-color: var(--color-white);
  color: var(--color-primary-dark);
}

.block--id-agencyswitch:hover .agency-switch__item,
.block--id-agencyswitch.js-open .agency-switch__item {
    max-height: 7.5rem;
}

.agency-switch__title {
  cursor: pointer;
  position: relative;
  padding: .4rem 1.75rem .3rem .95rem;
  font-size: .75rem;
  line-height: 1.2;
  color: var(--color-white);
  border: 1px solid;
  border-color: inherit;
  border-radius: .85rem;
  transition: all .25s ease;
}

.agency-switch__title .icon {
  position: absolute;
  top: 50%;
  right: .65rem;
  margin-top: 1px;
  color: inherit;
  transform: translateY(-50%) rotate(-90deg);
  width: .45rem;
  height: .59rem;
  background-position: -35px -54px;
}

.block--id-agencyswitch:hover .agency-switch__title,
.js-open > .agency-switch__title {
  color: var(--color-primary-dark);
  border-radius: .85rem .85rem 0 0;
  background-color: var(--color-white);
  border-color: var(--color-primary-dark);
}

.block--id-agencyswitch:hover .agency-switch__title .icon,
.js-open > .agency-switch__title .icon {
  background-position: -35px 0;
}

/* list */

.agency-switch__items {
  position: absolute;
  right: 0;
  top: 100%;
  width: 100%;
}

/* list item */

.agency-switch__item {
  display: block;
  overflow: hidden;
  max-height: 0;
  transition: all .25s ease;
}

/* list item content */

.agency-switch-item__content-wrapper {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: .25rem .75rem .35rem 1.35rem;
  border-width: 0 1px 1px;
  border-style: solid solid dashed;
  border-color: inherit;
  color: inherit;
  background-color: var(--color-white);
}

.field-agency-switch-items:last-child .agency-switch-item__content-wrapper  {
  border-bottom-style: solid;
  border-radius: 0 0 17px 17px;
}

.agency-switch-item__content-wrapper .subtitle {
  font-weight: var(--font-weight-bold);
}

.agency-switch-item__content-wrapper .field--name-field-link {
  flex: 1 0 auto;
  padding-left: rem(20);
  text-align: right;
}

.agency-switch-item__content-wrapper .field--name-field-link a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-indent: 110%;
  white-space: nowrap;
}

.agency-switch-item__content-wrapper .icon {
  flex: 1 0 auto;
  margin-top: .25rem;
  margin-right: .6rem;
  margin-left: -.6rem;
}

.agency-switch-item__content-wrapper .icon--arrow-right {
  width: .95rem;
  height: .9rem;
  background-position: -18px 0;  
}

.agency-switch-item__content {
  flex: 0 1 auto; 
}


/* ===============================================================
 Release notes
================================================================*/

/* these classes (apart from .label and .label--x) are set using custom JS
   see docs/_custom/js/extra.js
 */

.label-list,
.md-typeset .label-list {
  list-style: none;
  margin: 0 0 1rem 0;
  padding: 0;
  border: 1px solid #eaeaea;
}

.label-list__item,
.md-typeset .label-list__item {
  list-style: none;
  margin: 0;
  padding: .4rem;
  border-bottom: 1px solid #eaeaea;
}

.label-list__item:nth-child(odd),
.md-typeset .label-list__item:nth-child(odd) {
  background-color: var(--color-primary-light-2);
}

.label-list__item:last-child,
.md-typeset .label-list__item:last-child {
  border-bottom: 0 none;
}

.label-list__item ul,
.md-typeset .label-list__item ul {
  width: 100%;
}

.label {
  display: inline-block;
  padding: 0 .5rem;
  margin-bottom: 2px;
  min-width: 4rem;
  margin-right: .5rem;
  font-size: .8rem;
  font-weight: bold;
  text-align: center;
  text-transform: none;
  border-radius: .25rem;
}

/* WCAG AA (4.5:1, 16px bold = not "large text"): green/red darkened for white
   text; amber kept bright with near-black text. */
.label--feature {
  color: white;
  background-color: #2e7d32; /* white → 5.2:1 */
}

.label--change {
  color: #1a1a1a; /* near-black on bright amber → 8.3:1 */
  background-color: #ffa724;
}

.label--fix {
  color: white;
  background-color: #c62828; /* white → 5.6:1 */
}

.label--grey {
  color: black;
  background-color: #d8d9dc;
}


/* ===============================================================
 Errors
================================================================*/

.error-page {
  max-width: 61rem;
  margin: 0 auto;
  padding: 0 .8rem;
}


/*****************************************************************
 up to (but not including) tablet
*****************************************************************/

@media (max-width: 767px) {

  .page-header h1 {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 60px;
  }

}


/*****************************************************************
 Tablet & bigger 
*****************************************************************/

@media (min-width: 768px) {

  /* Header */

  .header__bottom {
    /* margin-bottom: 3rem; */
  }

  .header__bottom .container {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .branding__slogan--header {
    margin-top: .45rem;
  }

  /* Navigation */

  .nav-wrapper {
    display: none;
  }

  /* User info */

  #user #user-name {
    display: inline-block;
  }

  .user-info .dropdown-toggle::after {
    display: inline-block;
  }


  /* Sub nav */
  
  .sub-nav {
    align-items: baseline;
  	display: flex;
    flex-direction: row;
  }

  .sub-nav input[type="search"] {
    min-width: 15rem;
  }

  /* breadcrumb */

  .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
  }
  
  .breadcrumbs li {
    display: block;
  }
  
  .breadcrumbs li::before {
    content: '/';
    padding: 0 .2rem;
    font-weight: var(--font-weight-normal);
  }
  
  .breadcrumbs li:first-child::before {
    content: '';
  }

  /* footer */

  .section--focus {
    padding: 3rem 0; /*60px*/
    font-size: 1rem;
    line-height: 1.5;
  }

  .section--focus.has-graphic .graphic {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
  }

  .section--focus.has-graphic .block--focus {
    width: 50%;
    padding-right: 2rem;
  }

  .block__title--focus {
    font-size: 2.1rem; /*42px*/
  }

  /* Page header */

  .page-header {
    align-items: baseline;
    margin: 0 0 3.5rem;
  }

  .page-header h1 {
    text-align: left;
    margin-top: .5rem;
    margin-bottom: .5rem;
  }

  .page-header h1 {
    padding-top: 8rem;
  }

  .page-header .section-subscribe {
    margin-bottom: 0;
  }

  .section-tree {
    flex-direction: row;
  }

  .section-tree .section {
    display: flex;
    flex-direction: column;
    width: 50%;
    flex-basis: 50%;
    padding-right: .75rem;
  }

  .section-tree .section:nth-child(2n) {
    padding-left: .75rem;
    padding-right: 0;
  }

  .article-list,
  .md-typeset .article-list {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
  }

  .article-list-item,
  .md-typeset .article-list-item {
    /* display: flex;
    flex-grow: 1;
    width: 100%; */
  }

  .article-list-item a {
    /* display: flex;
    align-items: center;
    width: 100%; */
  }

  /* recent activity */

  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }

  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir="rtl"] .recent-activity-item-meta {
    float: left;
  }

  /* Overview blocks */

  .blocks-list {
    margin: 0 -.75rem;
  }

  .blocks-item {
    flex: 1 0 calc(50% - 1.5rem);
    width: calc(50% - 1.5rem);
    flex-direction: row;
    margin: 0 .75rem 1.5rem;
  }

  .blocks-item > a {
    width: 100%;
  }

  .section > section.blocks {
    margin-bottom: 60px;
  }

  /* Homepage specific*/

  .section h2 {
    text-align: left;
    padding: 0 15px;
  }

  /* release notes */

  .label-list__item,
  .md-typeset .label-list__item,
  [dir=ltr] .md-typeset .label-list__item {
    display: flex;
    align-items: flex-start;
    margin-left: 0;
  }

  .label-list__item__content,
  .md-typeset .label-list__item__content {
    /**/
  }

  .md-typeset .label-list__item__content ul {
    margin-top: 0;
    margin-left: 0;
  }

  .md-typeset .label-list__item__content ul:last-child {
    margin-bottom: 0;
  }

}


/*****************************************************************
 Max tablet size
*****************************************************************/

@media screen and (max-width: 59.9375em) {

  .header--primary {
    padding-top: .5rem;
  }

  .md-nav__source {
    padding-left: .5rem;
    background-color: var(--color-primary-light);
  }

  .md-source,
  .md-source:visited {
    color: var(--color-primary);
  }

  .md-source__icon {
    padding-left: 0;
    border-left: 0 none;
    width: auto;
  }

}


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

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

  /* header */

  .header__bottom {
    /* margin-bottom: 3.5rem; */
  }

  .header__bottom .container {
    padding-top: 3.7rem;
    padding-bottom: 4rem;
  }


  /* Navigation */
  
  /* .user-nav {
    position: relative;
  } */

  .nav-wrapper {
    display: block;
  }

  .nav-wrapper .icon-menu {
    display: none;
  }

  /* .md-header__button[for=__drawer] {
    display: none;
  } */

  .nav-wrapper a {
    display: inline-block;
  }

  .nav-wrapper a,
  .nav-wrapper a:visited {
    text-decoration: none;
  }

  .nav-wrapper .md-tabs__item,
  .nav-wrapper li {
    margin: 0 2rem 0 0;
  }

  /* focus banner */
  .section--focus {
    padding: 6.5rem 0; /*130px*/
  }

  .block__title--focus {
    font-size: 2.4rem; /*48px*/
  }

  /* promoted articles */

  .promoted-articles {
    flex-direction: row;
  }

  .promoted-articles-item {
    align-self: flex-end;
    flex: 0 0 auto;
    padding-right: 30px;
    width: 33%;
    /* Three columns on desktop */
  }

  [dir="rtl"] .promoted-articles-item {
    padding: 0 0 0 30px;
  }

  .promoted-articles-item:last-child a {
    border-bottom: 1px solid #ddd;
  }

  /* page header*/
  
  .page-header {
    align-items: baseline;
    margin: 0 0 1.5rem;
  }

  .page-header-description {
    flex-basis: 100%;
  	margin: 0 0 2.5rem 0;
  }

  /* secondary sidebar nav */

  .md-sidebar--secondary .md-sidebar__inner {
    padding: 2rem 1.5rem 2rem 1rem;
    background-color: #f4f4f4;
    border-radius: 5px;
  }

  .md-sidebar--secondary .md-nav__title {
    margin-bottom: .25rem;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--color-primary);
  }

  .md-sidebar--secondary .md-nav__item {
    margin-top: .75rem;
    font-size: .8rem;
    line-height: 1.2rem;
  }

  .md-sidebar--secondary .md-nav__link,
  .md-sidebar--secondary .md-nav__link:visited {
    text-decoration: none;
    color: var(--color-primary);
  }

  .md-sidebar--secondary .md-nav__link--active,
  .md-sidebar--secondary .md-nav__link--active:visited,
  .md-sidebar--secondary .md-nav__link:hover,
  .md-sidebar--secondary .md-nav__link:active {
    color: var(--color-secondary);
    /* filter: brightness(0.85); */
  }

  /* homepage overview */

  .knowledge-base {
    margin-top: 4.3rem; /*86*/
  }

  /* .section > section.blocks {
    margin: 0 2.5rem 1rem;
  } */

  .blocks-item {
    flex: 1 0 calc(33.3% - 1.5rem);
    width: calc(33.3% - 1.5rem);
  }
  
  .blocks-item > a {
    padding: 3rem;
  }

  .blocks-item-title {
    margin-bottom: 1.5rem;
  }

}

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

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

  /* mobile navigation */

  .md-nav--primary .md-nav__title .md-logo {
    margin: 0;
    padding: .5rem;
  }

  .md-nav__title .md-nav__button.md-logo img,
  .md-nav__title .md-nav__button.md-logo svg {
    width: 7.5rem;
    height: auto;
  }

  .md-nav--primary .md-nav__title {
    height: 5.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-dark);
    background-color: var(--color-primary-light);
  }

  .md-nav--primary .md-nav__title[for=__drawer] {
    background-color: var(--color-primary);
  }

  .md-nav--primary .md-nav__item--active > .md-nav__link,
  .md-nav--primary .md-nav__item--active > .md-nav__link:visited {
    color: var(--color-secondary);
    /* filter: brightness(.95); */
  }

  .md-nav--primary .md-nav__link,
  .md-nav--primary .md-nav__link:visited {
    text-decoration: none;
    color: var(--color-primary-dark);
  }

  .md-nav--primary .md-nav__link:hover,
  .md-nav--primary .md-nav__link:active {
    color: var(--color-secondary);
    /* filter: brightness(.95); */
  }

}

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

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

  /* header */

  .header--primary .container {
    display: flex;
    padding-top: .4rem;
  }

  /* navigation */


  .md-sidebar--primary--home {
    display: none;
  }

  .nav-wrapper {
    flex-grow: 1;
    justify-content: flex-end;
    margin-left: 2.3rem;
  }

  .nav-wrapper .md-tabs__item,
  .nav-wrapper li {
    margin: 0 1rem 0 0;
  }

  /* primary sidebar nav */

  .md-sidebar {
    margin: 0 0 25rem 0;
  }

  .md-nav--primary {
    padding: 2rem 1.5rem 2rem 1rem; 
    background-color: #f3fef8;
    border-radius: 5px;
  }

  .md-nav--primary .md-nav__title {
    padding: 0;
    margin-bottom: 1.25rem;
    font-size: 1rem; /*20px*/
    line-height: 1.5;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
  }

  .md-nav--primary .md-nav__list {
    border-bottom: 1px solid #eaeaea;
  }

  .md-nav--primary .md-nav__item {
    padding: 0;
    font-size: .8rem;
    line-height: 1.2rem;
    border-top: 1px solid #eaeaea;
  }

  .md-nav--primary .md-nav__item:first-child {
    border-top: 0 none;
  }
  
  .md-nav--primary .md-nav__item:first-child a {
    position: relative;
    padding-left: 1.4rem;
    border-top: 0 none;
  }

  .md-nav--primary .md-nav__item:first-child a::before {
    content: '';
    position: absolute;
    left: 0;
    top: .75rem;
    background: url('../../assets/images/sprite-icons.svg') no-repeat;
    background-size: 4rem 3.6rem; /* w x h: 80 72*/
    background-position: -60px -19px;
    width: 1rem;
    height: 1rem;
  }

  .md-nav--primary .md-nav__item:first-child a:hover::before {
    background-position: -60px -38px;
  }

  .md-nav--primary .md-nav__link {
    margin-top: 0;
    padding-bottom: .75rem;
    padding-top: .75rem;
    transition: none;
  }

  .md-nav--primary .md-nav__link,
  .md-nav--primary .md-nav__link:visited {
    text-decoration: none;
    color: var(--color-primary);
  }

  .md-nav--primary .md-nav__link--active,
  .md-nav--primary .md-nav__link--active:visited,
  .md-nav--primary .md-nav__link:hover,
  .md-nav--primary .md-nav__link:active,
  .md-nav--primary .md-nav__link:focus,
  .md-nav--primary .md-nav__link:focus {
    color: var(--color-secondary);
    /* filter: brightness(0.95); */
  }

  /* .md-nav__toggle:checked~.md-nav__link,
  .md-nav__toggle:indeterminate~.md-nav__link {
    color: var(--color-secondary);

  } */

  .md-nav--primary .md-nav__item--active > .md-nav__link {
    font-weight: var(--font-weight-bold);
  }

  .md-nav--primary .md-nav__item--nested .md-nav__item--active > .md-nav__link {
    color: var(--color-secondary);
    font-weight: var(--font-weight-normal);
    /* filter: brightness(.95); */
  }


  /* sublevel */

  .md-nav--primary .md-nav__item--nested .md-nav__item {
    padding-left: 0;
    border-top: 0 none;
  }

  .md-nav--primary .md-nav__item--nested .md-nav__item a::before {
    content: '';
    display: none;
  }

  .md-nav--primary .md-nav__item--nested .md-nav__list {
    padding-left: .5rem;
    border-bottom: 0 none;
  }

  .md-nav--primary .md-nav__item--nested .md-nav__item .md-nav__link {
    padding-left: 0;
    padding-top: 0;
    font-weight: var(--font-weight-normal);
  }

  /* Errors */

  .error-page {
    padding: 0;
    width: 90%;
  }
}