:root {
    --menu-width: 1380px;
}


@media (max-width: 992px) {

  .row > .divgumbuttons   { margin-top: 0; }

  /* Step 1: Common Properties
  These styles are required to make icons render reliably */
  .icon::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

  .slide-menu {
    position: relative;
    width: 100%;
    max-width: var(--menu-width);
    width: 100%;
    /* height: 100vh; */
    top: 0;
    right: 0;
    /* display: none; */
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
    transition: -webkit-transform 300ms ease-in-out;
    transition: transform 300ms ease-in-out;
    transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
    /* -webkit-transform: translateX(100%);
            transform: translateX(100%); */
    will-change: transform;
    z-index: 10;
  }

  .slide-menu .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: -webkit-transform 300ms ease-in-out;
    transition: transform 300ms ease-in-out;
    transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    will-change: transform; 
  }

  .ulniv3 { 
    max-height: calc(100vh - 60px);
    overflow: auto;
  }

  .slide-menu ul {
    padding-left: 0;
    list-style: none;
    position: relative;
    width: var(--menu-width);
    max-width: 100%;
    margin: 0;
  }

  .slide-menu ul ul {
    position: absolute;
    left: 100%;
    top: 0;
    padding: 0 0 140px;
    display: none;
  }

  .slide-menu.no-transition, .slide-menu.no-transition * {
    transition: none !important;
  }

  #boom-main-nav-wrapper  { position: relative; background-color:#FFF; }

  #boom-main-nav ul li {
      padding-left: 0;
      margin-left: 0;
      display: flex;
  }

  #boom-main-nav ul li a {
      display: block;
      position: relative;
      color: #000;
      width: CALC(100% - 0.5rem);
      padding: 12px 10px;
      text-decoration: none;
  }

  #boom-main-nav ul li a:hover {
      color: #12197c;
  }

  #boom-main-nav ul li.bm-title a {
    font-weight: bold;
  }

  #boom-main-nav ul li a[data-action] {
      border-bottom: 1px solid #f3f3f3;
  }

  #boom-main-nav ul li a.withsub::after {
    content: " ";
    position: absolute;
    right: 0px;
    top: 16px;
    width: 12px;
    height: 12px;
    background: url('/images/chevron.svg') center center / 14px auto no-repeat;
    transform: rotate(180deg);
    background-size: contain;
  }
  
  #boom-main-nav ul.ulniv2 a:not(.slide-menu-control):after { display: none; }

  #boom-main-nav ul li a.slide-menu-control   { padding: 12px 10px 12px 25px; font-weight: bold; }
  #boom-main-nav ul li a.slide-menu-control::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: calc(50% - 11px);
    left: 8px;
    background: url('/images/chevron.svg') no-repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-size: 10px 10px;
    background-position: 30% 70%;
    transform: rotate(0deg) !important;
  }

/*
  #boom-main-nav ul li a.withsub::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: calc(50% - 10px);
    background: url('/images/chevron.svg') no-repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-size: 10px 10px;
    background-position: 30% 70%;
    transform: rotate(180deg);
  }
*/

  #boom-main-nav.slide-menu   { height: 100vh; }

}



