html 
{ 
	height:100%;
	min-width: 1100px;
  	margin:0;
  	padding:0;
  	background: url("./images/monet.jpg") no-repeat center fixed; 
  	-webkit-background-size: cover; /* pour Chrome et Safari */
  	-moz-background-size: cover; /* pour Firefox */
	-o-background-size: cover; /* pour Opera */
	background-size: cover; /* version standardisée */
}
body
{
	height:100%;
	margin:0;
	background-color: white;
	-webkit-animation:introduction-body 15s;
	-webkit-animation-delay: 2s;
	-webkit-animation-fill-mode: forwards;
	animation:introduction-body 15s;
	animation-fill-mode: forwards;
	animation-delay: 2s;
}
#logo
{
	display:inline-block;
	background-color: white;
	width:100%;
	height:244px;
	-webkit-animation:introduction-div 12s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 2s;
	animation:introduction-div 12s;
	animation-fill-mode: forwards;
	animation-delay: 2s;
}

#logo img
{
	display:block;
	position:relative;
	top:0px;
	margin : auto;
	height : 244px;
	-webkit-animation:introduction-img 12s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 2s;
	animation:introduction-img 12s;
	animation-fill-mode: forwards;
	animation-delay: 2s;
}

#coupure
{
	opacity:0;
	position: absolute;
	top: -12px;
	left: 420px;
	-webkit-animation-name: introduction-coupure;
	-webkit-animation-duration: 12s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 2s;
	animation-name: introduction-coupure;
	animation-duration: 12s;
	animation-fill-mode: forwards;
	animation-delay: 2s;
}
#plis_droit
{
	z-index:5;
	position:absolute;
	top:0px;
	right:10%;
	background-image: url("./images/plis_droit.png");
	width:80px;
	height:80px;
	opacity:0;
	-webkit-animation-name: introduction-plis;
	-webkit-animation-delay: 15s;
	-webkit-animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-name: introduction-plis;
	animation-delay: 15s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
#ruban_droite
{
	z-index:1;
	position:absolute;
	top:18px;
	right:0px;
	width:0px;
	height:62px;
	background-color: rgba(56, 56, 56, 0);
	-webkit-animation-name: introduction-ruban_bords;
	-webkit-animation-delay: 14s;
	-webkit-animation-duration: 2s;
	-webkit-animation-fill-mode: forwards;
	animation-name: introduction-ruban_bords;
	animation-delay: 14s;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}
#plis_gauche
{
	z-index:4;
	position:absolute;
	top:0px;
	left:10%;
	background-image: url("./images/plis_gauche.png");
	width:80px;
	height:80px;
	opacity:0;
	-webkit-animation-name: introduction-plis;
	-webkit-animation-delay: 15s;
	-webkit-animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-name: introduction-plis;
	animation-delay: 15s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
#ruban_gauche
{
	z-index:2;
	position:absolute;
	top:18px;
	left:0px;
	width:0px;
	height:62px;
	background-color: rgba(56, 56, 56, 0);
	-webkit-animation-name: introduction-ruban_bords;
	-webkit-animation-delay: 14s;
	-webkit-animation-duration: 2s;
	-webkit-animation-fill-mode: forwards;
	animation-name: introduction-ruban_bords;
	animation-delay: 14s;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}
#ruban_centre
{
	min-width:700px;
	display:inline-block;
	z-index:3;
	position: relative;
	top:0px;
	height:62px;
	width:700px;
	-webkit-animation-name: introduction-ruban_centre;
	-webkit-animation-delay: 14s;
	-webkit-animation-duration: 2s;
	-webkit-animation-fill-mode: forwards;
	animation-name: introduction-ruban_centre;
	animation-delay: 14s;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

#texte
{
	display:block;
	width:600px;
	margin:auto;
	margin-top:12px;
	opacity:0;
	-webkit-animation-name: introduction-texte;
	-webkit-animation-duration: 12s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 2s;
	animation-name: introduction-texte;
	animation-duration: 12s;
	animation-fill-mode: forwards;
	animation-delay: 2s;
}
#div_texte
{
	opacity:0;
	min-width: 760px;
	width:760px;
	text-align: center;
	position: absolute;
	top : 320px;
	left : 520px;
	-webkit-animation-name: introduction-div-texte;
	-webkit-animation-duration: 12s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 2s;
	animation-name: introduction-div-texte;
	animation-duration: 12s;
	animation-fill-mode: forwards;
	animation-delay: 2s;
}

#bande
{
	min-width : 1200px;
	height:244px;
	background-color:white;
	-webkit-animation:introduction-bande 12s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 2s;
	animation:introduction-bande 12s;
	animation-fill-mode: forwards;
	animation-delay: 2s;
}
.noir
{
	height : 250px;
	background-color : white;
	-webkit-animation:introduction-noir 12s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 2s;
	animation:introduction-noir 12s;
	animation-fill-mode: forwards;
	animation-delay: 2s;
}

#triangle-bottomright 
{
	position: absolute;
	top: 250px;
	left: 382px;
	width: 0;
    height: 0;
    border-bottom: 244px solid white; 
    border-left: 68px solid transparent;
    opacity:0;
    -webkit-animation:introduction-triangle 12s;
    -webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 2s;
	animation:introduction-triangle 12s;
    animation-fill-mode: forwards;
	animation-delay: 2s;
}

#blanc
{
	display:inline-block;
	background-color:white;
	height : 244px;
	width:0px;
	-webkit-animation:introduction-blanc 12s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 2s;
	animation:introduction-blanc 12s;
	animation-fill-mode: forwards;
	animation-delay: 2s;
}

#cache
{
	display:inline-block;
	background-color:black;
	height : 244px;
	width:0px;
	position:absolute;
	left: 600px;
	-webkit-animation:introduction-cache 12s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 2s;
	animation:introduction-cache 12s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	animation-delay: 2s;
}
section
{
	opacity:0;
	-webkit-animation-name: section;
	-webkit-animation-delay: 15s;
	-webkit-animation-duration: 2s;
	-webkit-animation-fill-mode: forwards;
	animation-name: section;
	animation-delay: 15s;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	margin-bottom: 10px;
}
section h1
{
	text-align: center;
	font-size : 60px;
	font-family: Georgia, "Arial Black", Arial, Verdana, sans-serif;
}
header
{
	height: 0px;
	-webkit-animation-name: header;
	-webkit-animation-delay: 14s;
	-webkit-animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-name: header;
	animation-delay: 14s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
footer
{
	margin-top:10px;
	padding-bottom:10px;
	opacity:0;
	-webkit-animation-name: section;
	-webkit-animation-delay: 16s;
	-webkit-animation-duration: 2s;
	-webkit-animation-fill-mode: forwards;
	animation-name: section;
	animation-delay: 16s;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}
footer h2, section h2
{
	text-align: center;
	font-size : 30px;
	font-family: Georgia, "Arial Black", Arial, Verdana, sans-serif;
}
h2 a, p a
{
    color:#990028;
}
#animation, #langue
{
	display:inline-block;
	margin:0;
	padding:0;
	position:absolute;
	top:0px;
	opacity:0;
	-webkit-animation-name: section;
	-webkit-animation-delay: 16s;
	-webkit-animation-duration: 2s;
	-webkit-animation-fill-mode: forwards;
	animation-name: section;
	animation-delay: 16s;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}
#langue
{
	right:0px;
}
#animation
{
	left:0px;
}
#langue p, #animation p
{
	margin:0;
	margin-left:2px;
	margin-right:2px;
	padding:0;
}
#animation a, #langue a
{
	color : #4c4c4c;
}