html, body, header, nav, label, ul, li, a, section, h1, h2, img, figure, div, footer, h3, h4, h5, h6, input, textarea {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font: inherit;
	vertical-align: baseline;
	line-height: 1;
	font-family: 'Oswald', sans-serif;
	color:white;
}
* {
	box-sizing: border-box;
}

a 		{ text-decoration:none; outline:none;}
li 		{ list-style:none;}
img 	{ border:none; outline:none;}

/******************/
/* Background     */
/******************/
article a,
body,
input[type=submit]:hover					{ background-color:rgba(0,0,0,1);}
header input[type=checkbox]:checked ~ nav 	{ background-color:rgba(0,0,0,0.9);}
input[type=submit]							{ background-color:rgba(0,0,0,0.7);}
article 									{ background-color:rgba(0,0,0,0.6);}
#album figure a 							{ background-color:rgba(0,0,0,0.1);
											  background: -webkit-linear-gradient(left, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 69vw, rgba(0,0,0,1));
											  background: -o-linear-gradient(right, 	rgba(0,0,0,0) 50%, rgba(0,0,0,1) 69vw, rgba(0,0,0,1));
											  background: -moz-linear-gradient(right, 	rgba(0,0,0,0) 50%, rgba(0,0,0,1) 69vw, rgba(0,0,0,1));
											  background: linear-gradient(to right, 	rgba(0,0,0,0) 50%, rgba(0,0,0,1) 69vw, rgba(0,0,0,1));}
input,
textarea									{ background-color:rgba(255,255,255,0.8)}

/*********/
/* Fonts */
/*********/
.top, .avant, .apres {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;}

#medias h1,
#news h1,
#oeuvres h1,
#accueil h1 			{ font-size: calc(2em + 4vw);}
.entrer,
#accueil h2,
#oeuvres h2 			{ font-size: calc(2em + 2vw);}
.top, .avant, .apres	{ font-size: calc(1.8em + 1vw);}
article label, 
.paragraphe p,
#news h3,
#album figcaption 		{ font-size: calc(1.3em + 1vw);}
blockquote p,
input[type=submit],
p						{ font-size: calc(1em + 0.5vw);}
#oeuvre figcaption		{ font-size: calc(0.9em + 0.5vw);}
.mini 					{ font-size: 0.7em;}
#vignettes figcaption 	{ font-size:1.5rem;}
nav						{ font-size: 26px;}
address,
input,
textarea				{ font-size: calc(0.4rem + 1.2vw);}

article label,
h1, h2					{ text-shadow:2px 2px 2px rgba(30,140,160,1);}
.entrer,
.paragraphe p 			{ text-shadow:2px 2px 1px rgba(0,0,0,1);}
#album figcaption,
#vignettes 				{ text-shadow:1px 1px 1px rgba(0,0,0,1);}

#news h3,
input[type=submit]:hover,
.active 				{ color:rgba(30,140,160,1);}
nav li a:hover			{ color:rgba(30,140,160,0.8);}
input,
textarea 				{ color:rgba(0,0,0,1);}
input[type=submit]		{ color:white;}

.active 				{ font-weight:bold;}

#vignettes figcaption,
#oeuvre figcaption		{ text-align:center;}
article					{ text-align:justify;}

address					{ line-height:1.8rem;}
blockquote p			{ line-height:1.2em;}
.red					{ color:red;text-shadow:1px 1px 1px black;}
.green					{ color:green;text-shadow:1px 1px 1px black;}

/***************/
/*  Borders    */
/***************/
#vignettes figure 	{ border-left: 3px solid; border-right: 3px solid; border-bottom: 3px solid;}
input,
textarea			{ border-radius: 5px 10px 3px 5px;}
input[type=submit]	{ border-radius: 10px 3px 10px 3px;}
article,
article a			{ border-radius: 10px;}
article,
article a			{ border: 2px solid black;}
article:hover,
article a:hover		{ border-color:rgba(255,255,255,0.5);}

