@charset "UTF-8";
/* CSS Document */


/******************************************************************
******************************************************************
NE PAS MODIFIER
CES LIGNES ENLEVENT LES PADDING ET MARGIN AJOUTÉS
AUTOMATIQUEMENT PAR LE FICHIER CSS/NORMALIZE.CSS
******************************************************************
******************************************************************/

p, h1, h2, h3, h4, h5, h6, ul, li, figure {
	padding:0;
	margin:0;
}

/******************************************************************
******************************************************************
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
******************************************************************
******************************************************************/
body, html {
	height:100%;
	min-height:100%;
	max-width:100%;
}


body {
	background-image:url(../images/fond.jpg);
	background-color: #fff2ad;
	background-size: auto;
	background-attachment:fixed;
	max-width:1200px;
	color:#fec81e;
	font-weight:600;
	}

figure.papier img {
height: auto;
	width: 100%;

	
}
aside.hey{
	
	position: fixed;
	bottom:45%;
	left: 25%;
	color: #fec81e;
	font-size: 400%;
	font-family: 'lato', sans-serif;
	line-height: 220%;
	font-weight: 900;
	width: 100%;
	height: auto;
	
}

aside.hey h1{
	

	color: white;
	font-size: 220%;
	font-weight: 900;
	
}

aside.hey h2{
	

	color:  #fec81e;
	font-size: 170%;
	font-weight: 900;
	
}


div.bouton{
	
	width: 100%;
	height: auto;
	position: fixed;
	bottom:45%;
	left: 50%;
	
}

div.bouton p {
	padding-bottom: 5%;
	font-size: 300%;
	font-family: 'Roboto Slab', serif;
}

div.bouton ul#navi {
	display: inline;
	color: white;
	text-decoration: none;

}

div.bouton ul#navi li {
	display: inline;
	color: white;
	
}

div.bouton ul#navi li a {
	display: inline;
	color: white;
	text-decoration: none;
	background-color:  #fec81e;
	padding: 1% 1.5%;
	border-radius: 15px;
	margin-right: 3%;
	font-family: 'Roboto Slab', serif;
	font-size: 150%;
	}

div.bouton ul#navi li:hover {
	
	cursor: pointer;
}


li.hvr-box-shadow-outset {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 2px transparent;
  -webkit-transition-duration: 0.6s;
  transition-duration: 0.6s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.hvr-box-shadow-outset:hover, .hvr-box-shadow-outset:focus, .hvr-box-shadow-outset:active {
  box-shadow: 2px 2px 2px rgba(255, 255, , 0.8);
	color: red;
}

@media  screen and (max-width: 2000px) {
	
	div.bouton {left:70%;}
	div.bouton p {font-size: 200%;}
	div.bouton ul#navi li a {font-size: 100%; margin-right:1%;}

}
	@media  screen and (max-width: 1500px) {
		aside.hey {position: fixed; bottom: 50%; left:35%;}	
		aside.hey h1 {font-size: 220%; line-height: 100%;}
		aside.hey h2 {font-size: 200%;}
	figure.papier img {position: fixed; bottom: 10%;left: 3%;}
	div.bouton {left:30%; bottom: 5%;}
	div.bouton p {font-size: 200%;}
	div.bouton ul#navi li a {font-size: 100%; margin-right:1%;}

}
	
		@media  screen and (max-width: 1000px) {
		aside.hey {position: fixed; bottom: 32%; left:35%;}	
		aside.hey h1 {font-size: 180%; line-height: 100%;}
		aside.hey h2 {font-size: 150%;}
		}

		@media  screen and (max-width: 700px) {
		aside.hey {position: fixed; bottom: 45%; left:35%;}	
		aside.hey h1 {font-size: 90%; line-height: 1%;}
		aside.hey h2 {font-size: 70%;}
		div.bouton p {font-size: 105%;}
			div.bouton ul#navi li a {font-size: 80%; margin: 2%;}

		figure.papier img {
		height: auto;
		width: 120%;
			position: fixed;
			top: 1%;

	}
			div.bouton{
	
	width: 100%;
	height: auto;
	position: fixed;
	bottom:25%;
	left: 25%;}
	
}


/****************PAGES INTÉRIEURES*************************************/


div#header {
	
	height:auto;
	width:100%;
	background-repeat: no-repeat;
	background-size: 60%;
	margin:10% 50%;

	}	


div#header figure.papierint {
	
	position: absolute;
	width: 100%;
	height: auto;
	bottom: 30%;
	right: 20%;
}

