body { 
	margin:0;
	background-color:grey;
 }
#conteneur {
	background-image:url(../img/fond.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	background-size: cover; 
/*	width:1680px;*/
	height:1050px;
	position:relative;
	margin:0px;
	overflow: hidden;
}

#masque_haut {
	background-image:url(../img/masque_haut.png);
	background-repeat: repeat-x;
	width:100%;
	height:391px;
	position:absolute;
	top:0px;
/*	animation:anim_masque 1s backwards;*/
}
@-webkit-keyframes anim_masque {
	0% { transform:translateY(-400px); -webkit-transform:translateY(-400px); animation-timing-function: ease; -webkit-animation-timing-function: ease; }
	90% { transform:translateY(5px); -webkit-transform:translateY(5px); animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; }
	100% { transform:translateY(0); -webkit-transform:translateY(0); animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; }
}
@keyframes anim_masque {
	0% { transform:translateY(-400px); animation-timing-function: ease; }
	90% { transform:translateY(5px); animation-timing-function: ease-out; }
	100% { transform:translateY(0); animation-timing-function: ease-out; }
}

#nav_langue {
	width:122px;
	height:42px;
	padding-top:12px;
	padding-left:18px;
	position:absolute;
	left:813px;
	top:383px;
	background-image:url(../img/fond_langue.png);
/*	animation:anim_nav_langue 1s 1s backwards;*/
}
@-webkit-keyframes anim_nav_langue {
	0% { transform:translateY(-54px); -webkit-transform:translateY(-54px); opacity:0; }
	100% { transform:translateY(0px); -webkit-transform:translateY(0px); opacity:1; }
}
@keyframes anim_nav_langue {
	0% { transform:translateY(-54px); opacity:0; }
	100% { transform:translateY(0px); opacity:1; }
}

#nav_de {
	width:34px;
	height:28px;
	display:block;
	float:left;
	background-image:url(../img/btn_de.png);
	-webkit-transition:margin-top 0.2s;
	transition:margin-top 0.2s;
}
#nav_de:hover {
	background-image:url(../img/btn_de_hover.png);
	margin-top:2px;
}

#nav_en {
	width:34px;
	height:27px;
	display:block;
	float:left;
	background-image:url(../img/btn_en.png);
	-webkit-transition:margin-top 0.2s;
	transition:margin-top 0.2s;
}
#nav_en:hover {
	background-image:url(../img/btn_en_hover.png);
	margin-top:2px;
}

#nav_fr {
	width:34px;
	height:27px;
	display:block;
	float:left;
	background-image:url(../img/btn_fr.png);
	-webkit-transition:margin-top 0.2s;
	transition:margin-top 0.2s;
}
#nav_fr:hover {
	background-image:url(../img/btn_fr_hover.png);
	margin-top:2px;
}
#nav_langue a.selected { cursor:pointer; opacity:0.25; }

#photo_1 {
	position: absolute;
	border:5px solid white;
	box-shadow:2px 2px 10px black;
	/* Position finale */
	left:74px;
	top:412px;
	-webkit-animation:anim_photo1 1.3s 0s ease-out backwards;
	animation:anim_photo1 1.3s 0s ease-out backwards;
}
@-webkit-keyframes anim_photo1 {
    0%   {left:-500px; top:392px; transform:rotate(-40deg); -webkit-transform:rotate(-40deg); animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; }
    50%  {left:72px; top:452px; transform:rotate(-20deg); -webkit-transform:rotate(-20deg); animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; }
    80%  {left:154px; top:412px; transform:rotate(10deg); -webkit-transform:rotate(10deg); animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; }
    /*75%  {left:px; top:210px; transform:rotate(-5deg);}*/
    100% {left:135px; top:370px; transform:rotate(0deg); -webkit-transform:rotate(0deg); animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; }
}
@keyframes anim_photo1 {
    0%   {left:-500px; top:392px; transform:rotate(-40deg); animation-timing-function: ease-in;}
    50%  {left:72px; top:452px; transform:rotate(-20deg); animation-timing-function: ease-out;}
    80%  {left:154px; top:412px; transform:rotate(10deg); animation-timing-function: ease-in;}
    /*75%  {left:px; top:210px; transform:rotate(-5deg);}*/
    100% {left:74px; top:412px; transform:rotate(0deg); animation-timing-function: ease-out;}
}

#logo {
	position:absolute;
	/* position finale */
	left:18px;
	top:734px;
/*	animation:anim_logo 0.6s ease-out;*/
}
@-webkit-keyframes anim_logo {
    0%   {left:18px; top:1050px;}
    75%  {left:18px; top:712px;}
    100%  {left:18px; top:734px;}
}
@keyframes anim_logo {
    0%   {left:18px; top:1050px;}
    75%  {left:18px; top:712px;}
    100%  {left:18px; top:734px;}
}

