.portfolio-section{
    .section-content{
        padding-bottom:30px;
        background: url(../images/border-dashed.png) top left repeat-x;

    }
    .section-buttons{
        .button{
            min-width: 170px;
        }
    }
}
.portfolio-list{
    margin:0 -15px 23px;
    .portfolio-box{
        width:25%;
        max-height: 258px;
        float:left;
        padding: 0 15px;
        margin:0 0 24px;
        &:nth-child(6n-1){
            clear:both;
        }
    }
    .attachment-thumb-portfolio{
        display: block;
    }
    .portfolio-content{
        display: block;
        position: relative;
        text-decoration: none;
        overflow:hidden;

        &:hover {
            .portfolio-hover{
                opacity: 1;
                top:0;
            }
        }
    }
    .portfolio-hover{
        position: absolute;
        top:5%;
        left:0;
        right:0;
        height:100%;
        background: rgba(0,0,0,0.6);
        color:#ffffff;
        opacity:0;        
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.24s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }
    .hover-content{
        display: table;
        height: 100%;
        width:100%;
        vertical-align: middle;
        font-size:13px;
        &>div{            
            vertical-align: middle;
            display: table-cell;
            padding: 15px 15px 5px;
        }
    }
    .portfolio-title{
        padding: 0 0 17px;
        margin:  0 0 11px;
        border-bottom: 3px solid $brandColor;
    }
}
@media (max-width: 767px){
    .portfolio-list {
        margin: 0 0px 23px;
    }
    .portfolio-list .portfolio-box {
        width: 295px;
        max-width: 100%;
        margin: 0 auto 24px;
        float: none;
        max-height: none;
        padding: 0;
    }
}