@charset "UTF-8";

div.classic-project-list{
    position:               relative;
    text-align:             left;
	padding: 				0;
	margin: 				auto;
}

.listing-categories{
	text-align: 			center;
	margin: 				0 0 30px;
}

.listing-categories:after{
	clear: 					both;
	content: 				'';
	display: 				block;
}

.listing-categories li{
	display: 				inline-block;
	margin: 				0 5px 10px;
}

.listing-categories li a{
	display: 				block;
	height: 				38px;
	line-height: 			38px;
	font-size: 				19px;
	font-weight: 			400;
	padding: 				0 40px;
	color: 					#376085;
	cursor: 				pointer;
	text-decoration: 		none;
	background: 			#fff;
    position:               relative;
	text-transform: 		none;
	transition: 			none;
}

.listing-categories li a:hover,
.listing-categories li.active a{
	background: 			#376085;
	color: 					#fff;
}

div.classic-project-list .listing-projects{
	margin: 				auto -10px;
	background: 			#fff;
	padding: 				10px 0;
}

div.classic-project-list .listing-projects:after{
	clear: 					both;
	content: 				'';
	display: 				block;
}

div.classic-project-list .listing-projects li{
    width:                  25%;
	padding: 				0 10px;
    float:                  left;
	box-sizing: 			border-box;
    display:                block;
	margin-bottom: 			10px;
}

div.classic-project-list .listing-projects li>div{
	text-decoration: 		none;
    display:                block;
    width:                  100%;
    padding-top:            90%;
    height:                 0;
    position:               relative;
	overflow: 				hidden;
	background-size: 		cover;
	background-repeat: 		no-repeat;
	background-position: 	center;
}

div.classic-project-list .listing-projects li div.content{
    position:               absolute;
    width:                  100%;
    height:                 100%;
    top:                    0;
    left:                   0;
    z-index:                2;
    display:                flex;
    flex-direction:         column;
    justify-content:        center;
    background:             rgba(38, 68, 95, 0.83);
    opacity:                0;
    transition:             all 0.3s;
    box-sizing:             border-box;
	transform: 				scale(0);
	padding: 				35px;
}

div.classic-project-list .listing-projects li:hover div.content{
    opacity:                1;   
	transform: 				scale(1);
}

div.classic-project-list .listing-projects li h2{ 
    margin:                 0 auto 22px;
	font-size: 				21px;
    line-height:            24px;
    font-weight:            600;
	padding-bottom: 		20px;
    color:                  #ffffff;
    text-transform:         uppercase;
    text-align:             center;
	position: 				relative;
}

div.classic-project-list .listing-projects li h2:after{
	width: 					50%;;
	left: 					0;
	right: 					0;
	margin: 				auto;
	bottom: 				0;
	background: 			#376085;
	position: 				absolute;
	content: 				'';
	height: 				2px;
}

div.classic-project-list .listing-projects li div.description{
    font-size:              15px;
    color:                  #ffffff;
    text-align:             center;
	font-weight: 			300;
    line-height:            18px;
    margin:                 0 auto;
}

div.classic-project-list .listing-projects li div.content .editor-button{
	margin: 				0 auto;
}

.social-medias-sharing{
	text-align: 			center;
	margin-bottom: 			30px;
	display: 				none;
}

.social-medias-sharing p{
	font-size: 				15px;
	color: 					#fff;
	margin-right: 			8px;
	vertical-align: 		middle;
	display: 				inline-block;
}

.social-medias-sharing a{
	display: 				inline-block;
	vertical-align: 		middle;
	width: 					22px;
	height: 				23px;
	cursor: 				pointer;
}

.social-medias-sharing a + a{
	margin-left: 			8px;
}

@media screen AND (max-width: 1280px){
	div.classic-project-list .listing-projects li{
		width: 					50%;	
	}
}