.navigation--main {
  display: none;
}

.navigation--hidden {
  pointer-events: none;
  z-index: 1;
  position: fixed;
  text-align: center;
  width: var(--width-100);
  line-height: var(--line-height-large);
}


@media only screen and (min-width: 768px) {
  .navigation--hidden {
    text-align: right;
  }
}

@media only screen and (min-width: 1200px) {
  .navigation--main {
    display: block;
    text-align: right;
    align-self: flex-end;
    margin: auto 0;
    margin-right: var(--spacing-1);
  }
}

.navigation__item {
  line-height:  var(--line-height-medium);
  transform-origin: bottom right;
  transition: transform var(--transition-short-duration) ease-out;
}

.navigation__item:hover {
  transform: scale(1.05);
}

.navigation__link {
  display: block;
  font-weight: var(--weight-black);
  color: var(--white-color);
  --max-size: 32;
  --min-size: 27;
  font-size: var(--responsive);
  line-height: var(--line-height-medium);
  transition: color, opacity var(--transition-short-duration) ease-out;
}

@media only screen and (min-width: 1200px) {
  .navigation__link {
    opacity: 0;
    animation: fade-in-righty var(--transition-normal-duration) ease calc(var(--transition-duration-7) + 0.8s) forwards 1;
  }
}

.navigation__link:hover,
.navigation__link:focus {
  color: var(--active-color);
}

.navigation__link:active {
  filter: brightness(1.4);
}

.navigation__link--active {
  color: var(--active-color);
}

.navigation__link--active::before {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  content: '\2192';
  font-weight: 300;
  font-size: var(--font-huge-mobile);
  margin-right: var(--spacing-fixed-10);
} 

.navigation__link--hidden {
  opacity: 0;
  line-height: var(--line-height-xlarge);
}

@media only screen and (min-width: 768px) {
  .navigation__link--hidden {
    line-height: var(--line-height-medium);
  }
}

.navigation__list--hidden {
  pointer-events: visible;
  background: var(--primary-color-transparent);
  width: var(--width-100);
  height: calc(var(--full-height) + 30vh);
  transform: translateY(-30vh);
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform-origin: top left;
  right: calc(var(--width-100) * 2);
  transition: right var(--transition-short-duration) ease-out;
}

@media only screen and (min-width: 768px) {
  .navigation__list--hidden {
    align-items: flex-end;
  }
}

.navigation__burger-container {
  pointer-events: visible;
}

.navigation__checkbox {
  display: none;
}

.navigation__checkbox:checked ~ .navigation__list--hidden .navigation__item .navigation__link {
  opacity: 1;
}

.navigation__checkbox:checked ~ .navigation__burger-container .burger .burger__title {
  opacity: 0;
}

.navigation__checkbox:checked ~ .navigation__list--hidden {
  right: 0;
}

.navigation__checkbox:checked ~ .navigation__burger-container .burger .burger__title {
  opacity: 0;
}

.navigation__checkbox:checked ~ .navigation__burger-container .burger .burger__bar {
  background-color: var(--white-color);
}

.navigation__checkbox:checked ~ .navigation__burger-container .burger .burger__bar::before {
  top: -1px;
  transform: rotate(45deg) scaleX(.5);
}

.navigation__checkbox:checked ~ .navigation__burger-container .burger .burger__bar::after {
  top: 1px;
  transform: rotate(-45deg) scaleX(.5);
  box-shadow: none;
}