@media (min-width: 992px) {

  .slide-menu         { background: #f3f3f3; }
  .slide-menu ul ul   { top: 42px; }

  .header-menu-logo   { position: absolute; right: 12px; top: 60px; }

  #boom-main-nav-wrapper  { background-color: #FFF; width: 1380px; margin: 0 auto; }
  #boom-main-zoeken       { display: none; }
  #boom-main-nav ul li.bm-title a { display: none; }
  #boom-main-nav > ul     { display: flex; flex-direction: row; }
  #boom-main-nav > ul .niv1 > a   { display: block; padding: 12px 0px 12px 10px !important; font-weight: bold; font-size: 16px; }
  #boom-main-nav > ul .niv1 > a.withsub { padding-right: 25px !important; }
  #boom-main-nav > ul .niv1.nosub > a   { padding: 12px 10px 12px 10px !important;  }
  #boom-main-nav > ul .niv1 > a .menu-item-labelwrapper { max-width: calc(100% - 10px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #boom-main-nav > ul .niv1 a     { padding: 8px 25px 8px 10px; text-wrap: balance; }
  #boom-main-nav > ul > li:hover ul { display: block; }

  #boom-main-nav .niv2wheader a     { display: block; }

  #boom-main-nav.slide-menu { overflow: inherit; height: auto; }
  #boom-main-nav .ulniv2 a { padding-left: 20px; }
  #boom-main-nav-wrapper                  { margin: 0; padding: 0; }
  #boom-main-nav-wrapper:hover            { background: #fff; }
  #boom-main-zoeken                       { display: none; }
  #boom-main-nav-wrapper .bm-title        { display: none; }
  #boom-main-nav-wrapper .ulniv1                { display: flex; position: relative; min-height: 46px; }
  #boom-main-nav-wrapper .ulniv1 .niv1          { flex: 1 0 0%; background: #fff; }
  #boom-main-nav-wrapper .ulniv1 .niv1:hover    { background: var(--menu-bgcolor); }
  #boom-main-nav-wrapper .ulniv1 .niv1 > a        { background: var(--menu-bgcolor); }
  #boom-main-nav-wrapper .ulniv1 .niv1 > a:hover  { background: #c8e2e8 !important; }
  /* #boom-main-nav-wrapper .ulniv1 .niv1.nosub > a:hover  { background: #fff !important; } */
  #boom-main-nav-wrapper:hover .ulniv1 .niv1 > a  { background: transparent; }
  #boom-main-nav-wrapper:hover .ulniv1 .niv1 a    {  opacity: 0.7; }
  #boom-main-nav-wrapper .ulniv1 .niv1:hover a    {  opacity: 1; }
  #boom-main-nav-wrapper .ulniv1:hover  { background: #fff; }
  #boom-main-nav-wrapper .niv1 a:hover        { text-decoration: none; background: #c8e2e8; }
  #boom-main-nav-wrapper .menu-label a:hover        { text-decoration: none; color: #000; }

  #boom-main-nav ul li a[data-action]::after {
    position: relative;
    transform: rotate(180deg);
    display: inline-block;
    float: left;
    top: -1px;
    right: auto;
  }

  #main-nav                                   { background: var(--menu-bgcolor); }
 
  #boom-main-nav-wrapper .ulniv1              { background: var(--menu-bgcolor); }
  #boom-main-nav-wrapper .ulniv2              { display: none; cursor: pointer; padding: 0 0 10px; }
  #boom-main-nav-wrapper.default-menu:hover .ulniv2        { display: block; }

  #boom-main-nav-wrapper .ulniv2 a            { position: relative; display: block; color: #b7b7b7; padding: 3px 10px 3px 0; }

/*
  .niv2wheader ul li a  { position: relative; } 
  .niv2wheader ul li a:after,
  #boom-main-nav-wrapper .ulniv2 a:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 10px;
    top: calc(50% - 6px);
    right: 10px;
    background: url('/images/chevron.svg') no-repeat;
    background-size: 8px;
    transform: rotate(180deg);
    opacity: .2;
  }

*/


  #boom-main-nav-wrapper .ulniv1:hover a:after    { opacity: 1; }

  #boom-main-nav-wrapper .ulniv1:hover                { background: var(--menu-bgcolor); }
  #boom-main-nav-wrapper .ulniv1:hover .niv1label     { color: #000; }
  #boom-main-nav-wrapper .ulniv1:hover a              { color: #000; } 

  #boom-main-nav-wrapper .niv1 > a { position: relative; }
  #boom-main-nav-wrapper .niv1 > a .menu-item-labelwrapper:after     {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: calc(50% - 10px);
    background: url('/images/chevron.svg') no-repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-size: 10px 10px;
    background-position: 30% 70%;
    transform: rotate(270deg);
  }


}

@media (min-width: 1200px) {

  #boom-main-nav.slide-menu ul li ul.ulniv3.uldouble    { width: 756px; }

}

@media (min-width: 1400px) {

  #boom-main-nav.slide-menu ul li ul.ulniv3.uldouble    { width: 936px; }

}