@font-face { font-family: "Dancerz"; src: url("./font/Dancerz.ttf") format("truetype")}
@font-face { font-family: "Aclonica"; src: url("./font/Aclonica.ttf") format("truetype")}


.selectinscrit
{
	background-color:red;
	animation-duration: 0.5s;
	animation-name: animselectinscrit;
        animation-iteration-count: 5;

}
@keyframes animselectinscrit {
 

  	100% {background-color:red;}
  	0% {background-color:transparent;}
  	
  
 }


.menunew
{
	margin:10px 0px 30px 0px;
	position:relative;

}
.menunew:hover
{
	animation-duration: 0.5s;
  	animation-name: animmenunew;
        animation-iteration-count: 1;
        transition-timing-function: ease-in;
}
@keyframes animmenunew {
 
 	0% {left:0px;font-size:100%}
  50% {left:-20px;font-size:150%;color:red;}
  	100% {left:0px}
  
 }


.vignette3 {

	border-style:solid;
	opacity:1;
	border-width:40px;
	border-color:rgba(40,40,40,1);
	border-radius:60px;
	font-size:130%;
	color:white;
	margin-top:10px;
	text-shadow:5px 5px 5px rgba(0,0,0,0.9);
	padding:20px;
}

.vignette {

	border-style:solid;
	opacity:0.6;
	border-width:20px;
	border-color:rgba(40,40,40,1);
	border-radius:60px;
	font-size:400%;
	margin-top:10px;
	text-shadow:5px 5px 5px rgba(0,0,0,0.9);
	padding:20px;


}
.vignette_selected {
	
	opacity:1;
	border-style:solid;
	border-width:20px;
	border-color:rgba(0,0,255,0.8);
	border-radius:60px;
	font-size:400%;
	margin-top:10px;
	text-shadow:5px 5px 5px rgba(0,0,0,0.9);
	padding:20px;
	animation-duration: 1s;
	animation-iteration-count: 1;
	transition-timing-function: ease-in;
	animation-name: vignette_on;
}

@keyframes vignette_on {
  0% {border-color:rgba(255,255,255,1);}
  100% {border-color:rgba(0,00,255,0.8);}
 
  
 }
 
.bandeau {

	font-size:300%;
	color:grey;
	text-shadow:3px 3px 3px rgba(255,255,255,1);
	

}
.bandeaui {

	font-size:250%;
	color:white;
	text-shadow:3px 3px 3px rgba(200,200,200,1);
	

}
.bandeauj {

	font-size:450%;
	color:white;
	border-radius:30px;
	border-style:solid;
	border-wiosdth:3px;
	vertical-align:middle;
	text-shadow:3px 3px 3px rgba(200,200,200,1);
	

}

.bandeau1 {

	font-size:200%;
	color:white;

	
	

}

.tableau1 {
	font-size:100%;
	color:white;
	border-style:solid;
	border-width:3px;
 	border-radius:5px;

}

}
.select1 {

	font-size:150%;
	color:white;
	background-color:black;
	border-radius:3px;

	
	

}

.tourne {
	animation-duration: 2s;
  	animation-iteration-count: infinite;
 	animation-name: tourne_anim;
 	transition-timing-function:linear
 	}
 	
 @keyframes tourne_anim {
	0% { 
            transform: rotate(0deg); 
        } 
        50% { 
            transform: rotate(360deg); 
        }
        100% { 
            transform: rotate(0deg); 
        }
  
  
}
	

.saisie {
	font-size:300%;
	font-family:Aclonica;
	border-radius:2px;
	border-style:solid;
	border-width:2px;
	background-color:grey;
	color:rgba(255,255,255,1);
	padding:20px;
	margin:20px;
	animation-duration: 1.5s;
  	animation-iteration-count: 1;
 	animation-name: saisie_blur;
}
.saisiemoins {
	font-size:200%;
	font-family:Aclonica;
	border-radius:2px;
	border-style:solid;
	border-width:2px;
	background-color:grey;
	color:rgba(255,255,255,1);
	padding:20px;
	margin:20px;
	animation-duration: 1.5s;
  	animation-iteration-count: 1;
 	animation-name: saisie_blur;
}
.saisie_err {
	font-size:300%;
	font-family:Aclonica;
	border-radius:2px;
	border-style:solid;
	border-width:2px;
	background-color:grey;
	color:rgba(255,255,255,1);
	padding:20px;
	margin:20px;
	}

.saisie label {color:red;}

