@charset "utf-8";
.portfolio-area h2 {
    margin: 0 0 5px;
    font-size: 40px;
    font-weight: 700;
    /*color: #222538;*/
    line-height: 1.2;
}
.portfolio-area h3 {
    color: #222538;
}
.portfolio-area .section-title {
    text-align: center;
    font-size: 16px;
    font-weight: 300;
}
.single-portfolio {
    margin: 20px 0
}
.single-portfolio .inner .portfolio-img {
    position: relative
}

.single-portfolio .inner .portfolio-img img {
    width: 100%
}

.single-portfolio .inner .portfolio-img .hover-content {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    text-align: center;
    opacity: 0;
    visibility: hidden
}

.single-portfolio .inner .portfolio-img .hover-content .button {
    background-color: #fff;
    border-color: #fff!important
}

.single-portfolio .inner .portfolio-img .hover-content .button:hover {
    background-color: #222;
    color: #fff;
    border-color: #222!important
}

.single-portfolio .inner .portfolio-img:hover .hover-content {
    opacity: .9;
    visibility: visible
}

.single-portfolio .inner .portfolio-content {
    text-align: center;
    padding-top: 25px;
    color: #6d7784
}

.single-portfolio .inner .portfolio-content a {
    display: block
}

.single-portfolio .inner .portfolio-content h3 {
    font-weight: 400;
    margin: 0;
    font-size: 24px
}
.single-portfolio .inner .portfolio-img .hover-content {
    transition: all .3s cubic-bezier(.84,.35,.39,.74) 0s;
}