body {
    font-family:'Roboto', Arial;
	color:#928C8D;
	background-color:#fff;
    background-repeat: repeat;
	 -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;

	
}

h1 {
	text-align:center;
	/* font-size:3em; */
	color:#000;
}

h1 img {
	margin-top:170px;
}

.credits-bas {
	font-size:0.9em;
	width:95%;
	margin:auto;
	color:#717171;
	font-family: 'Roboto', serif;
	padding-top:30px;
}

.credits-bas a{
	color:black;
}

.header{	
	font-family: 'Roboto', serif;
	padding-left:0px;
	font-size:19px;
	color:#414141;
	z-index:99999999999999;
	position:fixed;
	top: 10px;
}

	
.header a {
	font-family: 'Roboto', serif;
	text-decoration:none;
	color:#fff;
	padding:5px;

}
		
.header a:hover {
	color:#eee:
}

.partage{
	position:fixed;
	right:10px;
	top:10px;
}
	
.logo img {
	width:30px;
	height:30px;
	position:fixed;
	right:15px;
	bottom:15px;
	z-index:999999999;
}
	
	.img-responsive {	
	display: block;
	max-width: 100%;
	height: auto;
	margin:auto;
	}

	
.filtres {
	padding: 10px 30px 10px 30px;
	/* border:2px solid #dcdcdc; */
	/* background:yellow; */
	z-index:99999999;
	margin:auto;
	width:40%;
	text-align:center;
	/* position:fixed; */
	top:0;
}	

@media screen and (max-width:1024px) {
.filtres {
width:70%;
}
}
			
.apropos{position:absolute;top:10px;left:150px;}

.portfolioFilter a { 
margin-top:15px;
	display: inline-block;
	min-width:70px;
	background-color:#ededed;
	background-position: center -30px; 
	background-repeat: no-repeat; 
	margin-right:5px; 
	margin-left:5px; 
	padding:10px 15px;
	/* height:28px; */
	font-size:13px;
	color:#000;
	text-decoration:none;
	transition: all ease 0.23s;
}

/* .filtres-mob {
	display:none;
	} */

.portfolioFilter-mob a { 
/* display:none; */
}

.portfolioFilter a:hover { 
	opacity:0.8;
}

.portfolioFilter a.current { 
    /* font-weight:400; */
	opacity:0.5;
}

.portfolioContainer div{
	padding:10px 10px 0px 5px;
}

.portfolioContainer{
	display:block;
	text-align:center;
	max-width:2000px;
	margin: 0px auto;
	-moz-user-select: none;
	width:100%;
}

.titre-filtres {
	color:#000;
	font-size:1.2em;
	font-weight:500;
}

@media screen and (max-width:640px) {
	.filtres-mob {
	z-index:99999999;
	margin:auto;
	width:100%;
	text-align:center;
	/* position:fixed; */
	background-color:white;
	color:red;
/* 	bottom:0;
	left:0; */
	/* position:fixed; */
	}

	.filtres {
		width:90%;
	}
	
	.portfolioFilter-mob a { 
	display: inline-block;
	min-width:70px;
	background-image: url('../images/selected.png');
	background-position: center -30px; 
	background-repeat: no-repeat; 
	padding:5px;
	font-size:13px;
	text-decoration:none;
	transition: all ease 0.23s;
	}

	.portfolioFilter img {
	width:200px
	}
	
	.view-titre {
	margin-top:80px;
	}
	
	.view-titre p{
		width:90%;
		font-size:0.9em;
   }
   
   .portfolioFilter a { 
	/* display:none; */
	}
	
	.titre-filtres {
		font-size:1.2em;
		font-weight:700;
	}	

}

@media screen and (max-width: 2200px) {
.portfolioContainer{
		width:1660px;
	}
	

}


@media screen and (max-width: 1720px) {
.portfolioContainer{
		width:1328px;
	}
	

}


@media screen and (max-width: 1400px) {
.portfolioContainer{
		width:996px;
	}
	

}

@media screen and (max-width: 1000px) {
.portfolioContainer{
		width:664px;
	}
	

}

@media screen and (max-width: 800px) {
.portfolioContainer{
		width:332px;
	}
	
			
.apropos{;left:90px;}


}

@media screen and (max-width:360px) {
	.portfolioContainer{
	width:320px;
	}

	.portfolioContainer img{
	width:270px;
	}

	.partage{display:none;}	

	.famille{
	padding: 0;
	margin:0;}


	.header{
	position:relative;}
}





@media only screen 
and (min-device-width : 750px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	
	.portfolioContainer{
		width:691px;
	}
	

			
.apropos{left:90px;}
 }



.portfolioContainer:after{
	content: '';
	display: block;
	clear: both;}




.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;
}

