/* START CSS for new navmenu 
  ** Temporarily placed here for convenience. 
  */
  /*=============== VARIABLES CSS ===============*/
  :root {
    --header-height: 3.5rem;
    /*========== Colors ==========*/
    /*Color mode HSL(hue, saturation, lightness)*/
    --first-color: hsl(220, 68%, 54%);
    --first-color-lighten: hsl(220, 68%, 97%);
    --subtitle-color: #97A3B7;
    --title-color: #FFF;
    --text-color: hsl(220, 12%, 45%);
    --body-color: #FFF;
    /*========== Font and typography ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: Inter, sans-serif;
    --normal-font-size: 1rem;
    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;
    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 99999999;
  }
  @media screen and (min-width: 1024px) {
    :root {
      --normal-font-size: 1rem;
    }
  }
  
  /*=============== BASE ===============*/
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  
  body {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
  }
  
  .navmenu ul {
    list-style: none!important;
    margin: 0;
  }
  
  /* Undoing the list styles cms */
  #content .navmenu ul li::before {
    content: none; /* Removes the generated content */
    border: none;  /* Removes the borders */
    width: 0;      /* Resets the width */
    height: 0;     /* Resets the height */
    position: static; /* Resets the position */
    left: 0;       /* Resets the left position */
    top: 0;        /* Resets the top position */
    pointer-events: none;
  }
  
  .row-WSHeader .col {
   padding: 0; 
  }
  
  .container-fluid {
    padding:0;
  }
  
  .navmenu a {
    text-decoration: none!important;
  }
  
  .ws-tools.navmenu__container {
      z-index: 99;
  }
  
  .ws-admin-menu {
    margin:0;
  }
  
  .csp-page--is-content .cms-grid, .cms-grid {
    margin:0;
  }
  
  /*Maakt website te breed?*/
  .cms-grid {
    padding-left:0px;
    padding-right:0px;
    margin:0 !important;
  }
  
  .cms-body {
    max-width:100%;
  }
  
  .navbar {
      max-width: 100%;
        margin:auto;
  }
  /*=============== REUSABLE CSS CLASSES ===============*/
  .navmenu .navmenu__container {
    max-width: 1120px;
    margin-inline: 1.5rem;
  }
  .text-ws-green {
    color:#A6BF10;
  }
  /*=============== HEADER ===============*/
  .navmenu {
    width: 100%;
    box-shadow: 0 2px 8px hsla(220, 68%, 12%, 0.1);
    background-color: #161C2D;
    z-index: var(--z-fixed);
    position: fixed;
    top: 0;
    left: 0;
  }
  
  .navmenu p {
    margin: 0.4em 0 0 0;
  }
  
  .header-placeholder {
      display: block; 
      height: 70px; 
  }
  
  #nav-placeholder {
       height: 200px; 
     max-width: 380px;
    margin: 0.4em 0 0.5em 0;
  }
  
  /*=============== NAV ===============*/
  .navmenu .navmenu__container {
    height: var(--header-height);
  }
  .navmenu .navmenu__logo {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .navmenu .nav-logo {
    display: inline-flex;
    align-items: center;
    column-gap: 0.25rem;
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
    transition: color 0.3s;
  }
  .navmenu .nav-logo i {
    font-size: 1.25rem;
  }
  .navmenu .nav-logo:hover {
    color: var(--first-color);
  }
  .navmenu .navmenu__toggle {
    position: relative;
    width: 32px;
    height: 32px;
  }
  .navmenu .nav-toggle-menu, .nav-toggle-close {
    font-size: 1.25rem;
    color: #FFF;
    position: absolute;
    display: grid;
    place-items: center;
    inset: 0;
    cursor: pointer;
    transition: opacity 0.1s, transform 0.4s;
  }
  .navmenu .nav-toggle-close {
    opacity: 0;
  }
  .dropdown__list .fa {
    font-size: 1.5rem;
  }
  .nav-readmore a {
    font-weight:bold;
    color:black;
    text-decoration:none;
  }
  .dropdown__item {
    font-size: 0.85rem;
    color: #677489;
  }
  .nav-logo {
    height:100%;
  }
  .nav-logo img#img_logo {
    height:80%;
  }
  @media screen and (max-width: 1160px) {
    :root {
     --title-color: black; 
    }

    .header-placeholder {
      height: 56px;
    }
    
    .navmenu .dropdown__group {
    	padding-left: 0!important;
    }

    .nav-link.dropdown-button a {
      pointer-events:none!important;
    }
    
    .navmenu .navmenu__links {
      background-color: var(--body-color);
      position: absolute;
      left: 0;
      top: 2.5rem;
      width: 100%;
      height: calc(100vh - 3.5rem);
      overflow: auto;
      padding-block: 1.5rem 4rem;
      pointer-events: none;
      opacity: 0;
      transition: top 0.4s, opacity 0.3s;
    }
    .navmenu .navmenu__links::-webkit-scrollbar {
      width: 0.5rem;
    }
    .navmenu .navmenu__links::-webkit-scrollbar-thumb {
      background-color: hsl(220, 12%, 70%);
    }
    .navmenu__logo {
      width: 100%;
    }
    .navmenu__toggle {
      float: right;
      margin-right: 1em;
    }
    .ws-nav-btn {
      margin: 0 1em; 
    }
    .navmenu .language {
      padding-left: 1.5em;
      padding-right: 1.5em;
    }
  }
  .navmenu .nav-link {
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s;
  }
  .navmenu .nav-link a {
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
  }
  .navmenu .nav-link:hover {
    background-color: var(--first-color-lighten);
  }
  .navmenu a button.ws-nav-btn {
    color:white;
    border-radius:8px;
    background:#A6BF10;
    border: 0px solid black;
  }
  .navmenu a button.ws-nav-btn:hover {
    background:#97ac17;
  }
  /* Show menu */
  .navmenu .show-menu {
    opacity: 1;
    top: 3.5rem;
    pointer-events: initial;
  }
  
  /* Show icon */
  .navmenu .show-icon .nav-toggle-menu {
    opacity: 0;
    transform: rotate(90deg);
  }
  
  .navmenu .show-icon .nav-toggle-close {
    opacity: 1;
    transform: rotate(90deg);
  }
  
  /*=============== DROPDOWN ===============*/
  .navmenu .dropdown-button {
    cursor: pointer;
  }
  .navmenu .dropdown-arrow {
    font-size: 1.2rem;
    margin-left: 0.5em;
    transition: transform 0.4s;
  }
  .navmenu .dropdown__content, .dropdown__group, .dropdown__list {
    display: grid;
  }
  .navmenu .dropdown__container {
    background-color: white;
    height: 0;
    overflow: hidden;
    transition: height 0.4s;
    border-radius: 16px;
  }
  .navmenu .dropdown__content {
    row-gap: 1.75rem;
    padding: 0.5em 1.8em;
  }
  .navmenu .dropdown__content.secondary {
      background-color: #FAFBFD;
      margin-bottom: 1em;
      border-radius: 1em;
  }
  .navmenu .dropdown__group {
    padding-left: 2.5rem;
    row-gap: 0.5rem;
    min-width: 380px;
  }
  .navmenu .dropdown__group:first-child {
    margin-top: 1.25rem;
  }
  .navmenu .dropdown__group:last-child {
    margin-bottom: 1.25rem;
  }
  .navmenu .dropdown-icon i {
    font-size: 1.25rem;
    color: var(--first-color);
  }
  .navmenu .dropdown__title {
    font-size: var(--normal-font-size);
    font-weight: var(--font-semi-bold);
    color: var(--subtitle-color);
  }
  .navmenu .dropdown__list {
    row-gap: 0.25rem;
  }
  .navmenu .dropdown-link {
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
    color: black;
    transition: color 0.3s;
  }
  .navmenu .dropdown-link:hover {
    color: var(--title-color);
  }
  
  /* Rotate dropdown icon */
  .navmenu .show-dropdown .dropdown-arrow {
    transform: rotate(180deg);
  }
  
  /*=============== BREAKPOINTS ===============*/
  /* For small devices */
  @media screen and (max-width: 300px) {
    .navmenu .dropdown__group {
      padding-left: 1.5rem;
    }
  }
  /* For large devices */
  @media screen and (min-width: 1160px) {
    /* Nav */
    .navmenu .navmenu__container {
      height: 70px;
      display: flex;
      justify-content: space-between;
    }
    .navmenu .navmenu__toggle {
      display: none;
    }
    .navmenu .navmenu__list {
      display: flex;
      column-gap: 3rem;
      height: 100%;
    }
    .navmenu .navmenu__container li {
      display: flex;
    }
    .navmenu .nav-link {
      padding: 0;
    }
    .navmenu .nav-link:hover {
      background-color: initial;
    }
    /* Dropdown */
    .navmenu .dropdown-button {
      column-gap: 0.25rem;
    }
    .navmenu .dropdown__container {
      padding-left: 1em;
      padding-right: 1em;
      height: max-content;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 4.35rem;
      background-color: var(--body-color);
      box-shadow: 0 6px 8px hsla(220, 68%, 12%, 0.05);
      pointer-events: none;
      opacity: 0;
      transition: top 0.4s, opacity 0.3s;
    }
    .navmenu .dropdown__content {
      grid-template-columns: repeat(2, max-content);
      column-gap: 6rem;
      max-width: 1120px;
      margin-inline: auto;
    }
	  .navmenu dropdown__content_1clm{
		  max-width: 1120px;
		  margin-inline: auto;
	  }
    .navmenu .dropdown__group {
      padding: 1rem 0 0 0;
      align-content: baseline;
      row-gap: 0.2rem;
    }
    .navmenu .dropdown__group:first-child, .dropdown__group:last-child {
      margin: 0;
    }
    .navmenu .dropdown__list {
      row-gap: 0.75rem;
    }
    .navmenu .dropdown-icon {
      width: 60px;
      height: 60px;
      background-color: var(--first-color-lighten);
      border-radius: 50%;
      display: grid;
      place-items: center;
      margin-bottom: 1rem;
    }
    .navmenu .dropdown-icon i {
      font-size: 2rem;
    }
    .navmenu .dropdown__title {
      font-size: var(--normal-font-size);
    }
    .navmenu .dropdown-link {
      font-size: var(--normal-font-size);
    }
    .navmenu .dropdown-link:hover {
      color: var(--first-color);
    }
    .navmenu .navmenu__dropdown {
      cursor: pointer;
      position: relative;
    }
  
    .navmenu .navmenu__dropdown:hover > .dropdown__container {
      top: 4.35rem;
      opacity: 1;
      pointer-events: initial;
      cursor: initial;
    }
    .navmenu .navmenu__dropdown:before {
      content: '';
      position: absolute;
      top:0;
      left: -3em;
      width: 120px;
      height: 80px;
      border: 1.406em solid transparent;
      opacity: 1;
      pointer-events:none;
    }
    .navmenu .navmenu__dropdown:after {
      content: '';
      position: absolute;
      bottom: 1em;
      left: 50%;
      width: 0;
      height: 0;
      border: 1.406em solid transparent;
      border-bottom-color: var(--body-color);
      border-top: 0;
      margin-left: -1.406em;
      margin-bottom: -1.406em;
      opacity: 0;
      transition:top 0.4s, opacity 0.3s;
    }
    .navmenu .navmenu__dropdown:hover:after {
      opacity: 1;
      pointer-events: initial;
      cursor: initial;
    }
  }
  @media screen and (min-width: 1152px) {
    .navmenu .navmenu__container {
      margin-inline: auto;
    }
  }
  /* END CSS for new navmenu */