/*@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;700&family=PT+Sans+Narrow:wght@400;700&display=swap');*/

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../../fonts/Figtree-Regular.ttf');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/Figtree-Medium.ttf');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../fonts/Figtree-Bold.ttf');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../fonts/Figtree-ExtraBold.ttf');
}

@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/PTSansNarrow-Regular.ttf');
}

@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../fonts/PTSansNarrow-Bold.ttf');
}


body  {
  background-color: #fff;
  font-family: 'Figtree', sans-serif;
}

main  {
}

a  {
  color: #DD676D;
}

a.btn-primary {
  color: white;
  text-decoration: none;
}

a:hover,
a:focus  {
  color: #DD676D;
  text-decoration: none;
}

.navbar  {
  padding: 0;
}

.navbar.bg-color  {
  background-color: #DD676D;
}

.navbar-color  {
  background-color: #D0262F;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.navbar-brand  {
  background-color: #fff;
  width: 80px;
  margin-right: 0;
}

.navbar-collapse  {
  background-color: #fff;
  padding: 1rem 1rem 1rem 1.5rem;
}

.navbar-light .navbar-toggler  {
  color: #293D94;
  background-color: #fff;
  margin-right: 1rem;
  padding: .35rem;
  box-shadow: rgba(0, 0, 0, .1) 0px 4px 4px;
  border-radius: 50%;
}

.navbar-header .nav-link  {
  font-size: .875rem;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  padding-right: .5rem;
  padding-left: .5rem;
  border-radius: 4rem;
  color: #293D94;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, .1) 0px 4px 4px;
}

.navbar-light .navbar-nav .nav-link  {
  color: #293D94; 
  font-weight: bold;
  text-transform: uppercase;
}

.navbar-light .navbar-nav .nav-item.my-first-navbar-item {
  margin:0.5rem;
}

.navbar-light .navbar-nav .nav-item.my-first-navbar-item .nav-link {
  color: white;
  border: 1px solid transparent;
  border-radius: 4rem;
  background-color: rgba(0, 0, 0, .1);
  box-shadow: rgb(0 0 0 / 20%) 0px 1px 1px inset;
  padding: 0.5rem;
}

.navbar-light .navbar-nav .nav-item.my-first-navbar-item .nav-link.active, .navbar-light .navbar-nav .nav-item.my-first-navbar-item .nav-link:hover {
  color: #293D94;
  background-color: white;
}


.navbar-light .navbar-nav .nav-link.active  {
  color: #767676;
}

#navbarToggleExternalContent  {
  width: 100%;
}

.bg-blue  {
  color: #fff;
  background-color: #293D94;
}

h1,h2,h3,h4,h5  {
  color: #293D94;
}

h2  {
  /*font-weight: 700;*/
}

h4, h4 {
  font-family: 'PT Sans Narrow', sans-serif;
}

main  {
  background-color: #D9E2F1;
}

/* #home main  {
  padding-top: 1rem;
} */

.content-footer  {
  background-color: #E8EEF7;
}

footer  {
  background-color: #fff;
}

.dagen-header .form-select  {
  font-size: 1.4rem;
  font-weight: 500;
  color: #D0262F;
  padding-left: .75rem;
  padding-top: 0;
  padding-bottom: 0;
  border: 2px solid #D0262F;
  border-radius: .5rem;
  box-shadow: rgba(0, 0, 0, .1) 0px 3px 4px;
}

.dagen-header,
.dag  {
  border-radius: .5rem;
}

