/* CSS Document */
#cf {
  position:relative;
  height:256px;
  width:256px;
  margin:0 auto;
}
#carte {
  height:425px;
  width:600px; 
  position:absolute;
  left:0;
  top:0;
  background-color:#4b4b4d;
}
#c {
  height:44px;
  width:39px; 
  position:absolute;
  left:25px;
  top:40%;
  background-image:url(c.png);    
  animation: anim3 1.5s linear forwards 1.5s;
}
#ca {
  height:17px;
  width:243px; 
  position:absolute;
  left:160px;
  top:53%;
  background-image:url(ca.png);    
  animation: anim2 1.5s linear forwards 1.8s;
}
.cbis {
  animation: anim3 2s linear forwards 3s;
}


@keyframes anim {
   0%  {opacity:0;}
   100% {opacity:1;}
}
@keyframes anim2 {
   0%  {opacity:1;}
   100% {opacity:0;}
}
@keyframes anim3 {
0%  {opacity:1;}
   100% {height:0px;
  width:0px; opacity:0;}
}
@keyframes anim4 {
0%  {opacity:0;transform: rotate(720deg);}
   100% {opacity:1;}
}
@keyframes anim5 {
0%  {opacity:1;transform: rotate(360deg);}
   100% {opacity:0;}
}
@keyframes anim6 {
0%  {opacity:0;transform: rotate(360deg);}
   100% {opacity:1;}
}
@keyframes neige {
0%  {opacity:1;}
   100% {opacity:1;top:0px;}
}
@keyframes animlogo {
0%  {left:210px;}
   100% {left:5px;}
}
@keyframes animpuce {
0%  {}
   100% {transform: rotate(90deg);left:163px;
  top:88%;}
}
@keyframes animpuce2 {
0%  {}
   100% { height:268px;
   left:230px;
  width:350px;
  top:2%;}
}
@keyframes photo2 {
0%  {}
   100% {transform: scale(0.5);
  left:-120px;
  top:33%;}
}
#photo {
  opacity : 0;
  height:300px;
  width:554px; 
  position:absolute;
  left:20px;
  top:15%;
  background-image:url(photo.png); 
  animation-delay: 7s,15s;
  animation-duration: 1.5s, 0.5s;
  animation-name: anim,photo2; 
  animation-fill-mode: forwards,forwards;
  animation-timing-function: linear,linear;
  z-index:3;
}
#texte2 {
  opacity : 0;
  height:151px;
  width:325px; 
  position:absolute;
  left:250px;
  top:10%;
  background-image:url(texte2.png); 
  animation-delay: 15.8s;
  animation-duration: 1s;
  animation-name: anim; 
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  z-index:6;
}
#pucevanim {
  opacity : 0;
  height:22px;
  width:16px; 
  position:absolute;
  left:150px;
  top:86.5%;
  background-image:url(pucevanim.png); 
  animation-delay: 13.5s, 13.6s, 14.7s;
  animation-duration: 0.1s, 0.8s, 0.1s;
  animation-name: anim, animpuce, anim2;  
  animation-fill-mode: forwards,forwards;
  animation-timing-function: linear,linear;
  z-index:6;
}
#pucevanim2 {
  opacity : 0;
  height:5px;
  width:5px; 
  position:absolute;
  left:163px;
  top:88%;
  background-image:url(bulle.png); 
  animation-delay: 15s, 15s;
  animation-duration: 0.1s, 1s;
  animation-name: anim, animpuce2; 
  animation-fill-mode: forwards,forwards;
  animation-timing-function: linear,linear;
  z-index:5;
}
#pucecache {
  opacity : 0;
  height:22px;
  width:16px; 
  position:absolute;
  left:150px;
  top:86.5%;
  background-image:url(pucecache.png); 
  animation-delay: 13.6s,17s;
  animation-duration: 0.1s,0.5s;
  animation-name: anim, anim2; 
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  z-index:4;
}

