img {

    width: 80%;

    height: 80%;

    object-fit: cover;

    overflow: hidden;

}



.middle {

    transition: .5s ease;

    opacity: 0;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    text-align: center;

    color: #000;

    z-index: 222;

}



.glightbox {

    position: relative

}



.glightbox:hover .middle {

    opacity: 1

}









.gallery-title {

    font-size: 36px;

    color: #8b7259;

    text-align: center;

    font-weight: 500;

    margin-bottom: 70px;

}



.gallery-title:after {

    content: "";

    position: absolute;

    width: 7.5%;

    left: 46.5%;

    height: 45px;

    border-bottom: 1px solid #5e5e5e;

}



.filter-button {

    font-size: 18px;

    border: 1px solid #8b7259;

    border-radius: 5px;

    text-align: center;

    color: #8b7259;

    margin-bottom: 30px;



}



.filter-button:hover {

    font-size: 18px;

    border: 1px solid #8b7259;

    border-radius: 5px;

    text-align: center;

    color: #ffffff;

    background-color: #8b7259;



}



.filter-button.active {

    background-color: #8b7259;

    color: white;

}



.port-image {

    width: 100%;

}



.gallery_product {

   

    -webkit-animation-duration: 1s;

    animation-duration: 1s;

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

}



.block {

    opacity: 0;

}



@-webkit-keyframes fadeIn {

    0% {

        opacity: 0;

    }



    100% {

        opacity: 1;

    }

}



@keyframes fadeIn {

    0% {

        opacity: 0;

    }



    100% {

        opacity: 1;

    }

}



.fadeIn {

    -webkit-animation-name: fadeIn;

    animation-name: fadeIn;

}