@charset "utf-8";
/* CSS Document */

body
{
background-color:black;
}

h1 input
{
	background-color:transparent;
	border:none;
	font-size:24px;
}
#welcome
{
		background-image:url(images/welcome.png);
	background-size: 1400px 700px;
background-color:#1e1e15;
	width:1400px;
	height:700px;	
	z-index:2;
	position:absolute;
top:0px;
left:0px;
  border:none; 
cursor:pointer;  
}
#gotogame
{
	background-image:url(images/game.png);
	background-size: 1400px 700px;
	background-color:black;
	width:1400px;
	height:700px;	
	z-index:1;
	position:absolute;
top:0px;
left:0px;
  border:none; 
cursor:pointer;   
}

#boutongame
{
	background-color:black;
	background-image:url(images/boutonplay.png);
	background-size: 200px 200px;
	width:200px;
	height:200px;
	position:absolute;
	left:600px;
	top:350px;
	z-index:1;
	text-align:center;
	display:block;
	transition: transform .3s;
	cursor:pointer;
	border-radius:20px;
	border:solid 3px #d9d9d9;
}
#boutongame:hover {
filter: contrast(1.3);
transform: scale(1.2); 
}


#game
{
background-color:black;
	width:1400px;
	height:700px;	
	z-index:1;
	position:absolute;
top:0px;
left:0px;
  border:none;  
}

#fenetre
{
background-color:black;
	width:1400px;
	height:700px;	
	z-index:17;
	position:absolute;
	top:0px;
	left:0px;
  border:none; 
display:block;  
}

#interface
{
	background-color:black;
	background-image:url(images/interface.png);
	background-size: 1200px 700px;
	width:1200px;
	height:700px;
	position:absolute;
	left:200px;
	top:0px;
	z-index:1;
	text-align:center;
	display:block;
}

#finniveau
{
	background-color:black;
	
	width:1200px;
	height:700px;
	position:absolute;
	left:200px;
	top:0px;
	z-index:2;
	text-align:center;
	display:none;
}
#ressourcesniveau
{
	background-image:url(images/ressources.png); 
	background-size: 200px 300px;
	background-color:black;
	width:200px;
	height:300px;
	position:absolute;
	left:500px;
	top:250px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:10px;
}
#butinniveau
{
	background-image:url(images/butinniveau.png); 
	background-size: 200px 80px;
	background-color:red;
	width:200px;
	height:80px;
	position:absolute;
	left:500px;
	top:160px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:10px;
}
#result
{
	background-color:black;
	background-image:url(images/victoire.png);
	background-size: 530px 100px;
	width:530px;
	height:100px;
	position:absolute;
	left:335px;
	top:15px;
	z-index:1;
	text-align:center;
	display:block;
}
#xpgagne
{
	position:absolute;
	left:110px;
	top:40px;
	border:none;
	color:#ff6600;
}
#boostgagne
{
	position:absolute;
	left:110px;
	top:128px;
	border:none;
	color:#00cc00;
}
#spellgagne
{
	position:absolute;
	left:110px;
	top:215px;
	border:none;
	color:#0099cc;
}

#ecranjouer
{
	background-color:black;
	
	width:1200px;
	height:700px;
	position:absolute;
	left:200px;
	top:0px;
	z-index:1;
	text-align:center;
	display:none;
}

#controlfenetre
{
		background-image:url(images/control.png);
	background-size: 200px 700px;
background-color:black;
	width:200px;
	height:700px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:1;
	text-align:center;
display:block;
	border-radius:5px;
}
#boutontest
{
background-color:#ff9900;
	width:200px;
	height:200px;
	position:absolute;
	left:0px;
	top:700px;
	z-index:1;
	text-align:center;
display:none;
	border-radius:10px;
}
#help
{
background-color:transparent;
	width:150px;
	height:80px;
	position:absolute;
	left:20px;
	bottom:26px;
	z-index:1;
	text-align:center;
display:block;
	border-radius:10px;
		font-family:Arial;
	font-size:14px;
	padding:5px;
	font-style:italic;
	color:#f2f2f2;
}

#maps
{
	background-color:black;
	
	width:1200px;
	height:700px;
	position:absolute;
	left:200px;
	top:0px;
	z-index:2;
	text-align:center;
	display:none;
}
#cartemonde
{
	background-color:grey;
	background-image:url(images/mapmonde.png);
	background-size: 600px 600px;
	width:600px;
	height:600px;
	position:absolute;
	left:300px;
	top:50px;
	z-index:2;
	text-align:center;
	display:block;
	border-radius:20px;
		border:solid 3px #d9d9d9;
}
.zonemap
{
	background-color:green;
	background-image:url(images/zonevalid.png);
		background-size: 80px 80px;
	width:80px;
	height:80px;
	position:absolute;
	z-index:1;
	text-align:center;
	display:block;
	cursor:pointer;
	border-radius:80px;
	border:solid 2px black;
	opacity:0%;
}
.zonemap:hover {
opacity:90%;
}
.masquezonemap
{
	background-color:transparent;
	
	width:80px;
	height:80px;
	position:absolute;
	z-index:2;
	text-align:center;
	display:block;
	border-radius:80px;
		border:solid 2px transparent;
}
#zonemap1
{
	left:450px;
	top:470px;
}
#zonemap2
{
	left:100px;
	top:310px;
}
#zonemap3
{
	left:450px;
	top:200px;
}
#zonemap4
{
	left:50px;
	top:30px;
}
#masquezonemap1
{
	left:450px;
	top:470px;
}
#masquezonemap2
{
	left:100px;
	top:310px;
}
#masquezonemap3
{
	left:450px;
	top:200px;
}
#masquezonemap4
{
	left:50px;
	top:30px;
}

