.portfolio-work {
  padding: 80px 0;

  .block {
    .portfolio-menu {
      text-align: center;

      .btn-group {
        margin-bottom: 40px;

        label {
          display: inline-block;
          border: 1px solid $border-color;
          padding: 8px 25px;
          cursor: pointer;
          font-size: 15px;
          color: lighten( $black, 20 );
          outline: 0;
          background: $white;
          margin: 2px;
          border-radius: 0;
          @include transition (all, 0.3s, ease);
        }
      }
    }
  }
}

.portfolio {
  &-item {
    position: relative;
    padding: 0;

    img {
      width: 100%;
      height: auto;
    }

    &:hover {
      .portfolio-hover {
        visibility: visible;
        opacity: 1;
      }

      .portfolio-content {
        transform: translateY(-50%);
      }
    }
  }

  &-hover {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(60, 55, 55, 0.5);
    visibility: hidden;
    opacity: 0;
    transition: .3s ease;
  }

  &-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-40%);
    text-align: center;
    padding: 20px;
    transition: inherit;

    * {
      color: $white;
    }

    a {
      display: block;
      transition: .2s ease;

      i {
        font-size: 30px;
      }

      &.h3 {
        margin-top: 0;
      }
    }
  }
}




// Portfolio Single Page
.portfolio-single-page {
  .project-details {
    h4 {
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px dashed $border-color;
    }

    span {
      color: lighten( $black, 51.3 );
      width: 180px;
      display: inline-block;
    }

    strong {
      color: lighten( $black, 19.2 );
      font-weight: normal;
    }

    ul {
      li {
        margin-bottom: 10px;
      }
    }
  }
}