.main-navigation {
  z-index: 3;
  margin-top: 60px;
  width: 40%;
  @extend %link-style;

  @include below(lap) {
    width: auto;
  }

  ul.nav--main {
    display: inherit;
    justify-content: flex-end;
    text-align: right;

    > li {
      list-style: none;
      display: inline-block;
      white-space: nowrap;

      > a {
        color: $color-white;
        text-decoration: none;
        text-transform: capitalize;
        font-size: 18px;
        padding: 0 13px;
        letter-spacing: 1px;
        line-height: 27px;
      }
    }
    @include below(lap) {
      display: none;
    }
  }
  @include below(lap) {
    &.toggled {
      position: fixed;
      background-color: rgba(3, 0, 255, 0.9);
      height: 100vh;
      top: 0;
      left: 0;
      right: 0;
      padding: 40px;
      margin: 0;
      z-index: 4;

      .nav--toolbar {
        position: absolute;
        right: 40px;
        top: 160px;
        height: 100vh;
        margin-top: 0;
        z-index: 5;
        display: block;
        text-align: right;
        width: 200px;
      }

      ul.nav--main > li {
        margin-left: 0;
        display: block;
      }

      ul.nav--main > li > a {
          padding: 0;
        font-size: 32px;
        letter-spacing: 1px;
        line-height: 56px;
        text-align: right;
      }

      .c-burger__slice--middle {
        position: absolute;
        right: -9px;

        &:after {
          content: "";
          position: absolute;
          top: -4px;
          right: -2px;
          vertical-align: middle;
          border: solid #fff;
          border-width: 0 3px 3px 0;
          transform: rotate(-45deg);
          -webkit-transform: rotate(-45deg);
          padding: 4px;
        }
      }

      a:hover {
        opacity: 1 !important;
      }

      .menu-toggle {
        right: 55px;
        top: 102px;
      }
    }
  }

    .menu-toggle {
      position: absolute;
      right: 40px;
      top: 70px;
      background: transparent;
      padding: 0;
      z-index: 999;
      cursor: pointer;

      @include above(lap) {
        display: none;
      }

      &:focus {
        outline: none;
      }
    }
  }