.zones
{
	background-color:white;
	background-image:url(images/interface.png);
	background-size: 1200px 700px;
	width:1200px;
	height:700px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:1;
	text-align:center;
	display:none;
}


#team
{
	background-color:#e6e6e6;
	width:1200px;
	height:700px;
	position:absolute;
	left:200px;
	top:0px;
	z-index:2;
	text-align:center;
	display:none;
}
#validationachat
{
	background-color:grey;
	background-image:url(images/validationachat.png);
	background-size: 1200px 700px;
	width:1200px;
	height:700px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
	text-align:center;
	display:none;
}
#boutonjouer
{
	background-color:black;
	background-image:url(images/boutonjouer.png);
	background-size: 200px 200px;
	width:200px;
	height:200px;
	position:absolute;
	left:500px;
	top:250px;
	z-index:1;
	text-align:center;
	display:block;
	transition: transform .3s;
	cursor:pointer;
}
#boutonjouer:hover {
filter: contrast(1.3);
transform: scale(1.2); 
}
#boutonstart
{
	background-color:black;
	background-image:url(images/boutonjouer.png);
	background-size: 200px 200px;
	width:200px;
	height:200px;
	position:absolute;
	left:600px;
	top:250px;
	z-index:1;
	text-align:center;
	display:block;
	transition: transform .3s;
	cursor:pointer;
}
#boutonstart:hover {
filter: contrast(1.3);
transform: scale(1.2); 
}



#iconeteam
{
	background-color:black;
	background-image:url(images/boutonteam2.png);
	background-size: 200px 200px;
	width:200px;
	height:200px;
	position:absolute;
	right:300px;
	top:300px;
	z-index:1;
	text-align:center;
	display:block;
	transition: transform .3s;
	cursor:pointer;
}
#iconeteam:hover {
filter: contrast(1.3);
transform: scale(1.2); 
}
#iconemaps
{
	background-color:black;
	background-image:url(images/boutonmap.png);
		background-size: 200px 200px;
	width:200px;
	height:200px;
	position:absolute;
	left:300px;
	top:300px;
	z-index:1;
	text-align:center;
	display:block;
	transition: transform .3s;
	cursor:pointer;
}
#iconemaps:hover {
filter: contrast(1.3);
transform: scale(1.2); 
}

.iconemission
{
	background-color:black;
	background-image:url(images/iconemission.png);
	background-size: 200px 200px;
	width:200px;
	height:200px;
	position:absolute;
	left:300px;
	top:300px;
	z-index:1;
	text-align:center;
	display:block;
	transition: transform .3s;
	cursor:pointer;
}
.iconemission:hover {
filter: contrast(1.3);
transform: scale(1.2); 
}
.iconemission .tooltiptext {
  visibility: hidden;
  width: 160px;
  height:70px;
  background-color: black;
  color: #bfbfbf;
  text-align: center;
  padding: 5px 0;
  border-radius: 10px;
 top: -90px;
  left: 21px;
 	border:1px solid #bfbfbf;  box-sizing: border-box;
 font-size:16px;
 font-family:Verdana;
 font-weight:bold;
  position: absolute;
  z-index: 10;
}
.iconemission:hover .tooltiptext {
  visibility: visible;
}
.iconeexploration
{
	background-color:black;
	background-image:url(images/iconeexplo.png);
	background-size: 200px 200px;
	width:200px;
	height:200px;
	position:absolute;
	right:300px;
	top:300px;
	z-index:1;
	text-align:center;
	display:block;
	transition: transform .3s;
	cursor:pointer;
}
.iconeexploration:hover {
filter: contrast(1.3);
transform: scale(1.2); 
}
.iconeexploration .tooltiptext {
  visibility: hidden;
  width: 160px;
  height:70px;
  background-color: black;
  color: #bfbfbf;
  text-align: center;
  padding: 5px 0;
  border-radius: 10px;
 top: -90px;
  left: 21px;
 	border:1px solid #bfbfbf;  box-sizing: border-box;
 font-size:16px;
 font-family:Verdana;
 font-weight:bold;
  position: absolute;
  z-index: 10;
}
.iconeexploration:hover .tooltiptext {
  visibility: visible;
}

#boutonstartgame {	
font-weight:bold;
	background-color:#ff9900;
	border-radius:10px;
	border:3px solid white;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:28px;
	padding:16px 31px;
	z-index:4;
	margin-top:30px;
	width:1280px;
	height:80px;
	display:none;
	position:absolute;
	bottom:10px;
	left:10px;
}
#boutonstartgame:hover {
	background-color:green;
}





#interjoueur
{
	background-image:url(images/interjoueur.png);
	background-color:#ff9900;
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:9;
	text-align:center;
display:block;
}







