@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
.animation_lapin .div_anim {
	width:100%;
	float:left;
	height:100%;
	position:relative;
	    border-radius:30px;
	
}
.animation_lapin .div_anim2 {
	width:100%;
	height:100%;
	position:absolute;
     left: 50%;
    transform: translate(-50%, 0);
	background-image:url('../img/fd.png');
	
    background-repeat: repeat;
	
}

/* -------------- loader8 -------------- */


.animation_lapin .ani_esp_texte {
	width:100%;
	
	position: absolute;
    top: 50%;
    transform: translate(0,-50%);

}

.animation_lapin .ani_esp_img, .block_light {
	width:50%;
	height:100%;
	position: absolute;
	left:0;
}
.animation_lapin .block_light {
	width:50%;
	height:100%;
	position: absolute;
	right:10px;
	bottom:5px;
	animation: ani_block_light 10s infinite 0s;


}
.animation_lapin .esp_perso {
	position:absolute;
	width:400px;
	height:100%;
    right: 80px;
    margin-top:30px;
}
.animation_lapin .div_anim3 {
	position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%, -50%);
    width:100%;
    height:100%;


}
.animation_lapin .video_debut {

	opacity:0;
	height:0%;
	animation-name: ani_rec_on ;
    animation-duration: 3s;
    animation-delay:0s;    
    animation-iteration-count:1;

}
.animation_lapin .video_fin {

	opacity:0;
	height:0%;
	animation-name: ani_rec_off ;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-delay:0s;    
    animation-iteration-count:1;

}
.animation_lapin .div_visible {
	opacity:1;
	height:100%;

}
@keyframes ani_rec_on{
	0%   { opacity: 0; height: 0%;}
	3%   { opacity: 1; height: 0%;}
	6%   { opacity: 1; height: 100%;}
	12%   { opacity: 1; height: 100%;}
	18%   { opacity: 1; height: 99%;}
	20%   { opacity: 1; height: 100%;}
	32%   { opacity: 1; height: 100%;}
	34%   { opacity:0.6; height: 99%;}
	40%   { opacity: 1; height: 100%;}

  	100% { opacity: 1; height: 100%; }
}

@keyframes ani_rec_off{
	0%   { opacity: 1; height: 100%;}
	3%   { opacity: 0.6; height: 99%;}
	6%   { opacity: 1; height: 100%;}
	12%   { opacity: 1; height: 100%;}
	18%   { opacity: 0.6; height: 99%;}
	20%   { opacity: 1; height: 100%;}
	32%   { opacity: 1; height: 100%;}
	34%   { opacity:0.6; height: 66%;}
	40%   { opacity: 1; height: 100%;}
98%   { opacity: 1; height: 100%;}
  	100% { opacity: 0; height: 0%; }
}



.animation_lapin .div_wait4 {
	
    animation-delay:0s;

}

.animation_lapin .hide_anim3 {
	height:100%;
	opacity:1;
	animation-name: ani_rec_off ;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    -webkit-animation-name: ani_rec_off ;
    -webkit-animation-duration:2s;
    -webkit-animation-fill-mode: forwards;
    animation-delay:0s;

}


.animation_lapin .div_anim4 {
	position:absolute;
    left: 50%;
    transform: translate(-50%, 0);

	height: 100%;
	width:1000px;

}

.animation_lapin .div_anim4 .top {
	    border-radius:30px;
}




/*-------------------------------------------------------------------------------------------
								PERSO
----------------------------------------------------------------------------------------------*/
.animation_lapin .esp_ani_cache {
	opacity:0.9;
}
.animation_lapin .ani_cache {
	position:absolute;
    width:100%;
    height:100%;
    background-color:black;
    opacity:0;
    animation: ani_cache_light 10s infinite 0s;
}
.animation_lapin .ani_light {
	position:absolute;
    left: 50%;
    transform: translate(-50%, 0);
	opacity:0.6;
	bottom:-30px;

}
.animation_lapin .block_ombres {
	position:absolute;
	width:100%;
	height:100%;
	opacity:0.5;
	
}

.animation_lapin .block_ombres  img {
	filter: brightness(0%) blur(2px);
		}
.animation_lapin .light_anim {
	position:absolute;
    width: 450px;
    height: 450px;
    border-radius:100%;
	right:0px;
	top:-20px;
	animation: ani_block_light  10s infinite 0s;
    animation: ani_cache_light 10s infinite 0s;
    background-image: radial-gradient(ellipse closest-side, rgba(250, 230, 128, 1) 0%, rgba(250, 230, 128, 0.0) );    
    }
    
    
    