div#header h1 {
	position: absolute;
	top: 15%;
	left: 25%;
	font-size: 450%;
	z-index: 9999999999999999999999999999999;
	
}	

div#header figure.main img {
	position: absolute;
	top: 15%;
	left:43%;		
	margin-left: 5%;
	z-index: 9999999999999999999999999999999;
}
	
	

aside.nav figure img {
	position: fixed;
	z-index: 999999999999999999999;
	top: 34%;
	left:2%;
}

aside.nav ul {
	position: fixed;
	z-index:99999999999999999999999; 
	top: 45%;
	left: 11%;
	width: 8%;

	
}

aside.nav li{

	text-decoration:none;
	list-style-type:none;
	padding: 7%;
	margin-top:8%;
	background-color: #fec81e;
	border-radius: 15px;
	font-size: 110%;
	}

aside.nav li a{
	color: white;
	text-decoration:none;
	list-style-type:none;

	}

	



	
div.projets {
	margin: 35% 5% 10% 50%;
	width: 100%;
	height: auto;
	
}	


	
section {
	margin: 4% 6% 0 0;
	padding: 2% 4%;
	height:auto;
	width:20%;
	color:#BFBFBF;
	font-family:'Roboto Slab', serif;
	float: left;

	}
	

	

	


	
	
	
section:hover {
	cursor:pointer;
	}
	
section article figure {
	height:auto;
	width:100%;
	}



@media  screen and (max-width: 2000px) {
	
	
div#header h1 {

	top: 15%;
	left: 20%;}	

div#header figure.main img {
	position: absolute;
	top: 15%;
	left:45%;}
	
			div#header figure.papierint {
	
		
			bottom: 30%;
			right: 20%;}	
	
	
}


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

			div#header h1 {
				
			top: 15%;
			left: 10%;
			font-size: 400%}	

			div#header figure.main img {
				position: absolute;
				top: 15%;
				left: 35%;
				width: 166px;
				height: 150px;
				}
		div#header figure.papierint {
	
		
			bottom: 30%;
			right: 50%;}	
			
			aside.nav li{

	text-decoration:none;
	list-style-type:none;
	padding: 10%;
	margin-top:8%;
	background-color: #fec81e;
	border-radius: 15px;
	font-size: 100%;
		display: block;
	}
		}
	
@media  screen and (max-width: 1000px) {

			div#header h1 {
			top: 5%;
			left: 10%;
			font-size: 400%}	

			div#header figure.main img {
				position: absolute;
				top: 5%;
				left: 35%;
				width: 166px;
				height: 150px;
				}
		div#header figure.papierint {
	
		
			bottom: 30%;
			right: 50%;}	
	
	div.projets {
	margin: 35% 5% 10% 40%;
	width: 100%;
	height: auto;
		float: none;
	
}	

	
section {
	margin: 4% 6% 0 0;
	padding: 2% 4%;
	height:auto;
	width:20%;
	color:#BFBFBF;
	font-family:'Roboto Slab', serif;
	float: none;

	}
	
	
	section article figure img {
		height: auto;
		width: 250%;
	}	
		}





	

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

	div#header h1 {
			top: 5%;
			left: 10%;
			font-size: 230%}	

			div#header figure.main img {
				position: absolute;
				top: 5%;
				left: 65%;
				width: 106px;
				height: 90px;
				}
	div#header figure.papierint {
			width: auto;
			height: 30%;
			bottom: 5%;
			right: 5%;}	
	
	aside.nav figure img {
	width: auto;
	height: 34%;
}

aside.nav ul {
	
	top: 38%;
	left: 15%;
	width: 22%;
	text-align: center;

	
}

aside.nav li{

	text-decoration:none;
	list-style-type:none;
	padding: 10%;
	margin-top:8%;
	background-color: #fec81e;
	border-radius: 15px;
	font-size: 75%;
	display: block;
	}

aside.nav li a{
	color: white;
	text-decoration:none;
	list-style-type:none;}

	}



/**************************NAV************************************/


	
.nav-base li{
	display:block;
	text-decoration:none;
	list-style-type:none;
	padding:4.5%;
	margin-top:10%;
	background-color: white;
	border-radius: 15px;
	text-align:center;
	color:#302683;
	width:50%;
	font-family:lato, sans-serif;
	font-weight:900;
	}
.nav-base li a {
	text-decoration:none;
	list-style-type:none;
	color:rgba(255,202,19,0.7);
	}
	
.nav-base li:hover, .nav-portfolio li:hover{
	cursor:pointer
	}
	