#menu
{
		background-image:url(images/menu.png);
background-color:#ffd633;
	width:1400px;
	height:700px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:19;
	text-align:center;
display:block;
}
#endgame
{
		background-image:url(images/interjoueur.png);
background-color:#ffd633;
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:19;
	text-align:center;
display:none;
}

#control
{
background-color:black;
	width:200px;
	height:700px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:2;
	text-align:center;
display:block;
	border-radius:10px;
}


#home
{
	background-color:black;
	width:1400px;
	height:700px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:21;
	text-align:center;
display:block;
}
#intro
{
	background-color:black;
	width:1400px;
	height:700px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:20;
	text-align:center;
display:none;
}

#rules
{
	background-color:black;
	width:1200px;
	height:700px;
	position:absolute;
	left:200px;
	top:0px;
	z-index:2;
	text-align:center;
	display:none;	
}

#menurules
{
	background-color:grey;
	background-size: 1200px 700px;
	background-image:url(images/interface.png);
	width:1200px;
	height:700px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:1;
	text-align:center;
	display:none;	
}
#rulescontroles
{
	background-color:black;
	background-size: 1200px 700px;
	background-image:url(images/rulescontroles.png);
	width:1200px;
	height:700px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:1;
	text-align:center;
	display:none;
cursor:pointer;	
}
#rulesressources
{
	background-color:black;
	background-size: 1200px 700px;
	background-image:url(images/rulesressources.png);
	width:1200px;
	height:700px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:1;
	text-align:center;
	display:none;
cursor:pointer;	
}
#rulesameliorations
{
	background-color:grey;
	background-size: 1200px 700px;
	background-image:url(images/rulesameliorations.png);
	width:1200px;
	height:700px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:1;
	text-align:center;
	display:none;	
	cursor:pointer;
}
#rulesexplorations
{
	background-color:grey;
	background-size: 1200px 700px;
	background-image:url(images/rulesexplorations.png);
	width:1200px;
	height:700px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:1;
	text-align:center;
	display:none;	
	cursor:pointer;
}

#masqueboard
{
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:1300px;
	height:800px;
	position:absolute;
	left:0px;
	top:0px;
display:none;
z-index:10;
	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:10px;
	box-sizing: border-box;
}



#header
{
		background-image:url(images/header.png);
background-color:#ff9900;
	background-repeat:no-repeat;
	background-size:100%;
	width:200px;
	height:100px;
	position:absolute;
	left:0px;
	top:0px;
	display:block;
z-index:2;
	font-weight:bold;
	text-align:center;
color:black;
		
}


