/* Add Font Face */

@font-face {
    font-family: 'Neuzeit S LT Std';
    src: url('https://quentinfitamant.fr/assets/css/fonts/NeuzeitSLTStd-Book.woff2') format('woff2'),
        url('https://quentinfitamant.fr/assets/css/fonts/NeuzeitSLTStd-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Neuzeit S LT Std';
    src: url('https://quentinfitamant.fr/assets/css/fonts/NeuzeitSLTStd-BookHeavy.woff2') format('woff2'),
        url('https://quentinfitamant.fr/assets/css/fonts/NeuzeitSLTStd-BookHeavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}



/* New styles */

* { box-sizing: border-box; }

html, body {
	font-family: "Neuzeit S LT Std";
	-webkit-font-smoothing: antialiased;
	font-size:13px;
	font-weight: normal;
	line-height: 17px;
	text-rendering: optimizeLegibility;
	color:#000;
	width:100%;
	height:100%;
	font-kerrning:auto;
}

img {
	max-width: 100%;
	height: auto;
}

h1 {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 18px;
	text-align: center;
	color:#000;
}

h1.hide {
	opacity: 0;
	visibility: hidden;
}

a {
	text-decoration: none;
	color:inherit;
}

header li {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 18px;
	display: inline-block;
	margin:0px 0px 0px 20px;
	text-align: center;
	color:#000;
}

header {
	position: absolute;
	top:30px;
	width:100%;
 	transition: all 0.4s ease-in-out; 
	z-index: 9999;
	left:0px;
	transform: translateY(0);
	will-change: transform;

}

header.fixed-nav {
	position: fixed;
	top:0px;
	background-color: #fff;
	height:80px;
	border-bottom: 1px solid #ddd;
/* 	transition:transform 0.6s cubic-bezier(.86,0,.16,.99); */
transition: transform 0.35s cubic-bezier(0.45, -0.01, 0.14, 0.99);
/* 	transform: translateZ(0); */
	   -webkit-backface-visibility: hidden;
	   transform: translateY(-100%);
	   -webkit-transform-style: preserve-3d;
	   


	}

header.fixed-nav .menu {
	position: absolute;
	top:30px;
	
}

header.fixed-nav h1 {
	position: absolute;
	width:100%;
	top:30px;
	
}

.fixed-nav.sticky {
	transform: translateY(0px);
}

.home .fixed-nav {
	display: none;
}

.home h1 a {
	pointer-events: none;
}


/* menu transition */

.menu ul:hover > li a {
	opacity: 0.5;
}

.menu ul:hover > li a:hover {
	opacity: 1.0;
}

.menu ul, .menu a {
	transition: opacity 0.3s ease-in-out;
}



/* Homepage specific styles */
.home header li, .home h1 {
	color:#fff;
}

.home header {
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	width:100%;
	transition: all 0.4s ease-in-out;
	z-index: 9999;
}

.hero {
	height:100vh;
	width:100%;
	background-color: #000;
}


.menu {
 	visibility: hidden; 
	width: 100%;
	text-align: center;
	position: absolute;
	top:0px;
}

.menu.active {
	opacity: 1.0;
	visibility: visible;
}

video#bgvideo { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: auto;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover; 
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}


video#bgvideo.come-in {
	opacity: 0.85;
}


#main {
	width: 85%;
	margin:0 auto;
}

.film-post {
	width:48%;
	float: left;
	margin-right: 4%;
}

.film-posts {
	margin-top:100px;
}

.film-post:nth-child(even) {
	margin-right: 0px;
}

.thumbnail {
	width:100%;
	height: auto;
	display: block;
}

.film-wrap {
	 width: 100%;
	 padding-bottom: 75%;
	 background-color:pink;
}





.post-title {
	margin: 16px 0 45px;
	text-align: center;
	display: block;
	}
	
h5 {
	text-transform: uppercase;
	display: inline;

}

h2 {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 18px;
	text-align: center;
	color:#000;
	line-height: 20px;
}

.page-content {
	width:54%;
	margin:0 auto;
	position: relative;
    top: 52%;
    transform: translateY(-50%);
    max-width: 680px;
}

.page-id-11 #main {
		height: calc(100vh - 50px);
	}
	



.col {
	text-align: center;
}

.page-details {
	margin-top:50px;
	 -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    width: 65%;
margin-left: auto;
margin-right: auto;
}


/* Single post */

.top-film {
	width:100%; 
	position: relative;

}


header.white li a {
	color: #fff;
}

header.white h1 {
	color: #fff;
}