@keyframes saisie_blur {
	0% {background-color:rgba(100,100,255,1);border-radius:40px;color:color:rgba(255,255,255,1);border-width:5px}
  100% {background-color:grey;border-radius:2px;color:color:rgba(255,255,255,0.8);border-width:2px}
  
}


.saisie::placeholder {
  color: black;
  opacity: 0.7;
  font-size:60%;
  position:relative;
  top:0px;
}
.saisie:focus::placeholder {

	color:white;
	top:-30px;
	animation: placeholder_anim 1s infinite;
}

 @keyframes placeholder_anim {
  0% {color: white;}
  100% {color:red;}
}

.saisie:focus {
  background-color:rgba(100,100,255,1);
  border-radius:40px;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-name: saisie_focus;
  border-width:5px;
    
  }
  
  @keyframes saisie_focus {
  0% {background-color:grey;border-radius:2px;color:color:rgba(255,255,255,0.8);border-width:2px}
  100% {background-color:rgba(100,100,255,1);border-radius:40px;color:color:rgba(255,255,255,1);border-width:5px;}
}
.pastille
{
	font-family:Aclonica;
	color:white;
	font-size:40%;
}
.recharge {
  
  
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-name: recharge_anim;
  transition-timing-function: ease-in;
  
    
  }
  
    @keyframes recharge_anim {
  0% {color:white;font-size:120%}
  50% {color:red;font-size:100%}
  100% {color:white;font-size:100%;}
  
}

.caseacocher0
{
	transform: scale(3.5);
	background-color:red;
	
}

.caseacocher1
{
	transform: scale(3.5);
	
	animation-name: caseacocheranim;
	animation-duration: 3s;
  	animation-iteration-count: infinite;
  	
}




@keyframes caseacocheranim {
  0% {transform: scale(3.5);}
  10% {transform: scale(5);}
  48% {transform: scale(4.5);}
  49% {transform: scale(5);}
  50% {transform: scale(4.5);}
  51% {transform: scale(5);}
  52% {transform: scale(4.5);}
  53% {transform: scale(5);}
  90% {transform: scale(5);}
  100% {transform: scale(3.5);}
}

.payer
{

        font-size:500%;
        color:rgba(0,255,255,1);
        animation-name: bandeau2anim2;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        border-style:solid;
        border-color:transparent;
        text-shadow:0px 0px 0px rgba(0,0,0,1);

}

 @keyframes bandeau2anim2 {
  0% {font-size : 200%;background-color:rgba(0,0,0,1);border-color:transparent;}
  20% {font-size:250%;background-color:rgba(255,0,0,1);}
  80% {font-size:250%;background-color:rgba(255,0,0,1);border-color:transparent;}
  
  100% {font-size : 200%;background-color:rgba(0,0,0,1);}
}



.plusdecours
{

	font-size:100%;
	color:rgba(0,255,255,1);
	animation-name: plusdecoursanim;
  	animation-duration: 3s;
  	animation-iteration-count: 8;
  	border-style:solid;
  	border-color:transparent;
  	text-shadow:0px 0px 0px rgba(0,0,0,1);

}

@keyframes plusdecoursanim {
	0% { 
            color:white;
        } 
        16% { 
            color:red; 
            font-size:160%
        }
         18% { 
            color:white; 
            font-size:150%
        }
         20% { 
            color:red; 
            font-size:160%
        }
        22% { 
        font-size:150%
            color:white;
        }
        24% { 
            color:red; 
            font-size:160%
        }
        26% { 
        font-size:150%
            color:white;
        }
        28% { 
            color:red; 
            font-size:160%
        }
        30% { 
        font-size:150%
            color:white;
        }
        32% { 
            color:white;
            font-size:100%
        }

}
  

.bandeau2 {

	font-size:100%;
	color:rgba(0,255,255,1);
	animation-name: bandeau2anim;
  	animation-duration: 5s;
  	animation-iteration-count: infinite;
  	border-style:solid;
  	border-color:transparent;
  	text-shadow:0px 0px 0px rgba(0,0,0,1);
  	
  	background-color:rgba(0,0,0,1);
}
@keyframes bandeau2anim {
  0% {font-size : 100%;background-color:rgba(0,0,0,1);border-color:transparent;}
  20% {font-size:120%;background-color:rgba(255,0,0,1);}
  80% {font-size:120%;background-color:rgba(255,0,0,1);border-color:transparent;}
  
  100% {font-size : 100%;background-color:rgba(0,0,0,1);}
}

