/*
Theme Name: ClemBook
Description: Theme Wordpress du book de Clémence
Version: 1.0
Author: Denis Desjardins
*/

/*- 1 HEADER ---------------------------------*/
/*-- 1.0 header footer et disposition page ---*/
/*-- 1.1 Bouton menu -------------------------*/
/*-- 1.2 Navigation du menu	------------------*/
/*-- 1.3 Titre et slogan ---------------------*/
		
/*- 2 HOME - Page d'accueil  ------------------*/	
/*-- 2.0 Titre et slogan -----------------*/

/*- 3 ARCHIVE - Page d'affichage des projets par custom tax  ------------------*/		
/*-- 3.0 Titre -----------------*/	

/*- 4 PAGE PROJET - Page d'affichage d'un projet ------------------*/

	/********************* ERASE ***********************/
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0;}
	table{ border-collapse:collapse; border-spacing:0;}
	fieldset,img{ border:0;}
	address,caption,cite,code,dfn,var{ font-style:normal; font-weight:normal;}
	ol,ul{ list-style:none;}
	caption,th{ text-align:left;}
	h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;}
	q:before,q:after{ content:'';}
	abbr,acronym{ border:0;}

	body,button,input,select,textarea{ color:#333; font-family:Arial,Verdana,sans-serif; font-size:12px; line-height:16px;}

	/* Balises block */
	.post-content h1{ }
	.post-content h2{ }
	.post-content h3{ }
	.post-content h4{ }
	.post-content h5{ }
	.post-content h6{ }
	.post-content p{ }
	.post-content ul{ }
	.post-content ol{ }
	.post-content blockquote{ }
	.post-content pre{ }
	.post-content address{ }
	.post-content address{ }

	/* Balises inline */
	.post-content strong{ }
	.post-content em{ }
	.post-content acronym{ }
	.post-content code{ }
	.post-content del{ }
	.post-content ins{ }

	/* Classes des images */
	.alignleft{ display:inline; float:left;}
	.aligncenter{ clear:both;	display:block; margin-left:auto; margin-right:auto;}
	.alignright{ display:inline; float:right;}
	.size-auto{ }
	.size-medium{ }
	.size-large{ }
	.size-full{ }
	.wp-caption{ }
	.wp-caption img{ }
	.gallery{ }
	.gallery .gallery-item{ }
	/********************************************/
	
@font-face {
    font-family: "Neutra Text";
    src: url('font/NeutraText-Book.otf');
}
@font-face {
    font-family: "Neutra Text";
    font-style: italic;
    src: url('font/NeutraText-BookItalic.otf');
}
@font-face {
    font-family: "Neutra Text";
    font-weight: bold;
    src: url('font/NeutraText-Bold.otf');
}
	
	
/*--- 1 HEADER ------------------*/	
	/*-- 1.0 header footer et disposition page -------------*/
		header{
			width: 100%;
			position: fixed;
			top: 50px;
			z-index: 10000;
		}
		html, body, .wrap {
			height: 100%;
		}
		#contenu{
			min-height: 100%;
		}
		#sous-contenu{
			overflow: auto;
			padding: 120px 0px 50px; /*header footer et marges*/
		}
		footer{
			height: 20px;
			margin-top: -20px;
			clear: both;
			text-align: center;
			opacity: 0.3;
		}
		footer p a{
			text-decoration: none;
		}
	
	/*-- 1.1 bouton menu -------------*/
		.lines-button {
			position: relative;
			display: inline-block;
			overflow: hidden;
			margin: 0;
			padding: 0 4px;
			width: 60px;
			height: 60px;
			font-size: 0;
			text-indent: -9999px;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			border: none;
			cursor: pointer;
			-webkit-transition: background 0.3s;
			transition: background 0.3s;
		}
		.lines-button:focus {
			outline: none;
		}
		.lines-button span {
			display: block;
			position: absolute;
			left: 0px;
			right: 0px;
			margin: 0 auto;
			width: 70%;
			height: 3px;
			background: #000;
			border-radius: 0.5rem;
		}
		.lines-button span::before, .lines-button span::after {
			position: absolute;
			display: block;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 100%;
			height: 3px;
			background-color: #000;
			border-radius: 0.5rem;
			content:"";
		}
		.lines-button span::before {
			top: -15px;
		}
		.lines-button span::after {
			bottom: -15px;
		}
		.lines {
			background: none;
		}
		.lines span {
			-webkit-transition: background 0s 0.3s;
			transition: background 0s 0.3s;
		}
		.lines span::before, .lines span::after {
			-webkit-transition-duration: 0.3s, 0.3s;
			transition-duration: 0.3s, 0.3s;
			-webkit-transition-delay: 0.3s, 0s;
			transition-delay: 0.3s, 0s;
		}
		.lines span::before {
			-webkit-transition-property: top, -webkit-transform;
			transition-property: top, transform;
		}
		.lines span::after {
			-webkit-transition-property: bottom, -webkit-transform;
			transition-property: bottom, transform;
		}

		.lines.close span {
			background: none;
		}
		.lines.close span::before {
			top: 0;
			-moz-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
		}
		.lines.close span::after {
			bottom: 0;
			-moz-transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
			-o-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}
		.lines.close span::before, .lines.close span::after {
			-webkit-transition-delay: 0s, 0.3s;
			transition-delay: 0s, 0.3s;
		}
		button {
			background-color: rgba(255, 255, 255, 0.8) !important;
		}
		
	/*-- 1.2 navigation du menu	-------------*/	
		#nav {
			z-index: 50;
			position: absolute;
			right: 50px;
			text-align: right;
		}
		#nav  .menu-menu-container{
			padding-right: 58px;
		}
		#menu-menu li {
			background-color: rgba(255, 255, 255, 0.9);
			margin: 0px;
			padding: 10px;
			margin-right: -400px;
			transition-duration: 300ms;
			opacity: 0;
		}

		
		#menu-menu .showli{
			margin-right: 2px;
			transition-duration: 200ms;
			opacity: 1;
		}
		#menu-menu li:hover{
			background-color: rgba(255, 255, 255, 1);
			transition-duration: 300ms;
		}
		#menu-menu .current-menu-item a{
			font-size: 24px;
			line-height: 24px;
			transition-duration: 100ms;
			font-weight: bold;
		}
		#menu-menu li a {
			font-family: "neutra text";
			text-transform: uppercase;
			list-style: none;
			text-decoration: none;
			color: rgba(0,0,0,0.9);
			line-height: 24px;
			font-size: 20px;
			transition-duration: 100ms;
		}
		#menu-menu li:hover a {
			color: rgba(0,0,0,1);
			line-height: 24px;
			font-size: 24px;
			transition-duration: 100ms;
		}
		
	/*-- 1.3 Titre et slogan -----------------*/
		#titre{
			z-index: 50;
			position: absolute;
			left: 58px;
			top: -20px;
			border: 3px solid rgba(0,0,0,0.1);
			border-radius: 50px;
			padding: 13px 33px 9px;
			background-color: rgba(255,255,255,.9);
			transition-duration: 800ms;
			
		}
		
		#titre:hover{
			border-color: rgba(0,0,0,0.7);
			transition-duration: 150ms;
		}
		

		
		
		