.card
{background-image:url(images/unite11.png); background-size: 100px 100px; border-radius:10px;position:absolute; top:200px; left:0px; z-index:6; width:100px; height:100px;}
.card:hover {
filter: contrast(1.4);
}
.case
{background-color:transparent; border-radius:10px; z-index:3; width:100px; height:100px; position:absolute; border:solid 1px 	#f5f5ef; box-sizing: border-box; opacity:30%}



.champsgold {
	
	/*display:block;*/
	display:inline;
	
	margin-top:45px;
	margin-left:-20px;
	width:100px;
	height:50px;
	text-align:center;
	background-color:transparent;
	border:none;
		color:#ffff4d;
	font-size:34px;
	font-weight:bold;
	
	
}
.champsname {
	
	/*display:block;*/
	display:inline;
	
	position:absolute;
	top:125px;
	left:10px;
	width:230px;
	height:50px;
	text-align:center;
	background-color:transparent;
	border:none;
		color:#334d4d;
	font-size:16px;
	font-weight:bold;
	
	
}



.btn {
	background-color:#1a1a1a;
	border-radius:60px;
	border:3px solid #e6e6e6;
	display:block;
	cursor:pointer;
	color:#e6e6e6;
	font-weight:bold;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	position:absolute;
	bottom:130px;
	left:500px;
	width:200px;
	height:60px;
}
.btn:hover {
	background-color: #595959;
}
.btnmenu {
	background-color:#1a1a1a;
	border-radius:60px;
	border:3px solid #e6e6e6;
	display:block;
	cursor:pointer;
	color:#e6e6e6;
	font-weight:bold;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	margin-top:15px;
	margin-left:30px;
	width:140px;
	height:60px;
}
.btnmenu:hover {
	background-color: #595959;
}

.boutonrules {
	background-size: 170px 200px;
	background-color:#1a1a1a;
	border-radius:10px;
	border:2px solid #e6e6e6;
	display:block;
	cursor:pointer;
	position:absolute;
	width:170px;
	height:200px;
	transition: transform .3s;
}
.boutonrules:hover {
	filter: contrast(1.3);
	transform: scale(1.2); 
}
#boutonexplorations
{
background-image:url(images/boutonexplorations.png); 
	left:135px;
	top:250px;
}
#boutoncontroles
{
background-image:url(images/boutoncontroles.png); 
	left:385px;
	top:250px;
}
#boutonressources
{
background-image:url(images/boutonressources.png); 
	left:885px;
	top:250px;
}
#boutonameliorations
{
background-image:url(images/boutonameliorations.png); 
	left:635px;
	top:250px;
}

.btn2 {
	background-color:#000000;
	border-radius:10px;
	border:3px solid white;
	display:inline;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	
	width:200px;
		margin:0 auto;
}
.btn2:hover {
	background-color: #990000;
}


.btn2:focus {
	background-color:#00b300;
	
	
}


.btnstart {
	background-color:#000000;

	border:1px solid black;
	display:block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	margin-top:30px;
	width:230px;
		margin:0 auto;
}
.btnstart:hover {
	background-color: #990000;
}



.btnzoom {
	background-color:#000000;
	border-radius:120px;
	border:2px solid white;
	display:inline;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	
text-align:center;

	width:40px;
	height:40px;
		
}
.btnzoom:hover {
	background-color: green;
}


.ClassName {
	text-decoration:none;
	font-family:Arial;
	background:#d9d9d9;
	
	text-indent:0px;
	line-height:145px;
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
	border-radius:130px;
	text-align:center;
	vertical-align:middle;
	display:inline-block;
	font-size:26px;
	color:black;
	width:250px;
	height:250px;

	border-color:black;
	border-width:2px;
	border-style:solid;
	margin:auto;
	font-weight:bold;
}



.ClassName:hover {
	background:#969696;
	background:-o-linear-gradient(90deg, #969696, #ebebeb);
	background:-moz-linear-gradient( center top, #969696 5%, #ebebeb 100% );
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #969696), color-stop(1, #ebebeb) );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#969696', endColorstr='#ebebeb');
	background:-webkit-linear-gradient(#969696, #ebebeb);
	background:-ms-linear-gradient(#969696, #ebebeb);
	background:linear-gradient(#969696, #ebebeb);
}










.avancementhead
{
    -moz-box-sizing: border-box;
     box-sizing: border-box;
    border: 1px solid black;
    border-radius: 15px;	
}


.opt
{
background-color:#ffd633;
	width:100px;
	height:100px;
	margin-top:10px;
	margin-left:4px;
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;
	border:solid 2px black; box-sizing: border-box;
	background-size: 100px 100px;
	
}
.opt:hover {
	border-radius:100px;
	color:red;
	border-color:green;
}


.vertical {
  display: inline-block;
  width: 20%;
  height: 40px;
  -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
  transform: rotate(-90deg);
}

progress {
  border-radius:10px; 
  width: 40px;
  height: 5px;
  margin-left: 0px;
  margin-top:82px;
}
progress::-webkit-progress-bar {
  background-color: grey;
  border-radius: 10px;
}
progress::-webkit-progress-value {
  background-color: var(--c,#1e1e15);
  border-radius: 10px;
  
}
progress::-moz-progress-bar {
 background-color: grey;
  border-radius: 10px;
}


#vitapersos
{
	background-color:transparent;
	width:200px;
	height:200px;
	position:absolute;
	left:0px;
	top:150px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:10px;
	border:none;
}

.sante
{
		background-color:grey;
			position:absolute;
  border-radius:10px; 
  width: 100px;
  height: 10px;
border:2px solid white; 
}

#life1
{		background-color:grey;
			position:absolute;
	border-radius:12px; 
  width: 70px;
  height: 12px;
  margin-left: 0px;
  margin-top:0px;
	left:15px;
	top:100px;
}
#life2
{		background-color:grey;
			position:absolute;
	border-radius:12px; 
  width: 70px;
  height: 12px;
  margin-left: 0px;
  margin-top:0px;
	left:15px;
	top:100px;
}

#zooming
{
	background-color:transparent;
	text-align:center;
	width:100px;
	height:60px;
	color:white;
	z-index:21;
	font-size:14px;	
	position:absolute;
	left:10px;
	top:710px;
}
#enlarge
{
		background-color:transparent;
	text-align:center;
	width:100px;
	height:90px;
	color:white;

display:block;
	z-index:21;
	font-size:14px;
	
}



/* Tooltip text */
.optxp .tooltiptext {
  visibility: hidden;
  width: 160px;
  height:70px;
  background-color: black;
  color: #bfbfbf;
  text-align: center;
  padding: 5px 0;
  border-radius: 10px;
 top: -90px;
  left: 21px;
 	border:1px solid #bfbfbf;  box-sizing: border-box;
 font-size:16px;
 font-family:Verdana;
 font-weight:bold;
  position: absolute;
  z-index: 10;
}
.optxp:hover .tooltiptext {
  visibility: visible;
}




#board1
{
background-color:grey;
background-size: 1100px 600px;
	width:1100px;
	height:600px;
	position:absolute;
	left:250px;
	top:50px;
	z-index:1;
	text-align:center;
display:block;
	border-radius:10px;
}
#masqueboard1
{
background-color:transparent;
	width:1100px;
	height:600px;
	position:absolute;
	left:250px;
	top:50px;
	z-index:2;
	text-align:center;
display:none;
	border-radius:10px;
}

#boardrouge
{
background-color:#00a3cc;
background-size: 1100px 600px;
	width:1100px;
	height:600px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:2;
	text-align:center;
display:none;
	border-radius:10px;
	opacity:30%;
}

#cat
{
background-color:blue;
	width:80px;
	height:80px;
	position:absolute;
	left:200px;
	top:200px;
	z-index:3;
	text-align:center;
display:block;
	border-radius:80px;
}


#obstacle
{
background-color:black;
	width:100px;
	height:100px;
	position:absolute;
	left:500px;
	top:400px;
	z-index:3;
	text-align:center;
display:block;
	border-radius:80px;
}
#tir1
{background-size: 14px 14px;
background-color:transparent;
	width:14px;
	height:14px;
	position:absolute;
	left:500px;
	top:400px;
	z-index:3;
	text-align:center;
display:none;
	border-radius:14px;
}
#tir2
{
	background-image:url(images/tir21.png); 
	background-size: 60px 60px;
background-color:transparent;
	width:60px;
	height:60px;
	position:absolute;
	left:500px;
	top:400px;
	z-index:3;
	text-align:center;
display:none;
	border-radius:60px;
}
#tir3
{
	background-image:url(images/tir3.png); 
	background-size: 30px 30px;
background-color:black;
	width:30px;
	height:30px;
	position:absolute;
	left:500px;
	top:400px;
	z-index:3;
	text-align:center;
display:none;
	border-radius:30px;
}

#impacttir2
{
	background-image:url(images/feu1.gif); 
	background-size: 120px 120px;
background-color:transparent;
	width:120px;
	height:120px;
	position:absolute;
	left:-40px;
	top:-40px;
	z-index:2;
	text-align:center;
display:none;
	border-radius:100px;
}

#rangeattackcac1
{
	background-size: 160px 100px;
background-color:transparent;
	width:160px;
	height:100px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:5;
	text-align:center;
display:none;
	border-radius:10px;
}
#rangeattackcac2
{
	background-size: 240px 150px;
background-color:transparent;
	width:240px;
	height:150px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:5;
	text-align:center;
display:none;
	border-radius:10px;
}
#rangeattackcac3
{
	background-size: 270px 140px;
background-color:transparent;
	width:270px;
	height:140px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:5;
	text-align:center;
display:none;
	border-radius:10px;
}
#animationattack11
{
	background-size: 110px 90px;
background-color:transparent;
	width:110px;
	height:90px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:5;
	text-align:center;
display:none;
	border-radius:10px;
}
#animationattack13
{
	background-size: 160px 90px;
background-color:transparent;
	width:160px;
	height:90px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:5;
	text-align:center;
display:none;
	border-radius:10px;
}
#animationattack14
{
	background-size: 120px 120px;
background-color:transparent;
	width:120px;
	height:120px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:5;
	text-align:center;
display:none;
	border-radius:10px;
}
#divbouclier
{
background-color:transparent;
	width:100px;
	height:100px;
	position:absolute;
	left:-6px;
	top:-2px;
	z-index:5;
	text-align:center;
display:none;
	border-radius:100px;
	border:solid 5px #00b300;
}

#projectiledragon
{
			background-image:url(images/tir22.gif); 
	background-size: 80px 80px;
	background-color:transparent;
	width:80px;
	height:80px;
	position:absolute;
	left:-200px;
	top:0px;
	z-index:5;
	text-align:center;
	display:block;
	border-radius:80px;
}
#rangeattackdragon
{
		background-image:url(images/attackdragon2.gif); 
	background-size: 480px 200px;
	background-color:transparent;
	width:480px;
	height:200px;
	position:absolute;
	left:100px;
	top:180px;
	z-index:2;
	text-align:center;
	display:none;
	border-radius:10px;
}
#rangeattackdragon2
{
		background-image:url(images/attackdragon2.gif); 
	background-size: 480px 200px;
	background-color:transparent;
	width:480px;
	height:200px;
	position:absolute;
	left:520px;
	top:180px;
	z-index:2;
	text-align:center;
	display:none;
	border-radius:10px;
}
.impacts
{
	background-image:url(images/impact.gif); 
	background-size: 80px 80px;
background-color:transparent;
	width:80px;
	height:80px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:6;
	text-align:center;
display:none;
	border-radius:10px;
}


.projectiles
{
		background-image:url(images/feu1.gif);
	background-size: 14px 14px; 
background-color:#ff0000;
	width:14px;
	height:14px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:5;
	text-align:center;
display:none;
	border-radius:14px;
}

.heros
{
	background-image:url(images/cout.png);
	background-size: 80px 80px; 
background-color:transparent;
	width:80px;
	height:80px;
	position:absolute;
	left:200px;
	top:200px;
	z-index:3;
	text-align:center;
display:block;
	border-radius:80px;
}
.impactheros
{
	background-image:url(images/impact.gif);
	background-size: 70px 70px; 
background-color:transparent;
	width:70px;
	height:70px;
	position:absolute;
	left:5px;
	top:10px;
	z-index:4;
	text-align:center;
	display:block;
	border-radius:80px;
}
.iconeselection
{
	background-image:url(images/iconeselection.png);
	background-size: 16px 16px; 
	background-color:transparent;
	width:16px;
	height:16px;
	position:absolute;
	left:34px;
	top:-13px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:2px;

}

.skull
{
	background-size: 60px 60px;
background-color:transparent;
	width:60px;
	height:60px;
	position:absolute;
	left:900px;
	top:300px;
	z-index:2;
	text-align:center;
display:block;
	border-radius:60px;
}
.volant
{
	background-size: 50px 50px;
background-color:transparent;
	width:50px;
	height:50px;
	position:absolute;
	left:900px;
	top:300px;
	z-index:2;
	text-align:center;
display:block;
	border-radius:50px;
}
.distance
{
	background-size:60px 60px;
background-color:transparent;
	width:60px;
	height:60px;
	position:absolute;
	left:500px;
	top:300px;
	z-index:2;
	text-align:center;
display:block;
	border-radius:60px;
}
.sword
{
	background-size: 80px 80px;
background-color:transparent;
	width:80px;
	height:80px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:2;
	text-align:center;
display:block;
	border-radius:80px;
}
.dragon
{	background-image:url(images/dragon.gif);
	background-size: 160px 200px;
background-color:white;
	width:160px;
	height:200px;
	position:absolute;
	left:800px;
	top:200px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:10px;
}
.aleatoire
{
	background-size: 50px 50px;
background-color:transparent;
	width:50px;
	height:50px;
	position:absolute;
	left:900px;
	top:300px;
	z-index:2;
	text-align:center;
display:block;
	border-radius:50px;
}

.obstacles
{
	background-image:url(images/mur1.png); 
	background-size: 80px 80px;
	width:80px;
	height:80px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
	text-align:center;
display:block;
	border-radius:10px;
	border:2px solid #4d4d4d;
	
}

.rangeskull
{
	background-size: 100px 100px;
background-color:transparent;
	width:100px;
	height:100px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
	text-align:center;
display:none;
	border-radius:10px;
}
.rangesword
{
	background-size: 112px 100px;
background-color:transparent;
	width:112px;
	height:100px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
	text-align:center;
display:none;
	border-radius:10px;
}


#statistiques1
{
	background-color:black;
	width:100px;
	height:600px;
	position:absolute;
	left:0px;
	top:80px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:0px;
	border:none;
}
#statistiques2
{
	background-color:black;
	width:100px;
	height:600px;
	position:absolute;
	left:100px;
	top:80px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:0px;
	border:none;
}

#iconeperso1
{
	background-image:url(images/iconeperso1.png); 
	background-size: 80px 80px;
	background-color:red;
	width:80px;
	height:80px;
	position:absolute;
	left:10px;
	top:10px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:20px;
	border:none;
}
#iconeperso2
{
	background-image:url(images/iconeperso2.png); 
	background-size: 80px 80px;
	background-color:red;
	width:80px;
	height:80px;
	position:absolute;
	left:10px;
	top:10px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:20px;
	border:none;
}

.iconespell
{
	background-size: 70px 70px;
	background-color:green;
	width:70px;
	height:70px;
	position:absolute;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:20px;
}

.masqueiconespell
{
	background-image:url(images/timing3.png); 
	background-size: 70px 70px;
	background-color:black;
	width:70px;
	height:70px;
	position:absolute;
	z-index:2;
	text-align:center;
	display:none;
	border-radius:0px;
}
.lockedspell
{
	background-image:url(images/spelllocked.png); 
	background-size: 70px 70px;
	background-color:grey;
	width:70px;
	height:70px;
	position:absolute;
	z-index:3;
	text-align:center;
	display:block;
	border-radius:20px;
}

#iconespell11
{
	background-image:url(images/spell11.png); 
	left:15px;
	top:145px;
}
#iconespell12
{
	background-image:url(images/spell12.png); 
	left:15px;
	top:250px;
}
#iconespell13
{
	background-image:url(images/spell13.png); 
	left:15px;
	top:355px;
}
#iconespell14
{
	background-image:url(images/spell14.png); 
	left:15px;
	top:460px;
}
#iconespell21
{
	background-image:url(images/spell21.png); 
	left:15px;
	top:145px;
}
#iconespell22
{
	background-image:url(images/spell22.png); 
	left:15px;
	top:250px;
}
#iconespell23
{
	background-image:url(images/spell23.png); 
	left:15px;
	top:355px;
}
#iconespell24
{
	background-image:url(images/spell24.png); 
	left:15px;
	top:460px;
}

#masqueiconespell11
{
display:none;
}
#masqueiconespell12
{
display:none;
}
#masqueiconespell13
{
display:none;
}
#masqueiconespell14
{
display:none;
}
#masqueiconespell21
{
display:none;
}
#masqueiconespell22
{
display:none;
}
#masqueiconespell23
{
display:none;
}
#masqueiconespell24
{
display:none;
}
#swap1
{
	background-image:url(images/swap1.gif); 
	background-size: 80px 80px;
	background-color:#00a3cc;
	width:80px;
	height:80px;
	position:absolute;
	left:-200px;
	top:0px;
	z-index:5;
	text-align:center;
	display:none;
	border-radius:80px;
}
#swap2
{
	background-image:url(images/swap1.gif); 
	background-size: 80px 80px;
	background-color:#00a3cc;
	width:80px;
	height:80px;
	position:absolute;
	left:-200px;
	top:0px;
	z-index:5;
	text-align:center;
	display:none;
	border-radius:80px;
}


#ressources
{
	background-image:url(images/ressources.png); 
	background-size: 180px 300px;
	background-color:grey;
	width:180px;
	height:300px;
	position:absolute;
	left:10px;
	top:260px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:10px;
}
#boutonsmenu
{
	background-color:transparent;
	width:200px;
	height:200px;
	position:absolute;
	left:0px;
	top:80px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:10px;
}
.experience 
{
	font-family:Arial;
	background:transparent;
	border-radius:100px;
	text-align:center;
	vertical-align:middle;
	display:block;
	font-size:26px;
	color:#d9d9d9;
	width:50px;
	height:50px;
	margin:auto;
	font-weight:bold;
}
.experienceniveau
{
	font-family:Arial;
	background:transparent;
	border-radius:100px;
	text-align:center;
	vertical-align:middle;
	display:block;
	font-size:26px;
	color:#e6e6e6;
	width:50px;
	height:50px;
	margin:auto;
	font-weight:bold;
}

#xp
{
	position:absolute;
	left:110px;
	top:40px;
	border:none;
	cursor:pointer;
	color:#ff6600;
}
#boost
{
	position:absolute;
	left:110px;
	top:128px;
	border:none;
	cursor:pointer;
	color:#00cc00;
}
#newspell
{
	position:absolute;
	left:110px;
	top:215px;
	border:none;
	cursor:pointer;
	color:#0099cc;
}


.personnage
{
	background-color:black;
	width:580px;
	height:680px;
	position:absolute;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:10px;
	border:none;
}

#personnage1
{
	left:10px;
	top:10px;
}
#personnage2
{
	right:10px;
	top:10px;
}
#portrait1
{
background-image:url(images/portrait1.png);
}
#portrait2
{
background-image:url(images/portrait2.png);
}
.portrait
{	background-size: 130px 270px;
	background-color:yellow;
	width:130px;
	height:270px;
	position:absolute;
	left:10px;
	top:20px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:10px;
	border:1px solid black;
}
.stats
{
	background-image:url(images/stats.png);
	background-size: 240px 270px;
	background-color:grey;
	width:240px;
	height:270px;
	position:absolute;
	left:150px;
	top:20px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:10px;
	border:1px solid black;
}
.sortsliste
{
	background-color:black;
	width:380px;
	height:370px;
	position:absolute;
	left:10px;
	top:300px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:10px;
	border:1px solid black;
}
.achats
{
	background-color:black;
	width:170px;
	height:640px;
	position:absolute;
	right:10px;
	top:20px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:10px;
}
.boutonameliore
{
	background-size: 170px 637px;
	background-color:black;
	width:170px;
	height:637px;
	position:absolute;
	right:10px;
	top:20px;
	z-index:2;
	text-align:center;
	display:block;
	border-radius:20px;
	border:2px solid black;
	box-sizing:border-box;
	cursor:pointer;
	font-weight:bold;
	font-size:16px;
	color:#e6e6e6;
}
.boutonameliore:hover {
	background-color: #990000;
	filter: contrast(1.1);
transform: scale(1.02); 
}
.niveauperso 
{
	font-family:Verdana;
	background:transparent;
	border-radius:10px;
	text-align:center;
	display:block;
	font-size:14px;
	color:#e6e6e6;
	width:30px;
	height:30px;
	position:absolute;
	right:55px;
	top:21px;
	font-weight:bold;
	border:none;
}
.barrestatsvie
{background-color:black;
	width:160px;
	height:16px;
	position:absolute;
	left:65px;
	top:95px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:20px;
	border:2px solid white;
	margin-left:0px;
	margin-top:0px;
	cursor:pointer;
}
.barrestatsattaque
{
	background-color:black;
	width:160px;
	height:16px;
	position:absolute;
	left:65px;
	top:160px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:20px;
	border:2px solid white;
		margin-left:0px;
	margin-top:0px;
	cursor:pointer;
}
.barrestatsspeed
{
background-color:black;
	width:160px;
	height:16px;
	position:absolute;
	left:65px;
	top:225px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:20px;
	border:2px solid white;
		margin-left:0px;
	margin-top:0px;
	cursor:pointer;
}
.spells
{background-size: 80px 80px;
	background-color:green;
	width:80px;
	height:80px;
	position:absolute;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:10px;
	border:1px solid black;
}
.descriptif
{ 
	background-size: 230px 60px;
		background-color:black;
	width:220px;
	height:50px;
	position:absolute;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:15px;
	border:2px solid #d9d9d9;
	font-family:Verdana;
	font-size:12px;
	color:#d9d9d9;
	font-style:italic;
	padding:5px;
}

.prixboost
{	
	background-size: 170px 60px; 
	background-color:white;
	width:170px;
	height:60px;
	position:absolute;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:10px;
	border:none;
}

.achat {
	background-color:#1a1a1a;
	border-radius:10px;
	border:3px solid #e6e6e6;
	display:block;
	cursor:pointer;
	color:#e6e6e6;
	font-weight:bold;
	font-family:Arial;
	font-size:24px;
	padding:2px;
	text-decoration:none;
	margin-top:10px;
	margin-left:25px;
	width:40px;
	height:40px;
}
.achat:hover {
	background-color: #b30000;
}
.prices 
{
	font-family:Arial;
	background:transparent;
	border-radius:10px;
	text-align:center;
	display:block;
	font-size:22px;
	color:#d9d9d9;
	width:40px;
	height:30px;
	position:absolute;
	right:45px;
	top:15px;
	font-weight:bold;
	font-style:italic;
	border:none;
}
#prixlvl1
{
	color:#ff6600;
}
#prixvie1
{
	color:#00cc00;
}
#prixattaque1
{
	color:#00cc00;
}
#prixspeed1
{
	color:#00cc00;
}
#prixspell12
{
	color:#0099cc;
}
#prixspell13
{
	color:#0099cc;
}
#prixspell14
{
	color:#0099cc;
}
#prixlvl2
{
	color:#ff6600;
}
#prixvie2
{
	color:#00cc00;
}
#prixattaque2
{
	color:#00cc00;
}
#prixspeed2
{
	color:#00cc00;
}
#prixspell22
{
	color:#0099cc;
}
#prixspell23
{
	color:#0099cc;
}
#prixspell24
{
	color:#0099cc;
}
#spell11
{	
	background-image:url(images/spell11.png); 	
	left:20px;
	top:10px;
}
#spell12
{	
	background-image:url(images/spell.png); 	
	left:20px;
	top:100px;
}
#spell13
{	
	background-image:url(images/spell.png); 	
	left:20px;
	top:190px;
}
#spell14
{	
	background-image:url(images/spell.png); 	
	left:20px;
	top:280px;
}
#descriptifspell11
{
	left:120px;
	top:20px;
}
#descriptifspell12
{
	left:120px;
	top:110px;
}
#descriptifspell13
{
	left:120px;
	top:200px;
}
#descriptifspell14
{
	left:120px;
	top:290px;
}
#achatlvl1
{
	background-image:url(images/achatlvl.png); 
	left:0px;
	top:8px;
}
#achatvie1
{
	background-image:url(images/achatboost.png); 
	left:0px;
	top:75px;
}
#achatattaque1
{
	background-image:url(images/achatboost.png); 
	left:0px;
	top:140px;
}
#achatspeed1
{
	background-image:url(images/achatboost.png); 
	left:0px;
	top:205px;
}
#unlockspell12
{
	background-image:url(images/achatspell.png); 
	left:0px;
	top:393px;
}
#unlockspell13
{
	background-image:url(images/achatspell.png); 
	left:0px;
	top:483px;
}
#unlockspell14
{
	background-image:url(images/achatspell.png); 
	left:0px;
	top:575px;
}

#spell21
{	
	background-image:url(images/spell21.png); 	
	left:20px;
	top:10px;
}
#spell22
{	
	background-image:url(images/spell.png); 	
	left:20px;
	top:100px;
}
#spell23
{	
	background-image:url(images/spell.png); 	
	left:20px;
	top:190px;
}
#spell24
{	
	background-image:url(images/spell.png); 	
	left:20px;
	top:280px;
}
#descriptifspell21
{
	left:120px;
	top:20px;
}
#descriptifspell22
{
	left:120px;
	top:110px;
}
#descriptifspell23
{
	left:120px;
	top:200px;
}
#descriptifspell24
{
	left:120px;
	top:290px;
}
#achatlvl2
{
	background-image:url(images/achatlvl.png); 
	left:0px;
	top:8px;
}
#achatvie2
{
	background-image:url(images/achatboost.png); 
	left:0px;
	top:75px;
}
#achatattaque2
{
	background-image:url(images/achatboost.png); 
	left:0px;
	top:140px;
}
#achatspeed2
{
	background-image:url(images/achatboost.png); 
	left:0px;
	top:205px;
}
#unlockspell22
{
	background-image:url(images/achatspell.png); 
	left:0px;
	top:393px;
}
#unlockspell23
{
	background-image:url(images/achatspell.png); 
	left:0px;
	top:483px;
}
#unlockspell24
{
	background-image:url(images/achatspell.png); 
	left:0px;
	top:575px;
}
#boutonameliore1
{
	background-image:url(images/boutonameliore1.png); 
}
#boutonameliore2
{
	background-image:url(images/boutonameliore2.png); 
}

.lifeboss
{
	background-color:red;
	width:110px;
	height:14px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:14px;
	border:2px solid white;
	margin-left:40px;
	margin-top:-20px;
}

#boutonfin
{
	bottom:50px;
	left:500px;
}


.intros
{
	background-color:black;
	background-size: 1400px 700px;
	width:1400px;
	height:700px;
	position:absolute;
	top:0px;
	left:0px;
	text-align:center;
	display:none;
	border-radius:10px;
}
#intro0
{
background-image:url(images/intro0.png);
display:block; 
}
#intro1
{
background-image:url(images/intro1.png); 
}
#intro2
{
background-image:url(images/intro2.png);
}
#intro3
{
background-image:url(images/intro3.png);
}
#intro4
{
background-image:url(images/intro4.png);
}
#intro5
{
background-image:url(images/intro5.png);
}
#intro6
{
background-image:url(images/intro6.png);
}
#intro7
{
background-image:url(images/intro7.png);
}


#suivant
{
	background-image:url(images/boutonnext.png); 
	background-size: 80px 80px;
	background-color:grey;
	width:80px;
	height:80px;
	position:absolute;
	right:50px;
	top:308px;
	z-index:11;
	text-align:center;
	display:block;
	border-radius:80px;
	border:3px solid #e6e6e6;
	cursor:pointer;
}
#suivant:hover {
filter: contrast(1.3);
transform: scale(1.2); 
}


#boutonadmin
{
	width:100px;
	height:80px;
	position:absolute;
	left:100px;
	top:100px;
	z-index:1;
display:none;
}