#g-navigation {
    background: transparent;
}

#g-navigation.headroom--top {
    background: transparent;
}

#g-navigation.headroom--not-top {
  -webkit-box-shadow: 0px 3px 5px 0px rgb(77 77 77 / 70%);
  -moz-box-shadow: 0px 3px 5px 0px rgba(77, 77, 77, 0.7);
  box-shadow: 0px 3px 5px 0px rgb(77 77 77 / 70%);
    background: var(--white) !important;
}

#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {
  margin: 0 6px;
  letter-spacing: 1.2px;
}

#g-navigation.headroom--top .g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {
  color: var(--white);
}

#g-navigation.headroom--not-top .g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {
  color: var(--primary-color);
  margin: 0 6px;
  letter-spacing: 1.2px;
}

#g-navigation .headertitel {
  font-size: 22px;
  line-height: 28px;
  font-weight: bold;
}

#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container .g-menu-parent-indicator:after {
  opacity: 0.8;
  font-weight: 800;
  color: var(--white);
}

#g-navigation.headroom--not-top .g-main-nav .g-toplevel > li > .g-menu-item-container .g-menu-parent-indicator:after {
  color: var(--navigation-footer);
}

#g-navigation .g-main-nav .g-dropdown {
  background: var(--white);
}

#g-navigation .g-main-nav .g-toplevel > li {
  text-shadow: 2px 2px 3px var(--black);
}

#g-navigation.headroom--not-top .g-main-nav .g-toplevel > li > .g-menu-item-container .g-menu-parent-indicator {
  text-shadow: none;
}

#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content:hover {
  border-bottom: 5px solid var(--background-of-border-bottom);
  margin: 0 6px -5px 6px;
}

#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container {
  color: var(--white);
}


@media only all and (max-width: 1360px) and (min-width: 959px) {
    #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {
      margin: 0 6px;
  }	
}

#g-navigation.headroom--not-top .g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {
   text-shadow: none;
  color: var(--navigation-footer);
}

#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container > .g-menu-item-content {
  box-shadow: none;
}

#g-navigation .g-main-nav .g-sublevel > li > .g-menu-item-container {
  text-shadow: none;
  font-weight: 700;
}

#g-navigation .g-social a, .g-home-particles.g-helium-style #g-navigation .g-social a {
  color: var(--white);
}

#g-navigation .g-social a:hover, .g-home-particles.g-helium-style #g-navigation .g-social a:hover {
  color: #CCC;
}

@media only all and (max-width: 47.938rem) {
  #g-navigation .headertitel {
      margin-top: 0;
  }
  #g-navigation .g-social {
      line-height: 1.5;   
  }   
}

@media only all and (min-width: 959px) and (max-width: 1360px)  {
  .g-main-nav .g-toplevel > li > .g-menu-item-container, .g-main-nav .g-sublevel > li > .g-menu-item-container {
      font-size: .9rem;
  }
}

.g-offcanvas-toggle:before {
  content: 'menu';
  font-weight: 500;
  margin-right: 5px;
  margin-bottom: 3px;
}

.g-offcanvas-toggle {
  color: var(--white);
  float: right;
  left: auto;
  right: 10px;
  text-align: center;
  width: 90px;
  height: 34px;
  font-size: 1.2rem;
  text-shadow: 2px 2px 3px var(--black);
}

@media only all and (min-width: 768px) {
  .g-offcanvas-toggle.headroom--not-top {
        color: var(--navigation-footer);  
        position: fixed;
        text-shadow: none;
  }
}

#g-navigation .g-main-nav {
  text-align: right;
}

@media only all and (max-width: 768px) { 
  #g-navigation {
      background-size: 120px auto !important;
      height: 120px;
  }
}

#g-navigation p {
  margin: 0;
}

#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container.menu-zoeken > .g-menu-item-content::after {
      content: "\f002";
         font-family: FontAwesome;
      font-weight: 300; 
}

#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container.menu-home > .g-menu-item-content {
      content: "\f015";
         font-family: FontAwesome;
      font-weight: 300;
}

.menu-zoeken .g-menu-item-title, .menu-home .g-menu-item-title {
  display: none;
}

#g-mobilemenu-container .menu-zoeken .g-menu-item-title, #g-mobilemenu-container .menu-home .g-menu-item-title {
  display: block;
  margin-left: -10px;
}

#g-mobilemenu-container .g-menu-item-title {
  font-weight: 600;
}

.menu-zoeken .g-menu-item-content, .menu-home .g-menu-item-content {
  padding: 0 10px 5px 10px !important;
}

@media only all and (min-width: 60rem){
.g-helium-style #g-navigation {
  background: transparent;
}
}

#g-navigation .g-logo.g-logo-helium svg {
  fill: var(--white);
}


@media only all and (min-width: 720px) {
  #g-navigation, .g-offcanvas-toggle, #g-navigation .g-logo, #g-navigation #slogon, #g-navigation .headertitel, .g-main-nav .g-toplevel, #g-navigation .g-main-nav, #g-navigation .g-social, .g-logo.g-logo-helium svg, .g-logo.g-logo-helium img   {
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
  }
  #g-navigation.headroom--not-top, #g-navigation.headroom--top {
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1001;
      left: 0;
      height: 100px;
      background-size: 144px auto !important;
  }
  #g-navigation.headroom--not-top .g-logo.g-logo-helium img, #g-navigation.headroom--not-top .g-logo.g-logo-helium svg {
      max-height: 50px;
      margin-right: 1rem;
        fill: var(--primary-color);
  }
  #g-navigation.headroom--not-top .g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {
      color: var(--navigation-footer);
  }
    #g-navigation.headroom--not-top .headertitel {
      font-size: 18px;
      display: block;
      margin-top: 5px;
  }
  #g-navigation.headroom--not-top .g-main-nav .g-toplevel {
      line-height: 0;
  }
  #g-navigation.headroom--not-top .g-social {
      line-height: 2.6;
  }
  #g-navigation.headroom--not-top .g-main-nav {
      color: #97999c;
  }
}

#g-offcanvas #g-mobilemenu-container ul > li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module).active > .g-menu-item-container, #g-offcanvas #g-mobilemenu-container ul > li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module):hover > .g-menu-item-container {
  color: var(--white);
}