@font-face {
  font-family: 'Gotham-Light';
  src: url('./fonts/Goth-Light.woff') format('woff'),
       url('./fonts/Gotham-Light.otf') format('otf');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham-LightItalic';
  src: url('./fonts/Goth-LightItalic.woff') format('woff'),
       url('./fonts/Gotham-LightItalic.otf') format('otf');
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: 'Gotham-Book';
  src: url('./fonts/Goth-Book.woff') format('woff'),
       url('./fonts/Gotham-Book.otf') format('otf');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham-BookItalic';
  src: url('./fonts/Goth-BookItalic.otf') format('woff')
       url('./fonts/Gotham-BookItalic.otf') format('otf');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Gotham-Medium';
  src: url('./fonts/Goth-Medium.woff') format('woff'),
       url('./fonts/Gotham-Medium.otf') format('otf');
  font-weight: 500;
  font-style: normal
}

@font-face {
  font-family: 'Gotham-MediumItalic';
  src: url('./fonts/Goth-MediumItalic.woff') format('woff'),
       url('./fonts/Gotham-MediumItalic.otf') format('otf');
  font-weight: 500;
  font-style: normal
}

@font-face {
  font-family: 'Gotham-Bold';
  src: url('./fonts/Goth-Bold.woff') format('woff'),
       url('./fonts/Gotham-Bold.otf') format('otf');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham-BoldItalic';
  src: url('./fonts/Goth-BoldItalic.woff') format('woff'),
       url('./fonts/Gotham-BoldItalic.otf') format('otf');
  font-weight: 700;
  font-style: italic;
}

/*  styling - Hart en Vaatcijfers  */
body {
  background-color: #fff;
  color: #404245;
  font-size: 112.5%;
  font-family: 'Gotham-book';
  font-weight: 300;
  padding-top: 104px;
}

.bg-white  {
  background-color: #fff;
}

.bg-blue-gray  {
  background-color: #F0F5F7;
}

.bg-blue  {
  background-color: #7EB6D2;
}

a,
.red  {
  color: #DD3114;
}

.gray  {
  color: #8E8E8E;
}

b, strong  {
  font-family: 'Gotham-Medium';
}

h1,h2,h3,h4  {
  font-family: 'Gotham-Medium';
}

h3 a  {
  color: #404245;
  text-decoration: none;
}

a:hover,
h3 a:hover  {
  color: #7EB6D2;
  text-decoration: none;
}

hr  {
  opacity: 1;
}

.btn.rounded-pill  {
  color: #fff;
  background-color: #DD3114;
  font-size: 1.375rem;
  padding-left: 1.375rem;
  padding-bottom: .5rem;
  padding-right: 1.375rem;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.navbar  {
  padding: 1rem .875rem;
  border-bottom: 1px solid #DEE4E6;
}

.navbar-nav {
  /*flex-direction: row;*/
}

.navbar-brand  {
}

.navbar-brand img  {
  width: 155px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.nav-item  {
  font-size: 1.25rem;
  margin-left: 2rem;
}

.nav-item a.nav-link:last-child  {
  padding-right: 0;
}

.search-icon  {
  width: 32px;
  margin-right: 1.25rem;
}

.download-pdf-icon a {
  text-decoration: none;
}

.download-pdf-icon span {
  display: none;
}

.download-pdf-icon img {
  width: 32px;
}

.filter-icon,
.index-icon  {
  display: inline-block;
  width: 32px;
  margin-right: .5rem;
}

.next-icon  {
  width: 18px;
}

.menu-toggler  {
  width: 35px;
}

header  {
  background: url(./img/header-image.jpg) center top no-repeat #F0F5F7;
  background-size: cover;
  height: 170px;
}

#tiles header  {
  background: url(./img/header-image-tiles.jpg) center top no-repeat #F0F5F7;
}

#home header  {
  background: url(./img/header-image-home.jpg) center top no-repeat #F0F5F7;
  background-size: cover;
  height: auto;
  margin-bottom: 2rem;
}

.indent-padding  {
  padding-right: .875rem;
  padding-left: .875rem;
}

.intro-txt  {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.lead  {
  font-family: 'Gotham-Light';
  font-weight: 200;
  margin-bottom: 0;
}

.sub-heading  {
  font-family: 'Gotham-Light';
  font-size: calc(1.75rem + .6vw);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.collapse-menu  {
  position: fixed;
  height:calc(100vh - 104px);
  width: 100%;
  overflow: auto;
  padding: 2px .875rem 0;
  z-index: 1000;
}

#collapseMenu .accordion-body {
  padding: 0;
}

#collapseMenu .accordion-body a  {
  display: flex;
  padding: 1rem 1.25rem;
}

a.accordion-button {
    text-decoration: none;
}

a.accordion-button::after {
    content:none;
}

.accordion-button,
.form-control  {
  color: #404245;
}

.accordion,
.accordion-button  {
  font-family: 'Gotham-book';
  font-size: 1.125rem;
}

#accordionMenu.accordion  {
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}