header input[type=checkbox] ~ nav label {	
	background:url(../img/bton/menu2.png) no-repeat center;
	height:50px;
	width:50px;
	display:inline-block;
}
header input[type=checkbox]:checked ~ nav label	{ 
	background:none;	
 	margin-bottom:10px; margin-top:10px; height: 0; width: 0;
	border-left: 16px solid transparent;
	border-right: 16px solid transparent; 
	border-bottom: 16px solid white;
	border-top:none; 
}

header input[type=checkbox]:checked ~ nav{ 
	border-left:1px solid rgba(255,255,255,0.3);
	border-right:1px solid rgba(255,255,255,0.3);
}
/***************/
/*  Display    */
/***************/
header input[type=checkbox]:checked ~ nav ul,
nav,
#formulaire,
.top,.avant,.apres,
#album figure,
#vignettes,
section {
	display: -webkit-flex;
	display:    -moz-flex;
	display:     -ms-flex;
	display:         flex;
}

.ordre,
nav a,
article label,
#album figure a,
#vignettes img,
#h1_1, #h1_2, #h1_3, 
#h1_4, #h1_5, #h1_6, #h1_10 			{ display:inline-block;}

article input[type=checkbox]:checked ~ div,
#presentation br						{ display:block;}
header input[type=checkbox],
header input[type=checkbox] ~ nav ul,
article input[type=checkbox],
article input[type=checkbox] ~ div		{ display:none;}

/***************/
/*  Position   */
/***************/
nav,
#teamtaom,
#oeuvre figcaption,
#signature,
.top, 
.avant, 
.apres					{ position:fixed;}
nav 					{ top:0; left:70px;}
.top 					{ top:0; bottom:80vh; left:20vw; right:0;}
.avant					{ top:20vh; bottom:0; left:0; right:75vw;}
.apres					{ top:20vh; bottom:0; right:0; left:25vw;}
#signature				{ bottom:1vw; right:1vw;}
#medias h1,
#news h1,
#oeuvres h1 			{ top:0;}
#oeuvre figcaption		{ bottom:3vmax; left:3vmax;line-height:1.7rem;}

.ordre,
#oeuvres h1,
#medias h1,
#news h1,
#album figure span,
#album figure a,
#album figure img,
#vignettes figcaption 	{ position:absolute;}
#vignettes figcaption 	{ top:0;}
#vignettes img 			{ top:3px;}
.ordre,
#album figure img 		{ top:0; left:0;}
#album figure a 		{ left:10vw;}
#album figure span 		{ bottom:10vmin;}
#teamtaom				{ bottom:0; left:0;}

#vignettes ul,
article,
#album figcaption,
#album figure,
#vignettes figure,
#vignettes img,
.portrait 				{ position:relative;}

article img				{ float:left;}
article a				{ float:right;}

nav,
#album figcaption		{ z-index:100;}
#signature,
#album figure a 		{ z-index:90;}
.avant,.apres,.top		{ z-index:80;}
#vignettes img 			{ z-index:60;}
#teamtaom,
#vignettes figcaption 	{ z-index:50;}
.dimension 				{ z-index:50;}
#album figure img 		{ z-index:10;}

/*********/
/* Flex  */
/*********/

nav,
nav ul,
.avant,.apres,
#album figure a,
#album figure a,
#album figure,
section  {
	-webkit-align-items: center;
	   -moz-align-items: center;
	    -ms-align-items: center;
	        align-items: center;
}
nav ul,
#contact section{
	-webkit-justify-content: space-around;
	   -moz-justify-content: space-around;
	    -ms-justify-content: space-around;
	        justify-content: space-around;
}
nav			{ 
	-webkit-justify-content: space-between;
	   -moz-justify-content: space-between;
	    -ms-justify-content: space-between;
	        justify-content: space-between;
}
#vignettes,
section  {
	-webkit-justify-content: center;
	   -moz-justify-content: center;
	    -ms-justify-content: center;
	        justify-content: center;
}
#oeuvres section,
#medias section,
#news section {
	-webkit-justify-content: flex-start;
	   -moz-justify-content: flex-start;
	    -ms-justify-content: flex-start;
	        justify-content: flex-start;
}
.top,
.apres,
#album figure {
	-webkit-justify-content: flex-end;
	   -moz-justify-content: flex-end;
	    -ms-justify-content: flex-end;
	        justify-content: flex-end;
}

