@media screen and (min-width: 1201px) and (max-width: 1920px) {
   header {
      width: 100%;
      margin: auto;
   }
   nav {
      height: calc(var(--header-height) + 1rem);
      display: flex;
      justify-content: space-between;
   }

   .nav-container {
      width: 80%;
     margin: auto;
   }

   .nav-logo {
      margin-right: 2rem;
   }

   .nav-logo img {
      width: 220px;
   }

   .nav-icons ul {
      justify-content: flex-end;
      list-style-type: none;
   }

   h1 {
      letter-spacing: 8px;
   }

   h2 {
      font-size: 3rem;
      line-height: 1;
      hyphens: none;
   }

   h2.big {
      font-size: 2.75rem;
      line-height: 1;
      hyphens: none;
      overflow: hidden;
   }

   h2.small {
      font-size: 2.35rem;
   }

   h3 {
      font-size: 1.5rem;
      line-height: 1.1;
      text-align: left;
   }

   h4 {
      font-size: 0.9rem;
      font-family: neue-haas-grotesk-display, sans-serif;
      font-weight: 500;
      font-style: normal;
      color: white;
      text-align: center;
      letter-spacing: 10px;
      margin-bottom: 1rem;
   }

   .container--headline.imprint {
      width: 60%;
   }

   .container-content {
      width: 35%;
      top: 10%;
      left: 6%;
   }

   /* ----- B L U E ----- */
   .container-content.blue {
      left: 55%;
      top: 10%;
   }

   /* ----- G R E E N ----- */
   .container-content.green {
      position: absolute;
      top: 6%;
      left: 55%;
   }

   .chevron i {
      font-size: 3rem;
   }
}

.nav-active {
   transform: translateX(0%);
}

@keyframes navLinkFade {
   from {
      opacity: 0;
      transform: translateX(50px);
   }
   to {
      opacity: 1;
      transform: translateX(0px);
   }
}

.toggle .line1 {
   transform: rotate(-45deg) translate(-4px, 6px);
}

.toggle .line2 {
   opacity: 0;
}

.toggle .line3 {
   transform: rotate(45deg) translate(-4px, -6px);
}