.portfolio5-element {
    overflow: hidden;
}

.portfolio5-element .tabs-list a {
    text-align: center;
}

.portfolio5-element .portfolio-item {
    position: relative;
}

.portfolio5-element .portfolio-item .item-details-wrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.portfolio5-element .portfolio-item .item-details {
    padding: 20px;
    height: 100%;
    visibility: visible;
    opacity: 1;
    transition: all 0.15s;
}

.portfolio5-element .portfolio-item .item-details .item-title:before {
    content: '';
    height: 1px;
}

.portfolio5-element .portfolio-item .item-cover img {
    border: 7px solid #dddddd9c;
    transition: all 0.3s;
}

.portfolio5-element .portfolio-item:hover .item-details-wrapper .item-details {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-5%);
}

.portfolio5-element .portfolio-item .item-details-wrapper .item-details-onhover {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(50px);
}

.portfolio5-element .portfolio-item .item-details-wrapper .item-details-onhover span {
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transform: translateY(0);
    z-index: 999;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    text-align: center;
    transition: all 0.3s;
}

.portfolio5-element .portfolio-item:hover .item-details-wrapper .item-details-onhover span {
    visibility: visible;
    opacity: 1;
    transform: translateY(-100%);
}