header input[type=checkbox]:checked ~ nav ul,
nav,
#formulaire,
section	{
	-webkit-flex-direction: column;
	   -moz-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
}
#contact section {
	-webkit-flex-direction: row;
	   -moz-flex-direction: row;
	    -ms-flex-direction: row;
	        flex-direction: row;
}
#contact section,
#formulaire,
#vignettes	{
	-webkit-flex-wrap: wrap;
	   -moz-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
}
h2 			{ 
	-webkit-align-self: flex-end;
	   -moz-align-self: flex-end;
	    -ms-align-self: flex-end;
	        align-self: flex-end;
}
/***************/
/*  Tailles    */
/***************/
/*Width*/
section  									{ width:100vw;}
#signature,
#vignettes figure 							{ width:20vw; min-width:200px;}
iframe,
#album figure,
#album figure a,
#vignettes figcaption,
#vignettes img,
#signature img								{ width:100%;}
#medias article img,
#album figcaption 							{ width:40%;}
article 									{ width:90vw;}
iframe										{ width:40vw;}
nav 										{ width:165px;}
#news article img 							{ max-width:40%;}
#creation 									{ max-width:100vh;}
#creation img								{ max-width:100%;}
#album figure img 							{ min-width:100%;}
iframe										{ min-width:400px;}
/* Height*/
header input[type=checkbox]:checked ~ nav,
section  										{ height:100vh;}

nav ul,
#album figure a,
#album figure,
#vignettes figcaption 							{ height:100%;}
#vignettes img,
#signature img									{ height:auto;}
#vignettes figure 								{ height:15vw; min-height:150px;}
#creation										{ max-height:100vh;}
#creation img									{ max-height:100%;}
#news article img 								{ max-height:40vh;}
#album figure img 								{ min-height:100%;}
iframe											{ min-height:400px;}

#creation,
#album figure,
#vignettes figure 		{ overflow:hidden;}
#oeuvres,
#medias,
#news					{ overflow-x:hidden;}
#medias					{ overflow-y:scroll;}

/***************/
/*  Espaces    */
/***************/
.paragraphe p		{ margin:0.8rem calc(3rem + 15vw) 1rem calc(5rem + 16vw);}
#vignettes figure 	{ margin-left:2vh; margin-right:2vh;}
#vignettes li		{ margin-bottom:2vh;}
#contact form,
#google				{ margin:auto 2%;}
#presentation br	{ margin: 0.5rem 0;}
article img			{ margin: 0 3vmin 3vmin 0;}
article h2			{ margin-bottom:3vh;}
.mini::after		{ margin-left:1rem; margin-right:1rem;}
input,
textarea				{ margin:1vmin;}
#vignettes figcaption 	{ padding-top:1.4rem;}
#album figcaption 		{ padding-right:5vw;}
.top					{ padding-top:2vmin;padding-right:15vw}
.avant					{ padding-left:2vmin;}
.apres					{ padding-right:2vmin;}

#oeuvres section,
#news section		{ padding-top:calc(6em + 10vw);}

#medias section			{ padding-top:25vh;}
input,
textarea				{ padding:0.5vmin;}
input[type=submit]		{ padding:1.5vmin;}
article					{ padding: 3vh;}
article a				{ padding:3vmin;}
.entrer 				{ margin-left:180px;margin-bottom:30px;}
/***************/
/*  Divers     */
/***************/
#h1_1, #h1_2, #h1_3, 
#h1_4, #h1_5, #h1_6, 
#h1_10, 
#accueil h2, 
#accueil nav 			{ opacity:0;}
.top,.avant,.apres,
a .entrer 				{ opacity:0.5;}

nav label				{ opacity:0.8;}

nav label:hover,
.top:hover,
.avant:hover,
.apres:hover,
a .entrer:hover			{ opacity:1;}

nav label,
article label,
input[type=submit]		{ cursor:pointer;}

.paragraphe p			{ transform: rotate(-5deg);}
#accueil h1				{ transform: rotateZ(-10deg);}
#medias h1,
#news h1,
#oeuvres h1				{ transform:translate(0,5vh) rotateZ(-10deg);}
#accueil h2 			{ transform:translate(-10vw,20vh);}
#vignettes img:hover	{ transform:translate(0,40%);}
#album figcaption 		{ transform:rotate(-5deg);}