#e { 
  height:43px;
  width:32px; 
  position:absolute;
  left:69px;
  top:40%;
  background-image:url(e.png);    
  animation: anim3 1.5s linear forwards 1.1s;
}
#flocons9{
opacity:0;
  height:800px;
  width:600px; 
  position:absolute;
  left:0px;     top:0px;
  background-image:url(flocons3.png);  
  animation-delay: 6s;
  animation-duration: 5.6s ;
  animation-name: anim ;
  z-index:10;
}
#flocons10{
opacity:0;
  height:800px;
  width:600px; 
  position:absolute;
  left:-100px;     top:0px;
  background-image:url(flocons3.png);  
  animation-delay: 6s;
  animation-duration: 5.5s ;
  animation-name: anim ;
  z-index:10;
}
#flocons11{
opacity:0;
  height:800px;
  width:600px; 
  position:absolute;
  left:-50px;     top:0px;
  background-image:url(flocons3.png);  
  animation-delay: 6s ;
  animation-duration: 5.4s ;
  animation-name: anim ;
  z-index:10;
}
#flocons18{
opacity:0;
  height:800px;
  width:600px; 
  position:absolute;
  left:0px;     top:0px;
  background-image:url(flocons3.png);  
  animation-delay: 6s;
  animation-duration: 5.6s ;
  animation-name: anim ;
  z-index:10;
}
#flocons19{
opacity:0;
  height:800px;
  width:600px; 
  position:absolute;
  left:50px;     top:0px;
  background-image:url(flocons3.png);  
  animation-delay: 6s;
  animation-duration: 5.5s ;
  animation-name: anim ;
  z-index:10;
}
#flocons20{
opacity:0;
  height:800px;
  width:600px; 
  position:absolute;
  left:100px;     top:0px;
  background-image:url(flocons3.png);  
  animation-delay: 6s ;
  animation-duration: 5.4s ;
  animation-name: anim ;
  z-index:10;
}
#flocons21{
opacity:0;
  height:800px;
  width:600px; 
  position:absolute;
  left:200px;     top:0px;
  background-image:url(flocons3.png);  
  animation-delay: 6s;
  animation-duration: 5.6s ;
  animation-name: anim ;
  z-index:10;
}
#flocons22{
opacity:0;
  height:800px;
  width:600px; 
  position:absolute;
  left:250px;     top:0px;
  background-image:url(flocons3.png);  
  animation-delay: 6s;
  animation-duration: 5.5s ;
  animation-name: anim ;
  z-index:10;
}
#flocons23{
opacity:0;
  height:800px;
  width:600px; 
  position:absolute;
  left:300px;     top:0px;
  background-image:url(flocons3.png);  
  animation-delay: 6s ;
  animation-duration: 5.4s ;
  animation-name: anim ;
  z-index:10;
}
#flocons1 {
  height:800px;
  width:600px; 
  position:absolute;
  left:0px;     top:-800px;
  background-image:url(flocons1.png);
  animation-delay: 3.5s, 4.3s;
  animation-duration: 7s, 0.1s;
  animation-name: neige, anim2; 
  z-index:10;
}
#flocons2 {
  height:800px;
  width:600px; 
  position:absolute;
  left:100px;   top:-800px;
  background-image:url(flocons1.png);
  animation-delay: 3.6s, 4.3s;
  animation-duration: 7s, 0.1s;
  animation-name: neige, anim2; 
  z-index:10;
}
#flocons3 {
  height:800px;
  width:600px;  top:-800px;
  position:absolute;
  left:50px;
  background-image:url(flocons1.png);
  animation-delay: 3.7s, 4.3s;
  animation-duration: 7s, 0.1s;
  animation-name: neige, anim2; 
  z-index:10;
}
#flocons4 {
  height:800px;
  width:600px;  top:-800px;
  position:absolute;
  left:150px;
  background-image:url(flocons1.png);
  animation-delay: 3.8s, 4.3s;
  animation-duration: 7s, 0.1s;
  animation-name: neige, anim2; 
  z-index:10;
}
#flocons5 {
  height:800px;
  width:600px; 
  position:absolute;
  left:0px;     top:-800px;
  background-image:url(flocons2.png);
  animation-delay: 3.9s, 4.3s;
  animation-duration: 7s, 0.1s;
  animation-name: neige, anim2; 
  z-index:10;
}
#flocons6 {
  height:800px;
  width:600px; 
  position:absolute;
  left:100px;   top:-800px;
  background-image:url(flocons2.png);
  animation-delay: 4s, 4.3s;
  animation-duration: 7s, 0.1s;
  animation-name: neige, anim2; 
  z-index:10;
}
#flocons7 {
  height:800px;
  width:600px;  top:-800px;
  position:absolute;
  left:50px;
  background-image:url(flocons2.png);
  animation-delay: 4.1s, 4.3s;
  animation-duration: 7s, 0.1s;
  animation-name: neige, anim2;  
  z-index:10;
}
#flocons8 {
  height:800px;
  width:600px;  top:-800px;
  position:absolute;
  left:150px;
  background-image:url(flocons2.png);
  animation-delay: 4.2s, 4.3s;
  animation-duration: 7s, 0.1s;
  animation-name: neige, anim2; 
  z-index:10;
}
#flocons12 {
  height:800px;
  width:600px; 
  position:absolute;
  left:-50px;   top:-800px;
  background-image:url(flocons1.png);
  animation-delay: 3.5s, 4.3s;
  animation-duration: 7s, 0.1s;
  animation-name: neige, anim2;   
  z-index:10;
}
#flocons13 {
  height:800px;
  width:600px;  top:-800px;
  position:absolute;
  left:-100px;
  background-image:url(flocons1.png);
  animation-delay: 3.6s, 4.3s;
  animation-duration: 7s, 0.1s;
  animation-name: neige, anim2;   
  z-index:10;
}
#flocons14 {
  height:800px;
  width:600px;  top:-800px;
  position:absolute;
  left:-1500px;
  background-image:url(flocons1.png);
  animation-delay: 3.7s, 4.3s;
  animation-duration: 7s, 0.1s;
  animation-name: neige, anim2; 
  z-index:10;
}
#flocons15 {
  height:800px;
  width:600px; 
  position:absolute;
  left:-200px;   top:-800px;
  background-image:url(flocons1.png);
  animation-delay: 3.8s, 4.3s;
  animation-duration: 7s, 0.1s;
  animation-name: neige, anim2;   
  z-index:10;
}
#flocons16 {
  height:800px;
  width:600px;  top:-800px;
  position:absolute;
  left:-250px;
  background-image:url(flocons1.png);
  animation-delay: 3.9s, 4.3s;
  animation-duration: 7s, 0.1s;
  animation-name: neige, anim2;  
  z-index:10;
}
#flocons17 {
  height:800px;
  width:600px;  top:-800px;
  position:absolute;
  left:-300px;
  background-image:url(flocons1.png);
  animation-delay: 4s, 4.3s;
  animation-duration: 7s, 0.1s;
  animation-name: neige, anim2; 
  z-index:10;
}

