.item-container-project {

background-color: $background-color;
margin: $spacing-unit;
width: 400px;
height: 285px;

@media screen and (max-width: $on-phone) {
  width: 300px;
  height: 180px;
}

.item-project {
  height: 215px;
  @media screen and (max-width: $on-phone) {
    height: 115px;
  }
  img {
    display: block;
    width: 100%;
  }
}

.content-hamburger-menu {
  width: 400px;
  height: 285px;
  box-shadow: 0 0 1em $grey-color;
  position: relative;
  top: -215px;
  transition: .3s;
  overflow: hidden;

  @media screen and (max-width: $on-phone) {
    height: 180px;
    top: -115px;
    width: 300px;
  }

  .information-project {
    background-color: $purple-color;
    bottom: 0px;
    color: $brand-color;
    height: 70px;
    line-height: 70px;
    position: absolute;
    width: 100%;
    z-index: 10;
    @media screen and (max-width: $on-phone) {
      height: 30px;
      line-height: 30px;
      font-size: $spacing-unit / 2;
    }
    ul {
      display: flex;
      justify-content: space-between;
      h3 {
        margin-right: $spacing-unit;
      }
      .icon:hover {
        color: $grey-color-light;
      }
    }
  }
  .nav-links {
    align-items: center;
    bottom: -285px;
    display: flex;
    justify-content: center;
    height: 215px;
    // display: inline-block;
    position: relative;
    // pointer-events: none;
    // z-index: 1;
    background-color: $purple-color-transparent;
    transition: .3s;
    @media screen and (max-width: $on-phone) {
      height: 160px;
    }
    .nav-item {
      position: relative;
      display: inline-block;
      // float: left;
      // clear: both;
      // color: transparent;
      font-size: 14px;
      padding: 30px;
      letter-spacing: -6.2px;
      height: 7px;
      line-height: 7px;
      text-transform: uppercase;
      &:hover {
        color: $grey-color-light;
      }
    }
  }
  @for $i from 1 through $projects {
    .active_nav-#{$i} {
      bottom: 0;
    }
  }
}

}