nav a 					{ transition:0.2s;}
#vignettes img:hover,
#vignettes img 			{ transition:1s;}

#presentation br		{ content: "";}
.mini::after			{ content: "~";}

input,
textarea				{ box-shadow: 2px 2px 2px rgba(0,0,0,0.9);}
input[type=submit]		{ box-shadow: 1px 1px 2px rgba(255,255,255,0.9);}

nav li a:hover							{ transform: scale(1.1);}
/**************/
/* Animations */
/**************/
#h1_1, #h1_2, #h1_3, 
#h1_4, #h1_5, 
#h1_6, #h1_10 		{ 
	-webkit-animation : anim_h1 1s forwards linear;
	   -moz-animation : anim_h1 1s forwards linear;
	     -o-animation : anim_h1 1s forwards linear;
	        animation : anim_h1 1s forwards linear;
}
#accueil h2			{ 
	-webkit-animation : anim_h2 1s forwards linear;
	   -moz-animation : anim_h2 1s forwards linear;
	     -o-animation : anim_h2 1s forwards linear;
	        animation : anim_h2 1s forwards linear;
} 
#accueil nav		{ 
	-webkit-animation : anim_h2 1s forwards linear;
	   -moz-animation : anim_h2 1s forwards linear;
	     -o-animation : anim_h2 1s forwards linear;
	        animation : anim_h2 1s forwards linear;
}

#creation img{
	-webkit-animation : anim_h2 1.2s 1 forwards ease;
	   -moz-animation : anim_h2 1.2s 1 forwards ease;
	     -o-animation : anim_h2 1.2s 1 forwards ease;
	        animation : anim_h2 1.2s 1 forwards ease;
}
#creation img {opacity:0;}
#creation img		{ animation-delay: 0.1s;}
#h1_2				{ animation-delay: 0.2s;}
#h1_3				{ animation-delay: 0.4s;}
#h1_4				{ animation-delay: 0.6s;}
#h1_5				{ animation-delay: 0.8s;}
#h1_6 				{ animation-delay: 1s;}
#h1_10				{ animation-delay: 1.4s;}
#accueil h2 		{ animation-delay: 2.5s;}
#accueil nav 		{ animation-delay: 3.5s;}

@keyframes anim_h1 {
    0% 				{ transform: translateY(-100vh); opacity: 0; }
    85% 			{ transform: translateY(20px); }
    90% 			{ transform: translateY(-10px); } 
	95% 			{ transform: translateY(10px); }
    100% 			{ transform: translateY(0px); opacity: 1; }
}
@keyframes anim_h2{
    0% 				{ opacity: 0; }
	100%			{ opacity: 1; }
}


header input[type=checkbox]:checked ~ nav{
	animation : anim_nav 0.9s forwards linear;
}
@keyframes anim_nav {
	0% {margin-top:-100vh;}
	100%{margin-top:0;}
}
header input[type=checkbox] ~ nav ul{
	animation : anim_nav_cache 0.5s forwards linear;
}

/*****************/
/* Media queries */
/*****************/
@media screen and (max-width: 910px) {

}
/***************/
/* Modifiables */
/***************/
#vignettes figcaption { background-color: #FFFFFF;}
#vignettes figure { border-color: #FFFFFF;}

#accueil 		{ background: url('/img/bg/bg_accueil.jpg') no-repeat center fixed; background-size:cover;}
#oeuvres 		{ background: url('/img/bg/bg_oeuvres.jpg') no-repeat center fixed; background-size:cover;}
#presentation	{ background: url('/img/bg/bg_presentation.jpg') no-repeat center fixed; background-size:cover;}
#news			{ background: url('/img/bg/bg_news.jpg') no-repeat center fixed; background-size:cover;}
#medias			{ background: url('/img/bg/bg_medias.jpg') no-repeat center fixed; background-size:cover;}
#contact		{ background: url('/img/bg/bg_contact.jpg') no-repeat center fixed; background-size:cover;}




#inspiration_spirit {background: url('/img/bg/inspiration_spirit.jpg') no-repeat center fixed; background-size:cover;}