/*--- 2 HOME - Page d'accueil  ------------------*/	
	/*-- 2.0 Titre et slogan -----------------*/
		#titre-home{
			text-align: center;
			color: black;
			position: fixed;
			left: 0;
			right: 0;
			margin: auto;
			top: 10vh;
			width: 15%;
		}
		#titre-home img{
			max-width: 100%;
		}

		#titre-home h1 {
			font-size: 1.2vw;
			font-style: italic;
			line-height: 1.4vw;
			margin-right: 7%;
			margin-top: -7px;
			text-align: right;
		}

		#titre-home h2 {
			font-size: 1vw;
			font-style: italic;
		}
		
		
		
	/*-- 2.1 Positionnement du slide small -----------------*/
		#main{
			text-align: center;
		}
		#slide-small {
			bottom: 18%;
			bottom: 18vh;
			font-size: 0;
			height: 100px;
			overflow: hidden;
			position: fixed;
			width: 180%;
		}
		
		#slide-small ul {
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
			width: 100%;
		}
		#slide-small ul li{
			float: left;
			width: 11.110%;
			
		}
		#slide-small ul li img{
			height: 80px;
			width: 80px;
			border-radius: 100px;
			overflow: hidden;
			border: 10px solid white;
			cursor: pointer;
		}
		
		#slide-border{
			border-top: 1px solid #bbb;
			height: 50%;
			position: absolute;
			top: 50%;
			width: 100%;
			z-index: -2;
		}

	
	/*-- 2.2 boutons de navigation vignette -----------------*/	

		#slide-nav {
			height: 86px;
			left: -20%;
			position: relative;
			top: calc(50% - 43px);
			width: 140%;
			z-index: 0;
		}	
		.slide-button {
			cursor: pointer;
			padding: 20px;
			position: absolute;
			opacity: .4;
			transition-duration: 600ms;
		}
		#slide-nav-left {
			left: 0;
		}
		#slide-nav-right {
			right: 0;
		}
		
		.slide-button:hover{
			opacity: 1;
			margin: 0 -5px;
			transition-duration: 150ms;
		}
	
	/*-- 2.3 Positionnement du slide vignette -----------------*/	
	
		#slide-zoom{
			position: fixed;
			height: 43vh;
			width: 43vh;
			bottom: 11%;
			bottom: 11vh;
			left: 0;
			right: 0;
			margin: auto;
			border: 10px solid white;
			border-radius: 400px;
		}
	
		#slide-mask {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			overflow: hidden;
			border-radius:300px;
			z-index: 20;
		}
		
		#ulzoom{
			height: 100%;
			left: -301vh;
			position: absolute;
			width: 645vh;
			background-color: white;
		}

		#ulzoom > li {
			float: left;
			height: 100%;
			width: 43vh;
			margin: 0 43vh;
			position: relative;
			overflow: hidden;
			border-radius: 300px;
			z-index: 21;
		}
		#ulzoom > li > ul > li > img{
			width: 43vh;
			height: auto;
		}
		.superposition{
			position: relative;
			cursor: pointer;
			transition-duration: 600ms;
		}
		.superposition:hover{
			filter: blur(7px);
			transition-duration: 100ms;
		}
		
		.superposition > li {
			position: absolute;
			transition-duration: 1000ms;
			opacity: 0;
		}	
		
		.superposition  li:first-child{
			opacity: 1;
		}
		
		.superposition li.showvignette{
			opacity: 1;
			transition-duration: 1000ms;
		}
		
		.superposition:hover{
			filter: blur(4px);
		}
		
		#ulzoom  > li:hover .vignette-titre {
			opacity: 1;
			transition-duration: 100ms;
		}
		#ulzoom .vignette-titre {
			pointer-events: none;
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 500;
			display: flex;
			opacity: 0;
			transition-duration: 600ms;
			
		}
		#ulzoom .vignette-titre .vignette-titre-container{
			margin: auto;
		}
		#ulzoom h3 {
			color: white;
			font-family: "Neutra text";
			text-transform: uppercase;
			font-size: 23px;
			line-height: 25px;
			font-weight: bold;
			letter-spacing: 7px;
			text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
			
		}
		#ulzoom p {
			color: white;
			margin-top: 20px;
			color: white;
			font-weight: 200;
			font-family: "Neutra text";
			font-style: italic;
			font-size: 14px;
			line-height: 18px;
			text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
		}
				
		.superposition img {
			height: 43vh;
			width: 43vh;
		}
		
		
		#slide-border-vignette{
			border-top: 4px solid #bbb;
			height: 50%;
			position: absolute;
			top: 50%;
			width: 100%;
			z-index: 20;
		}
	
	