.top-film iframe {
/*
	position: absolute;
	top: 0;
	left: 0;
*/
	width: 100%;
	height: 100%;
	z-index: 9;
	
}

.showreel iframe {
	width:100%;
	height: 100%;
}

.showreel {
	height:100vh;
	width: 80%;
	margin-left: 10%;
	
}

.showreel .vimeo-container {
	position:relative;
	top:50%;
	transform: translateY(-50%);
}

.poster-image {
	position: absolute;
	top:0px; 
	left:0px;
	width:100%;
	z-index: 99;
}

.poster-image img {
	width:100%;
	height:auto;
/* 	-webkit-filter: blur(20px); */
}

.poster-image.hide {
	opacity: 0;
	visibility: hidden;
	transition: 0.6s all ease-in-out;
}

.play-button {
	width:100px;
	height:100px;
	position: absolute;
	z-index: 999;	
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease-in-out;
	cursor: pointer;
	cursor: pointer;
}



.text-content {
	width:50%;
	margin: 0 auto;
	text-align: center;
	font-size:15px;
	line-height: 20px;
}

h2 {
	font-weight: bold;
text-transform: uppercase;
font-size: 18px;
}

.client-name {
	font-size: 18px;
	line-height: 30px;
}

.titles {
	margin:50px 0 40px 0;
}


.post-image {
	 width: calc(50% - 20px);
	 float: left;
	margin-right: 40px;
	margin-bottom:40px;
}


.post-images {
	margin-top:100px;
	overflow: auto;
}


.post-image:nth-child(even) {
	margin-right: 0px;
}

.credits {
	margin:50px 0;
}
#label::after {
	content: "+";
	position: absolute;
 	top:-2px; 
}

#label {
	cursor: pointer;
	position: relative;
	display: block;
}

#label.minus::after {
	content: "–";
}

.credit-info {
	display: none;
}




.credit-info-wrap {
	opacity:0;
	transition: opacity 0.4s ease-in-out;
}



.credit-info-wrap.come-in {
	opacity:1.0;
	transition-delay: 0.4s;
}


/* Hide nav when video playing.  */

header.hide {
	opacity: 0;
	transition-delay: 1s;
}





/* Play button SVG Animations */

.circle {
	stroke-dasharray: 301;
	stroke-dashoffset: 301;
	transition: stroke-dashoffset 0.7s ease-in-out;
}

.circle:hover {
  stroke-dashoffset: 0;
}

.chevron {
	opacity: 0.55;
	transition: opacity 0.4s ease-in-out;
	fill:white;
}

svg:hover > .chevron {
	opacity: 1.0;
}
	
.circle, .overlay-circle {
	stroke:white;
} 




.play-button.black .chevron {
	fill:black;
}

.play-button.black .circle, .play-button.black .overlay-circle {
	stroke:black;
}		

.navicon-wrap {
 position: absolute;
     top:-1px;
    right:25px;
    display: none;
    height:16px;
    cursor: pointer;
}



.navicon
{
    width:18px;
    height:2px;
    background-color:#111;
  
}

.navicon:after, .navicon:before
{
    content: '';
    width: 100%;
    height:2px;
    background-color:#111;
    position:absolute;
}

.navicon:after
{
    top:6px;
}

.navicon:before
{
    top:12px;
}

.mobile-nav {
	display: none;
}


.film .placeholder {
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
}

.film {
	position: relative;
	overflow: hidden;
}



/* Vimeo Dark mode */

/*

body.dark header {
	opacity: 0;
	transition: 0.4s opacity ease-in-out;
}

*/


footer {
	width:100%;
	height:20vh;
	background-color: white;
	margin-top: 30px;
	background-color: black;
	overflow: hidden;
	position: relative;
}

footer video {
	width:100%;
	position: absolute;
	top:0px;
	opacity: 0.85;
	
}


.next-link a {
	text-transform: uppercase;
}

.next-link {
	text-align: center;
	padding-bottom:50px;
}


/* New about page tweaks */

.page-content h2 {
	font-weight: bold;
text-transform: uppercase;
font-size: 18px;
}

.page-content p {
	text-align: center;
	margin-top: 1em;
	padding:0 50px;
	font-size: 15px;
	line-height: 20px;
}

.page-content h5 {
	font-size: 15px;
	line-height: 22px;
}

.page-content span {
	font-size: 15px;
	line-height: 20px;
}


/* Progressive Loading */

.blur-up {
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	transition: all 0.4s ease-in-out;
}

