/*
Theme Name: Julien Reuzeau
*/


/* MAIN STYLES */
body{
	background:#fff;
	font-family: 'Montserrat', sans-serif;
	margin:0;
	padding: 0;
	font-size: 14px;
	line-height: 24px;
	box-sizing: border-box;
	color:#ffffff;
	font-smooth: always;
	text-align: left;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
h1{
	
	color: #fff;	
	font-weight:600;
	font-size: 6em;
	line-height: 1em;
	text-transform: uppercase;	
}

h2,
h2.elementor-widget-heading.elementor-widget-heading .elementor-heading-title{	
	font-size: 1.6em;
	line-height: 1.7em;	
	font-weight:300;
	font-family: "Playfair Display", serif !important;
	font-style:italic !important;
	text-transform: none !important;
}

h3,
h3.elementor-widget-heading.elementor-widget-heading .elementor-heading-title{	
	font-size: 2.5em;
	line-height: 1em;	
	font-weight:200;	
	text-transform: uppercase !important;
}

hr{
	border: none;
	border-top: 1px solid #001b15;
	
}


b, strong{
	font-weight: 600;
}
a{
	font-weight:bold;
	text-decoration: underline;
	color:#001b15;
}


.post_tags{	
	display: block;
	width: 100%;
	font-size: 0.9em;
	font-family: "Playfair Display", serif !important;
	font-weight: 200;
	font-style: italic;
}
.elementor-inner{
	background:#fff;
	margin: 20px;
}
.home{
	background:#001b15;
}
.home .elementor-inner{	
	margin: 0;
}
.container, .elementor-section-boxed .elementor-container{
	width: 90%;
	max-width: 1140px;
	position: relative;
	margin: 0 auto;
}
.align-left{
	text-align: left;
}
.align-center{
	text-align: center;
}
.align-right{
	text-align: right;
}
.clear{
	clear: left;
}

/* HEADER */
#header{ 
	width:100vw;
	top:0;
	left:0;
	display: block;
	position: fixed;
	z-index: 888;
}
	#header #logo{
		width: 4rem;
		height:4rem;
		position: absolute;
		left: 4em;
		top: 4em;
		line-height:1;
		z-index: 5;
		text-decoration:none;
		text-transform:uppercase;
		color:#ffffff;
	}

	.single.scrolled #header #logo, .page-id-2 #header #logo, .page-id-2.scrolled #header #logo,
	.page-id-21439 #header #logo, .page-id-21439.scrolled #header #logo{
		color:#001b15;
	}
	
	.menu-opened #header #logo, .menu-opened.scrolled #header #logo,
	.page-id-2.menu-opened #header #logo svg, .page-id-2.menu-opened.scrolled #header #logo,
	.page-id-21439.menu-opened #header #logo, .page-id-21439.menu-opened.scrolled #header #logo{
		color:#ffffff;
	}

	#header #logo img, #header #logo svg{
		width:100%;
		height: auto;
		fill:#001b15;
	}
	#header #logo svg{
		fill:#ffffff;
	}
	.single.scrolled #header #logo svg, .page-id-2 #header #logo svg, .page-id-2.scrolled #header #logo svg,
	.page-id-21439 #header #logo svg, .page-id-21439.scrolled #header #logo svg{
		fill:#001b15;
	}
	
	.menu-opened #header #logo svg, .menu-opened.scrolled #header #logo svg,
	.page-id-2.menu-opened #header #logo svg, .page-id-2.menu-opened.scrolled #header #logo svg,
	.page-id-21439.menu-opened #header #logo svg, .page-id-21439.menu-opened.scrolled #header #logo svg{
		fill:#ffffff;
	} 

	#header .menu-btn{
		width:2.1em;		
		display: block;
		position: absolute;
		top:8px;
		right: 5px;
		padding: 4em;
		cursor: pointer;
		z-index: 5;
	}
	#header .menu-btn span{
		width:100%;
		height:2px;
		overflow: hidden;
		position: relative;
		display: block;
		background: rgba(255,255,255,0.5);
		margin-bottom: 6px;
		transform-origin: center left;
		opacity: 1;
		transition: all 0.3s cubic-bezier(.74,.01,.26,1);
	}
		#header .menu-btn span span{
			background: #fff;
			position: absolute;
			transform:translateX(-100%);
			top: 0;
			transition: all 0.3s cubic-bezier(.74,.01,.26,1);
		}
			#header .menu-btn span:nth-child(1) span{			
				transition-delay: 0s;
			}
			#header .menu-btn span:nth-child(2) span{				
				transition-delay: 0.1s;
			}
			#header .menu-btn span:nth-child(3) span{				
				transition-delay: 0.2s;
			}
		#header .menu-btn:hover span span{
			transform:translateX(0%);
		}

	.single.scrolled #header .menu-btn span,
	.page-id-2 #header .menu-btn span, .page-id-2.scrolled #header .menu-btn span,
	.page-id-21439 #header .menu-btn span, .page-id-21439.scrolled #header .menu-btn span{
		background: rgba(0,0,0,0.5);
	}
	.single.scrolled #header .menu-btn span span,
	.page-id-2 #header .menu-btn span span, .page-id-2.scrolled #header .menu-btn span span,
	.page-id-21439 #header .menu-btn span span, .page-id-21439.scrolled #header .menu-btn span span{
			background: #001b15;
	}
	
	.menu-opened #header .menu-btn span, .single.menu-opened #header .menu-btn span, .single.scrolled.menu-opened #header .menu-btn span,
	.menu-opened.page-id-2.scrolled #header .menu-btn span,
	.menu-opened.page-id-21439.scrolled #header .menu-btn span{
		background: rgba(255,255,255,1);
		width:79%;
	}
	.menu-opened #header .menu-btn span span, .single.menu-opened #header .menu-btn span span, .single.scrolled.menu-opened #header .menu-btn span span,
	.menu-opened.page-id-2.scrolled #header .menu-btn span span,
	.menu-opened.page-id-21439.scrolled #header .menu-btn span span{
		background: #fff;
	}
		.menu-opened #header .menu-btn span:nth-child(1){			
			transition-delay: 0s;
			transform: rotate(45deg);
		}
		.menu-opened #header .menu-btn span:nth-child(2){				
			transition-delay: 0s;
			opacity: 0;
		}
		.menu-opened #header .menu-btn span:nth-child(3){				
			transition-delay: 0s;
			transform: rotate(-45deg);
		}





