.cover {
  position: fixed;
  z-index: 1;

  display: block;
  width: $aside-width-collapsed;
  height: 100%;
  overflow-y: auto;

  border-right: 1px solid $gray;
  box-shadow: 10.5px -10px 1px -9px $gray-light;

  &.animated {
    transition: width $aside-animation-time $aside-animation;
  }
  &.expanded {
    width: 100%;

    .navigation.left {
      margin-top: .85rem;
      margin-bottom: 1rem;
    }
  }
  &.container {
    text-align: center;

    color: $gray-lightest;

    @extend %font-shadow;
    @extend %center-absolute;
    @extend %background-filter;
  }
}

#profile-resume {
  display: none;
}

.profile {
  max-width: 38.75rem;
  > p {
    margin: 10px 2rem;

    font-size: .9rem;
  }
  > a {
    > h1 {
      margin: 10px auto;

      font-family: $sans-font;
      font-size: $unit * 1.6;
      font-weight: bold;

      letter-spacing: .05rem;

      color: $gray-lightest;
    }
    > h3 {
      margin: 0;

      color: $gray-lightest;
    }
    > img {
      width: 7rem;

      border: 2px solid rgba($primary-color, .1);
      box-shadow: 0 0 1px 1px rgba(000, 000, 000, .3);
    }
  }
}
.navigation {
  &.left {
    display: inline-block;
    .links {
      margin: 0;

      list-style: none;

      > li {
        display: block;
        margin: 0 1px 0 0;

        line-height: 1em;

        &.expanded {
          display: inline-block;
          margin: 0 5px;

          border-radius: 20px;

          @extend %btn-cover-with-border;

          > a {
            padding: .625rem 1.25rem;
          }
        }

        > a {
          display: block;
          float: none;
          padding: .5rem 1.25rem;

          opacity: .8;
          color: $gray-lightest;

          @extend %btn-cover;

          &:hover {
            color: $hover-color;
          }
        }
      }
    }
  }
  &.right {
    display: block;
    margin: .5rem;
    .social {
      margin: 0;
      &.item {
        display: inline-block;
        margin: 0 4px 0 0;

        line-height: 1em;
        a {
          padding: 6px 8px 6px 9px;

          @extend %btn-cover;
          .label {
            display: none;
          }
          .icon {
            display: block;

            font-size: 1.7em;
          }
          &:hover {
            color: $hover-color;
          }
        }
      }
    }
  }
}