*{
text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.space-tips{padding:4%; clear:both;}

#gallery-1 .gallery-caption {
    margin-left: 0;
    font-size: 12px;
    transform: rotate(-90deg);
    text-align: left;
    position: absolute;
    transform-origin: -13px;
}
a.one{
float:left;	
font-size: 30px;
margin-left: 14px;
}
a.two{
float:right;
font-size: 21px;
margin-right:21px;
}


.mouse {
  z-index: 50;
 left: 50%;
 top: 50%;
 position: absolute;
 width: 8vh;
 height: 8vh;
 background: white;
 margin-top: -16vh;
 margin-left: -4vh;
 pointer-events: none;
 border-radius: 40vh;
 border: 0px solid white;
 -webkit-transition: width 0.5s ease, height 0.5s ease, margin 0.5s ease;
 -moz-transition: width 1s ease;
 -o-transition: width 1s ease;
 transition: width 1s easee;
}

.mouseleave {
  display: none;
}

.mousebig {
width: 18vh;
height: 18vh;
margin-top: -36vh;
margin-left: -9vh;
}

.box {
    cursor: none;
  all: revert;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)" /* IE 8+ */;
filter: none !important; /* IE 7 and the rest of the world */  
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 transition: all 1s easee;
}

.paper {
 pointer-events: none;
 width: 100%;
 height: 100%;
 overflow: visible;
 preserveAspetRatio: none;
 position: absolute;
}

.border {
 position: absolute;
 top: 2vh;
 bottom: 2vh;
 left: 2vh;
 right: 2vh;
}

.stroke {
 fill: transparent;
 stroke-linecap: round;
 vector-effect: non-scaling-stroke;
 stroke-width: 2px;
 stroke: white;
  stroke-dasharray:0, 0; 
}


.stroke.fill1 {
 fill: blue;
 stroke: transparent;
 mix-blend-mode: normal;
 -webkit-transition: fill 1s ease;
 -moz-transition: fill 1s ease;
 -o-transition: fill 1s ease;
 transition: fill 1s easee;
}

.stroke.fill2 {
   fill: #ff5050;
 stroke: transparent;
 mix-blend-mode: normal;
}

.postid-1470 p{height:100vh;}
.postid-1470, .postid-1470.single #content{background-color:black !important;}

.hstick{position:fixed; top:90vh; left:-999999px; width:1px; height:1px;}

p{ 
	opacity:1; 
	filter: alpha(opacity=100);
	transition: opacity 0.4s; filtre 0.4s;
	-webkit-transition: opacity 0.4s; filtre 0.4s;
}

p.opa{
	opacity:0; 
	filter: alpha(opacity=0);
	transition: opacity 0.4s; filtre 0.4s;
	-webkit-transition: opacity 0.4s; filtre 0.4s;
}


body{ 
	margin:0; padding:0;
	color:#000;
	font-size:21px;
font-family: 'Inter', sans-serif;
background-color:#fff;
	text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}




::-moz-selection { 
    color: white;
    background: black;
}
::selection { 
    color: white;
    background: black;
}

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

h1, h2, h3, h4{
	margin:0; padding:0;
	line-height:1.5em;
	font-weight:500;
}

h5
{margin-top:10px}



ul, li{
	list-style:none;
	margin:0; padding:0;
}

#page{
	overflow:hidden;
}


/* ----------------------------   Header   ---------------------------*/

#branding {
	position:fixed;
	z-index:999999;
	width:100%;
	/*background-color:#fff;*/
	top:0;
}

#global-header{
	position:relative;
	width:94%;
	padding:1.5% 3% 2.25em;
	margin:0 auto;
	background:white;
}