#cadreA {
	width:1158px;
	height:211px;
	background-color:black;
	opacity:0.2;
	position:absolute;
	top:748px;
	left:176px;
	border:2px outset white;
/*	animation:anim_cadreA 0.5s 0.5s backwards;*/
}
@-webkit-keyframes anim_cadreA {
	0% {opacity:0;}
	100% {opacity:0.2;}
}
@keyframes anim_cadreA {
	0% {opacity:0;}
	100% {opacity:0.2;}
}

#picto {
	position:absolute;
	left:32px;
	top:802px;
/*	animation:anim_picto 2s;*/
}
@-webkit-keyframes anim_picto {
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes anim_picto {
	0% {opacity:0;}
	100% {opacity:1;}
}

#rect1 {
	width:40px;
	height:40px;
	position:absolute;
	top:398px;
	left:390px;
	background-color:white;
	box-shadow: 1px 1px 5px black;
	-webkit-animation:anim_rect1 1s 1.8s backwards;
	animation:anim_rect1 1s 1.8s backwards;
}
@-webkit-keyframes anim_rect1 {
	0% {opacity:0; transform:scale(0.25); -webkit-transform:scale(0.25); }
	80% {opacity:0.9; transform:scale(1.25); -webkit-transform:scale(1.25); }
	100% {opacity:1; transform:scale(1); -webkit-transform:scale(1); }
}
@keyframes anim_rect1 {
	0% {opacity:0; transform:scale(0.25);}
	80% {opacity:0.9; transform:scale(1.25);}
	100% {opacity:1; transform:scale(1);}
}

#rect2 {
	width:35px;
	height:35px;
	position:absolute;
	top:682px;
	left:352px;
	background-color:white;
	box-shadow: 1px 1px 5px black;
	-webkit-animation:anim_rect1 1s 1.9s backwards;
	animation:anim_rect1 1s 1.9s backwards;
}
@-webkit-keyframes anim_rect2 {
	0% {opacity:0; transform:scale(0.25); -webkit-transform:scale(0.25); }
	80% {opacity:1; transform:scale(1.25); -webkit-transform:scale(1.25); }
	100% {opacity:0.5; transform:scale(1); -webkit-transform:scale(1); animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; }
}
@keyframes anim_rect2 {
	0% {opacity:0; transform:scale(0.25);}
	80% {opacity:1; transform:scale(1.25);}
	100% {opacity:0.5; transform:scale(1); animation-timing-function: ease-out;}
}

#rect3 {
	width:30px;
	height:30px;
	position:absolute;
	top:407px;
	left:437px;
	background-color:white;
	box-shadow: 1px 1px 5px black;
	opacity:0.6;
	-webkit-animation:anim_rect2 1s 2s backwards;
	animation:anim_rect2 1s 2s backwards;
}

#rect4 {
	width:40px;
	height:40px;
	position:absolute;
	top:398px;
	left:956px;
	background-color:white;
	box-shadow: 1px 1px 5px black;
	opacity:0.6;
	-webkit-animation:anim_rect2 1s 2.1s backwards;
	animation:anim_rect2 1s 2.1s backwards;
}

#rect5 {
	width:60px;
	height:60px;
	position:absolute;
	top:686px;
	left:1019px;
	background-color:white;
	box-shadow: 1px 1px 5px black;
	opacity:0.6;
	-webkit-animation:anim_rect2 1s 4.8s backwards;
	animation:anim_rect2 1s 4.8s backwards;
}

#rect6 {
	width:35px;
	height:35px;
	position:absolute;
	top:462px;
	left:1025px;
	background-color:white;
	box-shadow: 1px 1px 5px black;
	opacity:0.6;
	-webkit-animation:anim_rect2 1s 2.2s backwards;
	animation:anim_rect2 1s 2.2s backwards;
}

#rect7 {
	width:60px;
	height:60px;
	position:absolute;
	top:519px;
	left:1018px;
	background-color:white;
	box-shadow: 1px 1px 5px black;
	opacity:0.6;
	-webkit-animation:anim_rect2 1s 2.3s backwards;
	animation:anim_rect2 1s 2.3s backwards;
}

#rect8 {
	width:17px;
	height:17px;
	position:absolute;
	top:275px;
	left:1103px;
	background-color:white;
	box-shadow: 1px 1px 5px black;
	-webkit-animation:anim_rect1 1s 2.4s backwards;
	animation:anim_rect1 1s 2.4s backwards;
}