/* MENU */

#menu .menu-container{
	display: block;
	position: absolute;
	width: 100vw;
	height: 100vh;
	top:0;
	left: 0;
	z-index: 1;		
	overflow: hidden;
}

	#menu .menu-container .menu-menu-principal-container{
		display: flex;
		height: 100%;
		width: 100%;
		z-index: 5;
		position: fixed;
		align-items: center;
		justify-content: center;		
	}
		
	#menu .menu-container .menu-menu-principal-container ul{
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: center;
	}
		#menu .menu-container .menu-menu-principal-container ul li{			
			margin:2em 0;
			padding: 0;
			transform: translate(10vw,0);
			opacity: 0;
			transition: all 0.3s cubic-bezier(.74,.01,.26,1);
		}
			.menu-opened #menu .menu-container .menu-menu-principal-container ul li:nth-child(1){				
				transition-delay: 300ms;
			}
			.menu-opened #menu .menu-container .menu-menu-principal-container ul li:nth-child(2){				
				transition-delay: 400ms;
			}
			.menu-opened #menu .menu-container .menu-menu-principal-container ul li:nth-child(3){				
				transition-delay: 500ms;
			}
			.menu-opened #menu .menu-container .menu-menu-principal-container ul li:nth-child(4){				
				transition-delay: 600ms;
			}
			.menu-opened #menu .menu-container .menu-menu-principal-container ul li:nth-child(5){				
				transition-delay: 700ms;
			}
			.menu-opened #menu .menu-container .menu-menu-principal-container ul li:nth-child(6){				
				transition-delay: 800ms;
			}
			.menu-opened #menu .menu-container .menu-menu-principal-container ul li:nth-child(7){				
				transition-delay: 900ms;
			}
			.menu-opened #menu .menu-container .menu-menu-principal-container ul li:nth-child(8){				
				transition-delay: 1000ms;
			}
			.menu-opened #menu .menu-container .menu-menu-principal-container ul li:nth-child(9){				
				transition-delay: 1100ms;
			}
			.menu-opened #menu .menu-container .menu-menu-principal-container ul li:nth-child(10){				
				transition-delay: 1200ms;
			}
			.menu-opened #menu .menu-container .menu-menu-principal-container ul li:nth-child(11){				
				transition-delay: 1300ms;
			}
			.menu-opened #menu .menu-container .menu-menu-principal-container ul li:nth-child(12){				
				transition-delay: 1400ms;
			}
			.menu-opened #menu .menu-container .menu-menu-principal-container ul li:nth-child(13){				
				transition-delay: 1500ms;
			}
			.menu-opened #menu .menu-container .menu-menu-principal-container ul li:nth-child(14){				
				transition-delay: 1600ms;
			}
			.menu-opened #menu .menu-container .menu-menu-principal-container ul li:nth-child(15){				
				transition-delay: 1700ms;
			}
			.menu-opened #menu .menu-container .menu-menu-principal-container ul li:nth-child(16){				
				transition-delay: 1800ms;
			}
			.menu-opened #menu .menu-container .menu-menu-principal-container ul li{				
				transform: translate(0,0);
				opacity: 1;
			}
			
		#menu .menu-container .menu-menu-principal-container ul li a{			
			color:#fff;
			text-transform: uppercase;
			text-decoration: none;	
			text-align: center;
			font-weight: 600;
			margin:0;
			padding: 1em;
			position: relative;
			letter-spacing: 0.3em;
			z-index: 2;
		}
			#menu .menu-container .menu-menu-principal-container ul li .border{	
				position: absolute;
				height:2px;
				width: 20%;
				z-index: 1;
				left:40%;
				top:0.7em;
				transform: scale(0) rotate(-45deg);
				transition: all 0.3s cubic-bezier(.74,.01,.26,1);
			}
			#menu .menu-container .menu-menu-principal-container ul li:hover .border{	
				transform: scale(1) rotate(-45deg);
			}

	#menu .menu-menu-right-container{
		position: fixed;
		bottom: 2em;
		right:-15em;			
		transition: all 0.3s cubic-bezier(.74,.01,.26,1);		
		z-index: 100;
	}
		.menu-opened #menu .menu-menu-right-container{
			transition-delay: 700ms;
			right:3em;
		}
		#menu .menu-menu-right-container ul{
			list-style: none;
			margin: 0;
			padding: 1em;			
		}
			#menu .menu-menu-right-container ul li a{
				color:#fff;
				text-decoration: none;
				font-weight: 600;
				width: 3em;
				line-height: 3em;
				display: block;
				text-align: center;
			}

	#menu .menu-menu-left-container{
		position: fixed;
		bottom: 12em;
		left:-15em;			
		transition: all 0.3s cubic-bezier(.74,.01,.26,1);
		transform: rotate(-90deg);
		z-index: 100;
	}
		.menu-opened #menu .menu-menu-left-container{
			transition-delay: 700ms;
			left:-7em;
		}
		#menu .menu-menu-left-container ul{
			list-style: none;
			margin: 0;
			padding: 0;			
			text-align: left;
		}
		#menu .menu-menu-left-container ul li{
			display: inline-block;
		}			
			#menu .menu-menu-left-container ul li a{
				color:#fff;
				text-decoration: none;
				font-weight: 600;
				width: 6em;				
				line-height: 6em;
				letter-spacing: 0.3em;
				padding: 1em;
				text-transform: uppercase;
			}
			#menu .menu-menu-left-container ul li a span{				
				
			}



	#menu .menu-container .bkgd{
		display: block;
		z-index: 1;
	}
		#menu .menu-container .bkgd span{
			display: block;
			width: 20%;
			height: 100vh;
			float: left;
			background: #666;
			transform: translate(0,-100%);
			transition: all 0.3s cubic-bezier(.74,.01,.26,1);
		}		
		#menu .menu-container .bkgd span:nth-child(1){
			transition-delay: 0ms;
		}
		#menu .menu-container .bkgd span:nth-child(2){
			transition-delay: 100ms;
		}
		#menu .menu-container .bkgd span:nth-child(3){
			transition-delay: 200ms;
		}
		#menu .menu-container .bkgd span:nth-child(4){
			transition-delay: 300ms;
		}
		#menu .menu-container .bkgd span:nth-child(5){
			transition-delay: 400ms;
		}
		.menu-opened #menu .menu-container .bkgd span{			
			transform: translate(0,0);
			background: #001b15;
		}




