:root {
    --bbr-geel: #fdb813;
    --bbr-rood: #9e2330;
    --bbr-lichtblauw: #4bafe8;
    --bbr-metbib: #006995;
    --bbr-bop: #63947d;
    --bbr-hop: #7681b1;
    --bbr-hts: #00a9b7;
    --bbr-hot: #5d1e79;
    --bbr-tsb: #c1001f;
    --bbr-online: #253776;
    
}
.bbr-header {
  padding:.5em;
}
.metbib .bbr-header {
  background-color:var(--bbr-metbib);
}
.bop .bbr-header {
  background-color:var(--bbr-bop);
}
.hop .bbr-header {
  background-color:var(--bbr-hop);
}
.hts .bbr-header {
  background-color:var(--bbr-hts);
}
.hot .bbr-header {
  background-color:var(--bbr-hot);
}
.tsb .bbr-header {
  background-color:var(--bbr-tsb);
}
.online .bbr-header {
  background-color:var(--bbr-online);
}
/* taken from master.css, disabled  */
/* 
.met, a.met:link, a.met:visited {
	color: #006995;
}
.bop, a.bop:link, a.bop:visited {
	color: #63947d;
}
.hop, a.hop:link, a.hop:visited {
	color: #7681b1;
}
.hts, a.hts:link, a.hts:visited {
	color: #00a9b7;
}
.tsb, a.tsb:link, a.tsb:visited {
	color: #c1001f;
}
 */
ul.bbr-list {
    padding:0;
    margin:0;
    list-style-type:none;
    list-style-image:none;
}
ul.bbr-list li { 
    list-style-type:none;
    list-style-image:none;
    vertical-align:middle;
    margin-bottom:3em;
    font-size:1.05rem;
}
.bbr-product p {
  color:black;
}
.bbr-product > a:link,
.bbr-product > a:visited {
  color:#fff;
  font-size:1.3em;
}

li .bbr-header {
  display:flex;
  align-items:center;
}
img.bbr {
    padding-right:1em;
    height:50px;
}
.bbr li a {
    color: #fff;
    font-weight:bold;
    font-size:1.3em;
}
.logo_new { 
    float:right;
    width:60px;
    margin-right:1em;
}
.jb-logo {
    margin-top:2em;
    width:50%;
    max-width:350px;
}

/* online resources collection offer */
.advert {
  border:solid .2em var(--bbr-geel); 
  border-radius:.25em;
  background-color:#fff;
  float:right;
  max-width:50%;
  margin-left:1.5em;
  margin-bottom:1.5em;
}

.advert h2 {
  margin:0;
  padding:.5em;
  background-color:var(--bbr-geel);
  color:black;
}

.advert .image-container {
  float:right;
}
.image-container img {
   border: .2em solid var(--bbr-rood);
}

.advert > p,
.advert > div
{
    padding: .7em;
}
.advert p.em {
  font-style:italic;
  font-weight:bold;
}

@media screen and (max-width: 800px) {
    .bbr-group {
        width: 100%;
    }
    .advert {
      float:none;
      max-width:100%;
      margin-left:0;
      min-height:20em;
    }
}