/*--- 3 ARCHIVE - Page d'affichage des projets par custom tax  ------------------*/		
	/*-- 3.0 Titre -----------------*/	
		#tax-titre-container{
			width: 100%;
			text-align: center;
		}
		#tax-titre {
			color: black;
			font-family: "neutra text";
			padding: 15px 15px 0 15px;
			display: inline-block;
			max-width:500px;
			width: auto;
		}
		#tax-titre h1{
			font-size: 28px;
			font-weight: bold;
			line-height: 30px;
			text-transform: uppercase;
		}
		#tax-titre p{
			margin-top: 15px;
			font-size: 18px;
			font-weight: normal;
			line-height: 20px;		
			color: rgba(0,0,0,0.8);
		}
		#tax-titre > span {
			border-bottom: 1px solid grey;
			display: inline-block;
			height: 24px;
			vertical-align: bottom;
			width: 50%;
		}
		
		#titre-tax-header{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 5;
			width: 100%;
			text-align: center;
			margin-top: -200px;
			transition-duration: 300ms;
			
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+54,0.9+100 */
			background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 54%, rgba(255,255,255,0.9) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 54%,rgba(255,255,255,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 54%,rgba(255,255,255,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6ffffff',GradientType=0 ); /* IE6-9 */

		}
		#titre-tax-header h1{
			padding: 50px 20px 10px 20px;
			color: black;
			font-family: "neutra text";
			font-size: 28px;
			font-weight: bold;
			line-height: 30px;
			text-transform: uppercase;
			display: inline-block;
			border-bottom: 1px solid grey;
			cursor: pointer;
		}
		

		.projets {
			margin: 0 20px;
			text-align: center;
			font-size: 0;
		}
		.projets-list{
			position: relative;
			padding-top: 30px;
		}
		#fil-projets{
			position: absolute;
			width: 50%;
			height: calc( 100% - 50px );
			border-right: 1px solid grey;
			margin-top: -30px;
		}


		.projets-list article {
			display: block;
			height: 200px;
			width: 100%;
			position: relative;
			text-align: center;
			margin: 10px 0;
		}

		.projet-lien {
			display: block;
			height: 100%;
			width: 100%;
		}


		.projet-bloc-centre {
			border-radius: 250px;
			display: inline-block;
			height: 130px;
			margin: 35px;
			overflow: hidden;
			position: relative;
			width: 130px;
			transition-duration: 600ms;
			border: 5px solid white;
		}


		.projet-bloc-centre > img {
			margin-left: -35px;
			margin-top: -35px;
			height: 200px;
			width: 200px;
			transition-duration: 600ms;
		}

		.projet-lien:hover .projet-bloc-centre{
			margin: 0;
			height: 200px;
			width: 200px;
			transition-duration: 100ms;
		}
		.projet-lien:hover .projet-bloc-centre > img {
			margin-left: 0;
			margin-top: 0;
			transition-duration: 100ms;
		}



		.projet-titre {
			position: absolute;
			bottom: 50%;
			right: 50%;   
			text-align: right;
			margin-bottom: 70px;
			margin-right: 150px;
			font-family: "Neutra text";
			opacity: 0;
			transition-duration: 600ms;
		}
		.projet-titre h2{
			font-size: 20px;
			line-height: 20px;
			font-weight: 500;
			text-transform: uppercase;
			color: #000;
		}
		.projet-titre h3{
			font-size: 17px;
			line-height: 16px;
			color: #444;
		}

		.projet-détail{
			position: absolute;
			top: 50%;
			left: 50%;   
			text-align: left;
			margin-left: 150px;
			margin-top: 70px;
			font-family: "Neutra text";
			opacity: 0;
			transition-duration: 600ms;
		}
		.projet-détail p{
			font-size: 15px;
			line-height: 15px;
			text-decoration: none;
			color: #444;
		}
		.projet-détail ul{
			margin-top: 12px;
		}
		.projet-détail ul li{
			display: inline-block;
			font-size: 12px;
			line-height: 12px;
			text-decoration: none;
			color: #444;
			margin-right: 4px;
			border-radius: 2px;
			background-color: #eee;
			padding: 2px 3px;
			border: 1px dotted #aaa;
		}


		.borderer {
			border-bottom: 1px solid grey;
			left: 0;
			margin: auto;
			position: absolute;
			right: 0;
			top: 50%;
			width: 50px;
			margin-top: 5px;
			transition-duration: 600ms;
		}

		.projet-lien:hover  .borderer{
			width: 280px;
			transition-duration: 100ms;
		}
		.projet-lien:hover  .projet-titre{
			margin-bottom: -10px;
			opacity: 1;
			transition-duration: 100ms;
			transition-delay: 100ms;
		}

		.projet-lien:hover  .projet-détail{
			margin-top: -5px;
			opacity: 1;
			transition-duration: 100ms;
			transition-delay: 100ms;
		}