.animation_lapin .ani_corps {
	position:absolute;
	    left: 60px;
	bottom:-80px;
	animation: ani_corps 20s infinite linear;
}
.animation_lapin .ani_capuche  {
	position:absolute;
		left:130px;
		bottom:150px;
			width:240px;
	height:210px;
	animation: ani_capuche 10s infinite linear;

}
.animation_lapin .ani_capuche_img  {
		position:absolute;
    left: 50%;
    bottom:0;
    transform: translate(-50%, 0);

}


.animation_lapin .ani_masque {
	position:absolute;
	width:201px;
	height:250px;
	bottom:25px;
	left: 50%;
    transform: translate(-50%, 0);

	animation: ani_masque 10s infinite linear;

}
.animation_lapin .ani_masque_img  {
		position:absolute;
    left: 50%;
    bottom:0;
    transform: translate(-50%, 0);

}

.animation_lapin img[class^="ani_yeux"] {
	position:absolute;
	bottom:55px;
	left: 50%;
    transform: translate(-50%, 0);

	
}	



.animation_lapin .ani_yeux2 {
	opacity:0;
	animation: ani_yeux 10s infinite ease-out;

}
.animation_lapin .ani_clavier {
	position:absolute;
	width:100%;
	bottom:-30px;
	height:55px;
	background-color:#111;
	border:8px solid #000;
}
.animation_lapin div[class^="ani_doigt"] {
	height: 20px;
	width: 26px;
	position: absolute;
	background-color:#000;
	border:2px solid #000;
	border-radius: 50%;
	bottom:40px;
	
}	
.animation_lapin div[class^="ani_doigt"]::after {
		content: '';
	    position: absolute;
	    height:95%;
	    width: 85%;
	    border-top: 4px solid rgba(255, 255, 255, 0.63);
	    border-radius: 50%;
	    left: 50%;
	    top: 50%;
	    transform: translate3d(-50%, -50%, 0) rotateZ(-45deg);
	}
.animation_lapin div[class^="ani_manche"] {
	height: 80px;
	width: 100px;
	position: absolute;
	background-color: #0D0D0D;
	border: 6px solid #000;
	border-radius: 50%;
	bottom:00px;
	

}
.animation_lapin div[class^="ani_manche"]::after {
		content: '';
	    position: absolute;
	    height:90%;
	    width:100%;
	    border-top: 4px solid rgba(255, 255, 255, 0.20);
	    border-radius: 100%;
	    left: 30%;
	    top: 60%;
	    transform: translate3d(-50%, -50%, 0) rotateZ(-45deg);
	}

.animation_lapin .ani_manche1 {
	left:80px;
	animation: ani_souris 10s infinite linear;
}
.animation_lapin .ani_manche2 {
	left:320px;
	animation: ani_souris 10s infinite 4s;
}




.animation_lapin .ani_doigt1 {
	left:100px;
	bottom:-18px;
	animation: ani_souris 6s infinite linear;
	
}
.animation_lapin .ani_doigt2 {
	left:120px;
	bottom:-12px;
	animation: ani_souris 6s infinite linear;
}
.animation_lapin .ani_doigt3 {
	left:140px;
	bottom:-10px;
	animation: ani_souris 6s infinite linear;
}
.animation_lapin .ani_doigt4 {
	left:160px;
	bottom:-8px;
	animation: ani_souris 6s infinite linear;
}
.animation_lapin .ani_doigt5 {
	left:330px;
	bottom:-8px;
	animation: ani_souris 4s infinite 4s;
	animation: ani_touche_clavier 5s infinite linear;
}
.animation_lapin .ani_doigt6 {
	left:350px;
	bottom:-10px;
	animation: ani_souris 4s infinite 4s;
	animation: ani_touche_clavier 5s infinite 0.3s;
}
.animation_lapin .ani_doigt7 {
	left:370px;
	bottom:-12px;
	animation: ani_souris 4s infinite 4s;
	animation: ani_touche_clavier 5s infinite 0.6s;
}
.animation_lapin .ani_doigt8 {
	left:390px;
	bottom:-14px;
	animation: ani_souris 4s infinite 4s;
	animation: ani_touche_clavier 5s infinite 0.9s;
}


.animation_lapin .clignotte {
	animation: clignotte 1.4s infinite 0.9s;
}


/*-------------------------------------------------------------------------------------------
								ANIMATIONS
----------------------------------------------------------------------------------------------*/

@keyframes ani_yeux{ 
	0%   { opacity:0; }
	39%   { opacity:0; }
	40% { opacity:1; }
  	41% { opacity:0; }
  	42% { opacity:1; }
	43% { opacity:0; }
  	59% { opacity:0; }
  	60% { opacity:1; }
  	61% { opacity:0; }
  	62% { opacity:0; }
  	63%   {opacity:0;}
  	100% { opacity:0; }
}

