/* GANTRY5 DEVELOPMENT MODE ENABLED.
 *
 * WARNING: This file is automatically generated by Gantry5. Any modifications to this file will be lost!
 *
 * For more information on modifying CSS, please read:
 *
 * http://docs.gantry.org/gantry5/configure/styles
 * http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet
 */

@charset "UTF-8";
#g-page-surround {
  padding-top: 5px;
  /* Adjust the pixel amount as needed */
}
/*
// Sticky menu bar on top - op mobiel is het menu niet meer zichtbaar
#g-navigation {
    position: fixed;
    top: 150;
    width: 100%;
    z-index: 9999;
}
*/
/* OR if your menu is in the header section */
/*#g-header {
    padding-top: 1000px; 
}
*/
.sticky-to-top {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 999;
}
.menu-start {
  background-color: #0db515 !important;
}
.menu-start .g-menu-item-title {
  color: #ffffff !important;
}
.menu-start:hover, .menu-start.active {
  background-color: #0db515 !important;
}
.menu-borduren {
  background-color: #af02b8 !important;
}
.menu-borduren .g-menu-item-title {
  color: #ffffff !important;
}
.menu-borduren:hover, .menu-borduren.active {
  background-color: #af02b8 !important;
}
.menu-bedrukken {
  background-color: #19bafb !important;
}
.menu-bedrukken .g-menu-item-title {
  color: #ffffff !important;
}
.menu-bedrukken:hover, .menu-bedrukken.active {
  background-color: #19bafb !important;
}
.menu-kleding {
  background-color: #188fd6 !important;
}
.menu-kleding .g-menu-item-title {
  color: #ffffff !important;
}
.menu-kleding:hover, .menu-kleding.active {
  background-color: #188fd6 !important;
}
.menu-tourzeilers {
  background-color: #ff0117 !important;
}
.menu-tourzeilers .g-menu-item-title {
  color: #ffffff !important;
}
.menu-tourzeilers:hover, .menu-tourzeilers.active {
  background-color: #ff0117 !important;
}
.menu-contact {
  background-color: #f28a0a !important;
}
.menu-contact .g-menu-item-title {
  color: #ffffff !important;
}
.menu-contact:hover, .menu-contact.active {
  background-color: #f28a0a !important;
}
/*
.g-main-nav .g-toplevel > li.active > .g-menu-item-container {
    height: 50px !important;       // De gewenste totale hoogte van de actieve tab
    display: flex !important;
    align-items: center !important; // Houdt de tekst in het midden
    z-index: 10;                   // Zorgt dat de tab over eventuele lagere elementen heen valt
}
*/
.g-main-nav .g-toplevel > li > .g-menu-item-container {
  display: flex !important;
  align-items: center !important;
}
/*
.g-main-nav .g-toplevel > li.active {
    position: relative;
}
*/
/*
.g-main-nav .g-toplevel > li > .g-menu-item-container {
    height: 50px !important; // Pas aan naar uw huidige standaard menu-hoogte
    display: flex !important;
    align-items: center !important;
}
*/
/*
.g-main-nav .g-toplevel > li.active > .g-menu-item-container {
    height: 65px !important;       // De nieuwe, grotere hoogte
    margin-top: -15px !important;  // Exact het verschil (65 - 50 = 15) omhoog schuiven
    align-items: center !important;
}
*/
.g-main-nav .g-toplevel {
  align-items: flex-start !important;
}
.g-main-nav .g-toplevel > li > .g-menu-item-container {
  height: 45px !important;
  display: flex !important;
  align-items: center !important;
}
.g-main-nav .g-toplevel > li.active > .g-menu-item-container {
  height: 55px !important;
  z-index: 99 !important;
}
/*
// Geef de hoover tab de ruimte om te groeien naar beneden zonder de balk te forceren
// 1. Zorg dat de menubalk items aan de bovenkant uitlijnen
.g-main-nav .g-toplevel {
    align-items: flex-start !important;
}

// 2. Standaard hoogte voor normale menu-items
.g-main-nav .g-toplevel > li > .g-menu-item-container {
    height: 45px !important; // Standaard hoogte van uw menu
    display: flex !important;
    align-items: center !important;
    transition: height 0.2s ease; // Zorgt voor een vloeiende overgang bij hover
}

// 3. Maak zowel de actieve tab áls de hover-tab langer naar beneden toe
.g-main-nav .g-toplevel > li.active > .g-menu-item-container,
.g-main-nav .g-toplevel > li:hover > .g-menu-item-container {
    height: 65px !important; // De grotere hoogte voor actief én hover
    z-index: 99 !important;
    display: flex !important;
    align-items: center !important; // Houdt de tekst perfect in het midden
}
*/
/*
// Zorg dat de actieve tab en hover-tab ruimte hebben voor de rand zonder te verschuiven
.g-main-nav .g-toplevel > li.active > .g-menu-item-container,
.g-main-nav .g-toplevel > li:hover > .g-menu-item-container {
    border-top: 10px solid transparent; // Maakt standaard een rand aan van 5 pixels breed
    background-color: #f4f4f4 !important; // De NIEUWE algemene achtergrondkleur voor de actieve tab (verander naar wens)
    
    .g-menu-item-title {
        color: #333333 !important; // De tekstkleur voor de actieve tab (donkergrijs op lichte achtergrond)
    }
}
*/
/*
// ---- SPECIFIEKE RANDKLEUREN PER MENU-ITEM ----
// Hier koppelen we de originele kleur aan de bovenrand als de tab actief of gehoverd is

// Het start menu-item krijgt een bovenrand als hij actief is
.menu-start.active > .g-menu-item-container,
.menu-start:hover > .g-menu-item-container {
    border-top-color: #0db515 !important; // De originele kleur
}

// Het borduren menu-item krijgt een bovenrand als hij actief is
.menu-borduren.active > .g-menu-item-container,
.menu-borduren:hover > .g-menu-item-container {
    border-top-color: #af02b8 !important; // De originele kleur
}

// Het start menu-item krijgt een bovenrand als hij actief is
.menu-bedrukken.active > .g-menu-item-container,
.menu-bedrukken:hover > .g-menu-item-container {
    border-top-color: #19BAFB !important; // De originele kleur
}

// Het start menu-item krijgt een bovenrand als hij actief is
.menu-kleding.active > .g-menu-item-container,
.menu-kleding:hover > .g-menu-item-container {
    border-top-color: #188fd6 !important; // De originele kleur
}

// Het start menu-item krijgt een bovenrand als hij actief is
.menu-tourzeilers.active > .g-menu-item-container,
.menu-tourzeilers:hover > .g-menu-item-container {
    border-top-color: #ff0117 !important; // De originele kleur
}

// Het start menu-item krijgt een bovenrand als hij actief is
.menu-contact.active > .g-menu-item-container,
.menu-contact:hover > .g-menu-item-container {
    border-top-color: #f28a0a !important; // De originele kleur
}
*/
.g-main-nav .g-toplevel > li.active > .g-menu-item-container {
  border-top: 10px solid transparent;
  background-color: #f4f4f4 !important;
}
.g-main-nav .g-toplevel > li.active > .g-menu-item-container .g-menu-item-title {
  color: #333333 !important;
}
.menu-start.active > .g-menu-item-container {
  border-top-color: #0db515 !important;
}
.menu-borduren.active > .g-menu-item-container {
  border-top-color: #af02b8 !important;
}
.menu-bedrukken.active > .g-menu-item-container {
  border-top-color: #19bafb !important;
}
.menu-kleding.active > .g-menu-item-container {
  border-top-color: #188fd6 !important;
}
.menu-tourzeilers.active > .g-menu-item-container {
  border-top-color: #ff0117 !important;
}
.menu-contact.active > .g-menu-item-container {
  border-top-color: #f28a0a !important;
}
.g-main-nav .g-toplevel > li:hover > .g-menu-item-container {
  height: 65px !important;
  border-top: 0px none !important;
}
/*# sourceMappingURL=custom_26.css.map */