/*online; Rolldown menu Perdix 12 okt 2021 MOBILE FIRST dan Tablet & Desktop */
nav {
  position: relative;
  width: 100%;
  height: 3.125rem;
  font-size: .96rem;
  z-index: 5;
}

nav .logo {
  display: flex;
  justify-content: center;
  margin: -1.06rem -1.8rem;
  /*bij 130.png*/
  /* margin: -0.875rem -1.7rem; bij 120.png */
}

nav ul {
  display: block;
  width: 12rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--clr-nav-bground);
}

nav ul a {
  text-decoration: none;
  border: 2px solid var(--clr-nav-border);
  border-radius: 0.3em;
  color: var(--clr-nav-color);
  padding: 0.6rem 0.6rem;
  margin: 0.4em;
  text-transform: uppercase;
  font-weight: bold;
  display: block;
}

/*Hover state for top level links*/

nav li a:hover {
  background-color: var(--clr-nav-a);
  color: var(--clr-nav-bground-hover);
}

nav ul ul {
  display: none;
  position: relative;
  width: 100%;
  background-color: var(--clr-nav-bground-subm);
}

nav ul li:hover>ul {
  display: inherit;
}

nav .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

nav .login-account {
  /*width:40%;
  float: right;*/
  margin-top: -46px;
  position: absolute;
  right: 0px;
  top: 2.8rem;
  background-color: var(--clr-foreground);
}

nav .login-account a {
  padding: 0.8rem;
}

/*Start menu met de balkjes*/

nav .menu-icon {
  background-color: var(--clr-foreground);
  padding: 24px 20px;
  margin-right: 0px;
  position: relative;
  float: left;
  cursor: pointer;
  width: auto;
  display: block;
}

/*maak 1 balkje*/

nav .menu-icon .nav-icon {
  background: var(--clr-nav-bars);
  display: block;
  height: 2px;
  width: 18px;
  position: relative;
  transition: background .2s ease-out;
}

/*maak balkje erboven*/

nav .menu-icon .nav-icon:before {
  background: var(--clr-nav-bars);
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
  top: 5px;
}

/*maak balkje eronder*/

nav .menu-icon .nav-icon:after {
  background: var(--clr-nav-bars);
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
  top: -5px;
}

/*Start kruismenu*/

nav .menu-btn {
  display: none;
}

nav .menu-btn:checked~.menu {
  max-height: 650px;
}

nav .menu-btn:checked~.menu-icon .nav-icon {
  background: transparent;
}

nav .menu-btn:checked~.menu-icon .nav-icon:before {
  transform: rotate(-45deg);
  top: 0;
}

nav .menu-btn:checked~.menu-icon .nav-icon:after {
  transform: rotate(45deg);
  top: 0;
}

/*Einde kruismenu*/

li>a:after {
  content: " \25BF";
}

li>a:hover:after {
  content: " \25B5";
}

li>a:only-child:after {
  content: " ";
}

@media (min-width: 48em) {

  nav .logo {
    /* display: flex;
    justify-content: center; */
    /* margin: -0.75rem 0rem; bij de eerste*/
    margin: -1.093rem -1.85rem;
    /*bij 130.png */
    /* margin: -0.938rem -1.85rem; bij 120.png */
  }

  nav .menu {
    width: max-content;
  }

  nav ul {
    display: block;
    width: 100%;
    font-size: 14px;
    background-color: var(--clr-foreground);
  }

  nav ul li {
    float: left;
  }

  nav li a {
    width: 6.3rem;
  }

  nav .menu {
    max-height: none;
  }

  nav .menu-icon {
    display: none;
  }

  /*vanaf hier maak ik zelf code 10 maart 2020*/
  nav .login-account {
    width: 5.6rem;
  }

  nav .login-account a {
    width: 100%;
    line-height: inherit;
  }

  nav .login-account li ul {
    display: none;
    position: relative;
  }

  nav ul li ul {
    display: none;
    position: absolute;
    border-radius: 0px 0px 4px 4px;
  }

  nav ul li ul li {
    display: block;
    float: none;
  }

  nav ul li:hover ul {
    display: block;
    width: auto;
  }

  nav ul ul {
    display: block;
    width: 100%;
    background-color: var(--clr-nav-bground-subm);
  }
}