#floconb45 {  opacity:0;
  height:45px;
  width:44px; 
  position:absolute;
  left:25px;
  top:40%;
  background-image:url(flocon_blanc45.png);
  animation: anim4 1.5s linear forwards 1.1s;
  z-index:2;
}

#logo {
  opacity : 0;
  height:63px;
  width:187px; 
  position:absolute;
  left:210px;
  top:80%;
  background-image:url(logo2.png); 
  animation-delay: 7s, 11.6s;
  animation-duration: 1.5s,1.5s;
  animation-name: anim, animlogo; 
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  z-index:3;
}

#texte {
  opacity : 0;
  height:82px;
  width:371px; 
  position:absolute;
  left:200px;
  top:2%;
  background-image:url(texte.png); 
  animation-delay: 7s,15s;
  animation-duration: 1.5s,0.5s;
  animation-name: anim, anim2;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  z-index:3;
}
#annee {
  opacity : 0;
  height:109px;
  width:150px; 
  position:absolute;
  left:10px;
  top:2%;
  background-image:url(2016.png); 
  animation-delay: 7s;
  animation-duration: 1.5s;
  animation-name: anim; 
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  z-index:4;
}
#cache {
  opacity : 0;
  height:200px;
  width:600px; 
  position:absolute;
  left:0px;
  top:20%;
  background-image:url(cache.png); 
  animation-delay: 13s;
  animation-duration: 1.5s;
  animation-name: anim; 
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  z-index:3;
}
#floconb15 {
  opacity : 0;
  height:15px;
  width:15px; 
  position:absolute;
  left:78px;
  top:45%;
  background-image:url(flocon_blanc15.png);
  animation: anim 2s linear forwards 1.5s;
  z-index:2;
}
#floconb25 { 
  opacity : 0;
  height:26px;
  width:25px; 
  position:absolute;
  left:115px;
  top:40%;
  background-image:url(flocon_blanc25.png);
  animation: anim 2s linear forwards 4s;
  z-index:2;
}
#r {  
  height:43px;
  width:39px; 
  position:absolute;
  left:106px;
  top:40%;
  background-image:url(r.png);        
  animation: anim2 1s linear forwards 1.5s;
}
#floconbf { 
  opacity : 0;
  height:21px;
  width:20px; 
  position:absolute;
  left:145px;
  top:45%;
  background-image:url(flocon_blancf.png);
  animation: anim 1.5s linear forwards 1.8s;
  z-index:2;
}
#f {   
  height:43px;
  width:32px; 
  position:absolute;
  left:148px;
  top:40%;
  background-image:url(f.png);     
  animation: anim2 0.8s linear forwards 1.8s;
}
#r2 { 
  height:43px;
  width:39px; 
  position:absolute;
  left:185px;
  top:40%;
  background-image:url(r2.png);     
  animation: anim2 0.8s linear forwards 2s;
}
#floconbr2 { 
  opacity : 0;
  height:15px;
  width:15px; 
  position:absolute;
  left:185px;
  top:45%;
  background-image:url(flocon_blanc15.png);
  animation: anim 1.5s linear forwards 2s;
  z-index:2;
}
#a {  
  height:43px;
  width:47px; 
  position:absolute;
  left:228px;
  top:40%;
  background-image:url(a.png);    
  animation:  anim2 0.8s linear forwards 2.2s;
}
#floconba { 
  opacity : 0;
  height:26px;
  width:25px; 
  position:absolute;
  left:230px;
  top:35%;
  background-image:url(flocon_blanc25.png);
  animation: anim 1.5s linear forwards 2.2s;
  z-index:2;
}
#n {
  height:43px;
  width:36px; 
  position:absolute;
  left:278px;
  top:40%;
  background-image:url(n.png);    
  animation:  anim2 0.8s linear forwards 2.4s;
}
#floconbn { 
  opacity : 0;
  height:21px;
  width:20px; 
  position:absolute;
  left:280px;
  top:40%;
  background-image:url(flocon_blancf.png);
  animation: anim 1.5s linear forwards 2.4s;
  z-index:2;
}
#c2 { 
  height:44px;
  width:39px; 
  position:absolute;
  left:320px;
  top:40%;
  background-image:url(c2.png);     
  animation:  anim2 0.8s linear forwards 2.6s;
}
#floconbc2 { 
  opacity : 0;
  height:15px;
  width:15px; 
  position:absolute;
  left:320px;
  top:45%;
  background-image:url(flocon_blanc15.png);
  animation: anim 1.5s linear forwards 2.6s;
  z-index:2;
}
#floconbe2 { 
  opacity : 0;
  height:45px;
  width:44px; 
  position:absolute;
  left:355px;
  top:45%;
  background-image:url(flocon_blanc45.png);
  animation: anim 1.5s linear forwards 2.7s;
  z-index:2;
}
#e2 {  
  height:43px;
  width:33px; 
  position:absolute;
  left:362px;
  top:40%;
  background-image:url(e2.png);     
  animation:  anim2 0.8s linear forwards 2.7s;
}
#pucev {
  height:65px;
  width:44px; 
  position:absolute;
  left:410px;
  top:35%;
  background-image:url(puce_verte.png);     
  animation: anim 1.5s linear forwards 1.1s; 
  z-index:1;
  animation: anim5 1.5s linear forwards 1.1s;
}