/*--- 4 PAGE PROJET - Page d'affichage d'un projet ------------------*/
	/*-- 4.0 éléments -------------*/
		
		#projet-contenu {
			padding: 0 7%;
		}
	
		#pp-contenu{
			text-align: center;
			position: relative;
		}
		#pp-fil{
			border-right: 1px solid grey;
			height: 100%;
			margin-top: -10px;
			position: absolute;
			width: 50%;
		}

		.pp-elem {
			background-color: white;
			margin: 10px 0;
			padding: 5px 0;
			position: relative;
			width: 100%;
		}
		.pp-elem > li {
			transition-duration: 600ms;
		}
		.pp-elem > li a{
			text-decoration: none;
		}
		.pp-elem.pp-type{
			margin-bottom: 0;
			padding-bottom: 2px;
		}
		.pp-elem.pp-type li{
			background-color: white;
			border: 1px solid transparent;
			border-radius: 2px;
			display: inline-block;
			font-size: 14px;
			line-height: 16px;
			margin-right: 4px;
			padding: 3px 4px;
		}
		.pp-elem.pp-type li a{
			color: #444;
			font-weight: 800;
		}
		.pp-elem.pp-type > li:hover{
			border: 1px solid #ddd;
			transition-duration: 200ms;
		}
		
		.pp-elem.pp-hashtag{
			margin-top: 0;
			padding-top: 2px;
			margin-bottom: 5px;
		}
		.pp-elem.pp-hashtag li{
			background-color: #eee;
			border: 1px dotted #aaa;
			border-radius: 2px;
			display: inline-block;
			font-size: 12px;
			line-height: 12px;
			margin: 2px;
			padding: 2px 3px;
		}
		.pp-elem.pp-hashtag li a{
			color: #444;
		}
		
		.pp-elem.pp-hashtag > li:hover{
			border: 1px solid #999;
			background-color: #ddd;
			transition-duration: 200ms;
		}
		
		.pp-elem.pp-details {
			background-color: rgba(0,0,0,0);
		}
		.pp-elem.pp-details > p {
			background-color: white;
			font-weight: 800;
		}
		.pp-elem.pp-details > p:fisrt-child{
			padding-top: 15px;
		}
				
		.pp-description {
			margin-top: 10px;
			font-weight: 400 !important;
		}
		
		.pp-elem.pp-image {
			margin: 50px 0;
		}
		
		.pp-elem  > img{
			width: 100%;
			cursor: pointer;
			transition-duration: 400ms;
		}
		.pp-lmax {
			display: inline-block;
			max-width: 650px;
			transition-duration: 300ms;
		}
		.pp-lnorm {
			display: inline-block;
			max-width: 500px;
			transition-duration: 300ms;
		}
		.pp-lmin {
			display: inline-block;
			max-width: 350px;
			transition-duration: 300ms;
		}
		
		#pp-img-zoom-fond{
			position: fixed;
			top: 0;
			width: 98vw;
			height: 98vh;
			line-height: 98vh;
			padding: 1vh 1vw;
			text-align: center;
			background-color: white;
			z-index: 10000;
		}
		#pp-img-zoom {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
			line-height: 98vh;
			z-index: 10000;
			opacity:0;
			cursor: pointer;
			left:0;
		}

		#pp-img-zoom > img {
			height: auto;
			max-height: 100%;
			max-width: 100%;
			vertical-align: middle;
		}
		
		.pp-img-txt {
			height: 100%;
			margin-top: -20px;
			position: absolute;
			top: 50%;
			width: 100%;
			color: white;
			text-shadow: 1px 1px 2px black;
			pointer-events: none;
			opacity: 0;
			transition-duration: 400ms;
		}
		
		
		
		/* bouton close */
		.pp-img-close {
			z-index: 15000;
			position: absolute;
			right: 70px;
			top: 56px;
			width: 50px;
			height: 50px;
			opacity: 0.6;
			cursor: pointer;
			background-color: rgba(255, 255, 255, 0.4);
			transition-duration: 800ms;
		}
		.pp-img-close:hover {
		  opacity: 1;
		  transition-duration: 200ms;
		  background-color: rgba(255, 255, 255, 0.95);
		}
		.pp-img-close:before, .pp-img-close:after {
		  position: absolute;
		  left: 23px;
		  content: ' ';
		  height: 50px;
		  width: 3px;
		  background-color: rgba(0,0,0,0.8);
		}
		.pp-img-close:before {
		  transform: rotate(45deg);
		}
		.pp-img-close:after {
		  transform: rotate(-45deg);
		}
		
		
		/* bouton next */
		#pp-img-next {
		  position: absolute;
		  top: 50%;
		  right: 70px;
		  width: 50px;
		  line-height: 135px;
		  height: 100px;
		  opacity: 0.6;
		  cursor: pointer;
		  transition-duration: 800ms;
		  z-index: 15000;
		  
		}
		#pp-img-next:hover {
		  opacity: 1;
		  transition-duration: 200ms;
		}
		
		/* bouton prev */
		#pp-img-prev {
		z-index: 15000;
		  position: absolute;
		  top: 50%;
		  left: 70px;
		  width: 50px;
		  line-height: 135px;
		  height: 100px;
		  opacity: 0.6;
		  cursor: pointer;
		  transition-duration: 800ms;
		}
		#pp-img-prev:hover {
		  opacity: 1;
		  transition-duration: 200ms;
		}


		
		
