@charset "UTF-8";
/* CSS Document */

/* ------------------------------ GLOBAL ------------------------------ */

body {font-family: 'Montserrat', sans-serif;font-weight:300;}
img {max-width:100%;height:auto;}
.clear {clear:both;}

strong {font-weight:500;}
hr {height:1px;border:0;background-color: #ccc;margin:15px 0;clear:both;}
h1, h2, h3, h4 {font-weight:300;line-height:1.2em;}
h1 {font-size:3em;}
h2 {font-size:1.6em;}
h3 {font-size:1.4em;margin-bottom:40px;text-align: justify;}
h4 {font-size:1.2em;}

.container {width:1220px;margin: 0 auto;position: relative;z-index:400;}
.decalage {margin-top:120px;}
.espaceur {height:120px;}
.article {width:700px;margin: 0 0 0 250px;position: relative;border-left:1px solid #ddd;padding:30px 30px 30px 30px;}
.content {padding:0 10px;position: relative;}


.gauche {position: fixed;top:150px;width:100%;z-index:100;}
.logo {width:200px;margin:0px 0 0 10px;}

.article a, footer a {color:#000;}
.article p {text-align: justify;line-height:1.3em;}
.article p:first-child {margin-top:0;}

header {position: fixed;top:0;height:120px;width:100%;z-index:500;background-color: #fff;border-bottom:1px solid #ddd;
	font-family:'Playfair Display';/*opacity:0.9;filter: alpha(opacity=90);*/}

#id {position:absolute;width:350px;margin:30px 10px 0 10px;z-index:1000;}
#id h1 {font-weight:700;font-size:1.8em;margin:0px;}
#id h1 a {color:#000;text-decoration: none;}
#id h2 {font-weight:400;font-size:1.1em;margin:10px 0 0 0;}
#id h3 {font-weight:400;font-size:0.9em;margin:10px 0 0 0;}


/* ------------------------------  MENU HEADER  ------------------------------*/


.menu {float:left;margin:73px 0 0 43.5%;font-size:1.1em;font-weight:300;}
.menu li {float:left;margin:0 15px;}
.menu li a {color:#000;text-decoration: none;display: inline-block;padding-bottom:5px;}
.menu li a:hover, .menu li.current-menu-item a {border-bottom:1px solid #ccc;}
.menu .lang-item {font-weight:200;margin-right:0;}

#menu-mobile, #open {display:none;}

#menu-mobile {background-color: #FFF;position:fixed;top:0;bottom:0;right:0;left:0;z-index:999;width:100%;height:100%;}


.menu-mobile {position:absolute;top:50%;top:50vh;left:50%;left:50vw;font-weight:400;font-size:1.1em;margin:-100px 0 0 -30px;}
.menu-mobile li {float:none;margin:15px 0;}
.menu-mobile li a {color:#000;text-decoration: none;padding-bottom:5px;}
.menu-mobile li a:hover, .menu-mobile li.current-menu-item a {border-bottom:1px solid #ccc;}


#open, #menu-mobile #close {cursor:pointer;float:right;margin-top:35px;}

/* ------------------------------  SOCIAL  ------------------------------*/

#social {float:right;margin:30px 7px 0 0;}
#social i {color:#000;margin:0 0 10px 20px;}
#social i:hover {color:#666;}
#social li {text-align: right;}

#social-mobile {position:fixed;bottom:20px;font-weight:400;font-size:1.1em;text-align:center;width:100%;}
#social-mobile i {color:#000;margin:10px;}

#social-mobile a, #social a {text-decoration: none;color:#000;}

/* ------------------------------  PROJETS ------------------------------*/

.projet {
	width:400px;
	height:265px;	
	float:left;
	position:relative;
	margin:0;
	padding:0 20px;
	border:0;
	border-bottom:20px solid #fff;
	border-left:10px solid #fff;
	border-right:10px solid #fff;
	box-sizing:border-box;
	background-size:cover;
	background-position: center;
	text-align:center;
	
	display: flex;
	flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
	}

.projet h3 {
	color:#FFF;
	font-size:1.4em;
	font-weight:300;
	text-shadow: 1px 1px 3px #000;
	margin:0;
	text-transform: lowercase;
	text-align: center;
}

.portfolioContainer {margin: 0;}


.filtre  {margin:25px 0 25px 7px;}
.format-filter {display: flex;flex-wrap: wrap;}
.format-filter li {margin:0 2px 2px 0;flex-grow: 1;}
.format-filter li a {
    color:#000;
    font-size:0.8em;
    text-decoration: none;
    font-weight:300;
    padding:10px 20px;
    background:#f6f6f6;
    display:block;
    text-align: center;
}
.format-filter li a.current, .format-filter li a:hover {background:#ddd;}

.projets {clear:both;margin:15px auto;}

.projet a {
	position:absolute;
	width:100%;
	height:100%;
	top:0;bottom:0;left:0;right:0;
	opacity:0;filter:alpha(opacity=0);
	padding:0 20px;
	text-decoration: none;
	color:#FFF;
	box-sizing: border-box;
	background: #000;
	webkit-transition: all ease 0.6s;
	moz-transition: all ease 0.6s;
	transition: all ease 0.6s;
	font-size:1em;
	text-shadow:0 0 0;
	text-align: justify;
	
		display: flex;
	flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

	}
	
.projet a:hover {
	opacity:0.85;filter:alpha(opacity=85);
}

.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
.isotope, .isotope .isotope-item {
  /* change duration value to whatever you like */
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}



/* ------------------------------  MENU FOOTER  ------------------------------*/
footer {clear:both;width:100%;text-align:center;padding:25px 0;line-height:2em;border-top:1px solid #ddd;font-size:0.8em;}



/* ------------------------------  RESPONSIVE -----------------------------*/
@media screen and (max-width:1240px) {
	.container {width:100%;}
	.projet {width:33.33%;height:265px;}
}
@media screen and (max-width:1140px) {
	.projet {height:250px;}
}

@media screen and (max-width:1012px) {
	/*header {font-size:0.9em;}
	#id {width:300px;margin:27px 2% 0 10px;}
	.menu {margin-top:60px;}

	.menu li {margin:0 10px;}*/
	.article {width:auto;}
	
	.projet {width:50%;height:330px;}

}
@media screen and (max-width:900px) {
	.projet {height:290px;}
	
	.menu, #social {display: none;}
	#open, #close {display:inline-block;}
	.article {margin: 0 ;border-left:0 solid #ddd;padding:40px 10px;}
	
	.gauche {position: relative;top:auto;width:100%;}
	.logo {margin:0;position: relative;width:100%}

}

@media screen and (max-width:768px) {
	.projet {height:247px;}

}
@media screen and (max-width:640px) {
	/*.format-filter {display: none;}*/
	.projet {height:400px;width:100%;border-left:0 solid #fff;border-right:0px solid #fff;}
}
@media screen and (max-width:540px) {
	.projet {height:333px;}
}
@media screen and (max-width:440px) {
	.projet {height:266px;}
}
@media screen and (max-width:340px) {
	.projet {height:200px;}
}