*{
	padding:0px;
	margin:0px;
	outline:none;
	}
body{
	background-color:#fff;
	font-family:arial;
	}
#page{
	width:650px;
	height:615px;
	margin:25px auto;
	border:4px double #ccc;
	position:relative;
	}
#haut_valentin{
	width:490px;
	height:160px;
	left:80px;
	top:20px;
	background-size:cover;
	background-image:url(../images/haut_valentin.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#milieu_valentin{
	width:490px;
	height:390px;
	left:80px;
	top:180px;
	background-size:cover;
	background-image:url(../images/milieu_valentin.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#bas_valentin{
	width:320px;
	height:60px;
	left:165px;
	top:582px;
	background-size:cover;
	background-image:url(../images/bas_valentin.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#haut_paques{
	width:490px;
	height:160px;
	left:80px;
	top:20px;
	background-size:cover;
	background-image:url(../images/haut_paques.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#milieu_paques{
	width:490px;
	height:390px;
	left:80px;
	top:180px;
	background-size:cover;
	background-image:url(../images/milieu_paques.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#bas_paques{
	width:320px;
	height:60px;
	left:165px;
	top:582px;
	background-size:cover;
	background-image:url(../images/bas_paques.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#haut_nino{
	width:490px;
	height:160px;
	left:80px;
	top:20px;
	background-size:cover;
	background-image:url(../images/haut_nino.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#milieu_nino{
	width:490px;
	height:390px;
	left:80px;
	top:180px;
	background-size:cover;
	background-image:url(../images/milieu_nino.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#bas_nino{
	width:320px;
	height:60px;
	left:165px;
	top:582px;
	background-size:cover;
	background-image:url(../images/bas_nino.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#haut_misterx{
	width:490px;
	height:160px;
	left:80px;
	top:20px;
	background-size:cover;
	background-image:url(../images/haut_misterx.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#milieu_misterx{
	width:600px;
	height:405px;
	left:25px;
	top:180px;
	background-size:cover;
	background-image:url(../images/milieu_misterx.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#bas_misterx{
	width:420px;
	height:75px;
	left:115px;
	top:585px;
	background-size:cover;
	background-image:url(../images/bas_misterx.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#haut_inquisiteur{
	width:600px;
	height:180px;
	left:25px;
	top:0px;
	background-size:cover;
	background-image:url(../images/haut_inquisiteur.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#milieu_inquisiteur{
	width:600px;
	height:390px;
	left:25px;
	top:180px;
	background-size:cover;
	background-image:url(../images/milieu_inquisiteur.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#bas_inquisiteur{
	width:420px;
	height:90px;
	left:115px;
	top:570px;
	background-size:cover;
	background-image:url(../images/bas_inquisiteur.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#haut_vaderetro{
	width:650px;
	height:180px;
	left:0px;
	top:0px;
	background-size:cover;
	background-image:url(../images/haut_vaderetro.png);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#milieu_vaderetro{
	width:710px;
	height:435px;
	left:-30px;
	top:180px;
	background-size:cover;
	background-image:url(../images/milieu_vaderetro.png);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#bas_vaderetro{
	width:320px;
	height:45px;
	left:165px;
	top:615px;
	background-size:cover;
	background-image:url(../images/bas_vaderetro.png);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#haut_pressbouc{
	width:330px;
	height:160px;
	left:160px;
	top:20px;
	background-size:cover;
	background-image:url(../images/haut_pressbouc.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#milieu_pressbouc{
	width:330px;
	height:60px;
	left:160px;
	top:180px;
	background-size:cover;
	background-image:url(../images/milieu_pressbouc.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	z-index:2;
	}
#copyright{
	position:absolute;
	right:20px;
	bottom:8px;
	z-index:3;
	}
#copyright a{
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#3F3F3F;
	}
#liens{
	padding-top:250px;
	text-align:center;
	line-height:1.5;
	}
#liens a{
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#3F3F3F;
	}
#liens a:hover{
	color:#F00;
	}
#nav{
	width:500px;
	height:30px;
	margin:0px auto;
	padding-top:15px;
	}
#nav ul{
	list-style:none;
	text-align:center;
	}
#nav li{
	margin:0px auto;
	display:inline;
	border-left:1px solid #000;
	}
#nav li a{
	text-decoration:none;
	font-size:13px;
	color:#000;
	line-height:22px;
	margin:0px 5px 0px 10px;
	}
#nav li a:hover, #nav li a.navOn{
	color:#999;
	}
#nav #start{
	border-left:1px solid #fff;
	}
	
#options{
position:relative
	}

button {
  font-size:11px;
  -webkit-appearance: push-button;
	color:#666;
	padding:5px;
}
#rotate{
	position:absolute;
	bottom:-10px;
	left:220px;
}

#flip{
	position:absolute;
	bottom:-10px;
	left:330px;
}

figure {
  margin: 0;
}
.container {
      width: 354px;
      height: 500px;
      position: relative;
      margin: 40px auto 40px;
      -webkit-perspective: 800px;
         -moz-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
    }

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
	 -moz-transition: -moz-transform 1s;
	   -o-transition: -o-transform 1s;
		  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
	 -moz-transform-style: preserve-3d;
	   -o-transform-style: preserve-3d;
		  transform-style: preserve-3d;
}

#card.flipped {
  -webkit-transform: rotateY( 180deg );
	 -moz-transform: rotateY( 180deg );
	   -o-transform: rotateY( 180deg );
		  transform: rotateY( 180deg );
}

#card figure {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
	 -moz-backface-visibility: hidden;
	   -o-backface-visibility: hidden;
		  backface-visibility: hidden;
}

#card .front {
background-image:url(../images/CarteVoeuxRecto.svg);
background-position:center center;
background-repeat:no-repeat;
}

#card .back {
background-image:url(../images/CarteVoeuxVerso.svg);
background-position:center center;
background-repeat:no-repeat;
  -webkit-transform: rotateY( 180deg );
	 -moz-transform: rotateY( 180deg );
	   -o-transform: rotateY( 180deg );
		  transform: rotateY( 180deg );
}