/* TITLE */
#title{
	height: 100vh;
	position: relative;
	top:0;
	z-index: 0;
}
	
	#title .caption{
		height: 100vh;
		display: flex;
		position: relative;
		z-index: 5;
		text-align: center;
		align-items: center;
	}
	spline-viewer canvas{
		height: 100vh !important;
	}
	#title h1, #title h1 div{
		display: inline-block;
		margin: 0;
		padding: 0;
	}
		#title h1 .letter{
			overflow: hidden;
			line-height:1em;
		}
	.single #title h1, .single #title h2, .single #title h3{
		color:#fff;
		position: relative;
		z-index: 5;
	}
	#title h1, #title h2, #title h3{
		
		position: relative;
		z-index: 5;
	}
	.home #title h1, .home  #title h2, .home  #title h3{
		color:#fff;
	}
	#title h1 strong{
		font-weight: 700;
	}
	#title h1 u{
		text-decoration:underline;
	}
		
	#title canvas{
		width: 100%;
		height: 100vh;
		z-index: 1;
		position: absolute;
		top:0;
		left: 0;
		opacity: 1;
		transition:all ease-in-out 500ms;
	}
		.scrolled #title canvas{
			opacity: 0.2;
		}
	
	.page-id-2 #title h1, .page-id-2 #title h2, .page-id-2 #title h3, .page-id-2 #title::after,
	.page-id-21439 #title h1, .page-id-21439 #title h2, .page-id-21439 #title h3, .page-id-21439 #title::after{
		/* color:#001b15; */
	}
	#title .border{
		position:absolute;
		padding: 0;
		margin: 0;
		top:40%;
		width:80%;
		left: 10%;
		right:10%;
		z-index: 1;
		transform: scaleX(1) rotate(-45deg);
		transform-origin: center center;
	}
		#title .border .elementor-spacer-inner{			
			height: 3px;
		}

	#title .elementor-widget-heading{
		position: relative;
		z-index: 3;
	}


