.moortak-portfolio-hover-box{
    display   :flex;
    flex-wrap :wrap;
}

.portfolio-item{
    flex-basis    :25%;
    position      :relative;
    margin-bottom :20px;
    color         :#000000;
    padding       :5px;
}

.portfolio-item a{
    display  :block;
    position :relative;
    overflow :hidden;
    height   :100%;
}

.portfolio-image{
    height   :200px;
    overflow :hidden;
    position :relative;
}

.portfolio-item a .portfolio-image:after{
    content    :'';
    display    :block;
    width      :100%;
    height     :100%;
    position   :absolute;
    background :transparent;
    top        :0;
    transition :all 0.4s linear;
    opacity    :0;
}

.portfolio-item a:hover .portfolio-image:after{
    transition :all 0.4s linear;
    opacity    :1;
}

.portfolio-image img{
    transform  :translateY(0);
    transition :transform 1.7s ease-in-out;
}

.portfolio-item a:hover .portfolio-image img{
    transform  :translateY(calc(-100% + 200px));
    transition :transform 1.7s ease-in-out;
}

.portfolio-content{
    bottom     :0;
    width      :100%;
    padding    :10px;
    z-index    :1;
    transition :all 500ms ease;
    color      :#000000;
    background :#eeeeee;
    height     :100%;
}

.portfolio-item a:hover .portfolio-content{
    color       :#ffffff;
    text-shadow :0 1px 2px #000000;
}

/*.portfolio-item a .portfolio-content .portfolio-excerpt{
    height      :0;
    line-height :0;
    opacity     :0;
    transition  :all 500ms ease;
}*/

/*.portfolio-item a:hover .portfolio-content .portfolio-excerpt{
    height      :auto;
    line-height :inherit;
    opacity     :1;
}*/

.img_wrap{
    border-radius :10px;
    overflow      :hidden;
}

.wrapper{
    overflow :hidden;
    position :relative;
}

.img_wrap .img img{transform :translateY(0);transition :transform 1s ease;}

.slick-slide:hover .wrapper .img_wrap .img img{
    transform  :translateY(calc(-100% + 280px));
    transition :transform 1s ease;
}