/*--- 5 PAGE CONTACT - Page statique dédié au contact ------------------*/

	/*-- 5.0 éléments -------------*/
	#contact .contact-titre span{
		width: 100%;
	}
	
	#contact #pp-fil{
		margin-top: 0;
	}

	#contact .contact-elem {
		position: relative;
		z-index: 1;
		background-color: white;
	}
	
	#contact #pp-contenu > img {
		border-radius: 300px;
		margin: 50px 0 10px 0;
	}
	#contact-nom {
		font-size: 160%;
		font-weight: 600;
		margin-top: 10px;
		padding: 10px 0 15px 0;
	}
	#contact .contact-coord{
		font-size: 140%;
		line-height: 120%;
	}
	#contact .contact-coord:last-child{
		padding-bottom: 10px;
	}
	
	#contact-text {
		display: block;
		margin: 30px auto;
		max-width: 500px;
		padding: 10px 0;
	}
	
	#contact-fichiers a{
		display: inline-block;
		font-family: "neutra text";
		font-size: 28px;
		font-weight: bold;
		color: #333;
		text-decoration: none;	
		height: 120px;
		width: 120px;
		line-height: 120px;
		border: 1px solid transparent;
		border-radius: 150px;
		background-color: #fff;
		transition-duration: 600ms;
		position: relative;
		z-index: 1;
		
	}
	
	#contact-fichiers a:hover{
		border: 1px solid transparent;	
		transition-duration: 150ms;
		background-color: #eee;
		color: black;
	}
	
	#contact-fichiers {
		background-color: rgba(0, 0, 0, 0) !important;
		
	}

	#double-fichier {
		position: relative;
		display: inline-block;
		height: 120px;
		vertical-align: middle;
		width: 120px;
	}
	#double-fichier span{
		position: absolute;
		width: calc( 100% + 6px );
		height: 55%;
		top: 45%;
		left: -3px;
		border-top: 1px solid grey;
		background-color: white;
	}
	
