/* 202412.. */
@media (min-width: 768px) {
  header div.container {
    height: 200px;
  }
}

/* hide the logo when smaller than 991px */
@media (max-width: 991px) {
  header div.header-logo.navbar-header > a {
  	visibility: hidden;
    height: 40px !important;
  }
  header ul.sf-menu > li > a {
    padding: 0.5em !important;
    display: inline;
  }    
  header ul.sf-menu a {
    display: inline;
  }
  header ul.sf-menu {
    width: 50%;
  }
}

/* increase the height of the .container when at least 991px */
@media (min-width: 991px) {
  header div.container {
    height: 250px;
  }
}

@media (min-width: 992px) {
  header ul.sf-menu {
    margin-left: 28px;
  }
  header ul.sf-menu>li>a {
  padding: 0.5em !important;
  }
}

@media (min-width: 1536px) {
  header div.container {
    height: 250px;
  }
}
/* Logo positioning */
header div.header-logo.navbar-header {
  position: absolute;
  top: 30px;
  left: 30px;
}

/* Menu positioning */
header .header-menu {
  justify-content: flex-start !important;
}

/* Submenu pijltjes weg */
header a.sf-with-ul::after {
  display: none;
}

/* Font Awesome Icon  */
header .navbar-toggle {
  margin-right: 60px;
  border-style: solid;
  border-color: #e6e6e6;  
  border-width: 6px;
  border-radius: 3px;    
}
header .fa.fa-bars {
  color: #e6e6e6;      
}
header .fa.fa-close {
  color: #e6e6e6;      
}

header button.submenu-trigger > svg {
  color: #e6e6e6; 
  opacity: 0;
}

@media (max-width: 768px) {
  header .fa.fa-bars {
    color: #060606;      
  }
  header .fa.fa-close {
    color: #060606;      
  }
  header button.submenu-trigger {
    color: #060606;      
  }      
  header .navbar-toggle {
    border-color: #060606;  
  }
}

/* 202411, diverse kleine aanpassingen aan de standaard layout.
   max-width gelijk aan banner(s) width. */
body, header, footer {
  max-width: 1920px;
}
/* niet in de rechter bovenhoek */
div.login {
  visibility: hidden; 
  margin-bottom: 175px;
}
*/

body {
    color: #404099;
    font-size: 17px;
}

/* header met eigen background en een beetje ruimte voor het hoofdmenu */
header div.container {
  width: 100%;
  padding: 0;
/*  background-color: #F6F4E0; */
  background-color: transparent;
  background-repeat: no-repeat;
  position: relative; top:0; left:0;
  z-index: 0;
}

/* quick fix voor evenementen op verzoek van Harold */
img.img-responsive {
  object-fit: contain;
}

/* en de footer wat smaller */
footer {
  padding-bottom: 0px;
  padding-top: 20px;
  background-color:#F6F4E0;
}

@keyframes fade-in {
  0% { opacity: 0;}
  100% { opacity: 1;}
}
@keyframes fade-out {
  0% { opacity: 1;}
  100% { opacity: 0;}
}