#cadreMenu {
	width:154px;
	height:280px;
	position:absolute;
	background-color:black;
	opacity:0.4;
	border:2px outset black;
	border-radius:4px;
	box-shadow:2px 2px 10px black;
	left:188px;
	top:740px;
	/*animation:anim_cadre_menu 0.5s 0.8s backwards;*/
}
@-webkit-keyframes anim_cadre_menu {
	0% { opacity:0; transform:translateY(10px); -webkit-transform:translateY(10px); }
	100% { opacity:0.4; transform:translateY(0px); -webkit-transform:translateY(0px); }
}
@keyframes anim_cadre_menu {
	0% { opacity:0; transform:translateY(10px); }
	100% { opacity:0.4; transform:translateY(0px); }
}

#menu {
	width:154px;
	height:280px;
	position:absolute;
	left:188px;
	top:745px;
/*	animation:anim_menu 0.5s 0.8s backwards;*/
}
@-webkit-keyframes anim_menu {
	0% { opacity:0; transform:translateY(10px); -webkit-transform:translateY(10px); }
	100% { opacity:1; transform:translateY(0px); -webkit-transform:translateY(0px); }
}
@keyframes anim_menu {
	0% { opacity:0; transform:translateY(10px); }
	100% { opacity:1; transform:translateY(0px); }
}
#menu nav { padding:10px; margin:0px; }
#menu li { list-style-type:none; position:relative; margin-top:15px; }
#menu a, #menu a:visited { 
	color:white;
	text-shadow:2px 2px 10px black;
	text-decoration:none; 
	font-family: "Myriad Pro", Sans-serif;
	font-size:12px;
	letter-spacing:1px;
	display:block;
	position:relative;
	width:100%;
	z-index:10;
}
#menu a:hover {
	text-shadow:-1px 0 5px rgba(0, 204, 205, 0.5),  /* bordure */
             	1px 0 5px rgba(0, 204, 205, 0.5),
             	0 -1px 5px rgba(0, 204, 205, 0.5),
             	0 1px 5px rgba(0, 204, 205, 0.5),
             	0px 0px 5px #00CCFF;		/* lueur */
}

#menu a.selected {
	background-image:url(../img/barre_ici.png);
	background-repeat:no-repeat;
	background-position: right;
	text-shadow:-1px 0 3px rgba(0, 204, 205, 0.5),  /* bordure */
             	1px 0 3px rgba(0, 204, 205, 0.5),
             	0 -1px 3px rgba(0, 204, 205, 0.5),
             	0 1px 3px rgba(0, 204, 205, 0.5),
             	0px 0px 5px #00CCFF;		/* lueur */
}

.masque {
	width:147px;
	height:11px;
	opacity:0;
	position:absolute;
	z-index:1;
	background-color: white;
	top:5px;
	left:-5px;
}
#masqueMenu1 {  }
#masqueMenu2 {  }
#masqueMenu3 {  }
#masqueMenu4 {  }
#masqueMenu5 {  }

/*
#menu a:hover ~ .masqueMenu {
	opacity: 1;
}
*/
#page {
	-webkit-animation:anim_page 1.2s 0.8s backwards;
	animation:anim_page 1.2s 0.8s backwards;
}
@-webkit-keyframes anim_page {
	from {transform:translateX(-50px) translateY(+600px); -webkit-transform:translateX(-50px) translateY(+600px); animation-timing-function: ease; -webkit-animation-timing-function: ease; }
	/*50% {transform:translateX(150px) translateY(+200px); }*/
	70% {transform:translateX(40px) translateY(-30px); -webkit-transform:translateX(40px) translateY(-30px); animation-timing-function: linear; -webkit-animation-timing-function: linear; }
	to {transform:translateX(0) translateY(0); -webkit-transform:translateX(0) translateY(0); animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; }
}
@keyframes anim_page {
	from {transform:translateX(-50px) translateY(+600px); animation-timing-function: ease;}
	/*50% {transform:translateX(150px) translateY(+200px); }*/
	70% {transform:translateX(40px) translateY(-30px); animation-timing-function: linear;}
	to {transform:translateX(0) translateY(0); animation-timing-function: ease-out;}
}

#tuv {
	position:absolute;
	top:910px;
	left:60px;
	-webkit-animation:anim_tuv 1.2s 1.5s backwards;
	animation:anim_tuv 1.2s 1.5s backwards;
}
@-webkit-keyframes anim_tuv {
	from {transform:translateY(+50px); -webkit-transform:translateY(+50px); opacity:0; animation-timing-function: ease; -webkit-animation-timing-function: ease; }
	to {transform:translateY(0); -webkit-transform:translateY(0); opacity:1; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; }
}
@keyframes anim_tuv {
	from {transform:translateY(+50px); opacity:0; animation-timing-function: ease;}
	to {transform:translateY(0); opacity:1; animation-timing-function: ease-out;}
}
#tuv img {
	width:68px;
	height:67px;
}

#zoom_tuv {
	position:absolute;
	top:-30px;
	left:-50px;
	/*display:none;*/
	z-index:100;

}
#zoom_tuv img { 
	width:266px; 
	height:inherit; 
	display:none; 
	box-shadow:4px 4px 4px black; 
	border-bottom-left-radius:13px;
}