.pucev2 {
  animation: anim2 2s linear forwards 4s; 
}
#floconv {
opacity :0;
  height:65px;
  width:66px; 
  position:absolute;
  left:400px;
  top:35%;
  background-image:url(flocon_vert65.png);
  animation: anim6 1.5s linear forwards 1.1s;
  z-index:2;
}
#puceb {  
  height:65px;
  width:42px; 
  position:absolute;
  left:473px;
  top:35%;
  background-image:url(puce_blanche.png);     
  animation: anim2 1s linear forwards 3s;
  z-index:1;
}
#floconb { 
opacity :0;
  height:65px;
  width:66px; 
  position:absolute;
  left:463px;
  top:35%;
  background-image:url(flocon_blanc65.png);      
  animation: anim 1s linear forwards 3s;
  z-index:2;
}

#pucej {    
  height:65px;
  width:43px; 
  position:absolute;
  left:376px;
  top:20%;
  background-image:url(puce_jaune.png);      
  animation: anim2 1s linear forwards 2.5s;
}
#floconj { 
opacity :0;
  height:65px;
  width:66px; 
  position:absolute;
  left:366px;
  top:20%;
  background-image:url(flocon_jaune65.png);       
  animation: anim 1s linear forwards 2.5s;
  z-index:2;
}
#puceo {    
  height:65px;
  width:45px; 
  position:absolute;
  left:440px;
  top:20%;
  background-image:url(puce_orange.png);    
  animation: anim5 1.5s linear forwards 1.6s;
}
#flocono {
opacity :0;
  height:65px;
  width:66px; 
  position:absolute;
  left:430px;
  top:20%;
  background-image:url(flocon_orange65.png);
  animation: anim6 1.5s linear forwards 1.6s;
  z-index:2;
}
#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

/* première étape 
p#doigt a:hover, p#doigt a:focus {
background-color:#ff8c00; /* pour les vieux navigateurs */
/*color: black;
animation-name: floconAppear; /* nom de l'animation */
/*animation-duration: 4s; /* temps de l'animation (4s) */
/*animation-iteration-count: infinite; /* nombre de boucles (infinie) */
/*animation-timing-function: linear; /* accelération de l'animation (constant) */
/*}            */
/* deuxième étape 
@keyframes doigt {
0% {background:rgba(255,140,0,0.4) url(/images/main.png) no-repeat 5px 10px;}
50% {background:rgba(255,140,0,1) url(/images/main.png) no-repeat 50px 10px;}
100% {background:rgba(255,140,0,0.4) url(/images/main.png) no-repeat 5px 10px;}
}    */