.workgrid-filter {
    cursor: pointer;
    color: #000;
}

.workgrid-filter.active {
    color: var(--fourth-color);
}

.spinner-projet {
    margin-top:45%
}

.filter {
	text-align: center;
	list-style: none;
	padding: 0;
}

.filter>li {
	display: inline-block;
	padding: 0 0 10px;
}

.works-grid {
	list-style: none;
	padding: 0;
	margin: 0;
}

.work-item {
	width: 100%;
	float: left;
	margin: 0;
}

@media (min-width: 992px)
{
    .work-item {
        width: 50%;
        float: left;
        margin: 0;
    }
    
    .works-grid-3 .work-item {
        width: 33.3333%;
    }
    
    .container .works-grid-3 .work-item {
        width: 33.2%;
    }
    
    .works-grid-4 .work-item {
        width: 25%;
    }
    
    .works-grid-5 .work-item {
        width: 20%;
    }
}

.work-item>a {
	position: relative;
	display: block;
	overflow: hidden;
}

.div-work-image {
	position: relative;
	overflow: hidden;
}

.div-work-image img {
	display: block;
	overflow: hidden;
	width: 100%;
}

.div-work-image:after {
	position: absolute;
	display: block;
	content: "";
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}

.work-caption {
	width: 100%;
	padding: 0 20px;
	opacity: 0;
	position: absolute;
	bottom: 100%;
	left: 0;
	text-align: center;
	overflow: hidden;
}

.work-item:hover .div-work-image:after {
	background: rgba(0, 0, 0, 0.6);
}

.work-item:hover .div-work-image>img {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

.work-item:hover .work-caption {
	bottom: 50%;
	opacity: 1;
	z-index: 3;
	-webkit-transform: translateY(50%);
	-ms-transform: translateY(50%);
	transform: translateY(50%);
}