/* Small Desktop & Tablet landscape */
@media only screen and (max-width: 1310px) {
  :root {
    --content-padding: 1em;
    --main-content-padding: 0.8em;
    --content-width: 100%;
  }

  main {
    border-left: none;
    border-right: none;

    & .modul_wrapper {
      display: flex;

      & .sidebar {
        position: fixed;
        right: 1em;

        &.unscrolled {
          top: 12em;

          &>.expand_icon {
            top: 18em;
          }
        }

        &>.expand_icon {
          display: block;
          position: fixed;
          top: 11em;
          right: 0em;
          transform: rotate(180deg);
          cursor: pointer;
          transition: all 0.3s ease;
          z-index: 5;

          &>img {
            height: 4.2em;
          }

        }

        &.shrink {
          right: -20.1em;

          &>.expand_icon {
            transform: rotate(0deg);
          }
        }
      }
    }

  }

  section.two_col {
    column-gap: calc(var(--content-padding) * 4);
  }
}

/* Tablet Portrait */
@media only screen and (max-width: 1020px) {
  :root {
    --font-size: 0.75rem;
    --large-font: 1.4em;
  }

  header.shrink nav>ul>li>p {
    color: transparent !important;
  }

  header nav {
    margin-right: 0;

    &>ul {
      top: 2.3em;
      pointer-events: none;

      &>.nav-item {
        margin-left: -8.1em;

        &>.nav-background {
          transform: rotate(-68deg) scaleY(-1);
          clip-path: none;
          pointer-events: auto;
        }

        &>p {
          transform: rotate(-68deg);
          text-align: left;
          padding-left: 1em;
          bottom: 2em;
        }
      }
    }
  }

  header nav ul .nav-item {
    &>ul {
      pointer-events: all;
      width: auto;
      position: fixed;
      top: 12.8em;
      right: 0;
      transition: top 0.3s ease-in-out;
    }

    &:nth-child(3) ul {
      border-top: 2px solid white;
    }
  }

  header.shrink nav ul .nav-item>ul {
    top: 6.3em;
  }

  #scrollToTop {
    right: 0.5em;
  }

  section.two_col {
    display: flex;
    flex-direction: column;

    &>img {
      margin-bottom: var(--font-size);

      &.mobile_shrink {
        max-width: 15em;
      }
    }
  }

  main section.module {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Smartphones */
@media only screen and (max-width: 767px) {
  :root {
    --scale-factor: 0.7;
  }

  header>nav {
    margin-right: -2em;
  }

  header>a>.logo-wrapper>.logo {
    &>.GETstripes {
      height: calc(3em * var(--scale-factor));
    }

    &>.GETtypo {
      height: calc(2.75em * var(--scale-factor));
      bottom: calc(2.5em * var(--scale-factor));
      margin-left: calc(-6.05em * var(--scale-factor));
    }
  }

  #videoOverlay {
    padding: 1em;
  }

  main {
    max-width: 100vw;
  }

  main section:not(.sidebar) {
    padding: 0em;
  }

  section .hs_grid {
    grid-template-columns: 1fr;
  }

  main>section.module {
    display: flex;
    flex-direction: column;

    &>article>ol {
      position: relative;
    }
  }

  main>.modul_wrapper>.modul_content {
    padding-right: 1em !important;
    flex-wrap: nowrap;
    overflow: hidden;

    &>h3 {
      padding-left: 1.8em;
    }
  }

  main section.content_index .index_results ul li {
    flex-direction: column;
  }

  main section.content_nomenclature {
    & dl {
      &>dd {
        max-width: calc(100vw - 5em);
      }
    }
  }
}