.blur-up.loaded {
	opacity: 0;
	visibility: hidden;
}

.blur-up img {
		-webkit-filter: blur(20px);
	}


.poster-image {
	overflow: hidden;
}

.poster-image img {
	display: block;
}
	
	/* Page Transitions */
/* Transitions need to be more specific to certain elements. Because they change too much */

#page {
    transition: opacity 0.6s cubic-bezier(.91,0,.26,.98);
    opacity: 1.0;
    transition-delay: 0.6s;
}
#page.trans {
   transition: opacity 0.6s cubic-bezier(.91,0,.26,.98);
    opacity: 0;
}







.site-credits {
	text-align: center;
position: fixed;
bottom: 20px;
display: block;
width: 100%;
font-size: 12px;
color: #a2a2a2;
}



/* Home page transition */
#welcome {
	opacity: 0;
	transition: 0.8s opacity ease-in-out;
}

#welcome.fadeinplease {
	opacity: 1.0;
	transition-delay: 1s;
}

video#bgvideo {
	transition: 0.8s opacity ease-in-out;
}






/* Media Queries */

/* Phone Sizes */

@media (max-width: 640px) {

.page-content {

top:90%;

}

	.titre-apropos {

margin-top:10%;

}

.page-details {

column-count: 1;
margin-bottom:60%;
}	


	video#bgvideo { 

		    width: auto;

   }
   .navicon-wrap {
	   display: block;
	   z-index: 9999999;
   }
   
   
   .film-post {
	width:100%;
	float: left;
	margin-right: 0;
}

#main {
	width:auto;
	margin:25px;
}
   
 header.fixed-nav {
	 	height:68px;

 } 
 
 header.fixed-nav h1 {

	top:26px;
	
} 

.menu.active {
	display: none;
}
  
  h1.hide {
	  opacity: 1.0;
	  visibility: visible;
  }
  
  .home header {
	  transform: none;
  }
 
  .home .navicon-wrap {
	  position: fixed;
	  top:25px;
	  right:25px;
  }
  
  .home .navicon {
	  	background-color: #fff;

  }
  
 .home .navicon:after, .home .navicon:before
{
	background-color:#fff;
	
	}
	
	
   
 
/*  Mobile menu */

.mobile-nav .menu {
	visibility: visible;
}



.mobile-nav {
	width:100%;
	height:100%;
	background-color: black;
	position: fixed;
	top:0px;
	left:0px;
	display: block;
	opacity: 0;
	z-index: 99999;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
}

.mobile-nav.open {
	visibility: visible;
	opacity: 1.0;
}


.mobile-nav ul {
	color:#fff;
	position: relative;
	top: 51.5%;
	transform: translateY(-50%);
	opacity: 0;
	transition: 0.3s opacity ease-in-out;
	transition-delay: 0.4s;}

.mobile-nav.open ul {
	opacity: 1.0;

}


.mobile-nav li {
	font-size: 18px;
	font-weight: bold;
	display: block;
	padding:20px 0;
	text-transform: uppercase;
	color:#fff;
	text-align: center;
}
 
.mobile-nav .menu ul:hover > li a {
	opacity: 1.0;
}
 

 
 .fixed-nav .navicon-wrap {
	 top: 25px;

 }

 
 .text-content {
	 width:100%;
 }
 
 .post-image {
	 width:100%;
	 margin:0px 0px 20px 0;
 }
 
 .top-film {
	 margin-top: 74px;
 }
 
 header.white h1 {
	color: #000;
}

.play-button {
	transform: translate(-50%, -50%) scale(0.8);
}

.close {
	width:25px;
	height:25px;
	position: fixed;
	top:25px;
	right:25px;
}

.close:before, .close:after {
  position: absolute;
  left: 12px;
  content: ' ';
  height: 25px;
  width: 2px;
  background-color: #fff;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}



.home header.white h1 {
	color: #fff;
}

.page-content {
	width:100%;
}

.page-details {
	-webkit-column-count: 1;
}

.col {
	margin-top: 1em;
}

.post-title {
	font-size: 12px!important;
}




 
  }
  
  
  
  @media (max-width: 1300px) {
	  
	  .page-content {
		  max-width: 100%;
		  width:100%;
	  }
	  
	  
	  }
  
  
  
  
  
  
/*   Viewport height issues */
  
  @media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 2) { 
	    .home {
		    height:600px;
		    overflow: hidden;
	    }
	    
	    .home header {
		    position: fixed;
	    }
	    
	    .home .hero {
		    position: fixed;
	    }
	    
	    
    }