// Portfolio Section
#portfolio{
   background: #F6F6F6;
  .mix{
    padding-bottom: 15px;
  }
  .section-header{
    color: #444;
  }
}
#portfolio-list .mix{
    display: none;
}
.controls{
  text-align: center;
  padding: 0px 0px 40px;  
  .mixitup-control-active{
    color: $preset!important;
    border-color: $preset;
    background: transparent;
  }
  .btn{
    margin: 4px;
    text-transform: uppercase;
  }
  &:hover{
    cursor: pointer;
  }
}
.portfolio-img{
  overflow: hidden;
  display: block;
  position: relative;
  img{
    width: 100%;
  } 
}
.portfoli-content{
  width: 100%;
  position: absolute;
  height: 100%;
  opacity: 0;
  top: 0;
  -webkit-transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  &:before{
    background-color: rgba(1, 3, 7, 0.8);
    top: 0px;
    left: 0px;
    bottom: 15px;
    right: 30px;
    content: '';
    position: absolute;
    -webkit-transform:scale(0.9);
    -moz-transform:scale(0.9);
    -ms-transform:scale(0.9);
    -o-transform:scale(0.9);
    transform:scale(0.9);
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease; 
  }
}
.sup-desc-wrap{
  display: table;
  width: 100%;
  height: 100%;
  .sup-desc-inner{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding: 0 35px;
  }
  .sup-meta-wrap{
    .sup-title{
      display: block;
      outline: none;
      margin-bottom: 10px;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -o-transform: scale(0);
      transform: scale(0);
      opacity: 0;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      transition: all 0.5s ease;
      h4{
        font-size: 22px;
        color: #fff;
        margin: 0 0 5px;
        line-height: 26px;
        text-transform: uppercase;
        font-weight: 700;
      }
    }
    .sup-description{
      font-size: 14px;
      line-height: 22px;
      color: #fff;
      text-align: center;
      -webkit-transform: translateY(40px);
      transform: translateY(40px);
      opacity: 0;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      transition: all 0.5s ease;
    }
  }
}
.portfolio-item:hover .portfoli-content,
.portfolio-item:hover .portfoli-content:before{
  opacity: 1;
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -ms-transform:scale(1);
  -o-transform:scale(1);
  transform:scale(1);
}
 .portfolio-item:hover .sup-title{
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.portfolio-item:hover .sup-description{
  opacity: 1;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
 }