body {
    font-family:'Roboto', Arial;
	color:#928C8D;
	background-color:#FFF;
	 background-image: url(../familles/img/pattern.png); 
    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;

	
}

.header{
	   font-family: 'Roboto', serif;
	/* font-family:'Permanent Marker', Arial; */
	padding-left:0px;
	font-size:14px;
	font-weight:300;
	text-decoration:none;color:#c0c0c0;
	color:#414141;}
	
	.header a {
	   font-family: 'Roboto', serif;
		/* font-family: 'Permanent Marker', Arial; */
		text-decoration:none;color:#c0c0c0;}
			.header a:hover {
		
		color:#00a7e3}
		
		.partage{
			position:fixed;
			right:10px;
			top:10px;}
			
			
			
			
			.apropos{width:100%;padding:auto;margin:auto;text-align:center;text-decoration:none;color:#c0c0c0;}

.portfolioFilter a { 
display: inline-block;
min-width:70px;
 /* background-image: url('../images/selected.png'); */
background-position: center -30px; 
   background-repeat: no-repeat; 
    margin-right:5px; 
	 margin-left:5px; 
	 height:28px;
	 font-size:13px;
	color:#fff;
	text-decoration:none;
	 -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;
}

.portfolioFilter a:hover { 
color:#000;
 /* background-image: url('../images/selected.png'); */
background-position: center bottom; 
   background-repeat: no-repeat; 
   
}

.portfolioFilter a.current { 
    font-weight:400;
}


.portfolioContainer{
	text-align:center;
max-width:2000px;

margin: 0px auto;

text-align: center;
-moz-user-select: none;}

@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;
	}
	
.logo img{
width:80px;}
			
.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;
	/* background-image:url(../images/play.png); */
	}
	
	
	

.famille img {
	opacity:1;
	transition:0.25s ease-in-out;
	border-radius:3px;
	background:transparent;
}		
	
.famille img:hover {
	opacity:0.5;
	transition:0.25s ease-in-out;
}	



.categorie {
	color:white;
	background-color:#00a7e3;
	padding-bottom:0px;
	padding-left:10px;
	padding-right:10px;
	padding-top:10px;
	margin-top:10px;
}

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


.partage{display:none;}	


	
	
	
	.portfolioFilter{
	
	display:none}
	
	
	
	

  .famille{
	text-align:center;
	margin:auto;
	padding:auto;
	padding-left:0;
	width: 100%;
	
	/* background-image:url(../images/play.png); */
	}
	

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

.apropos a{text-decoration:none;color:#c0c0c0;}
                                               
.apropos a:hover{text-decoration:none;color:#000;}



/*filtres*/
.portfolioFilter{
	
	text-align:center;
	
	margin:auto;
	padding:10px;
	display:table;}
	
	
	@media screen and (max-width:640px) {

	
	.portfolioFilter{
	
	display:none}
}
	
	
/*/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;
}


@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%;
	

}
}