:root {
  --jb-blauw: #253776;
  --footer__background: var(--jb-blauw);
}

aside {
  color:inherit;
}

nav {
  padding-top:.25em;
}

div.navigation {
  grid-area:menu;
}

input.mc-checkbox {
  display: none;
}
.z195 {
    background-color:#4183c4;
    border-top:.5em solid #ce5c43;
}

.z195 .author {
    color:#f5d30f;
}

.z183 {
    border-top:solid .5em #d67e1b; /*oranje*/
    border-top:solid .5em #b70047; /*rood*/
    background-color:#f2d21d; /*geel*/
}

.z183 span.title {
    color:black;
}

.z183 span.author {
    color:#2c2b75;
}

.z156 {
    background-color:#44195b;/*paars*/
    border-top:solid .5em #007399; /*blauwgroen*/
}

.z156 span.title {
    color:#fff;
}

.z156 .author {
    color:#f8db00;
}

@media screen and (max-width: 1265px) and (min-width:901px) {
  body {
   grid-template-areas:
        'header-left header'
        'menu main'
        'menu footer';
    grid-template-columns: var(--navbar-width) 1fr;
    grid-template-rows: var(--headerbar-height) 1fr minmax(0,max-content);
  }
}

@media screen and (max-width: 900px) and (min-width:701px) {
  body {
   grid-template-areas:
        'header'
        'menu'
        'main'
        'footer';
    grid-template-columns: 1fr;
    grid-template-rows: var(--headerbar-height) auto 1fr minmax(0,max-content);
  }
  nav > ul { 
    display:flex;
    flex-wrap:wrap;
  }
}

@media screen and (max-width: 700px) {
  :root {
    --headerbar-height:45px;
  }
  .hamburger {
    padding:0;
  }
  body {
   grid-template-areas:
        'header'
        'main'
        'footer';
    grid-template-columns: 1fr;
    grid-template-rows: var(--headerbar-height) 1fr minmax(0,max-content);
  }
  body > nav {
    grid-area: auto;
    display: block;
    position: absolute;
    left: 0;
    top: var(--headerbar-height);
    z-index: 3;
    margin-left: calc( 0px - var(--navbar-width) );
    width: var(--navbar-width);
    transition: margin .5s ease-in-out;
    height: calc( 100vh - var(--headerbar-height) );
  }
  #bbr-product {
    margin-top: .35em;
    display:inline-block;
    }
}