.dag  {
  text-align: center;
  padding: 1rem;
  background: -webkit-linear-gradient(top, white 0%, #EFBDC0 100%) #fff;
  background: -moz-linear-gradient(top, white 0%, #EFBDC0 100%) #fff;
  background: -ms-linear-gradient(top, white 0%, #EFBDC0 100%) #fff;
  background: linear-gradient(to bottom, white 0%, #EFBDC0 100%) #fff;
  margin-bottom: 1rem;
}

.dag.active  {
  /*background-color: #fff;*/
  background-image: none;
}

.dagen h2  {
  color: #D0262F;
}

.dag-detail h1  {
  font-family: 'PT Sans Narrow', sans-serif;  
  font-weight: 700;
  line-height: 1;
  margin-bottom: 1rem;
}

.page-404 h1  {
  font-family: 'PT Sans Narrow', sans-serif;  
  font-size: calc(5rem + .4vw);
}

.dag-detail h3  {
  font-size: calc(1.1rem + .4vw);
  opacity: .5;
}

.info-box  {
  color: #D0262F;
  background-color: #fff;
  text-align: center;
  margin: .5rem 1rem 1.5rem;
  padding: 1rem 1rem .75rem;
  border: 2px solid #D0262F;
  border-radius: .5rem;
  box-shadow: rgba(0, 0, 0, .1) 0px 3px 4px;
}

.info-box h2,
.info-box h3  {
  color: #D0262F;
}

.info-box h2  {
  font-weight: 700;
}

.info-box .image  {
  padding: .5rem 0;
}

.image-box  {
  background-color: #fff;
  margin-bottom: 1rem;
  border: 2px solid #fff;
}

.illustratie .image-box  {
  /*padding: 1.5rem;*/
}

.illustratie img  {
  /*height: 200px;*/
}

.trimesters .title  {
  font-family: 'PT Sans Narrow', sans-serif;
}

.trimesters h4  {
  color: #fff;
  text-align: center;
}

.trimesters .trimester .btn  {
  width: 60%;
}

.trimesters .btn-light {
  color: #293D94;
  opacity: 1;
  text-transform: uppercase;
  border-radius: 4rem;
}

.trimesters .btn-light.collapsed  {
  opacity: .7;
}

.trimesters .btn-light:hover,
.trimesters .btn-light:focus  {
  color: #293D94;
  opacity: 1;
}

.btn-light-blue  {
  font-size: 1.6rem;
  color: #293D94;
  background-color: #C1CFE6;
  padding-top: 0;
  padding-bottom: 0;
  border: 1px solid #7687BB;
  border-radius: .5rem;
  box-shadow: rgba(0, 0, 0, .1) 0px 3px 4px;
}

.btn-light-blue:hover  {
  color: #fff;
  background-color: #7687BB;
  border: 1px solid #7687BB;
}

.btn-primary  {
  font-weight: 700;
  background-color: #D0262F;
  text-transform: uppercase;
  padding: 0.563rem 1.25rem;
  border-color: #D0262F;
  border-radius: 4rem;
}

.btn-primary.btn-sm  {
  padding: .25rem .5rem;
}

.btn-primary:hover,
.btn-primary:focus {
  background: #d9313a;
  border-color: #d9313a;
}

.previous,
.next  {
  font-family: 'PT Sans Narrow', sans-serif;
  color: #293D94;
  font-size: 1.25rem;
}

.previous span  {
  margin-left: .5rem;
}

.next span  {
  margin-right: .5rem;
}

@media (min-width: 576px) {
  
  .trimesters .trimester .btn  {
    /*width: 36%;*/
  }
  
  .dag  {
    text-align: left;
  }
  
  .illustratie .image-box  {
    /*padding: .75rem;*/
    text-align: center;
  }
  
  .illustratie img  {
    /*height: 100px;*/
  }
  
}

@media (min-width: 768px) {

  main  {
  }
  
  .navbar-brand  {
    /*width: 120px;*/
  }
  
  .navbar-collapse  {
    background-color: inherit;
    padding: 0 .5rem;
  }
  
  .nav-item  {
    margin: .5rem;
  }

  .nav-link  {
    font-size: .875rem;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4rem;
    color: #fff;
    background-color: rgba(0, 0, 0, .1);
    box-shadow: rgba(0, 0, 0, .2) 0px 1px 1px inset;
  }
  
/*  .navbar-expand .navbar-nav .nav-link  {
    padding: .563rem 1.0rem;
  }*/
  
#navbarNav {
  padding-left:0;
  }

  .navbar-light .navbar-nav .nav-link  {
    color: #fff;
    text-align: center;
  }

  .navbar-light .navbar-nav .nav-link:focus  {
    color: #fff;
  }

  .navbar-light .navbar-nav .nav-link:hover,
  .navbar-light .navbar-nav .nav-link.active  {
    color: #293D94;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, .1) 0px 4px 4px;
  }
  
  .navbar-expand-md {
    flex-wrap: wrap;
  }

  .dag  {
      font-size: 85%;
      text-align: center;
      margin-bottom: 0;
      padding: .75rem .25rem 1rem;
      height: 100%;
      position: relative;
  }
  
  .dag h4 {
      font-size: .9rem;
  }
    
  .text-box  {
    padding-bottom: 2rem;
  }
  
  .btn-box  {
    position: absolute;
    bottom: 1rem;
    left: 1%;
    right: 1%;
  }

  .illustratie .image-box  {
    /*padding: .5rem;*/
  }
  
  .illustratie img  {
    /*height: 50px;*/
  }

  .info-box  {
    margin-right: 0;
    min-height: 30vh;
  }

  .dag-detail  {
    margin-right: 1rem;
  }
}

@media (min-width: 992px) {
  
  .navbar-brand  {
    width: 180px;
  }
  
  .dag h4 {
    font-size: 1.2rem;
  }
}

@media (min-width: 1200px) {
  
  
}

@media (min-width: 1400px) {

}