/* LISTE REFERENCES */
#liste-references{
	position: relative;
	padding: 4em 0;
	z-index: 3;
}
	#liste-references ul, #liste-references li{
		padding: 0;
		margin: 0;
		list-style: none;
	}
	#liste-references li{
		margin:0 0 10em 0;
		width:100%;
		float: left;
		position: relative;
	}
	#liste-references li a{		
		padding-top: 60%;
		width: 100%;
		display: block;
		text-decoration: none;
		color: #fff;
		background: #001b15;
		position: relative;
		transition: all 0.3s ease-in-out;
		transform: scale(1);
		overflow: hidden;
		box-shadow: 0px 0px 0px rgba(255,255,255,0);
	}
		#liste-references li a:hover{		
			transform: scale(1.01);
			box-shadow: 0px 0px 300px rgba(255,255,255,.3);
		}
	#liste-references li a .caption{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 5;
		display: flex;
		align-items: center;
		text-align: center;
		padding: 0;		
		box-sizing: border-box;
		height: 100%;
		width: 100%;
		transition: all 0.5s cubic-bezier(0.35, 0.05, 0.21, 0.99);
		transform: scale(1);
	}
		
		#liste-references li a:hover .caption{			
			
		}		
			#liste-references li a .caption p{
				display: inline-block;
				position: absolute;
				line-height: 1em;
				font-weight: normal;
				margin: 0;
				left: 0;
				padding: 0;
				color: #fff;
				width: 100%;
				top:40%;
				transition: all 0.3s cubic-bezier(0.35, 0.05, 0.21, 0.99);
			}
			#liste-references li a .caption h3{
				display: inline-block;
				width: 100%;
				position: relative;	
				text-transform: uppercase;
				font-size: 3.5em;
				line-height: 1em;
				font-weight:600;
				color:#fff;
			}
			#liste-references li a .caption .post_tags{				
				display: inline-block;
				position: absolute;
				line-height: 1em;
				margin: 0;
				left: 0;
				padding: 0;
				color: #fff;
				width: 100%;
				top:70%;
				opacity: 0;
				transition: all 0.3s cubic-bezier(0.35, 0.05, 0.21, 0.99);
			}
			#liste-references li a:hover .caption .post_tags{				
				top:57%;
				opacity:1;
			}
		#liste-references li a .border{
			position: absolute;		
			left: 0;
			top: 50%;
			z-index: 1;
			display: block;
			width:40%;
			height:2px;
			margin: -1.5px 30% 0 30%;
			transform: scale(0) rotate(-45deg);
			transform-origin: center center;
			transition: all 0.5s cubic-bezier(0.35, 0.05, 0.21, 0.99);
		}
			#liste-references li a:hover .border{			
				transform: scale(1) rotate(-45deg);
			}
		#liste-references li a .image{
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			z-index: 0;fil
			width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center center;
			opacity: 0.9;
			transition: all 0.8s cubic-bezier(0.35, 0.05, 0.21, 0.99);
		}
			#liste-references li a:hover .image{			
				opacity: 0.3;
				transform: scale(1.1);
			}






