@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Karla:400,700,400italic,700italic);


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{

	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	font-family: 'Karla', sans-serif;
	vertical-align:baseline;
	text-rendering: optimizeLegibility;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{

	display:block;margin:0;padding:0;

}


body{
	
	line-height:1


}

ol,ul{

	list-style:none

}

blockquote,q{

	quotes:none

}

blockquote:before,blockquote:after,q:before,q:after{

	content:'';
	content:none

}

ins{

	text-decoration:none

}

del{

	text-decoration:line-through

}

table{

	border-collapse:collapse;
	border-spacing:0

}

.studio{

	display: block;
}

.titulos{

	
	display:inline-block;
	width:100%;
	height: 100%;


 


}

.legendos{
padding: 10%;
	text-align: center;
	display:inline-block;
	width:100%;
	height: 100%;
}

.detailsprojet{
	font-size: 0.8rem;
	letter-spacing: 1.1px;
}

.titretypo{

	text-align: center;
	font-size: 1.2rem;
	margin-bottom: 6%;

}

.texteabout{

width:400px;
font-size: 0.9rem;
float: left;
height: 100%;

}
.publications{9
	
width:200px;
float: left;
font-size: 0.7rem;

}

.texteinfos{


	
	
	margin-left: 2rem;
	font-size: 12px;
	margin-right: 1rem;
	padding :0 0 0 0;
}

.textepouriphone{

		display: none;
		
	}


.videodesktop{

	display: block;
}

.videoiphone{

	display: none;
}
	

.glacesans::selection{

	
	background:#ffbfda;
	
	
}		

.vertical{

	padding-left:4.1%;
}
.site-header,.site-footer,.infos,.projects{

	list-style:none;margin:0;padding:0;margin-left:0rem; margin-right: 0rem; 

}


.site-header,.site-footer,.project-images,.project-images-full,.project-infos,.projects h1,.VR,.XS,.S,.M,.L,.LR,.XL,.XXL{

	display:inline-block;
	vertical-align:top;
	width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;
	height:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;

}

.project-images,.project-infos{

	margin-left:0;
		


}

.project-images>.site-header,.project-infos>.site-header,.project-images>.site-footer,.project-infos>.site-footer,.infos .project-images>section,.infos .project-infos>section,.project-images>.project-images,.project-infos>.project-images,.project-images>.project-images-full,.project-infos>.project-images-full,.project-images>.project-infos,.project-infos>.project-infos,.projects .project-images>h1,.projects .project-infos>h1,.project-images>.XS,.project-infos>.XS,.project-images>.S,.project-infos>.S,.project-images>.M,.project-infos>.M,.project-images>.L,.project-infos>.L,.project-images>.XL,.project-infos>.XL,.project-images>.XXL,.project-infos>.XXL{

	padding-left:0

}

.VP{

width:97%;



}
.VR{

width:100%;

float:right;



}

.L{

	width:97% ;

}

.LR{

	width:100%;
	
	
}

.M{

	width:33.333%

}
.S{

	width:25%

}
.XS{

	width:16.666%

}

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

		.texteabout{
	width:100%;
	float: left;

}
.publications{
	float: left;
	width:100%;
}

.allabout{
	width:600px;
	float: left;

}

}

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

	.allabout{
	width:100%;
	float: left;

}

.studio{

	display: none;
	
}

		.titulos{

	display:inline-block;

}

.legendos{
	display:none;
}

.videodesktop{

	display: none;
}

.videoiphone{

	display: block;
}
	.textepouriphone{

		font-size: 0.9rem;
		display: block;
		padding-bottom: 3rem;

	}

	.copyright{
display: none;

	}
	.infos{

		display: none;}

	.js-to-infos{
		
		display: none;
		font-size: 0px}	


	nav,.site-footer{
		min-height:40px;
		line-height:40px;
		font-size:100%

	}
	.site-header,.site-footer,.infos,.projects{

	list-style:none;margin:0;padding-bottom:1rem; z-index:9;
}

	.site-footer a{
	width:100%
	}

	.site-footer p{
		text-align:left
	}

	.site-header{
		padding-left:3%
	}

	.infos section{
		padding-right:3%
	}

	.projects article{
		font-size:100%;
			
	}

	
	.project-infos p,.infos-intro,h1{
		margin-right:0;
		padding-right:0
	}




	.vertical{

	padding-left:0;
}

.XS,.S,.M,.XL,.XXL,{

	width:100%;
	padding-left:0;

}

.L,.LR,.VR,.VP{
	width:100%;
	height: 80%;

}

}