#contenu {
	position:absolute;
	overflow:auto;
	width:552px;
	height:530px;
	background-color:white;
	box-shadow:2px 2px 10px black;
	top:445px;
	left:397px;
	font-size:12px;
	font-family: Arial, Sans-serif;
	padding:20px 30px;
}

#contenu h1 { 
	margin-top:10px;
	margin-bottom:5px;
	font-size:14px;
	text-shadow:1px 1px 1px grey;
}
#contenu p:first-child { margin-top:0px;}
#contenu ul { color:#00CCFF; }
#contenu li:first-line { color:black; }
strong { font-weight:bold; }

#contenuDE {
	position:absolute;
	overflow:auto;
	width:552px;
	height:550px;
	background-color:white;
	box-shadow:2px 2px 10px black;
	top:430px;
	left:397px;
	font-size:12px;
	font-family: Arial, Sans-serif;
	padding:20px 30px;
}

#contenuDE h1 { 
	margin-top:8px;
	margin-bottom:5px;
	font-size:14px;
	text-shadow:1px 1px 1px grey;
}
#contenuDE p:first-child { margin-top:0px;}
#contenuDE ul { color:#00CCFF; }
#contenuDE li:first-line { color:black; }
strong { font-weight:bold; }

#contenu_langue {
	position:absolute;
	width:612px;
	height:113px;
	background-color: white;
	box-shadow:2px 2px 10px black;
	top:897px;
	left:397px;
}

#btn_cgv {
	width:84px;
	height:34px;
	background-image:url(../img/bg_cgv.png);
	box-shadow:2px 2px 10px black;
	position:absolute;
	top:1028px;
	left:708px;
	opacity:1;
/*	animation:anim_cgv 2s 4s forwards;*/
}
@keyframes anim_cgv {
	0%   { top:1047px; animation-timing-function: ease; }
	80%  { top:1026px; opacity:1; animation-timing-function: ease; }
	100% { top:1028px; opacity:1; animation-timing-function: ease-out; }
}
#btn_cgv a, #btn_cgv a:visited {
	color:white;
	text-decoration: none;
	font-size:11px;
	text-shadow:2px 2px 10px black;
	display:block;
	text-align:center;
	width:78px;
	padding-top:7px;
	font-family:Arial, Sans-serif;
}
#btn_cgv a:hover { 
	text-shadow:-1px 0 5px rgba(0, 204, 205, 0.5),  /* bordure */
             	1px 0 5px rgba(0, 204, 205, 0.5),
             	0 -1px 5px rgba(0, 204, 205, 0.5),
             	0 1px 5px rgba(0, 204, 205, 0.5),
             	0px 0px 5px #00CCFF;		/* lueur */
}

#btn_ml {
	width:160px;
	height:34px;
	background-image:url(../img/bg_mentions_legales.png);
	box-shadow:2px 2px 10px black;
	position:absolute;
	top:1028px;
	left:808px;
	opacity:1;
/*	animation:anim_cgv 2s 4.2s forwards;*/
}

#btn_ml a, #btn_ml a:visited {
	color:white;
	text-decoration: none;
	font-size:11px;
	text-shadow:2px 2px 10px black;
	display:block;
	text-align:center;
	width:158px;
	padding-top:7px;
	font-family:Arial, Sans-serif;
}
#btn_ml a:hover { 
	text-shadow:-1px 0 5px rgba(0, 204, 205, 0.5),  /* bordure */
             	1px 0 5px rgba(0, 204, 205, 0.5),
             	0 -1px 5px rgba(0, 204, 205, 0.5),
             	0 1px 5px rgba(0, 204, 205, 0.5),
             	0px 0px 5px #00CCFF;		/* lueur */
}

#btn_envoi {
	width:130px;
	height:34px;
	background-image:url(../img/bg_envoi.png);
	box-shadow:2px 2px 10px black;
	position:absolute;
	top:1028px;
	left:568px;
	opacity:1;
/*	animation:anim_cgv 2s 4.2s forwards;*/
}
#btn_envoi a, #btn_envoi a:visited {
	color:white;
	text-decoration: none;
	font-size:11px;
	text-shadow:2px 2px 10px black;
	display:block;
	text-align:center;
	width:126px;
	padding-top:7px;
	font-family:Arial, Sans-serif;
}
#btn_envoi a:hover { 
	text-shadow:-1px 0 5px rgba(0, 204, 205, 0.5),  /* bordure */
             	1px 0 5px rgba(0, 204, 205, 0.5),
             	0 -1px 5px rgba(0, 204, 205, 0.5),
             	0 1px 5px rgba(0, 204, 205, 0.5),
             	0px 0px 5px #00CCFF;		/* lueur */
}