.portfolio-carousel {
  padding: 0;
  color: white;
  background-color: $themeDark;
  .item {
    padding: 75px 30px;
    text-align: center;
    background-color: $themeDark;
    @include background-cover;
    .project-details {
      .project-name {
        font-size: 40px;
        line-height: 40px;
        display: block;
        margin-bottom: 5px;
        @include heading-font;
      }
      .project-description {
        font-size: 18px;
        line-height: 18px;
        display: block;
      }
    }
    .device-container {
      padding: 25px;
    }
  }
  @media (min-width: 768px) {
    .item {
      padding: 155px 30px;
      text-align: left;
      .project-details {
        img.client-logo {
          margin: 0 auto 25px 0;
        }
        .project-name {
          font-size: 50px;
          line-height: 50px;
          display: block;
        }
        .project-description {
          font-size: 20px;
          line-height: 20px;
        }
      }
      hr.colored {
        margin: 20px auto 20px 0;
      }
    }
  }
}

.portfolio-gallery {
  .item {
    padding: 15px;
  }
}

.portfolio-modal {
  @include background-cover;
  @include background-fixed;
  .modal-backdrop {
    display: none;
  }
  .modal-dialog {
    max-width: none;
    .modal-content {
      min-height: 100%;
      padding: 100px 0;
      text-align: center;
      color: white;
      border: none;
      border-radius: 0;
      background: transparent;
      background-clip: border-box;
      -webkit-box-shadow: none;
      box-shadow: none;
      h2 {
        font-size: 46px;
        margin: 0;
      }
      .item-details {
        margin: 30px 0;
      }
    }
    .close-modal {
      position: absolute;
      top: 25px;
      right: 25px;
      width: 75px;
      height: 75px;
      cursor: pointer;
      background-color: transparent;
      &:hover {
        opacity: 0.3;
      }
      .lr {
        /* Safari and Chrome */
        z-index: 1051;
        width: 1px;
        height: 75px;
        margin-left: 35px;
        /* IE 9 */
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        background-color: white;
        .rl {
          /* Safari and Chrome */
          z-index: 1052;
          width: 1px;
          height: 75px;
          /* IE 9 */
          -webkit-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
          transform: rotate(90deg);
          background-color: white;
        }
      }
    }
  }
}

// Mockup Carousel
.mockup-carousel {
  .item {
    margin: 0;
    padding: 0;
    img {
      margin: 0;
    }
  }
}

// Portfolio Grid
.portfolio-grid {
  .mix {
    float: left;
    overflow: hidden;
    width: 48%;
    margin: 1%;
    .portfolio-wrapper {
      position: relative !important;
      overflow: hidden;
      cursor: pointer;
      background: $themeDark;
      img {
        position: relative;
        max-width: 100%;
        -webkit-filter: grayscale(0);
        filter: grayscale(0);
        @include transition-all;
        &:hover {
          -webkit-filter: grayscale(1);
          filter: grayscale(1);
        }
      }
      .caption {
        position: absolute;
        bottom: -75px;
        width: 100%;
        height: 75px;
        @include transition-all;
        .caption-bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: $themePrimary;
        }
        .caption-text {
          position: relative;
          z-index: 500;
          padding: 15px 8px;
          color: white;
          a.text-title {
            color: white;
          }
          .text-category {
            font-size: 12px;
            display: block;
          }
        }
      }
    }
    &:hover {
      .portfolio-wrapper {
        .caption {
          bottom: 0;
        }
      }
    }
  }
  @media (min-width: 768px) {
    .mix {
      width: 31%;
      margin: 1%;
    }
  }
}