/* SINGLE REFERENCE */
.single .elementor-widget-image{
	box-shadow: 0px 0px 70px rgba(5,10,48,0.2);	
}

.single #nav-references .elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated {
	padding: 0;
}
	.single #liste-references{
		padding: 0;
		overflow: hidden;
	}
	.single #liste-references li{
		margin:0;
		width:100%;
		font-size:0.8em;
		float: left;
	}
		.single #liste-references li a, .single #liste-references li a:hover{
			padding-top: 50%;
			box-shadow: 0px 0px 0px rgba(255,255,255,0);
		}		
		.single #liste-references li a .image{		
			opacity: 0.1;
		}
		.single #liste-references li a:hover .image{			
			opacity: 0.4;
			transform: scale(1.1);
		}
		.single #liste-references li a .border{			
			width:20%;
			margin: -1.5px 40% 0 40%;
		}
			

/* MANIFESTE */
#image-background{
	position: fixed;
	top:0;
	left: 0;
	z-index: 0;
	height: 100vh;
	width:100%;
	text-align: right;
	display: none;
}
	#image-background svg{
		height: 70vh;
		width: auto;
		top:15vh;
		right:-7vw;
		display: inline-block;
		position: absolute;
	}
	#image-background svg .st0{fill:none;stroke:#001b15;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	#image-background svg .st1{fill:none;stroke:#BB8A28;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	#image-background svg .st2{fill:none;stroke:#BB8A28;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}