.pannel{
	background-color:rgba(200,200,200,0.8);
	animation-name: animpannel;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	transition-timing-function: ease-in;

}
@keyframes animpannel {
  0% {background-color: rgba(200,200,200,0.8);}
  20% {background-color: rgba(0,255,0,1);}
  80% {background-color: rgba(0,255,0,1);}
100% {background-color: rgba(200,200,200,0.8);}
}
.cours {

	font-size:100%;
	color:rgba(0,255,255,0.5);
	text-shadow:7px 7px 5px rgba(0,0,0,0.6);
	
}
.menu55 {
	font-family:Dancerz;
	font-size:150%;
	background-color:rgba(40,40,40,0.8);
	color:grey;
	border-color:grey;
	border-width:3px;
	border-style:solid;
	border-radius:10px;
	margin:10px;
	padding:10px;
	cursor:pointer;
	text-decoration: none;
}

.menu {
	font-family:Dancerz;
	font-size:280%;
	background-color:rgba(0,0,0,0.8);
	color:grey;
	border-color:grey;
	border-width:3px;
	border-style:solid;
	border-radius:10px;
	margin:5px;
	padding:5px;
	cursor:pointer;
	
	
	}
	
	@keyframes menu {
  0% {border-color: rgba(0,0,0,0);}
  50% {border-color: rgba(40,40,40,1);}
100% {border-color: rgba(0,0,0,0);}
}

.menu:hover {
	font-family:Dancerz;
	
	background-color:rgba(0,0,0,1);
	
	border-color:grey;
	border-width:3px;
	border-style:solid;
	border-radius:10px;
	margin:5px;
	padding:5px;
	cursor:pointer;
	animation-duration: 2s;
	animation-iteration-count: 1;
	transition-timing-function: ease-in;
	animation-name: menu_hover;
}

@keyframes menu_hover {
  0% {border-color:grey}
  100% {border-color:cyan;color:yellow}
  
}
.libea {
	color:white;
	font-size:200%;
	text-shadow:7px 7px 5px rgba(0,0,0,0.9);
    
	}
.libec {
	color:rgba(200,200,200,1);
	font-size:180%;
	text-shadow:7px 7px 5px rgba(0,0,0,0.9);
    
	}

.libed {
	color:rgba(250,0,0,1);
	font-size:180%;
	text-shadow:7px 7px 5px rgba(0,0,0,0.9);
    
	}	
	
.libeb {
	color:yellow;
	font-size:250%;
	text-shadow:7px 7px 5px rgba(0,0,0,0.9);
    
	}


.libe {
	color:white;
	text-shadow:7px 7px 5px rgba(0,0,0,0.9);
	animation-duration: 5s;
	animation-iteration-count: infinite;
	transition-timing-function: ease-in;
	animation-name: libe;
    
	}
@keyframes libe {
  0% {text-shadow:2px 2px 3px rgba(0,0,0,0.9);color:#FFFFFF;letter-spacing:1px;font-size:200%;color:white}
  15% {text-shadow:10px 10px 5px rgba(0,0,0,1);color:#AAAAAA;letter-spacing:10px;font-size:250%;color:red}
  25% {text-shadow:10px 10px 5px rgba(0,0,0,1);color:#AAAAAA;letter-spacing:10px;font-size:250%;color:red}
30% {text-shadow:2px 2px 3px rgba(0,0,0,0.9);color:#FFFFFF;letter-spacing:1px;font-size:200%;;color:white}

}

.libf {
	color:white;
	text-shadow:3px 3px 2px rgba(0,0,0,0.9);
	animation-duration: 10s;
	animation-iteration-count: 1;
	transition-timing-function: ease-in;
	animation-name: libfanim;
    
	}
@keyframes libfanim {
   
  10% {text-shadow:10px 10px 5px rgba(0,0,0,0.9);color:#FFFFFF;letter-spacing:5px;rotate:360deg;top:50%;font-size:100%;color:white}
  15% {text-shadow:10px 10px 5px rgba(0,0,0,0.9);color:#FFFFFF;letter-spacing:30px;rotate:360deg;top:50%;font-size:100%;color:yellow}
  
  85% {text-shadow:10px 10px 5px rgba(0,0,0,0.9);color:#FFFFFF;letter-spacing:30px;rotate:360deg;top:50%;font-size:100%;color:yellow}
  85% {text-shadow:10px 10px 5px rgba(0,0,0,0.9);color:#FFFFFF;letter-spacing:30px;rotate:360deg;top:50%;font-size:100%;color:yellow;text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;opacity:0.5;}
  
  95% {text-shadow:10px 10px 5px rgba(0,0,0,0.9);color:#FFFFFF;letter-spacing:5px;rotate:360deg;top:50%;font-size:100%;color:white}
  
  


}