#list{display:none; position:fixed; background-color: yellow; width:100%; height:100vh; left:0; box-sizing:border-box; top:0; overflow-y:scroll; }
#list-box{position: relative;
font-size: 60px;
width: 100%;
line-height: 1em;
text-align: center;
margin: 0.5em auto;}
#list-box h2{padding: 8%; line-height:1.2em; z-index:999; position:relative;}
#list-box h2 p{margin:0; line-height:1.2em;}
#content.fixe{position:fixed !important;}
#list-box h3{font-size: 21px;
text-align: left;
padding: 3%;
border-bottom: 1px solid #000;}
.projet{position:relative; border-bottom: 1px solid #000;}
.image-hover{position:fixed; width:100%; height:100vh; top:0; left:0; z-index:1; display:none;}
.image-hover img{max-width:80%; height:auto; display:inline-block; vertical-align:middle;}
.v-align{display:inline-block; height:100vh; width:0%; vertical-align:middle;}
.list{cursor:pointer;}

/*.projet a:hover .image-hover{display:block;}*/

h1#site-title{ font-size:30px;line-height:1em; width: 54.2%;
float: left; margin:0% -.5% 1.5%; cursor:pointer;font-weight:500;}
#site-description {display:none;}

#branding hgroup{text-align: left;
float: left;
line-height: 1em;
width: 94%;}
#branding nav{ text-align: right;
    font-size:30px;
    font-weight:500;
right: 3%;
line-height: 1em;
position: absolute;}

#content{position:relative; top:3em;}
.home #content{top:3px;}
#branding .entry-title{
	font-size: 21px;
	line-height: 1em;
	float: left;
}

.page-id-635 h1.entry-title{display:none;}

/* ----------------------------   INDEX ---------------------------*/

.clear{clear:both;}

#overview, #galerie, footer, #recherche, #infos{ 
	position:relative;
	clear:both;
}

#overview, #recherche{ padding:5em 4% 3em;position:relative; width:92%;}

#overview article, #recherche article{
	width:100%;
	position:relative;
}

#overview article, #overview h1{
	font-size:42px; margin:0; padding:0;
	width:62.3333%;
	text-align:left;
}



#overview p, #recherche p{
	margin:0 0 0.5em;
}

#infos{
	position:relative; width:96%;
}

#infos-link{position:absolute; top:-1.5em;}

#galerie{ padding:2.5em 2% 2%; position:relative; width:96%;}


#galerie article{ 
	width:31.3333%;
	margin:1% 1% 1.5%;
	
	float: left;
	position:relative;
	
/*opacity: 0.4;
    filter: alpha(opacity=40); 

transition: filter 0.2s, opacity 0.2s; -webkit-transition: filter 0.2s, opacity 0.2s;*/
}




#galerie article:hover{
/*opacity: 1;
    filter: alpha(opacity=100); 
transition: filter 0.2s, opacity 0.2s; -webkit-transition: filter 0.2s, opacity 0.2s;*/

	z-index:9999;
}

/

#galerie a:nth-child(13) article{
clear:left;
}



#galerie article .image{
	background-size:100%;
	background-repeat:no-repeat;
	background-position:center;
		text-align:center;

	width:100%;
	padding-bottom:70%;

}





#galerie header{
	color:rgba(255,255,255,0);
	-webkit-transition:color 0s;
	transition: color 0s;

z-index: 999999;
    top: 1.5%;
    left: 35%;
    font-size: 21px;
	position:fixed;
}

#block{
display:none;
}


#galerie article header h1{
	font-size: 21px;
		color:rgba(0, 0, 0, 0);
	-webkit-transition: color 0s;
	transition: color 0s;
padding: 10px 10px 0 0;
}

#galerie article:hover header h1{
	color:rgba(0, 0, 0, 1);
	-webkit-transition:color 0s;
	transition: color 0s;
	
}


#site-generator{width:94%; position:fixed; bottom:0; padding:1% 3%; text-align:left; font-size:18px; font-weight:500; background:white; }

/* ----------------------------   PROJET   ---------------------------*/

/*.single article header{
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;

	height:90vh;
	width:94%;
	margin:0 3% 2%;
}*/

.single article, .page-id-1246 article{
	padding-bottom:2%;
}

.page-id-1246 #content header{display:none;}
.page-id-1246 #content{padding-top:0 !important;}
.single article .entry-content{
	width:96%;
	margin:0 2% 1%;
}


.single article img {
	width:48%;
	height:auto;
	margin:9px 1% 1.5%;

	float:left;
}



.text{
	font-size:24px;
	width:48%;
	position:relative;
	line-height:1.4em;
	padding:0 1%;
	float:left;
	vertical-align:middle;
}