/* LOADING */
#loading{	
	z-index: 999;
	position: fixed;
	width: 100%;
	height: 100vh;
	top:0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #001b15;
}
	#loading .spinner {
	  margin: auto 0 auto 15px;
	  width: 60px;
	  text-align: center;
	}

	#loading .spinner > div {
	  width: 2px;
	  height: 30px;
		margin:0 15px 0 0; 
		float: left;
	  background-color: #fff;
		transform: rotate(45deg)
	  display: inline-block;
	  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	}

	#loading .spinner .bounce2 {
	  -webkit-animation-delay: -0.32s;
	  animation-delay: -0.32s;
	}

	#loading .spinner .bounce3 {
	  -webkit-animation-delay: -0.16s;
	  animation-delay: -0.16s;
	}

	@-webkit-keyframes sk-bouncedelay {
	  0%, 80%, 100% { -webkit-transform: scale(0) rotate(45deg) }
	  40% { -webkit-transform: scale(1.0)  rotate(45deg)}
	}

	@keyframes sk-bouncedelay {
	  0%, 80%, 100% { 
		-webkit-transform: scale(0) rotate(45deg);
		transform: scale(0) rotate(45deg);
	  } 40% { 
		-webkit-transform: scale(1.0) rotate(45deg);
		transform: scale(1.0) rotate(45deg);
	  }
	}


@media (max-width:1024px){
	.container, .elementor-section-boxed .elementor-container{
		width: 85%;
		max-width: none;
	}
	
	#liste-references li{
		margin:0 0 5em 0;
		width:100%;
	}	
	
	#liste-references li a .caption p{		
		top:30%;
	}
	#liste-references li a .caption .post_tags, #liste-references li a:hover .caption .post_tags{				
		top:80%;
		opacity:1;
	}
	#liste-references li a .image{
		opacity: 0.7;
	}
	#liste-references li a .caption h3{
		font-size:2.2em;
	}
	.single #liste-references li a, .single #liste-references li a:hover{
		padding-top: 100%;
	}	
}


@media (max-width:480px){
	
	
	h1, h3{
		font-size:1.7em;
	}
	h2{
		font-size:1.1em;
	}
	
	.elementor-inner{
		margin: 10px;
	}
	
	#header #logo{
		width: 45px;
		left: 1.8em;
		top: 1.9em;
	}
	
	#header .menu-btn{
		width:25px;
		padding: 1.5em;
	}
	#header .menu-btn span{	
		margin-bottom: 5px;
		width: 100%;
	}
		.menu-opened #header .menu-btn span{
			width: 81.5%;
		}
	
	#liste-references li a{
		    padding-top: 150%;

	}
	#liste-references li a .caption .post_tags, #liste-references li a:hover .caption .post_tags{
		top: 60%;
	}
	
	#menu{
		font-size:0.8em;
	}
	#menu .menu-container .menu-menu-principal-container ul li{
		margin: 1.3em 0;
	}
	.menu-opened #menu .menu-menu-left-container{
		left:-9.5em;
	}
	#menu .menu-menu-left-container{
		bottom:10em;
	}
	.menu-opened #menu .menu-menu-right-container{
		right: 0;
	}
	#menu .menu-menu-right-container{
		bottom: 0;
	}
	
	#liste-references li{
		margin:0 0 5em 0;
		width:100%;
		float: left;
		position: relative;
	}
	
	/* SINGLE REFERENCE */
	.single #title{
		height: 90vh;
	}
	.single #title::after{		
		height:1.5em;
	}
	
	.elementor-column-gap-wider>.elementor-row>.elementor-column>.elementor-element-populated{
		padding: 0 30px !important;
	}
	.elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated{
		padding: 0px !important;
	}
	.single #title .border .elementor-spacer-inner{			
		height: 2px  !important;
	}
	
	
	
	/* MANIFESTE */
	#image-background svg {
		height: auto;
		width: 100%;
		top: 24vh;
		right: -1vw;
		display: inline-block;
		position: absolute;
		opacity: 0.1;
	}

}