.off-canvas {
  transition: transform 0.6s ease 120ms;

  &.is-closed {
    position: absolute;
    visibility: visible;
    transform: translateY(-100vh);
  }

  &.is-open {
    position: fixed;
    transition-delay: 120ms;
    transform: translateY(0);
  }
}

.off-canvas.position-right,
.off-canvas.position-top {
  width: 100vw;
  height: 115vh;
  overflow: hidden;
  z-index: 22;

  .menu {

    max-width: 400px;
    margin: 0 auto;
    margin-top: 20vh;

    text-align: center;

    li {
      a {
        position: relative;
      }
    }

    &.dropdown {
      margin: 0;
      padding: 0;
      padding-left: $global-padding/2;

      .menu-item {
        margin: $global-padding/2;
        @include breakpoint(large up)
        {
          margin: $global-padding;
        }
      }
    }

    .menu-item {
      margin: $global-padding/4 0;

      list-style: none;

      @include breakpoint(small down) {
        margin: -3px 0;
      }

      a {
        color: $brand-primary;
        line-height: 1.5;


        @include breakpoint(small) {
          font-size: 1rem;
          line-height: 1.35;
        }

        display: inline-block;

        font-family: "Futura PT W01 Bold", sans-serif;

        &:hover {
          color: $brand-secondary;
        }
      }

      a[href="#"] {
        cursor: default;
        border: none;
      }
    }

    @include breakpoint(small down) {
      margin-top: 12vh;
    }
  }

  @media only screen and (max-height: 400px) {
    height: 130vh;
  }
}

.position-right {
  transform: translateX(100vw);
}

.position-top {
  transform: translateY(-100vh);
}

.secondary-title-bar {
  bottom: 60px;
  position: absolute;
  width: 100%;

  .toggle-offcanvas {
    right: 40px;
  }

  @media only screen and (min-width: 2560px) {
    bottom: 150px;

    .toggle-offcanvas {
      right: 80px;
    }
  }

  @include breakpoint(large down) {
    bottom: 50px;

    .toggle-offcanvas {
      right: 22px;
    }
  }

  @include breakpoint(medium down) {
    bottom: 60px;
  }

  @include breakpoint(small down) {
    bottom: 40px;
  }

  @media only screen and (max-height: 400px) {
    .toggle-offcanvas {
      top: 30px;
      right: 30px;
    }
  }
}

@media only screen and (min-width: 2560px) {
  .title-bar-title {
    img {
      width: 450px !important;
      height: 90px !important;
    }
  }
}