body.form-active {
    overflow: hidden;
    height: 100%;
}	
		
#sous-contenu{
    overflow-y:hidden;
}
/*--- # MEDIA QUERIES ------------------*/	

@media screen and (max-width : 1400px) {
	#slide-small {
		bottom: 13%;
		bottom: 13vh;
	}
	#slide-zoom {
		bottom: 8%;
		bottom: 8vh;
	}
}



@media screen and (max-width : 1024px) {
	#titre-home {
		width: 20%;
	}
	
	#titre-home h1{
		font-size: 1.7vw;
		line-height: 1.9vw;
	}
	#titre-home h2{
		font-size: 1.4vw;
	}
}

@media screen and (max-width : 640px) {
	header{
		top: 10px;
	}
	#nav {
		right: 15px;
	}
	#titre{
		top: 0;
		left: 10px;
		padding: 9px 22px 5px;
		border-width: 2px;
	}
	#titre > img{
		height: 45px;
	}
	#tax-titre-container.toposition #tax-titre p{
		display:none;
	}
}


@media screen and (orientation:portrait) {
	
	#titre-home {
		max-width: 50%;
		width: auto;
		top: 15vh;
	}
	
	#titre-home h1 {
		font-size: 3vw;
		line-height: 3vw;
		margin-right: 17%;
		
	}
	#titre-home h2 {
		font-size: 2.5vw;
		line-height: 5vw;
	}
}


