nav {
  display: flex;
  background-color: var(--background);
  clear: both;
  height: 4em;
  line-height: 4em;
  margin: auto;
  justify-content: space-evenly;
  font-family: mono;
  position: relative;
}

#cultura-unam {
  background-color: var(--background-2);
}

#cultura-unam img {
  height: 2.4em;
  margin: auto;
}

nav a {
  display: block;
  text-transform: uppercase;
}

nav a#rum-logo img {
  margin: 0.5em;
  height: calc(4em - 1em);
}

nav#site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
}

nav#sub-nav {
  font-size: 1.2em;
  width: calc(var(--main-width) / 1.2);
  z-index: 9;
}

nav #toggle {
  display: none;
}

nav [for="toggle"] {
  display: none;
}

/* mobile specifics */
@media (max-width: 80em) {
  nav #toggle:not(:checked) ~ a:not([href="/"]) {
    position: absolute;
    top: -1000px !important;
    display: none;
    clear: both;
    width: 100%;
  }

  nav [for="toggle"] {
    display: block;
    padding: 0 1em;
    flex: 0;
    margin-left: -1em;
    cursor: pointer;
  }

  nav a#rum-logo {
    flex: 1;
  }

  nav a#rum-logo img {
    height: 2em;
    vertical-align: middle;
    margin-left: -2em;
  }

  nav a {
    width: 100%;
    text-align: center;
  }

  nav {
    padding: 0 1em;
  }

  main nav {
    width: 100%;
  }

  nav#site-nav {
    display: flex;
    flex-flow: row wrap;
    height: auto !important;
    justify-content: normal;
  }

  nav#sub-nav {
    width: 100%;
    flex-flow: row wrap;
    height: auto;
  }

  nav#sub-nav a {
    margin: auto 0.5em;
    width: auto;
  }
}