.credit{
	font-size: 30px;
	line-height: 1.4em;
    margin: -1% 2% 1%;
	position: left;
	width:50%;
	font-weight:500;
}


.creditnav{
	font-size: 24px;
	line-height: 1.4em;
    padding-left: -20%;
    margin: -1% -3% 3% 0%;

	position: left;
	width:100%;
	font-weight:500;
}



@media (min-width: 767px) {
.credit{
    	margin-left:00%;
}
}


    

.credit a:hover {
    border-bottom: 1px solid black;
}

.credit strong{ font-weight:500; border-bottom:1px solid #000; line-height:1em;}




#nav-single{
	position:fixed;
	z-index:999999;
	font-weight:500;
}

.nav-previous{
	position:fixed;
	text-align: center;
	font-size:30px;
	left:0;
	bottom:50vh;
	text-align:center;
	width:3%
	
}

.nav-next{
	position:fixed;
	text-align: center;
	font-size:30px;
		right:0;
		bottom:50vh;
	text-align:center;
	width:3%
}

.single #content, .page #content{z-index:999; position:relative; background-color:#fff; display:block;
}

.single #content, .page #content{
-webkit-animation: FadeIn 1s; /* Chrome, Safari, Opera */ 
    animation: FadeIn 1s;
}

.single #content.left, .page #content.left{
	left:100%;
	-webkit-animation: Center-go-right 1s; /* Chrome, Safari, Opera */ 
    animation: Center-go-right 1s;
	overflow:hidden;
}

.single #content.left article, .page #content.left article{overflow:hidden;}

#index{
	position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
    max-height: 100vh;
		display:block;
	-webkit-animation: Left-go-center 1s; /* Chrome, Safari, Opera */ 
    animation: Left-go-center 1s;
	
}

#index.off{
   overflow: hidden;
		display:none;
	right:100%;
}

#index.go{
	-webkit-animation: Center-go-left 1s; /* Chrome, Safari, Opera */ 
   	animation: Center-go-left 1s;
	right:100%;
}

#content.go{
	-webkit-animation: FadeOut 1s; /* Chrome, Safari, Opera */ 
   	animation: FadeOut 1s;
	opacity:0;
}


#content.in{
	-webkit-animation: FadeIn 1s; /* Chrome, Safari, Opera */ 
   	animation: FadeIn 1s;
	opacity:1;
}

.video{
 position: relative;
padding-bottom: 26%;
height: 0;
overflow: hidden;
margin: 9px 1% 1.5%;
width: 48%;
float: left;
}
.video iframe{ width: 100%;
height: 100%;
padding: 0;
position: absolute;
}

   video::-webkit-media-controls-panel {
         background-image: linear-gradient(transparent, transparent) !important;
    }

#colophon{
	padding-top: 30px;
    margin-left: -40px;
    position: relative;
    clear: both;
	z-index:99999;

}

#colophonhome{
	padding-top: 30px;
    margin-left: -32px;
    position: relative;
    clear: both;
	z-index:99999;

}


/*
 * Keyframes
 */

@keyframes FadeIn {0%   { opacity: 0;}100% { opacity: 1; }}
@keyframes FadeOut {0%   { opacity: 1;}100% { opacity: 0; }}
@keyframes Center-go-left {0%  {right: 0%;}100% { right: 100%; }}
@keyframes Center-go-right {0%  {left: 0%;}100% { left: 100%; }}
@keyframes Right-go-center {0%  {left: 100%;}100% { left: 0%; }}
@keyframes Left-go-center {0%  {right: 100%;}100% { right: 0%; }}

@-webkit-keyframes FadeIn {0%   { opacity: 0;}100% { opacity: 1; }}
@-webkit-keyframes FadeOut {0%   { opacity: 1;}100% { opacity: 0; }}
@-webkit-keyframes Center-go-left {0%  {right: 0%;}100% { right: 100%; }}
@-webkit-keyframes Center-go-right {0%  {left: 0%;}100% { left: 100%; }}
@-webkit-keyframes Right-go-center {0%  {left: 100%;}100% { left: 0%; }}
@-webkit-keyframes Left-go-center {0%  {right: 100%;}100% { right: 0%; }}

/*--------------- PAGE-------------*/