@media all and (max-device-width: 480px) and (orientation:portrait){
	
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
	
	/* Page d'accueil logo central*/
	#titre-home {
		top: 9vh;
	}
	#titre-home  img{
		width: 100%;
	}
	#titre-home h1 {
		font-size: 2.5rem;
		line-height: 2.5rem;
		margin-right: 0;
		
	}
	#titre-home h2 {
		font-size: 2rem;
		line-height: 3rem;
	}
	
	#slide-small {
		bottom: 10vh;
	}
	
	#ulzoom h3{
		font-size: 3.8rem;
		line-height: 4rem;
	}
	#ulzoom p{
		font-size: 2rem;
		line-height: 2.2rem;
		font-weight: 400;
	}
	
	
	/* Bouton du menu*/
	.lines-button{
		height: 120px;
		width: 120px;
	}
	.lines-button span {
		height: 7px;
	}
	.lines-button span::before {
		top: -30px;
		height: 7px;
	}
	.lines-button span::after {
		bottom: -30px;
		height: 7px;
	}
	
	
	/* Taille du menu*/
	#menu-menu li{
		font-size: 0;
		line-height: 0;
		border: none;
		padding: 25px;
	}
	#menu-menu .current-menu-item a {
		font-size: 52px;
		line-height: 60px;
	}
	
	#menu-menu li a{
		font-size: 43px;
		line-height: 60px;
	}
	#menu-menu li:hover a{
		font-size: 55px;
		line-height: 60px;
	}
	
	
	/*Logo Mens du menu*/
	#titre > img {
		height: 100px;
	}
	#titre{
		padding: 9px 39px 5px;
		border-radius: 100px;
		text-decoration: none;
		top: 12px;
		left: 50px;
	}
	
	/*Titres de page*/
	#sous-contenu {
		padding: 250px 0 50px;
	}
	
	#tax-titre h1 {
		font-size: 45px;
		line-height: 50px;
	}
	#titre-tax-header h1 {
		font-size: 45px;
		line-height: 50px;
		padding: 100px 40px 50px;
	}
	#tax-titre p {
		font-size: 30px;
		line-height: 38px;
		margin-top: 20px;
	}
	
	

	/*contenu single projet */
	#projet-contenu{
		padding: 0;
		margin-bottom: 40px;
	}
	.pp-elem.pp-details{
		font-size: 200%;
		line-height: 150%;
		padding: 40px 0;
	}
	.pp-elem.pp-details .pp-description{
		margin-top: 40px;
	}
	.pp-elem.pp-image {
		margin: 170px 0;
	}
	.pp-lmax{
		max-width: 90%;
	}
	.pp-lnorm{
		max-width: 75%;
	}
	.pp-lmin{
		max-width: 60%;
	}

	.pp-elem.pp-type li, .pp-elem.pp-hashtag li {
		font-size: 220%;
		line-height: 150%;
		margin: 10px;
		padding: 14px 30px;
		border-radius: 10px;
	}
	.pp-elem.pp-type li{
		border: 1px dotted #aaa;
		border-radius: 10px;
	}
	
	.pp-img-close {
		z-index: 15000;

		}
	.pp-img-close::before, .pp-img-close::after {
		height: 100px;
		width: 6px;
	}
	
	#pp-img-next , #pp-img-prev {
		display: none;
	}
	
	
	
	/*page archive */

	.projets-list article{
		height: 500px;
	}
	.projet-bloc-centre{
		height: 400px;
		width: 400px;
		margin: 100px;
	}
	.projet-lien:hover .projet-bloc-centre{
		height: 400px;
		width: 400px;
		margin: 100px;
		margin-left: 40vw;
	}

	.projet-bloc-centre > img{
		margin:0;
		height: 400px;
		width: 400px;
	}
	.projet-lien:hover .projet-bloc-centre > img{
		margin:0;
		height: 400px;
		width: 400px;
	}
	.projet-titre {
		bottom: 0;
		top: 46%;
	}
	.projet-titre h2 {
		font-size: 40px;
		line-height: 44px;
	}
	
	.projet-titre h3 {
		font-size: 30px;
		line-height: 34px;
	}
	.projet-détail{
		opacity: 0 !important;
	}
	
}

@media all and (max-device-height: 480px) and (orientation:landscape){

	/* Page d'accueil logo central*/
	#titre-home {
		top: 3vh;
	}
	#titre-home  img{
		width: 100%;
	}
	#titre-home h1 {
		font-size: 1.2rem;
		line-height: 1.2rem;
		margin-right: 0;
		
	}
	#titre-home h2 {
		font-size: 1rem;
		line-height: 1.2rem;
	}
	#slide-zoom{
		bottom: 2vh;
	}
	#slide-small {
		bottom: 4vh;
	}

}