.navbar-overlay {
  margin-bottom: -104px;
  z-index: 1;
}


/* navigation menu */
.navigation {
  color: #212529;
  font-family: 'noto_sansregular', sans-serif;
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  left: 0;
  top: 0;
  background-color: rgb(255,251,247);
  background-color: rgba(255,251,247, 1);
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: width 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  z-index: 99;
}

/* smaller links */
.small-navigation {
    font-size: .7em;
}

.small-list {
  margin-bottom: 0;
  line-height: 1em;
}

.big-list {
  margin-bottom: 0.4em;
}



/* Position the content inside the overlay */
.navigation__content {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin: 0 auto;
  max-width: 500px;
  min-height: 100%;
  width: 100vw;
  text-transform: capitalize;
  transition: transform 0.3s;
}

.navigation ul {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.navigation__main,
.navigation__sub {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 55px 12px 30px;
  width: 100%;
  min-height: 100vh;
  transition: opacity 0.3s;
}

.navigation__main {
  font-size: 36px;
  text-align: center;

}

.navigation__sub {
  font-size: 18px;
  opacity: 0;
}
.navigation__sub ul {
  max-height: calc(100vh - 100px);
  overflow: hidden;
  transition: max-height 0s 0.3s;
}

/*.navigation li {
  margin-bottom: 0.4em;
}*/

/* The navigation links inside the overlay */
.navigation a {
  text-decoration: none;
  color: inherit;
}
.navigation__content a {
  display: inline-block;
  padding: 0.1em 8px;
  transition: color 0.3s;
}
.navigation__content li.active a,
.navigation__content a:hover,
.navigation__content a:focus {
  color: #ce8d65;
}

/* Position the close button (top right corner) */
.navigation__close {
  color: inherit;
  padding: 0;
  position: absolute;
  top: 20px;
  right: 45px;
  width: 32px;
  height: 32px;
  text-decoration: none;
}
.navigation__close:hover {
  color: #e64830;
  text-decoration: none;
}
.navigation__close::before,
.navigation__close::after {
  background: currentColor;
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
}
.navigation__close::before {
  transform: rotate(45deg);
}
.navigation__close::after {
  transform: rotate(-45deg);
}

.navigation__back {
  position: absolute;
  top: 20px;
  left: 45px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s 0.3s;
}
.navigation__back:hover {
  color: #e64830;
  text-decoration: none;
}
.navigation__back::before {
  content: '';
  display: inline-block;
  border-bottom: 1px solid currentColor;
  border-left: 1px solid currentColor;
  vertical-align: middle;
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
  margin: -4px 5px 0 0;
}

.navigation--opened {
  width: 100%;
}

.navigation--sub .navigation__content {
  transform: translateX(-100%);
}
.navigation--sub .navigation__sub {
  opacity: 1;
  height: auto;
}
.navigation--sub .navigation__sub ul {
  max-height: none;
  transition: none;
}
.navigation--sub .navigation__back {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media (max-height: 450px), (max-width: 500px) {
  .navigation__main {
    font-size: 20px
  }
  .navigation__sub {
    font-size: 14px
  }
  .navigation__close {
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
  }
  .navigation__back {
    top: 18px;
    left: 15px;
  }
}

@media (max-width: 999px) {
  .navigation--sub .navigation__main {
    opacity: 0;
  }
}

@media (min-width: 1000px) {
  .navigation__content {
    max-width: 700px;
  }

  .navigation__sub {
    padding-left: 100px;
  }

  .navigation--sub .navigation__content {
    transform: translateX(-50%);
  }
}