@media only screen and (min-width: 481px) and (max-width: 800px){

	.allabout{
	width:100%;
	float: left;

}

	.videodesktop{

	display: none;
}

.videoiphone{

	display: block;
}

.textepouriphone{

		font-size: 1.2rem;
		display: block;
		padding-bottom: 3rem;

	}

	.copyright{
display: none;

	}
	.infos{

		display: none;}

	.js-to-infos{
		
		display: none;
		font-size: 0px}	

	.vertical{

	padding-left:0;
}


	.project-images-full{

		width: 100%;
	}

	.site-header,.site-footer,.infos,.projects{

	list-style:none;margin:0;padding:0;
}

	.infos section{

		width:50%
	}

	.XS,.S,.M{

	width:33.333%

	}
	
	.VR{
	width: 	100%;
	padding-left: 0;
	}

	.VP{
	width: 	100%;
	padding-left: 0;
	}

	.L{

	width:100%
	}
	.LR{
width: 	100%;
	padding-left: 0;
	}
	.project-images,.project-infos{

	width:100%

	}
}

@media only screen and (min-width: 801px){

	.project-images-full{
		width: 100%;
		height: 100%;
	}

	.project-images,.project-infos{

		width:50%

		}

	.XL{

		width:66.666%
		}

	.infos section{

		

		}

}[class*="push--"]{position:relative}[class*="pull--"]{position:relative}

html,body{

	margin:0;
	padding:0;
	height:100%
}

.site{
	min-height:100%;
	position:relative;
	margin:0 1.73333rem
}

img{
	width:100%;
	height:100%;
	opacity:1;transition:opacity .5s ease-out
}

.site-header,.site-footer{
	height:2.6rem

}

.site-header{
	position:fixed;
	top:0;
	z-index:10;
	line-height:2.6rem
	
}

.site-header a{
	display:inline-block;
	margin-right:0.86667rem
}

.site-footer{
	position:absolute;
	bottom:0
}

.infos,.projects{
	padding:2.9rem 0
}


.infos ul li{
	margin:0;
	padding:0
}

.infos ul li:first-child{
	
}

.projects article{
	margin-bottom:3.1%;
	position:relative;
	
}

.projects article:hover .project-title,.projects article:hover .project-studio{
	z-index:2;
	
	

}

.projects article a{
	display:block;
	}

.projects article a:hover{
	opacity:1
}

.projects img,.slider__item img{
	display:block;
	position:absolute;
	height:100%;
	width: 100%;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:1
}

figure .H,figure .V,.slider,.slider-auto{
	margin-bottom:2%;
}

figure .Hsmall{
	margin-bottom:3.8%;
}
.Haccueil{
	padding-bottom: 62.89%;
}

.Hdroit{
	padding-bottom: 61.15%;
}

.H{
	padding-top:60%
}

.Hsmall{
	padding-top:60%
}

.V{
	padding-top:129.1%
}
.Vaccueil{
padding-top:129.1%
}

.Vdroit{
	padding-top:124.8%
}

.F{
	padding-top:75%;
	
}.

S2{
	padding-top:20%
}

.S5{
	padding-top:11%

}

.S11{
	padding-top:30%
}

.Hsmall,.H,.V,.F{
	position:relative;
	overflow:hidden
}

.site-header,.projects{
	background:#ffffff}

.Hsmall,.H,.V,.F{
	background:rgba(255,255,255,0)
}

.site-footer,figcaption{
	color:#969696
}

.project-title,.project-studio,.alt-color{
	color:#000000;

	
}

.alt-color{
	
}

.alt-color:hover .project-title,.alt-color:hover .project-studio{
	color:rgba(245,245,245,0.2)

}

a{
	display:inline;
	position:relative;
	color:rgba(245,245,245,0.9);
	text-decoration:none
}

a:hover{
	color:#969696
}

.underline:before,.underline:after{
	border-bottom:1px solid rgba(245,245,245,0.9);
	content:'';
	width:100%;
	position:absolute;
	right:0;
	bottom:20%
}

body{
	letter-spacing:1px;
	font:14px / 1.5  "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	
		color:rgba(245,245,245,0.9);
	background:#ffffff}

p,h2{font-size:100%;
	margin-right:3.46667rem;
	margin-bottom:0.86667rem
}

nav,.site-footer{
	letter-spacing:2.5px
}
h2{
	
}
.project-infos p,.infos p,.infos a{
	font-size:140%

}

h1{
	font-size:200%;
	letter-spacing:2.5px;
	padding-right:3.46667rem;
	margin-bottom:1.73333rem
}

.project-title,.project-studio{
	position:absolute;

	width:100%;
	height:100%;
	

}



.project-studio{
	bottom:-0.43333rem
}

figcaption{
	margin-bottom:0.86667rem;
	margin-left:0.86667rem
}

.project-infos h2{
	margin-top:2.6rem;
	margin-left:0.86667rem

}footer p{
	text-align:right;
	width:100%
}

footer a.js-to-projects{
	float:left
}

footer a.js-to-projects:before{
	content:"↑ ";
	font-size:90%;
	vertical-align:top
}

small{
	font-size:smaller
}

a[rel="author"]:hover:after,a[rel="external"]:hover:after{
	content:" →";
	font-size:90%;
	vertical-align:top
}

a[download]:hover:after{
	content:" ↓";
	font-size:90%;
	vertical-align:top
}

.back:before{
	
	vertical-align:top;
}