.accordion-flush .accordion-item  {
  border-color: #8E8E8E;
}

.filter .accordion-item  {
  border: none;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.15);
}

.filter .accordion-item:last-of-type {
  border-bottom-right-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}

.filter .accordion-item:first-of-type {
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}

.filter .accordion-button,
.filter .form-control  {
  font-family: 'Gotham-Light';
  font-size: 1.25rem;
  line-height: 1.4;
  padding: .5rem 1.15rem;
}

.filter .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: calc(1.5rem - 1px);
  border-top-right-radius: calc(1.5rem - 1px);
}

.filter .accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: calc(1.5rem - 1px);
  border-bottom-left-radius: calc(1.5rem - 1px);
}

.accordion-flush .accordion-button  {
  background-color: #F0F5F7;
}

.accordion-body a:hover,
.accordion-flush .accordion-item .accordion-button:hover  {
  color: #404245;
  background-color: #DEE4E6;
}

.accordion-button:not(.collapsed) {
  font-family: 'Gotham-Medium';
  color: #fff;
  background-color: #7EB6D2;
  box-shadow: none;
}

.accordion-flush .accordion-item .accordion-button:not(.collapsed):hover  {
  color: #fff;
  background-color: #7EB6D2;
}

.filter .accordion-button:not(.collapsed) {
  font-family: 'Gotham-Light';
  color: #404245;
  background-color: #fff;
}

.filter .accordion-body  {
  font-family: 'Gotham-Light';
  font-size: 1.25rem;
  padding-top: .5rem;
}

#accordionMenu .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.filter .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23DD3114'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:focus {
  z-index: 3;
  border: none;
  outline: 0;
  box-shadow: none;
}

div.my-accordion-submenu-item {
    border-bottom: 1px solid #8E8E8E;
}

div.my-accordion-submenu-item:last-child {
    border-bottom: none;
}

.filter .form-control  {
  border-radius: 1.5rem;
  border: none;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.15);
}

.filter .form-control::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform .2s ease-in-out;
}

.form-check-input:checked {
  background-color: #DD3114;
  border-color: #DD3114;
}

.form-check-input:indeterminate {
    background-color: #DD3114 !important;
    border-color: #DD3114 !important;
}

.row-flex {
  display: flex;
  flex-wrap: wrap;
}

.box  {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  height: 100%;
}

.box-padding  {
  padding: 1.625rem;
}

.box-img-overlay {
  position: absolute;
  /*top: 0;*/
  right: 0;
  bottom: 0;
  left: 0;
}

.box h3,
.box p  {
  margin-bottom: 1rem;
}

.box a  {
  color: #404245;
  height: 100%;
}

.box h2  {
  /*font-size: calc(1.5rem + .6vw);*/
  font-size:1.6rem;
  font-family: 'Gotham-Light';
  margin-left: 1.625rem;
  margin-right: 1.625rem;
  margin-bottom: 1.625rem;
}

.box-img a:hover,
.box-fixed-height a:hover   {
  color: #fff;
  font-family: 'Gotham-Medium';
  background-color: #7EB6D2;
}

.box-fixed-height  {
  min-height: 16rem;
}

.content {
  font-family: 'Gotham-Light';
  margin-bottom: 3rem;
}

.content h1  {
  margin-bottom: 2.2rem;
  line-height: 1.3;
}

.content h2  {
  margin-top: 3rem;
  margin-bottom: 1.75rem;
}

.content h3  {
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 0;
}

.content h4  {
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 0;
}

