.button-group{width: 100%; height: auto; text-align: center; margin-bottom: 50px;}
.filter-button {
    display: inline-block;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-family: 'Open Sans', Arial;
    font-weight: normal;
    padding: 7px 12px 7px 12px;
    margin-left: 5px; margin-right: 5px;
}

.filter-button:hover {

}

.filter-button:active,
.filter-button.is-checked {
}




/* ---- button-group ---- */

.button-group:after {
    content: '';
    display: block;
    clear: both;
}

.button-group .filter-button {
    display: inline-block;
    outline: none;

}



/* ---- isotope ---- */

.filter-project-grid {
    width: 100%; height: auto; text-align: center; overflow: hidden;
}

/* clear fix */
.filter-project-grid:after {
    content: '';
    display: block;
    clear: both;
}

/* ---- .element-item ---- */

.project-item {
    position: relative;
    width: 350px;
    height: auto; overflow: hidden;
    margin-left:15px; margin-right: 15px; margin-bottom: 30px;

}
.project-item-img{width: 350px; height: 280px; overflow: hidden; }
.project-item-img img{
    height: 280px; min-width: 350px; transition: transform 1s ease-in-out;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;


}
.project-item-text{ width: 100%; height: auto; padding-top: 20px; padding-bottom: 20px; font-family: 'Open Sans', Arial; font-size:17px; font-weight: 700; letter-spacing: 0.01em;
    text-align: left; }


.project-item:hover .project-item-img img {

    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);

}

.project-item > * {

}