@keyframes ani_rec_coins{
	0% {
		opacity:1;
	}
	50% {
		opacity:0.8;
	}
	100%  {
		opacity:1;
	}

}

@keyframes clignotte{
	0% {
		opacity:0;
	}
	50% {
		opacity:1;
	}
	100%  {
		opacity:0;
	}

}

@keyframes ani_rec_light{
	0% {
		opacity:0;
	}
	50% {
		opacity:1;
	}
	100%  {
		opacity:0;
	}

}
@keyframes ani_rec_texte{
	0%   { opacity: 1; }
  	100% { opacity: 1; }
}

@keyframes ani_cache_light{
	0% {
		opacity:0.6;
	}
	24%  {
		opacity:0.7;	
	}
	25%  {
		opacity:0.7;	
	}
	26%  {
		opacity:0.5;
	}
	27%  {
		opacity:0.7;
	}
	28%  {
		opacity:0.6;
	
	}
	83%  {
		opacity:0.5;
	}
	84%  {
		opacity:0.7;
	}
	85%  {
		opacity:0.5;
	}
	88%  {
		opacity:0.6;
	}
	100%  {
		opacity:0.6;
	}

}


@keyframes ani_capuche {
	0% {

		margin-top:0px;
	}
	25%  {
		margin-left:0px;
		margin-top:0px;
		transform: rotate(1deg);
		transform-origin: middle  middle;	
	}
	29%  {

		margin-top:-1px;
		transform: rotate(0deg);
		transform-origin: middle  middle;	
	}
	
	38%  {
		margin-left:0px;
		margin-top:0px;
		transform: rotate(2deg);
		transform-origin: middle  middle;	


	}
	40%  {
		margin-left:0px;
	}
	70%  {
		margin-left:0px;
	}
	84%  {
		margin-left:0px;
		transform: rotate(-1deg);
		transform-origin: middle  middle;
	}
	90%  {
		margin-left:0px;
		transform: rotate(1deg);
		transform-origin: middle  middle;
	}
	
		100%  {
		margin-left:0px;
		margin-top:0px;

	}
	

}


@keyframes ani_corps {
	0% {
		margin-bottom:0px;
	}
	25%  {

		margin-bottom:-5px;
	
	}
	29%  {
		margin-bottom:0px;
			}
	
	38%  {

		margin-bottom:-2px;	


	}
	40%  {
		margin-bottom:0px;
	}
	70%  {
		margin-bottom:-5px;		
	}
	84%  {
	margin-bottom:2px;
	}
	90%  {
	}
	
		100%  {
		margin-bottom:0px;
	}
	

}

@keyframes ani_souris {
	0% {

		margin-top:0px;
	}
	25%  {
		margin-left:2px;
		margin-top:3px;	
	}
	29%  {

		margin-left:0px;
		margin-top:0px;	

	}
	
	38%  {
		margin-left:6px;
		margin-top:3px;	


	}
	40%  {
		margin-left:0px;
		margin-top:0px;	

	}
	70%  {
		margin-left:0px;
		margin-top:5px;	
	}
	84%  {
		margin-left:2px;
		margin-top:3px;	
	}
	90%  {
		margin-left:0px;
		margin-top:0px;	
	}
	
		100%  {
		margin-left:0px;
		margin-top:0px;

	}
	

}
@keyframes ani_block_light {
	0% {

		margin-left:10px; top:5px;
	}
	25%  {

		margin-left:15px; top:-5px;
	}
		38%  {

		margin-left:10px; top:5px;	


	}
	40%  {

		margin-left:10px; top:5px;	

	}
	70%  {

		margin-left:12px; top:0px;
	}
		100%  {

		margin-left:10px; top:5px;

	}
	

}


@keyframes ani_touche_clavier {
	0% {

		margin-bottom:0px;
	}
	25%  {

		margin-bottom:5px;	
	}
	26%  {
		margin-bottom:0px;
	}
	
	38%  {

		margin-bottom:3px;	


	}
	40%  {

		margin-bottom:0px;	

	}
	70%  {

		margin-bottom:5px;	
	}
	71%  {

		margin-bottom:0px;	
	}
	72%  {

		margin-bottom:0px;	
	}
	
		100%  {

		margin-bottom:0px;

	}
	

}



.animation_lapin .esp_timer {
	height:95px;
	width:540px;
	top:10px;
}
#timer {
	position: relative;
	width: 100%;
	height:100%;
	margin-top:3px;
	text-align: center;
	float: left;
	font-family: 'Audiowide', cursive;
	font-size: 40px;


}