.famille{
	text-align:center;
	/*float: left;
	width: 25%;*/
	padding: 1em}

		/*hover animation*/
		
	.vue {
   width: 100%;
   height: auto;
   margin: 0px;
   float: left;
  
   overflow: hidden;
   position: relative;
   text-align: center;
  
  cursor: default;
   background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
	.vue .mask,.view .content {
 cursor: pointer;
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
	.view-titre {
display:display:block;
   }

  	.view-titre p{
		width:50%;
		font-size:1em;
   } 
   
	.vue img {
   display: block;
   position: relative;
}
	.vue h2 {
  
   color: #fff;
   text-align: left;
   position: relative;
  
   padding: 20px;
  
   margin: 20px 0 0 0;
}
	.vue p {
   font-family: 'Roboto', serif;
   
   font-size: 13px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
	.vue .info {
   display: block;
 position:absolute;
   bottom:20px;
   right:20px;   
   
   padding: 0;
   
 
}
	.vue a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

	.vue-fourth img {
   -webkit-transition: all 0.4s ease-in-out 0.2s;
   -moz-transition: all 0.4s ease-in-out 0.2s;
   -o-transition: all 0.4s ease-in-out 0.2s;
   -ms-transition: all 0.4s ease-in-out 0.2s;
   transition: all 0.4s ease-in-out 0.2s;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
	.vue-fourth .mask {
   background-color: rgba(0,0,0,0.8);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0) rotate(-180deg);
   -moz-transform: scale(0) rotate(-180deg);
   -o-transform: scale(0) rotate(-180deg);
   -ms-transform: scale(0) rotate(-180deg);
   transform: scale(0) rotate(-180deg);
   -webkit-transition: all 0.4s ease-in;
   -moz-transition: all 0.4s ease-in;
   -o-transition: all 0.4s ease-in;
   -ms-transition: all 0.4s ease-in;
   transition: all 0.4s ease-in;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
}
	.vue-fourth h2 {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
   background: transparent;
   margin: 20px 40px 0px 40px;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
	.vue-fourth p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
	.vue-fourth a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
	.vue-fourth:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: scale(1) rotate(0deg);
   -moz-transform: scale(1) rotate(0deg);
   -o-transform: scale(1) rotate(0deg);
   -ms-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
	.vue-fourth:hover img {
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
	.vue-fourth:hover h2,
	.vue-fourth:hover p,
	.vue-fourth:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}

.vue-fifth img {
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.vue-fifth .mask {
   background-color: rgba(226,0,26,1);
   box-shadow: -1px 2px 25px 3px rgba(0, 0, 0, 0.4) inset;
   background-image: url('../images/link_over.png');
background-position: right bottom; /*Positioning*/
   background-repeat: no-repeat; /*Prevent showing multiple background images*/
   -webkit-transform: translateX(-100%);
   -moz-transform: translateX(-100%);
   -o-transform: translateX(-100%);
   -ms-transform: translateX(-100%);
   transform: translateX(-100%);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.vue-fifth h2 {
	display:block;
	position:absolute;
	z-index:999;
	color:#FFF;
font-family:'Permanent Marker';
	font-weight:100;
	font-size:17px;
	line-height:19px;
   
}

.vue-fifth h2 span {
	font-size:25px;
	}

.vue-fifth h3 {
	width:100%;
	display:block;
	position:absolute;
	z-index:999;
	top:10px;
font-family:'Permanent Marker';
	font-weight:100;
	font-size:19px;
	line-height:24px;
   background: rgba(255, 255, 255, 0.8);
   color: #FFF;
  
}
.vue-fifth p {
	position:absolute;
	top:85px;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   font-size:16px;
	line-height:20px;
	text-align:left;
	font-weight:300;
   filter: alpha(opacity=0);
   opacity: 0;
   color: #FFF;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.vue-fifth:hover .mask {
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -o-transform: translateX(0px);
   -ms-transform: translateX(0px);
   transform: translateX(0px);
}
.vue-fifth:hover img {
   -webkit-transform: translateX(300px);
   -moz-transform: translateX(300px);
   -o-transform: translateX(300px);
   -ms-transform: translateX(300px);
   transform: translateX(300px);
}
.vue-fifth:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}


	

	
/*/fin flip animation*/
/* Blueprint header */
.bp-header {
	width: 90%;
	max-width:1400px;
	margin: 0 auto;
	
	text-align: center;
}

.bp-header h1 {
	font-family:'Roboto';
	color:#535353;
	font-size: 2.5vw;
	line-height:2.5vw;
	margin-top:30px;
	margin-bottom:30px;
	width:70%;
}

.bp-header p {
	font-size: 1.3em;
	font-weight:300;
	line-height: 1.3em;
	margin: 0 0 .6em 0;
	color:#474747;
}


@media screen and (max-width: 1024px) {
.bp-header p {
	font-size: 1em;
	line-height:1.3em;
	
}

.bp-header h1 {font-size:1.7em;
line-height:1em;
	

}
}

@media screen and (max-width: 640px) {


.bp-header h1 {font-size:1.2em;
line-height:1em;
	width:100%;
	

}
}