#access li{    float: right;
    margin-left: 35px;}


.page #content{
padding: 3em 2% 2%;
width: 96%;
    
}
.page-id-635 #main {padding-bottom:4%;}
.page-id-635 #content{padding-top:0;}



.about{float:left; width:98%; margin:0 .75% 0; font-size:30px; font-weight:500; text-align: left;}

.coll{position:relative; float:left; width:31.3333%; margin: 0 1% 1%; font-size:18px;}

.project-info{float:left; margin:0 -.25% 0; font-size:23px; line-height: 1.5em; font-weight:400; text-align: left;}

.info{float:left; margin:0 0 0; font-size:30px; line-height: 1.5em; font-weight:400; text-align: left;}


.project-credit{float:left; width:98%; margin: -3% 0 0; font-size:16px; line-height: 1.75em; font-weight:400; text-align: left;}

t1 {font-size:22px; line-height: 1.25em; font-weight:500; text-align:left;!important; margin:0% -.5% 1.5%!important;}

t2 {margin: 1.2% 0% 0%; font-size:10px; line-height: 2.5em; font-weight:600; letter-spacing: 1.375px; text-align: left;!important;}

t3 {margin: 2% 5% 2% 0%; font-size:30x;font-weight:500;!important; }
t4 {text-align: right}


.coll2{position:relative; float:left; width:64%; margin: 0 1% 1%; font-size:18px;}
.coll3{position:relative; float:right; width:23%; margin: 0 1% 1%; font-size:18px;}
.coll4{position:relative; float:left; width:28%; margin: 0 1% 1%; font-size:18px;}
.coll1{position:relative; float:left; width:10%; margin: 0 1% 1%; font-size:18px;}


.tag{float:left; width:98%; margin: .5% 1% 0; font-size:11px; font-weight:600;letter-spacing: 1.375px;}


.coll h2{font-size:16px; text-decoration:underline;}
.coll div{margin-bottom:1em;}

.page-id-1246 .entry-content{width:100%; margin:0;}

.gallery-item{
width: 23% !important;
    height: auto;
    display: inline-block;
    float: none !important;
    margin: 0 !important;
    padding: 0%;
	vertical-align:top;
}
.gallery-item img{ width:100% !important; height: auto !important; border:none !important}
.gallery br {display:none !important;}


.w1{width:calc(95%/1.33) !important;}
.w2{width:calc(95%/2) !important;}
.w3{width:calc(70%/2) !important;}
.w4{width:calc(100%/4) !important;}
.w5{width:calc(99%/2) !important;}
.w6{width:calc(97.5%) !important;}

. {
    display: block;
    margin: 0 auto;
}

u {
  padding-bottom:1px;
  text-decoration:none;
  border-bottom:2px solid #000;
}

hr {
    width:70%;
    border: 1px   solid #000;
    border-style: none none solid;
    float:left;
}




#post-1324 .entry-title, .page .entry-title{display:none;}
.page-id-635 .page h2.entry-title{display:block;}
#post-1324 .entry-content{text-align:justify;}
#post-1324 p{display: inline-block; vertical-align:middle; width:calc(95%/5); max-width:inherit; box-sizing:border-box; margin:1% 1% 3%; font-size:14px;}
#post-1324 p img{width:100%; height:100%;}


/*-------------- LAB -----__---------*/

.single-lab #branding nav{display:none;}
.single-lab #branding hgroup{width:100% !important;}
.single-lab #branding .entry-title{float:right;}

#square{width: 250vw;
height: 250vh;
background: black;
position: fixed;
left: -75vw;
top: -75vh;
z-index: 999;
cursor:pointer;
}

#s-left{width:50%; height:100%; background:white;}
#circle{width: 50vw;
height: 50vw;
background: white;
overflow: hidden;
border-radius: 100%;
position: absolute;
top: 125vh;
left: 50%;
margin-left: -25vw;
margin-top: -25vw;
}
#c-white{width:50%; height:100%; background:black;}

