.project-item-containter {
  display: flex;
  flex-wrap: wrap; }

.project-item {
  max-width: 100%;
  border: 15px solid white;
  position: relative;
  display: flex;
  align-items: flex-end; }
  .project-item.active {
    width: 100%;
    display: block !important; }
    .project-item.active .item-content {
      height: 100% !important; }
      .project-item.active .item-content .left {
        width: 70%;
        height: auto;
        min-height: 500px;
        filter: grayscale(0%); }
        .project-item.active .item-content .left img {
          display: none; }
      .project-item.active .item-content .right {
        width: 30%;
        height: auto;
        visibility: visible;
        padding: 60px; }
        .project-item.active .item-content .right h2, .project-item.active .item-content .right h3, .project-item.active .item-content .right p, .project-item.active .item-content .right a {
          opacity: 1;
          transition: ease all .5s; }
    .project-item.active .item-hover-overview {
      display: none; }
  .project-item .item-content {
    display: flex;
    justify-content: space-between;
    z-index: 0; }
    .project-item .item-content .left {
      background-size: cover;
      background-position: center center;
      filter: grayscale(100%);
      transition: ease all 1.5s;
      cursor: pointer;
      position: relative;
      overflow: hidden; }
      .project-item .item-content .left:hover {
        filter: grayscale(0%); }
      .project-item .item-content .left img {
        height: 188px;
        width: auto;
        visibility: hidden; }
    .project-item .item-content .right {
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      display: flex;
      height: 0px;
      width: 0px;
      visibility: hidden;
      padding: 0px; }
      .project-item .item-content .right h2, .project-item .item-content .right h3, .project-item .item-content .right p, .project-item .item-content .right a {
        margin: 0;
        opacity: 0; }
      .project-item .item-content .right h2, .project-item .item-content .right h3, .project-item .item-content .right p {
        margin-bottom: 25px; }
      .project-item .item-content .right h2 {
        margin-bottom: 5px; }
      .project-item .item-content .right .meta-title {
        margin-bottom: 5px; }
      .project-item .item-content .right .meta-content:last-of-type {
        margin-bottom: 0px; }
      .project-item .item-content .right .project-link {
        position: absolute;
        bottom: 15px;
        right: 30px; }
  .project-item .item-hover-overview {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0;
    display: flex;
    transition: ease all .5s;
    z-index: 1;
    cursor: pointer;
    padding: 0px;
    justify-content: flex-end;
    align-items: flex-end; }
    .project-item .item-hover-overview.top-left {
      justify-content: flex-start;
      align-items: flex-start; }
    .project-item .item-hover-overview.top-right {
      justify-content: flex-end;
      align-items: flex-start; }
    .project-item .item-hover-overview.bottom-left {
      justify-content: flex-start;
      align-items: flex-end; }
    .project-item .item-hover-overview h3 {
      color: black;
      margin: 0;
      font-size: 14px;
      padding: 5px 15px;
      background: white; }
    .project-item .item-hover-overview:hover {
      opacity: 1; }

@media only screen and (max-width: 960px) {
  .project-item.active .item-content .left {
    width: 100%;
    min-height: 0px; }
    .project-item.active .item-content .left img {
      height: auto;
      width: 100%;
      display: block; }
  .project-item.active .item-content .right {
    padding: 30px 0;
    width: 100% !important; }
  .project-item .item-content {
    justify-content: center;
    align-items: flex-start;
    flex-direction: column; }
    .project-item .item-content .right .project-link {
      right: 0px; } }
@media only screen and (max-width: 760px) {
  .project-item {
    max-width: calc(50% - 16px);
    width: 100%; }
    .project-item.active {
      max-width: 100%; }
    .project-item .item-content {
      width: 100%; }
      .project-item .item-content .left {
        width: 100%; } }
@media only screen and (max-width: 640px) {
  .project-item {
    max-width: 100%; }
    .project-item .item-content {
      height: 100% !important; }
      .project-item .item-content .left img {
        height: auto;
        width: 100%; } }

/*# sourceMappingURL=custom.css.map */