.breadcrumbs  {
  font-family: 'Gotham-Light';
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.breadcrumbs button {
    background-color: white;
    border: none;
    padding: 0;
}

.breadcrumbs a,
.breadcrumbs button
{
  color: #404245;
  text-decoration: underline;
}

.breadcrumbs a:hover,
.breadcrumbs button:hover
{
  color: #7EB6D2;
  text-decoration: none;
}

.breadcrumbs span  {
  display: inline-block;
  white-space: nowrap;
}

.breadcrumbs .high-light  {
  font-family: 'Gotham-Medium';
}

.badge  {
  font-size: 89%;
  font-weight: 300;
  margin-right: .5rem;
  margin-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.badge:last-child  {
  margin-right: 0;
}

.badge .btn  {
  color: #fff;
  line-height: 1;
  padding: 0 0 0 1rem;
  border: none;
  vertical-align: inherit;
}

.results  {

}

.result-item  {
  font-family: 'Gotham-Light';
}

.result-item h4  {
  color: #DD3114;
  font-family: 'Gotham-Book';
}

.item-date  {
  color: #8E8E8E;
}

.tile-img  {
  margin-top: 1rem;
  margin-right: 1.625rem;
}

.tile-img img  {
  margin-left: .5rem;
  height: 66px;
}

.box-fixed-height a:hover .tile-img img  {
  filter: brightness(100) sepia(100) hue-rotate(-60deg) saturate(2);
  opacity: 100%;
}

a.my-anchor {
    display: block;
    position: relative;
    top: -104px;
    visibility: hidden;
}

footer,
.footer-bottom  {
  font-size: 90%;
}

footer  {
  background-color: #DEE4E6;
}

.footer-header  {
  font-size: 1.375rem;
  font-family: 'Gotham-Light';
}

.footer-nav  {
  display: block;
}

a.footer-nav  {
  color: #404245;
  text-decoration: none;
  line-height: 1.2;
  margin-bottom: .5rem;
}

.footer-bottom .logos img {
  height: 24px;
}

.footer-bottom .logo-1  {
  /*width: 55%;*/
  margin-right: 0.5rem;
}

.footer-bottom .logo-2  {
  /*width: 45%;*/
}

.footer-bottom .logo-2 img  {
  padding-left: 0.5rem;
  border-left: 1px solid #707070;
}

#my-main-content-wrapper img.my-downloadable-img {
    max-width: calc(100% - 50px);
}

@media (min-width: 375px)  {
  body  {
    padding-top: 116px;
  }

  .navbar-brand img  {
    width: 190px;
  }

  .collapse-menu  {
    height:calc(100vh - 116px);
    overflow: auto;
    padding-top: 1px;
  }

  .box h2  {
    /*font-size: calc(1.65rem + .6vw);*/
    font-size:1.6rem;
  }

  a.my-anchor {
      display: block;
      position: relative;
      top: -116px;
      visibility: hidden;
  }
}

@media (min-width: 576px)  {
   .indent-padding  {
    padding-left: 0;
    padding-right: 0;
  }

}

@media (min-width: 768px)  {
  .navbar  {
    padding-left: 0;
    padding-right: 0;
  }
  .box-fixed-height  {
    min-height: 20rem;
  }

  header  {
    /*margin-bottom: 1.2rem;*/
  }

  .indent-padding  {
    padding-right: .75rem;
    padding-left: .75rem;
  }

  .intro-txt  {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .accordion,
  .accordion-button  {
    font-size: 1.5rem;
  }

  .box h2  {
    /*font-size: calc(1.325rem + .9vw);*/
    font-size:2.2rem;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    margin-bottom: 1rem;
  }

  .box-img img  {
    /*max-width: 80%;*/
    /*margin-left: 20%;*/
  }

  .box-img.box-big img  {
    max-width: 180%;
    margin-left: -68%;
  }

  .box-padding  {
    padding: 1.25rem;
  }

  .breadcrumbs  {
    margin-top: 2.2rem;
  }

  .index-icon  {
    width: 37px;
  }

  .download-pdf-icon {
    border-radius: 0.5rem;
    border: 1px solid red;
    padding: 0.25rem 0.5rem;
  }

  .download-pdf-icon span {
    display: inline;
  }

  .download-pdf-icon img {
    width: 24px;
  }

  .next-icon  {
    width: 24px;
  }

  footer,
  .footer-bottom  {
    font-size: inherit;
  }

  .footer-header  {
    font-size: 1.5rem;
  }

  a.footer-nav  {
    /*font-size: inherit;*/
    line-height: 1.3;
  }

  .footer-bottom .logos img {
    height: 42px;
  }

  .footer-bottom .logo-1  {
    /*width: 55%;*/
    margin-right: 1rem;
  }

  .footer-bottom .logo-2  {
    /*width: 45%;*/
  }

  .footer-bottom .logo-2 img  {
    padding-left: 1rem;
  }

}

@media (min-width: 992px)  {
  body  {
    padding-top: 160px;
  }

  .navbar-brand img  {
    width: 235px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .search-icon  {
    width: auto;
    margin-right: 1.75rem;
  }

  .collapse-menu {
    height:calc(100vh - 160px);
    overflow: auto;
  }

  .filter-icon  {
    width: auto;
    margin-left: 1.75rem;
  }

  .menu-toggler  {
    width: 45px;
  }

  .sub-heading  {
    font-size: 2.5rem;
  }

  .box-padding  {
    padding: 1.375rem;
  }

  .next-icon  {
    width: 32px;
  }

  .box-fixed-height  {
    min-height: 20rem;
  }

  .tile-img img  {
    margin-left: .75rem;
    height: 78px;
  }

  a.my-anchor {
    display: block;
    position: relative;
    top: -160px;
    visibility: hidden;
  }
}

@media (min-width: 1200px)  {
  #section header  {
    height: 296px;
  }

  .indent-padding  {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .accordion-flush {
    margin-left: 8.33333333%;
    margin-right: 8.33333333%;
  }

  .btn.rounded-pill  {
    font-size: 1.75rem;
    padding: .5rem 2rem .75rem;
  }

  .box h3,
  .box p  {
    margin-bottom: 1.5rem;
  }

  .box-padding  {
    padding: 2rem;
  }

  .tile-img img  {
    opacity: 40%;
  }

  .footer-header  {
    font-size: 1.75rem;
  }

  footer,
  .footer-bottom  {
    font-size: 1.25rem;
  }
}

@media (min-width: 1400px)  {
  .intro-txt  {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .box-fixed-height  {
    min-height: 20rem;
  }

  .tile-img img  {
    height: 96px;
  }
}