.nav-portfolio li{
	display:block;
	text-decoration:none;
	list-style-type:none;
	padding:4.5%;
	margin-top:10%;
	background-color:white;
	border-radius: 15px;
	text-align:center;
	color:white;
	width:60%;
	font-family:lato, sans-serif;
	font-weight:900;
	}
	
.nav-portfolio li a {
	text-decoration:none;
	list-style-type:none;
	color:#302683;
	}

.video-a-propos {
	width:50%;
	height:auto;
	position:fixed;
	top:15%;
	left:20%;
	}
	
aside h2 span{
	font-size:300%;

	}
	
article.moi {
	background-color:white;
	border-radius: 15px;
	color:#302683;
	padding: 2% 3%;
	}


/****************PAGES PHOTOS*********************/

section.texte{
	background-color: #fec81e;
	font-weight: 300;
	margin: 5%;
	border-radius-top:15px;
	padding: 5% 10% ;
	
}

section.texte p {
	
	margin-bottom: 2%;
	
}

article.photo {
	margin-left:30%;
	padding:10%;
	width:50%;
	font-family:lato, sans-serif;
	max-width:100%;
	}
	
article#pulp {
	padding-right:50%;
	}

article.photo h1{
	text-align:center;
	font-weight:900;
	font-size:200%;
	padding:5% 0 5% 0;
	margin:0 auto;
	}


article.photo h3 {
	display:block;
	text-decoration:none;
	list-style-type:none;
	text-align:center;
	padding:0.5%;
	margin:10% 0 0 25%;
	background-color: #fec81e;
	border-radius:15px;
	text-align:center;
	width:50%;
	color: white;
	}
	
	
article.photo section{
	margin:0 auto;
	width:80%;
	color: white;
	}	

article.photo figure {
	margin-top: 5%;
	padding-right:2%;
	width:100%;
	height:auto;
	}
article.photo img {
	margin:0 auto;
	width:100%;
	height:auto;
	}


article.photo h3 a {
	text-decoration:none;
	list-style-type:none;
	color:white;
	font-weight:900;
	}
	
article.photo h3 a:hover{
	cursor:pointer;
	}
	
figure.video  {
	width:80%;
	height:auto;
	margin:0 auto;
	padding:10% 0 10% 25%;
	}
	
figure#pulp  {
	width:100%;
}
	
figure.video video{
	width:100%;
	height:auto;
	}
	

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

	section.texte{
	font-size: 80%;
	
}
article.photo h3 {	
	font-size: 120%;
}



/**********A PROPOS*********/

div.moi {
	margin-left: 40%;
	width: 100%;
	color: white;
}

section.textemoi {
	background-color: #302683;
	width: 80%;
	color: white;
	
}

	
	
/**********CONTACT*********/

article.contact {
	margin:20% 0 0 20%;
	}
	

article.contact h1, h2 {
	color:#302683;
	font-family: lato, sans-serif;
	

	}
	
article.contact h1 {
	font-size:500%;
	font-weight:900;
	position:fixed;
	top:15%;
	left:25%;
	color:#302683;
	
	}
	
article.contact h2 {
	font-size:200%;
	position:fixed;
	top:24%;
	left:25%;
	color:#302683;
	
	}
	
	
	
	


form {
	display:block;
	margin: 0 auto;
	width:50%;
	color:#302683;
	padding-top:30%;

	}

	
form input {
	border-radius:15px;
	margin:2% 0 2% 0;
	border: none;
	padding:1%;
	color:#302683;
	}
	
form input:hover {
	cursor:pointer;

	}
	
form textarea {
	border-radius:15px;
	margin:2% 0 2% 0;
	border: none;
	}
		
	
aside#back{
	display:block;
	text-decoration:none;
	list-style-type:none;
	text-align:center;
	padding:1% 2%;
	background-color: white;
	border-radius:15px;
	text-align:center;
	position:fixed;
	bottom:10%;
	left:25%;
	}
	
aside#back a{
	display:block;
	text-decoration:none;
	list-style-type:none;
	text-align:center;
	color:#302683;
	
	}
	
	
section article.texte{}
	

aside#back a:hover{
	cursor:pointer;
	}

ul.contact {
	
	margin-left:20%;
		}
		
		
article.photo h3 {
	font-size:80%;
	}
	
	
form input.boutton {
	color:#302683;
	padding:3%;
	background-color:white;
	}

/************* MOBILE *****************/






/************* EXTRAS *****************/

div.pousse {
clear:both;
width:0;
height:0;
overflow:0;
}