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

.form-group{
    display:flex;
    flex-direction:row;
    margin:10px 0 10px 0;
}

.filter-select-group{
    width:150px;
    margin: 0 5px 0 0;
    height: 38px;
}

.searchIn{
    width:200px;
    margin: 0 0 0 5px;
}

.custom_btn{
    margin: 20px 0 0 0;
    padding:0 10px 0 10px;
}

/* ---- grid ---- */

.grid {
}

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

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

.element-item {
    position: relative;
    float: left;
    width: 200px;
    margin:10px !important;
    padding:0 !important;
    background-color:transparent;
    border-radius:5px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 20px 0 rgba(0, 0, 0, 0.19);
}

.element-item .body-text {
    width: 100%;
    padding: 15px 0 25px 0;
    background-color: rgb(235, 235, 235);
    border-top-left-radius:0;
    border-top-right-radius:0;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    transition:background-color 500ms;
    text-align: center;
}

.element-item .body-text:hover {
    background-color: rgb(205, 205, 205);
    transition:background-color 500ms;
}

.body-text p {
    margin: 0;
    padding: 0;
}

.name {
    font-weight:700;
}

.element-item .body-pic{
    width: 100%;
    height:150px;
}


.element-item .body-pic .picture{
    width:100%;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    object-fit:cover;
    object-position: 0 25%;
    transition:transform, width, height 500ms;
}

.modal-pic img{
    width:200px;
    height:200px;
    object-fit:cover;
    margin: 0 10px 0 10px;
    border-radius:10px;
    float: right;
}
.mod-bod{
    margin: 0 10px 0 10px;
    text-align:left;
}