
#portfolio-section {
    padding: 30px 0px;
    position: relative;
}



.item-portfolio{
    display: block;
    margin-bottom: 30px;
    position: relative;
}

.item-portfolio .portfolio-text{
 padding: 15px;
 background: #00468c;
}

.item-portfolio .portfolio-text h4{
    color: #ffffff;
}

.item-portfolio .portfolio-text p{
    color: #ffffff;
    margin-bottom: 0px;
}



@media (min-width: 992px) {
    #portfolio-section{
        padding: 50px 0px;
    }




    .item-portfolio .portfolio-text{
        text-align: center;
        padding: 15px;
        background: #00468c;
        position: absolute;
        
        left: 15px;
        
        
        bottom: 15px;
        -webkit-transition: all 0.3s linear;
        -khtml-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
    }

    .item-portfolio:hover .portfolio-text{
        background: rgb(0 70 140 / 75%);
        position: absolute;
        left: 15px;
        right: 15px;
        top: 15px;
        bottom: 15px;
        -webkit-transition: all 0.3s linear;
        -khtml-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
    }

    .item-portfolio .portfolio-text h4{
        color: #ffffff;
    }

    .item-portfolio .portfolio-text p{
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        width: 0px;
        height: 0px;
        overflow: hidden;
        -webkit-transition: all 0.3s linear;
        -khtml-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
    }

    .item-portfolio:hover .portfolio-text p{

        width: inherit;
        height: inherit;
        overflow: inherit;
        -webkit-transition: all 0.3s linear;
        -khtml-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
    }



}
@media (min-width: 1024px) {


    .row-portfolio .col-portfolio:nth-child(5n+1){
        width: 50%;
    }
    .row-portfolio .col-portfolio:nth-child(5n+2){
        width: 50%;
    }
    .row-portfolio .col-portfolio:nth-child(5n+3){
        width: 33.33%;
    }
    .row-portfolio .col-portfolio:nth-child(5n+4){
        width: 33.33%;
    }
    .row-portfolio .col-portfolio:nth-child(5n+5){
        width: 33.33%;
    }


}