#s-left, #c-white{
transition: margin-left 0.4s; transition-timing-function: ease-in-out;
-webkit-transition: margin-left 0.4s; -webkit-transition-timing-function: ease-in-out;
}
#s-left.active, #c-white.active{
margin-left:50%;
transition: margin-left 0.4s; transition-timing-function: ease-in-out;
-webkit-transition: margin-left 0.4s; -webkit-transition-timing-function: ease-in-out;
}

/*--------------------------- PAGE Responcive ---------------------------*/
@media screen and (max-width: 800px) {
	#galerie article, #recherche-galerie article{width:46%;}
	
	#galerie a:first-child article, 
	#recherche-galerie a:first-child article, 
	#galerie a:nth-child(10) article, 
	.about, 
	.coll{width:96%;}
	
	body, h1#site-title, #branding .entry-title 
    {font-size:16px; font-weight:500;}
    #branding nav {font-size:20px;}
    h2# {font-size:8px;}
	#galerie header, #recherche-galerie header, #colophon{display:none;}
    
    .about {font-size: 20px;} 
    .tag {font-size: 8px;} 
    .project-info {font-size: 12px;}
    .project-credit {font-size: 12px;}
    .colophon {font-size: 12x;} 
    .project-title {font-size: 12px; font-weight:500;}
    .info {font-size: 18px;}
    
    
    .contact {font-size: 12px;}
    
    .coll2{position:relative; float:left; width:80%; margin: 0 1% 1%; font-size:18px;}
    .coll3{position:relative; float:left; width:80%; font-size:18px;}
    margin: -5% 1% 1%;}
    .coll4{position:relative; float:left; width:30%; margin: 0 1% 1%; ;}

	#nav-single{
	position: relative;
    z-index: 999999;
    font-weight: 500;
    padding: 2% 0;
    clear: both;
}

.nav-previous{
	position:relative;
	    font-size: 12px;
   	 text-align: center;
    	width: 50%;
    	float: left;
	bottom:inherit;
    	margin: 2% 0;
	
}

.nav-next{
	position:relative;
	text-align: center;
	font-size:12px;
	width:50%; float:right;
	bottom:inherit;
	margin: 2% 0;
}

.single article{
padding-bottom:inherit;
}
	
}

#item-bar{
	position: fixed;
z-index: 99;
width: 1px;
height: 80vh;
border-left: 2vw solid black;
margin-left: 1vw;
margin-top: 2vw;
top: calc(50vh - 40vh);
transform-origin: 50vw 50vh;
left: 50vw;
}


#item-square{
	position: fixed;
	width: 30vw;
	height: 6vw;
	background: black;
	bottom: 6vh;
	left: calc(50vw - 14vw);
}


#item-circle{
	position: fixed;
	z-index: 99;
	background: black;
	width: 30vw;
	padding-bottom: 30vw;
	border-radius: 100%;
	transform: translate(calc(50vw - 14.25vw), 15vh);
	top: 0;
	left: 0;
	transform-origin: 50vw 50vh;
}

@media screen and (max-width: 1000px) {
	body, 
	h1#site-title, 
	#branding .entry-title , .coll, .coll h2{font-size:20px; font-weight:500;}
	h1#site-title, #galerie header, #recherche-galerie header{width:45%;}
    #branding nav {font-size:20px;}
	.single article img, .single article img.affiche, .single article img.big, .video{width:96%;}
	.video {padding-bottom: 54.8%;}
	#galerie article, #recherche-galerie article, #galerie a:first-child article, #recherche-galerie a:first-child article, #galerie a:nth-child(10) article, .credit {width:96%;}
.w1, .w2, .w3, .w4{width:98% !important;}
    
    .about {font-size: 20px;} 
    .tag {font-size: 8px;} 
    .project-info {font-size: 12px;}
    .project-credit {font-size: 12px;}
    .info {font-size: 16px;}
    
t1 {font-size:18px; line-height: 1.25em; font-weight:500; text-align: left; margin:0% -.6% 1.5%!important;}

t2 {margin: 2% 0% 0; font-size:9px; line-height: 2.5em;font-weight:600; letter-spacing: 1.375px;text-align: left;}

a.one{
float:left;	
font-size: 18px;
margin-left: 8px;
}
a.two{
float:right;
font-size: 18px;
margin-right:8px;
}

    #global-header{
	position:relative;
        padding:2% 3% 2em;}