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

body
{
background-color:black;
}

h1 input
{
	background-color:transparent;
	border:none;
	font-size:24px;
}
#game
{
/*background-color:#1e1e15;*/
background-color:#330033;
	width:1430px;
	height:1100px;	
	z-index:1;
	position:absolute;
top:3%;
left:2%;
  border:solid 2px;
}

#masquegame
{
background-color:transparent;
	width:1430px;
	height:1100px;	
	z-index:2;
	position:absolute;
top:3%;
left:2%;
  border:solid 2px;
  display:none;
}
#interjoueur
{
background-image:url(images/inter.png);
background-size:1430px 1100px;
	width:1430px;
	height:1100px;	
	z-index:2;
	position:absolute;
top:3%;
left:2%;
  border:solid 2px;
  display:none;
}
#solojoueur
{
background-image:url(images/ecraninter.png);
background-size:1430px 1100px;
	width:1430px;
	height:1100px;	
	z-index:2;
	position:absolute;
top:3%;
left:2%;
  border:solid 2px;
  display:none;
}



#menutest
{

background-color:yellow;
	background-repeat:no-repeat;
	background-size:100%;
	width:200px;
	height:400px;
	position:absolute;
	right:10px;
	top:10px;
	display:none;
z-index:40;
	font-weight:bold;
	text-align:center;
color:black;	
	border-radius:10px;	
}







#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;
}




#loading
{
background-color:black;
	width:1430px;
	height:1100px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:20;
	text-align:center;
display:none;
	font-weight:bold;
	color:#66ccff;
	font-size:24px;
font-family:Arial;	
font-style:italic;
}
#chargement
{background-color:transparent;
background-image:url(images/chargement1.gif);
background-size: 800px 400px;
	width:800px;
	height:400px;
	position:absolute;
	left:315px;
	top:180px;
z-index:1;
display:block;
}

#ecranstart
{
background-image:url(images/ecraninter.png);
background-size:1430px 1100px;
	width:1430px;
	height:1100px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:21;
	text-align:center;
display:none;
	font-weight:bold;
	color:#66ccff;
	font-size:24px;
font-family:Arial;	
font-style:italic;
}



#menu
{
		background-image:url(images/menu.png);
background-color:#ffd633;
background: rgb(60,0,88);
background: radial-gradient(circle, rgba(60,0,88,1) 9%, rgba(0,0,0,1) 85%);
	width:1430px;
	height:1100px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:19;
	text-align:center;
display:block;
}
#gamemode
{

background: rgb(60,0,88);
background: radial-gradient(circle, rgba(60,0,88,1) 9%, rgba(0,0,0,1) 85%);
	width:1430px;
	height:1100px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:18;
	text-align:center;
display:none;
}
#contientmode
{
background-color:transparent;
	width:400px;
	height:600px;
	position:absolute;
	left:55px;
	top:100px;
	z-index:1;
	text-align:center;
		font-weight:bold;
	color:white;
	font-size:24px;
font-family:Arial;	
font-style:italic;
}
#contientdifficulte
{
background-color:transparent;
	width:400px;
	height:600px;
	position:absolute;
	left:505px;
	top:100px;
	z-index:1;
	text-align:center;
			font-weight:bold;
	color:white;
	font-size:24px;
font-family:Arial;	
font-style:italic;
}
#contienttheme
{
background-color:transparent;
	width:400px;
	height:600px;
	position:absolute;
	left:955px;
	top:100px;
	z-index:1;
	text-align:center;
			font-weight:bold;
	color:white;
	font-size:24px;
font-family:Arial;	
font-style:italic;
}

#sauvegardesettings
{background-color:green;
	color:white;
		width:300px;
	height:80px;
	position:absolute;
	left:555px;
	bottom:170px;
}

#endgame
{
		background-image:url(images/end.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:#330033;
	width:300px;
	height:1000px;
	position:absolute;
	left:20px;
	top:5px;
	z-index:2;
	text-align:center;
display:block;
	border-radius:10px;
}
.classrule
{
background-size:1430px 1100px;
	width:1430px;
	height:1100px;	
	position:absolute;
	left:0px;
	top:0px;
		text-align:center;
		border-radius:30px;
	display:none;
}

#rules
{
	background-color:black;
	width:1430px;
	height:1100px;	
	z-index:20;
	position:absolute;
	top:0%;
	left:0%;
  border:solid 2px;
  display:none;
	
}

#rules1
{
	background-image:url(images/rules1.png);
	z-index:1;
}
#rules2
{
	background-image:url(images/rules2.png);
	z-index:2;
}
#rules3
{
	background-image:url(images/rules3.png);
	z-index:3;
}
#rules4
{
	background-image:url(images/rules4.png);
	z-index:4;
}
#rules5
{
	background-image:url(images/rules5.png);
	z-index:5;
}
#rules6
{
	background-image:url(images/rules6.png);
	z-index:6;
}
#rules7
{
	background-image:url(images/rules7.png);
	z-index:7;
}
#rules8
{
	background-image:url(images/rules8.png);
	z-index:8;
}
#rules9
{
	background-image:url(images/rules9.png);
	z-index:9;
}
#rules10
{
	background-image:url(images/rules10.png);
	z-index:10;
}
#rules11
{
	background-image:url(images/rules11.png);
	z-index:11;
}
#rules12
{
	background-image:url(images/rules12.png);
	z-index:12;
}
#rules13
{
	background-image:url(images/rules13.png);
	z-index:13;
}
#rules14
{
	background-image:url(images/rules14.png);
	z-index:14;
}
#rules15
{
	background-image:url(images/rules15.png);
	z-index:15;
}
#rules16
{
	background-image:url(images/rules16.png);
	z-index:16;
}
#rules17
{
	background-image:url(images/rules17.png);
	z-index:17;
}
#home
{
background-image:url(images/home.png);
background-color:red;
	width:1430px;
	height:1100px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:21;
	text-align:center;
display:block;
cursor:pointer;
}

#findujeu
{
background-image:url(images/endgame.png);
background-size:1430px 1100px;
	width:1430px;
	height:1100px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:22;
	text-align:center;
display:none;
	font-weight:bold;
	color:white;
	font-size:32px;
font-family:Arial;	
font-style:italic;
cursor:pointer;
}





#terrain
{
background-color:grey;
	background-repeat:no-repeat;
	background-size:100%;
	width:1080px;
	height:1010px;
	position:absolute;
	left:350px;
	top:0px;
z-index:2;
	margin:0px;
overflow:hidden;
	border-radius:30px;
	box-sizing: border-box;

}
#galaxy
{
background-image:url(images/galaxy.png);
background-size:1080px 1010px;
	width:1080px;
	height:1010px;
	position:absolute;
	left:350px;
	top:0px;
z-index:10;
	margin:0px;
display:none;
	border-radius:30px;
	box-sizing: border-box;
}

#worldmap
{
background-color:  #00001a;
	background-repeat:no-repeat;
	background-size:100%;
	width:1080px;
	height:1010px;
	position:absolute;
	left:350px;
	top:0px;
z-index:10;
	margin:0px;
display:none;
border-radius:30px;
	box-sizing: border-box;
}
#contientminimap
{
background-image:url(images/maps.png);
background-size:1000px 1000px;
	width:1000px;
	height:1000px;
	position:absolute;
	left:40px;
	top:5px;
z-index:5;
	margin:0px;
	border-radius:50px;
	box-sizing: border-box;
	overflow:hidden;
}
#contientminimaptop
{
background-image:url(images/maps.png);
background-size:1000px 1000px;
	width:1000px;
	height:1000px;
	position:absolute;
	left:40px;
	top:5px;
z-index:1;
	margin:0px;
	border-radius:50px;
	box-sizing: border-box;
	overflow:hidden;
		display:none;
}
#contientminimapright
{
background-image:url(images/maps.png);
background-size:1000px 1000px;
	width:1000px;
	height:1000px;
	position:absolute;
	left:40px;
	top:5px;
z-index:1;
	margin:0px;
	border-radius:50px;
	box-sizing: border-box;
	overflow:hidden;
	display:none;
}
#contientminimapbottom
{
background-image:url(images/maps.png);
background-size:1000px 1000px;
	width:1000px;
	height:1000px;
	position:absolute;
	left:40px;
	top:5px;
z-index:1;
	margin:0px;
	border-radius:50px;
	box-sizing: border-box;
	overflow:hidden;
		display:none;
}
#contientminimapleft
{
background-image:url(images/maps.png);
background-size:1000px 1000px;
	width:1000px;
	height:1000px;
	position:absolute;
	left:40px;
	top:5px;
z-index:1;
	margin:0px;
	border-radius:50px;
	box-sizing: border-box;
	overflow:hidden;
		display:none;
}

#menucreation
{
background-color:#002233;
	background-repeat:no-repeat;
	background-size:100%;
	width:1080px;
	height:1010px;
	position:absolute;
	left:350px;
	top:0px;
z-index:10;
	margin:0px;
display:none;
	border-radius:0px;
	box-sizing: border-box;
}

#tradesector
{
	/*background-image:url(images/fond2.png);
background-size:1080px 1010px;

background: rgb(0,0,0);
background: radial-gradient(circle, rgba(0,0,0,1) 33%, rgba(82,0,120,1) 100%);
	background-color:#00131a;*/
	
	background-color:#002233;
	width:1080px;
	height:1010px;
	position:absolute;
	left:350px;
	top:0px;
z-index:10;
	margin:0px;
display:none;
border-radius:30px;
	box-sizing: border-box;
}

#lab
{
	/*
background: rgb(0,0,0);
background: radial-gradient(circle, rgba(0,0,0,1) 33%, rgba(82,0,120,1) 100%);
background-image:url(images/fond1.png);
background-size:1080px 1010px;*/
background-color:#000033;
	width:1080px;
	height:1010px;
	position:absolute;
	left:350px;
	top:0px;
z-index:10;
	margin:0px;
display:block;
border-radius:30px;
	box-sizing: border-box;
}

#animationcombat
{
background-image:url(images/animationcombat.png);
background-size:1080px 1010px;
	width:1080px;
	height:1010px;
	position:absolute;
	left:350px;
	top:0px;
z-index:12;
	margin:0px;
display:none;
	border-radius:0px;
	box-sizing: border-box;
}
#combattant1
{
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:270px;
	height:300px;
	position:absolute;
	left:180px;
	top:340px;
z-index:2;
}
#combattant2
{
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:270px;
	height:300px;
	position:absolute;
	right:180px;
	top:340px;
z-index:2;
}
#tir
{
background-color:blue;
	background-repeat:no-repeat;
	background-size:100%;
	width:40px;
	height:40px;
	position:absolute;
	left:100px;
	top:100px;
z-index:3;
display:none;
}
#impactcombat
{
background-image:url(images/impactcombat.gif);
background-size:270px 270px;
	width:270px;
	height:270px;
	position:absolute;
	left:180px;
	top:340px;
z-index:3;
display:none;
	border-radius:300px;
}


#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;
}



#menuvaisseau
{
background-image:url(images/menus.png);
background-size:280px 220px;
	width:280px;
	height:220px;
	position:absolute;
	left:10px;
	top:215px;
	display:none;
z-index:2;
	font-weight:bold;
	text-align:left;
color:black;
border-radius:15px;		
}

#menujoueur
{
background-image:url(images/menus.png);
background-size:280px 220px;
	width:280px;
	height:220px;
	position:absolute;
	left:10px;
	top:215px;
z-index:1;
	font-weight:bold;
	text-align:center;
color:black;
border-radius:15px;		
}
#menumap
{
background-image:url(images/menus.png);
background-size:280px 220px;
	width:280px;
	height:220px;
	position:absolute;
	left:10px;
	top:215px;
z-index:1;
	font-weight:bold;
	text-align:center;
color:black;
border-radius:15px;		
}

#datajoueur
{

background-image:url(images/header.png);
background-size:280px 100px;
	width:280px;
	height:100px;
	position:absolute;
	left:10px;
	top:0px;
	display:block;
z-index:1;
	font-weight:bold;
	text-align:left;
	color:black;
	font-size:28px;
	font-weight:bold;
font-family:Arial;	
	border-radius:10px;	
}

#ressourcesjoueur
{
background-image:url(images/ressources.png);
background-size:280px 100px;
	width:280px;
	height:100px;
	position:absolute;
	left:10px;
	top:105px;
	display:block;
z-index:1;
	font-weight:bold;
	text-align:left;
color:black;	
	border-radius:10px;	
	text-align:left;
}



.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:#800080;

		border:4px solid white;

	border-radius:100px;

	display:block;
	cursor:pointer;
	color:white;
	font-weight:bold;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	margin-top:30px;
	width:230px;
		margin:0 auto;
}
.btn:hover {
	background-color: #00b8e6;
}
.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);
}












.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);
}





#zooming
{
		background-color:transparent;
	text-align:center;
	width:100px;
	height:60px;
	color:white;
position:absolute;
top:10px;
right:10px;

	z-index:21;
	font-size:14px;
	
}
#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: 280px;
  height:80px;
  background-color: black;
  color: #fff;
  text-align:center;
  padding: 10px 0;
  border-radius:10px;
 top: -90px;
  left: -76px;
 	border:2px solid white;  box-sizing: border-box;
 font-size:16px;
  position: absolute;
  z-index: 10;
}
.optxp:hover .tooltiptext {
  visibility: visible;
   font-size:16px;
}



.container{
			position: relative;
			
			height: 100vh;
			/*animation: animate 4s linear infinite;*/
		}
		@keyframes animate{
			0%{
				filter: hue-rotate(0deg);
			}
			100%{
				filter: hue-rotate(360deg);
			}
		}
		.row{
			display: inline-flex;
			margin-left: 52px;
			margin-top: -28px;
			overflow: hidden;
		}
		.row:nth-child(even){
			margin-left: 1px;
		}
		.hexagon{
			position: relative;
			height: 110px;
			width: 100px;
			background: #111;
			margin: 2px;
			clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
			transition: 1s;
			animation: animate 2s linear infinite;
			z-index:2;
			background-size:100px 110px !important;
		}
		.hexagon:before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 50%;
			height: 100%;
			pointer-events: none;
			background: rgba(255, 255, 255, 0.02);
		}
		.hexagon:hover{
			transition: 0s;
			background: #0f0 !important;
		
      cursor: pointer;
		}



		.hexagonobstacle{
			position: relative;
			height: 110px;
			width: 100px;
			background: black;
			margin: 2px;
			clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
			z-index:2;
			background-size:100px 110px !important;
			cursor:pointer;
		}
		.hexagonobstacle:hover {
		filter: contrast(1.6);
		}

		.teleport{
			background-image:url(images/teleport.png);
background-size: 100px 110px;
			position: absolute;
			height: 110px;
			width: 100px;
			  background-color: blue;
			margin: 2px;
			clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
			transition: 2s;
			  cursor:pointer;
			  z-index:1;
		}
		
			.teleportbord{
			background-image:url(images/teleportbord.png);
			background-size: 100px 110px;
			position: absolute;
			height: 110px;
			width: 100px;
			  background-color: blue;
			margin: 2px;
			clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
			transition: 2s;
			  cursor:pointer;
			  z-index:2;
			  display:none;
						}
		
#teleporttop
{
display:block;
z-index:10;	
top:15px;
left:486px;
}		
		
#teleportbottom
{
display:block;
z-index:10;	
bottom:19px;
left:486px;
}			
		
#teleportright
{
display:block;
z-index:10;	
top:446px;
right:22px;
}			
		
#teleportleft
{
display:block;
z-index:10;	
top:446px;
left:18px;
}			


#teleportbordtop
{
z-index:10;	
top:15px;
left:486px;
}		
		
#teleportbordbottom
{

z-index:10;	
bottom:19px;
left:486px;
}			
		
#teleportbordright
{

z-index:10;	
top:446px;
right:22px;
}			
		
#teleportbordleft
{

z-index:10;	
top:446px;
left:18px;
}	

		
		
#conteneurvaisseaux
{
background-color:transparent;
	background-repeat:no-repeat;
	overflow:hidden;
	visibility:hidden;
	background-size:100%;
	width:1080px;
	height:1010px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:9;
	margin:0px;
	border:solid 1px black;
	border-radius:30px;
	box-sizing: border-box;
	padding-top:130px;
	padding-left:70px;
}		
		
.vaisseau
{
background-color:transparent; border-radius:10px; z-index:8; width:100px; height:110px; position:absolute; 
margin: 2px;
			clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
			cursor:pointer;
			background-size:100px 110px;

}		
.vaisseau:hover {
filter: contrast(1.6);
	transform: scale(1.1);
}




#range
{
background-color:red;
	background-repeat:no-repeat;
	overflow:hidden;
	background-size:100%;
	width:180px;
	height:180px;
	position:absolute;
	left:0px;
	top:0px;
	margin:2px;
	border-radius:180px;
opacity:50%;
display:none;
z-index:1;
}		
#rangealien
{
background-color:yellow;
	background-repeat:no-repeat;
	overflow:hidden;
	background-size:100%;
	width:540px;
	height:540px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:10;
	margin:2px;
	border-radius:540px;
opacity:50%;
display:none;
z-index:10;
}
#rangedrone
{
background-color:yellow;
	background-repeat:no-repeat;
	overflow:hidden;
	background-size:100%;
	width:320px;
	height:320px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:10;
	margin:2px;
	border-radius:350px;
opacity:50%;
display:none;
z-index:10;
}





		.cheminhexagon{
			position: relative;
			height: 110px;
			width: 100px;
			background: yellow;
			margin: 2px;
			clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
			transition: 1s;
			animation: animate 2s linear infinite;
		}

		.cheminteleport{
			background: green;
			margin: 2px;
			transition: 1s;
			animation: animate 2s linear infinite;
		}







.map
{
/*background-color:#b3b3b3;
background: rgb(60,0,88);
background: radial-gradient(circle, rgba(60,0,88,1) 9%, rgba(126,126,126,1) 85%);
background-color:#404040;*/
background: rgb(154,0,195);
background: radial-gradient(circle, rgba(154,0,195,1) 57%, rgba(0,188,236,1) 100%);
	background-repeat:no-repeat;
	background-size:100%;
	width:1080px;
	height:1010px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:2;
	margin:0px;	
	border-radius:30px;
	box-sizing: border-box;
	padding-top:130px;
	padding-left:70px;
}


.map2
{

background: rgb(205,205,205);
background: radial-gradient(circle, rgba(205,205,205,1) 47%, rgba(57,57,57,1) 100%);
	background-repeat:no-repeat;
	background-size:100%;
	width:1080px;
	height:1010px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:2;
	margin:0px;	
	border-radius:30px;
	box-sizing: border-box;
	padding-top:130px;
	padding-left:70px;
}
.map3
{
background-color:#ffd633;
	background-repeat:no-repeat;
	background-size:100%;
	width:1080px;
	height:1010px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:2;
	margin:0px;	
	border-radius:30px;
	box-sizing: border-box;
	padding-top:130px;
	padding-left:70px;
}

.minimap
{
background-image:url(images/minimap.png);
background-size:100px 100px;
	width:100px;
	height:100px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:1;
	margin:2px;	
	border-radius:100px;

	cursor:pointer;
	border:1px solid #006bb3;
}
.minimap:hover {
filter: contrast(1.8);
}

#animationteleport
{
background-image:url(images/lightspeed.gif);
background-size:1080px 1010px;
	width:1080px;
	height:1010px;
	position:absolute;
	left:0px;
	top:0px;
z-index:20;
	margin:0px;
display:none;
	border-radius:0px;
	box-sizing: border-box;
}



#statsencours
{
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:280px;
	height:210px;
	position:absolute;
	left:0px;
	bottom:10px;
	z-index:1;
	border-radius:10px;
}
#statscaseencours
{
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:280px;
	height:210px;
	position:absolute;
	left:0px;
	bottom:10px;
	z-index:1;
	border-radius:10px;
	display:none;
	font-size:6px;
}

#focus
{
background-image:url(images/focus.png);
background-size:280px 440px;
	width:280px;
	height:440px;
	position:absolute;
	left:10px;
	top:450px;
	z-index:1;
	border-radius:15px;
	text-align:left;
}


#displayselection
{
background: rgb(247,218,247);
background: radial-gradient(circle, rgba(247,218,247,1) 13%, rgba(82,0,120,1) 84%);
background-size:154px 170px;
	width:154px;
	height:170px;
	position:absolute;
	left:63px;
	top:30px;
	z-index:1;
	text-align:center;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display:none;
}


.btn3 {
	/*background-color:#e6e6e6;*/
	background-color:#800080;
	border-radius:50px;
	border:3px solid white;
	display:inline;
	cursor:pointer;
	color:white;
	font-family:Arial;
	font-size:17px;
	padding:12px 12px;
	text-decoration:none;
	font-weight:bold;
	width:180px;
	height:50px;
	z-index:1;
	margin-top:15px;
	margin-left:1px;
}
.btn3:hover {
	background-color: #00b8e6 !important;
}
.btn3:focus {
	background-color:#ffcc00;		
}

#boutonendturn
{
background-color:#800080;
	width:280px;
	height:70px;
	position:absolute;
	left:10px;
	bottom:5px;
	z-index:1;
		border:4px solid white;
		color:white;
}
#boutonendturn:hover {
	background-color: #00b8e6;
}

#boutoncancel
{
background-color:red;
	width:280px;
	height:70px;
	position:absolute;
	left:10px;
	bottom:5px;
	display:none;
	z-index:2;
			border:4px solid white;
			color:white;
}
#boutoncancel:hover {
	/*background-color: #00b8e6;*/
	background-color:#800000;
}




.statistiques
{
	width:35px;
	height:22px;
	text-align:center;
	background-color:transparent;
	border:none;
	color:white;
	font-size:13px;
	font-weight:bold;
font-family:Arial;	
font-style:italic;
margin-left:0px;
margin-top:0px;
display:inline;
}
.statistiquescaruburant
{
	width:40px;
	height:24px;
	text-align:center;
	background-color:transparent;
	border:none;
	color:black;
	font-size:22px;
	font-weight:bold;	
margin-left:0px;
margin-top:160px;
display:inline;
}

.statistiquescout
{
	width:50px;
	height:30px;
	text-align:center;
	background-color:transparent;
	border:none;
	color:white;
	font-size:25px;
	font-weight:bold;
font-family:Verdana;	
margin-left:25px;
margin-top:50px;
display:inline;
}
.statistiquescout1
{
	width:50px;
	height:30px;
	text-align:center;
	background-color:transparent;
	border:none;
	font-size:24px;
	font-weight:bold;
	font-family:Verdana;	
	display:inline;

color:#d9d9d9;	
margin-left:15px;
margin-top:48px;
}
.statistiquescout2
{
		width:50px;
	height:30px;
	text-align:center;
	background-color:transparent;
	border:none;
	font-size:24px;
	font-weight:bold;
	font-family:Verdana;	
	display:inline;
	
color:#1ac6ff;	
margin-left:35px;
margin-top:48px;
}
.statistiquescout3
{
		width:50px;
	height:30px;
	text-align:center;
	background-color:transparent;
	border:none;
	font-size:24px;
	font-weight:bold;
	font-family:Verdana;	
	display:inline;
	
/*color:#ffcc00;	*/
color:#e600ac;
margin-left:30px;
margin-top:48px;
}
#back
{
background-image:url(images/back.png);
background-size: 60px 60px;
	width:60px;
	height:60px;
	position:absolute;
	right:5px;
	top:5px;
	z-index:20;
	border-radius:60px;
	cursor:pointer;
		border:3px solid #cccccc;
		display:none;
}
#back:hover {
filter: contrast(1.8);
transform: scale(1.1);
}



#animationdecouverte
{
/*background-color:#000f1a;*/
background-color:black;
	background-repeat:no-repeat;
	background-size:100%;
	width:1080px;
	height:1010px;
	position:absolute;
	left:350px;
	top:0px;
z-index:11;
	margin:0px;
display:none;
	border-radius:0px;
	box-sizing: border-box;
}
#displaydecouverte
{
background-image:url(images/danger.png);
background-size: 300px 330px;
	width:300px;
	height:330px;
	position:absolute;
	left:390px;
	top:330px;
z-index:12;
	margin:0px;
display:none;
border-radius:0px;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
#danger
{
background-image:url(images/danger.png);
background-size: 600px 600px;
	width:600px;
	height:600px;
	position:absolute;
	left:240px;
	top:205px;
z-index:11;
	margin:0px;
display:block;
	border-radius:600px;
	box-sizing: border-box;
}
#decouvertecomplete
{
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:500px;
	height:80px;
	position:absolute;
	left:290px;
	top:50px;
z-index:3;
display:none;
	color:white;
	font-size:26px;
	font-weight:bold;
font-family:Verdana;
text-align:center;
padding-top:40px;
}




#contientcreation
{
background-color:#00131a;
	background-repeat:no-repeat;
	background-size:100%;
	width:260px;
	height:900px;
	position:absolute;
	left:50px;
	top:50px;
z-index:1;
	margin:0px;
	border-radius:10px;
	box-sizing: border-box;
}
#contientcreation2
{
background-color:#00131a;
	background-repeat:no-repeat;
	background-size:100%;
	width:260px;
	height:900px;
	position:absolute;
	left:340px;
	top:50px;
z-index:1;
	margin:0px;
	border-radius:10px;
	box-sizing: border-box;
}

.vaisseaucreation
{

background-size:180px 200px;
	width:180px;
	height:200px;
z-index:1;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

cursor:pointer;
}
.vaisseaucreation:hover {
filter: contrast(1.6);
}

.vaisseaucreationlock
{
			background-image:url(images/hexagonlock.png);
background-size: 180px 200px;
	width:180px;
	height:200px;
z-index:2;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

cursor:pointer;
}
.vaisseaucreationlock:hover {
filter: contrast(1.6);
}


#focusvaisseaux
{
background-image:url(images/focus.png);
background-size:280px 440px;
	width:280px;
	height:440px;
	position:absolute;
	right:40px;
	top:160px;
	z-index:1;
	border-radius:15px;
}


#displayselectionvaisseaux
{
background: rgb(247,218,247);
background: radial-gradient(circle, rgba(247,218,247,1) 13%, rgba(82,0,120,1) 84%);
background-size:154px 170px;
	width:154px;
	height:170px;
	position:absolute;
	left:63px;
	top:30px;
	z-index:1;
	text-align:center;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

#statsvaisseaux
{
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:280px;
	height:210px;
	position:absolute;
	left:0px;
	bottom:10px;
	z-index:1;
	border-radius:10px;
}
#coutsvaisseaux
{
background-image:url(images/ressources.png);
background-size:280px 100px;
	width:280px;
	height:100px;
	position:absolute;
	left:0px;
	top:490px;
	z-index:1;
	border-radius:10px;
}

#boutoncreation
{
		width:280px;
	height:70px;
	position:absolute;
	left:0px;
	top:620px;
}



#focuslab
{
background-image:url(images/focus.png);
background-size:280px 440px;
	width:280px;
	height:440px;
	position:absolute;
	right:40px;
	top:160px;
	z-index:1;
	border-radius:15px;
}

#displaylab
{
background-image:url(images/focus.png);
background-size:170px 170px;
	width:170px;
	height:170px;
	position:absolute;
	left:63px;
	top:30px;
	z-index:1;
	border-radius:200px;
	display:none;
}


#coutslab
{
background-image:url(images/ressources.png);
background-size:280px 100px;
	width:280px;
	height:100px;
	position:absolute;
	left:0px;
	top:490px;
	z-index:1;
	border-radius:10px;
}

#boutonupgrade
{
		width:280px;
	height:70px;
	position:absolute;
	left:0px;
	top:620px;
}

.amelioration
{
background-image:url(images/upgradevie.png);
background-size:80px 80px;
	width:80px;
	height:80px;
z-index:2;
border-radius:80px;
cursor:pointer;
border:4px solid white;
display:block;
position:absolute;
top:10px;
left:10px;
}
.amelioration:hover {
filter: contrast(1.6);
transform: scale(1.2);
}


.ameliorationlocked
{
background-image:url(images/lock.png);
background-size: 80px 80px;
	width:80px;
	height:80px;
z-index:3;
border-radius:80px;
cursor:pointer;
border:4px solid white;
display:block;
position:absolute;
top:0px;
left:10px;
}


#contientupgrade1
{
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:670px;
	height:80px;
	position:absolute;
	left:0px;
	bottom:60px;
	z-index:1;
	margin:0px;
	border-radius:10px;
	box-sizing: border-box;
	text-align:left;
}
#contientupgrade2
{
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:670px;
	height:80px;
	position:absolute;
	left:0px;
	bottom:240px;
	z-index:1;
	margin:0px;
	border-radius:10px;
	box-sizing: border-box;
	text-align:left;
}
#contientupgrade3
{
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:670px;
	height:80px;
	position:absolute;
	left:0px;
	bottom:420px;
	z-index:1;
	margin:0px;
	border-radius:10px;
	box-sizing: border-box;
	text-align:left;
	padding-left:40px;
}
#contientupgrade4
{
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:670px;
	height:80px;
	position:absolute;
	left:0px;
	bottom:600px;
	z-index:1;
	margin:0px;
	border-radius:10px;
	box-sizing: border-box;
	text-align:left;
}
#contientupgrade5
{
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:670px;
	height:80px;
	position:absolute;
	left:0px;
	bottom:780px;
	z-index:1;
	margin:0px;
	border-radius:10px;
	box-sizing: border-box;
	text-align:left;
}

#upgrade1
{position:absolute;
	left:140px;
	top:0px;
background-image:url(images/upgradevie.png);
}
#upgrade2
{position:absolute;
	left:420px;
	top:0px;
background-image:url(images/upgradeattaque.png);
}
#upgrade3
{position:absolute;
background-image:url(images/upgradevie.png);
	left:70px;
	top:0px;
}
#upgrade4
{position:absolute;
background-image:url(images/upgradeproductivite.png);
		left:210px;
	top:0px;
}
#upgrade5
{position:absolute;
background-image:url(images/upgradeprecision.png);
	left:350px;
	top:0px;
}
#upgrade6
{position:absolute;
background-image:url(images/upgradeattaque.png);
		left:490px;
	top:0px;
}
#upgrade7
{position:absolute;
background-image:url(images/upgradevie.png);
	left:70px;
	top:0px;
}
#upgrade8
{position:absolute;
background-image:url(images/upgradestation.png);
	left:210px;
	top:0px;
}
#upgrade9
{position:absolute;
background-image:url(images/upgradechasseur.png);
		left:350px;
	top:0px;
}
#upgrade10
{position:absolute;
background-image:url(images/upgradeattaque.png);
		left:490px;
	top:0px;
}
#upgrade11
{	position:absolute;
	left:70px;
	top:0px;
background-image:url(images/upgradevie.png);
}
#upgrade12
{	position:absolute;
	left:210px;
	top:0px;
background-image:url(images/upgradeproductivite.png);
}
#upgrade13
{	position:absolute;
	left:350px;
	top:0px;
background-image:url(images/upgradeprecision.png);
}
#upgrade14
{	position:absolute;
	left:490px;
	top:0px;
background-image:url(images/upgradeattaque.png);
}
#upgrade15
{	position:absolute;
	left:140px;
	top:0px;
background-image:url(images/upgradebaselunaire.png);
}

#upgrade16
{	position:absolute;
	left:280px;
	top:0px;
background-image:url(images/upgradecarburant.png);
}
#upgrade17
{	position:absolute;
	left:420px;
	top:0px;
background-image:url(images/upgradebattleship.png);
}

#contientarbre
{	background-image:url(images/arbre1.png);
background-size:670px 900px;
	width:670px;
	height:900px;
	position:absolute;
	left:30px;
	top:50px;
z-index:1;
	margin:0px;
	border-radius:10px;
	box-sizing: border-box;
}

#iconevie
{	background-image:url(images/iconevie.png);
background-size:25px 25px;
	position:absolute;
	left:27px;
	top:8px;
}
#iconeattaque
{	background-image:url(images/iconeattaque.png);
background-size:25px 25px;
	position:absolute;
	left:27px;
	top:47px;
}
#iconeprecision
{	background-image:url(images/iconeprecision.png);
background-size:25px 25px;
	position:absolute;
	left:27px;
	top:84px;
}
#iconeproductivite
{	background-image:url(images/iconeproductivite.png);
background-size:25px 25px;
	position:absolute;
	left:27px;
	top:122px;
}
#iconecarburant
{	background-image:url(images/iconecarburant.png);
background-size:25px 25px;
	position:absolute;
	left:27px;
	top:160px;
}


#iconevievaisseaux
{	background-image:url(images/iconevie.png);
background-size:25px 25px;
	position:absolute;
	left:27px;
	top:8px;
}
#iconeattaquevaisseaux
{	background-image:url(images/iconeattaque.png);
background-size:25px 25px;
	position:absolute;
	left:27px;
	top:47px;
}
#iconeprecisionvaisseaux
{	background-image:url(images/iconeprecision.png);
background-size:25px 25px;
	position:absolute;
	left:27px;
	top:84px;
}
#iconeproductivitevaisseaux
{	background-image:url(images/iconeproductivite.png);
background-size:25px 25px;
	position:absolute;
	left:27px;
	top:122px;
}
#iconecarburantvaisseaux
{	background-image:url(images/iconecarburant.png);
background-size:25px 25px;
	position:absolute;
	left:27px;
	top:160px;
}


#iconemetal
{	background-image:url(images/iconemetal.png);
background-size:25px 25px;
	position:absolute;
	left:27px;
	top:8px;
}
#iconecristal
{	background-image:url(images/iconecristal.png);
background-size:25px 25px;
	position:absolute;
	left:27px;
	top:49px;
}
#iconeargent
{	background-image:url(images/iconeargent.png);
background-size:25px 25px;
	position:absolute;
	left:27px;
	top:88px;
}
#iconeattaquecase
{	background-image:url(images/iconeattaquecase.png);
background-size:25px 25px;
	position:absolute;
	left:27px;
	top:149px;
}

.iconestats
{background-color:green;
display:inline-block;
    width: 25px;
    height: 25px;
    border:2px solid white;
    border-radius: 25px; 

}


.avancementhead
{
display:inline;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    width: 145px;
    height: 20px;
    padding: 3px 3px 3px 3px;
    background: #333; 
    background: -webkit-linear-gradient(#2d2d2d,#444);
    background:    -moz-linear-gradient(#2d2d2d,#444);
    background:      -o-linear-gradient(#2d2d2d,#444);
    background:         linear-gradient(#2d2d2d,#444);
    background:        white;
    border:2px solid black;
    border-radius: 20px;
    box-shadow: 0 1px 0 rgba(255,255,255,.2);  
	margin-top:14px;
	margin-left:68px;
}

progress {
  border-radius:10px; 
  width: 60px;
  height: 5px;
  margin-left: 20px;
  margin-top:4px;
}
progress::-webkit-progress-bar {
  background-color: black;
  border-radius: 20px;
}
progress::-webkit-progress-value {
background-color: var(--c,#1e1e15);
  border-radius: 20px;
   border:1px solid black;
  
}
progress::-moz-progress-bar {
 background-color: black;
  border-radius: 20px;
}

#help
{
	background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:1065px;
	height:40px;
	position:absolute;
	left:350px;
	bottom:10px;
	z-index:5;
	display:block;	
	text-align:center;
	border-radius:10px;
	color:black;
	font-size:16px;
	font-weight:bold;
	font-family:Verdana;
	padding-top:20px;
	padding-left:5px;
	padding-right:5px;
	border:solid 2px black;
	font-style: italic;
}
#helpicon
{
	background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:300px;
	height:60px;
	position:absolute;
	left:20px;
	bottom:10px;
	z-index:5;
	display:none;	
	text-align:center;
	border-radius:10px;
	border:solid 2px black;
}

.contientcarbu
{background-color:black;
display:block;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    width: 143px;
    height: 20px;
   text-align:left;
    border:2px solid white;
    border-radius:20px; 
	margin-top:13px;
	margin-left:68px;
	padding-left:3px;
}

.carbu
{background-image:url(images/carbuvide.png);
background-size:11px 12px;
display:inline-block;
    width: 11px;
    height: 12px;
   background-color:transparent; 
	margin-left:2px;
	margin-top:2px;
}


#divlab
{
background-image:url(images/iconelab2.png);
background-size:130px 130px;
	width:130px;
	height:130px;
	position:absolute;
	left:300px;
	top:770px;
	z-index:2;
	display:block;	
	text-align:center;
		cursor:pointer;
		border-radius:130px;
		border:3px solid #00b8e6;
}
#divlab:hover {
filter: contrast(1.6);
transform: scale(1.2);
}

#divtrade
{
background-image:url(images/iconetrade2.png);
background-size:130px 130px;
	width:130px;
	height:130px;
	position:absolute;
	left:800px;
	top:400px;
	z-index:2;
	display:block;	
	text-align:center;
		cursor:pointer;
		border-radius:130px;
		border:3px solid #b300b3;
}
#divtrade:hover {
filter: contrast(1.6);
transform: scale(1.2);
}
#divmap
{
background-image:url(images/iconemap2.png);
background-size:130px 130px;
	width:130px;
	height:130px;
	position:absolute;
	left:200px;
	top:120px;
	z-index:2;
	display:block;	
	text-align:center;
		cursor:pointer;
		border-radius:130px;
		/*border:3px solid #00b8e6;*/
		border:3px solid #00b359;
}
#divmap:hover {
filter: contrast(1.6);
transform: scale(1.2);
}

#seegalaxy
{
background-image:url(images/boutongalaxy.png);
background-size:140px 140px;
	width:140px;
	height:140px;
	position:absolute;
	left:68px;
	top:35px;
z-index:1;
display:block;
	border-radius:150px;
border:4px solid #00b8e6;
	cursor:pointer;
}
#seegalaxy:hover {
filter: contrast(1.6);
transform: scale(1.1);
}


#creationvaisseau1
{background-image:url(images/hexagondrone.png);
	position:absolute;
	left:40px;
	top:20px;
}
#creationvaisseau2
{background-image:url(images/hexagonstation.png);
	position:absolute;
	left:40px;
	top:240px;
}
#creationvaisseau3
{background-image:url(images/hexagonchasseur.png);
	position:absolute;
	left:40px;
	top:460px;
}
#creationvaisseau4
{background-image:url(images/hexagonbaselunaire.png);
	position:absolute;
	left:40px;
	top:680px;
}
#creationvaisseau5
{background-image:url(images/hexagonbattleship.png);
	position:absolute;
	left:40px;
	top:20px;
}


#masquevaisseaucreation2
{
	position:absolute;
	left:40px;
	top:240px;
}
#masquevaisseaucreation3
{
	position:absolute;
	left:40px;
	top:460px;
}
#masquevaisseaucreation4
{
	position:absolute;
	left:40px;
	top:680px;
}
#masquevaisseaucreation5
{
	position:absolute;
	left:40px;
	top:20px;
}

#statscarburant
{
	position:absolute;
	right:26px;
	bottom:20px;
}


#statscarburantvaisseaux
{
	position:absolute;
	right:26px;
	bottom:20px;
}


.boutonmenuvaisseau
{
background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	width:80px;
	height:80px;
z-index:2;
border-radius:0px;
cursor:pointer;
border:3px solid #e6e6e6;
display:inline-block;
margin-top:0px;
margin-left:0px;
	border-radius:80px;
}
.boutonmenuvaisseau:hover {
filter: contrast(1.8);
transform: scale(1.2);
}


#contienttrade
{
/*background-color:#00131a;*/
background-color:#002233;
	background-repeat:no-repeat;
	background-size:100%;
	width:260px;
	height:900px;
	position:absolute;
	left:50px;
	top:50px;
z-index:1;
	margin:0px;
	border-radius:10px;
	box-sizing: border-box;
}
#contienttrade2
{
background-color:#002233;
	background-repeat:no-repeat;
	background-size:100%;
	width:260px;
	height:900px;
	position:absolute;
	left:340px;
	top:50px;
z-index:1;
	margin:0px;
	border-radius:10px;
	box-sizing: border-box;
}

.trades
{
background-image:url(images/iconetrade.png);
background-size:180px 200px;
	width:180px;
	height:200px;
z-index:1;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
cursor:pointer;
}
.trades:hover {
filter: contrast(1.6);
transform: scale(1.1);
}



#focustrade
{
background-image:url(images/focus.png);
background-size:280px 440px;
	width:280px;
	height:440px;
	position:absolute;
	right:40px;
	top:160px;
	z-index:1;
	border-radius:15px;
}


#coutstrade
{
background-image:url(images/ressources.png);
background-size:280px 100px;
	width:280px;
	height:100px;
	position:absolute;
	left:0px;
	top:490px;
	z-index:1;
	border-radius:10px;
}

#boutontrade
{
		width:280px;
	height:70px;
	position:absolute;
	left:0px;
	top:620px;
}

#trade1
{
	background-image:url(images/traderepair.png);
	position:absolute;
	left:40px;
	top:20px;
}
#trade2
{	background-image:url(images/tradefuel.png);
	position:absolute;
	left:40px;
	top:240px;
}
#trade3
{	background-image:url(images/traderepair2.png);
	position:absolute;
	left:40px;
	top:460px;
}
#trade4
{
	background-image:url(images/tradefuel2.png);
	position:absolute;
	left:40px;
	top:680px;
}
#trade5
{
	background-image:url(images/tradeexchange.png);
	position:absolute;
	left:40px;
	top:20px;
}
#trade6
{	background-image:url(images/tradeexchange2.png);
	position:absolute;
	left:40px;
	top:240px;
}
#trade7
{	background-image:url(images/tradeexchange3.png);
	position:absolute;
	left:40px;
	top:460px;
}
#trade8
{
	background-image:url(images/tradeexchange2.png);
	position:absolute;
	left:40px;
	top:680px;
}

#animationpurchase
{
/*background-color:#0d0d0d;*/

background-image:url(images/animationpurchase.png);
background-size: 1080px 1010px;
	width:1080px;
	height:1010px;
	position:absolute;
	left:350px;
	top:0px;
z-index:22;
	margin:0px;
display:none;
	border-radius:0px;
	box-sizing: border-box;
}
#purchasecomplete
{
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:500px;
	height:80px;
	position:absolute;
	left:290px;
	top:100px;
z-index:3;
display:block;
	color:white;
	font-size:20px;
	font-weight:bold;
font-family:Verdana;
text-align:center;
padding-top:40px;
}
#purchase
{
background-image:url(images/focus.png);
background-size: 110px 110px;
	width:110px;
	height:110px;
	position:absolute;
	left:490px;
	top:450px;
z-index:2;
	margin:0px;
display:block;
	border-radius:110px;
	/*clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);*/
}



.statsheader
{
	width:80px;
	height:30px;
	text-align:center;
	background-color:transparent;
	border:none;
	color:black;
	font-size:28px;
	font-weight:bold;
font-family:Arial;	
margin-left:170px;
margin-top:13px;
display:block;
}

#boutonbuild
{background-image:url(images/boutonbuild.png);
background-size: 80px 80px;
	position:absolute;
	left:155px;
	top:70px;
		border:3px solid #00b8e6;
}
#boutonmove
{background-image:url(images/boutonmove.png);
background-size: 80px 80px;
	position:absolute;
	left:45px;
	top:70px;
	border:3px solid #e600ac;
}
#boutonlumiere
{
display:none;
}



#impact
{background-color:black;
background-image:url(images/impact.gif);
background-size: 100px 80px;
	width:100px;
	height:110px;
	position:absolute;
	left:10px;
	top:10px;
z-index:15;
display:none;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}



#barreressourceattaque
{
margin-top:35px;
}

#playerencours
{
	color:#00e6e6;
	font-size:20px;
	font-weight:bold;
font-family:Verdana;	
margin-left:166px;
margin-top:14px;
display:block;
}
#totalexploration
{
	color:white;
	font-size:20px;
	font-weight:bold;
font-family:Verdana;	
margin-left:166px;
margin-top:11px;
display:block;
}


#gotominitop
{
background-image:url(images/arrowtop.png);
background-size: 40px 40px;
	width:40px;
	height:40px;
	position:absolute;
	left:119px;
	top:30px;
	z-index:1;
	border-radius:50px;
	cursor:pointer;
		border:3px solid #008ae6;
}
#gotominitop:hover {
filter: contrast(1.8);
transform: scale(1.1);
}
#gotominibottom
{
background-image:url(images/arrowbottom.png);
background-size: 40px 40px;
	width:40px;
	height:40px;
	position:absolute;
	left:119px;
	bottom:28px;
	z-index:7;
	border-radius:100px;
	cursor:pointer;
	border:3px solid #008ae6;
}
#gotominitop:hover {
filter: contrast(1.8);
transform: scale(1.1);
}
#gotominiright
{
background-image:url(images/arrowright.png);
background-size: 40px 40px;
	width:40px;
	height:40px;
	position:absolute;
	right:49px;
	top:89px;
	z-index:7;
	border-radius:100px;
	cursor:pointer;
	border:3px solid #008ae6;
}
#gotominiright:hover {
filter: contrast(1.8);
transform: scale(1.1);
}
#gotominileft
{
background-image:url(images/arrowleft.png);
background-size: 40px 40px;
	width:40px;
	height:40px;
	position:absolute;
	left:51px;
	top:89px;
	z-index:7;
	border-radius:100px;
	cursor:pointer;
	border:3px solid #008ae6;
}
#gotominileft:hover {
filter: contrast(1.8);
transform: scale(1.1);
}
#gotominicenter
{
background-image:url(images/arrowcenter.png);
background-size: 40px 40px;
	width:40px;
	height:40px;
	position:absolute;
	left:119px;
	top:89px;
	z-index:7;
	border-radius:100px;
	cursor:pointer;
	border:3px solid #008ae6;
}
#gotominicenter:hover {
filter: contrast(1.8);
transform: scale(1.1);
}


#boutonstart
{
background-image:url(images/boutonplay.png);
background-size:150px 150px;
	width:150px;
	height:150px;
	position:absolute;
	left:650px;
	top:470px;
	z-index:1;
	border-radius:150px;
	cursor:pointer;
	border:3px solid #008ae6;
		font-weight:bold;
	color:white;
	font-size:30px;
font-family:Arial;
text-align:center;	
}
#boutonstart:hover {
filter: contrast(1.8);
transform: scale(1.2);
}

#boutonsolostart
{
background-image:url(images/boutonplay.png);
background-size:150px 150px;
	width:150px;
	height:150px;
	position:absolute;
	left:650px;
	top:470px;
	z-index:1;
	border-radius:150px;
	cursor:pointer;
	border:3px solid #008ae6;
		font-weight:bold;
	color:white;
	font-size:30px;
font-family:Arial;	
text-align:center;	
}
#boutonsolostart:hover {
filter: contrast(1.8);
transform: scale(1.2);
}

#boutonturn
{
background-image:url(images/boutonplay.png);
background-size:150px 150px;
	width:150px;
	height:150px;
	position:absolute;
	left:650px;
	top:470px;
	z-index:1;
	border-radius:150px;
	cursor:pointer;
	border:3px solid #008ae6;
			font-weight:bold;
	color:white;
	font-size:30px;
font-family:Arial;
text-align:center;	
}
#boutonturn:hover {
filter: contrast(1.8);
transform: scale(1.2);
}


#boutonregles
{
background-image:url(images/boutonregles.png);
background-size: 50px 50px;
	width:50px;
	height:50px;
	position:absolute;
	right:10px;
	bottom:15px;
	z-index:6;
	border-radius:30px;
	cursor:pointer;
		border:3px solid #262626;
		display:block;
}
#boutonregles:hover {
filter: contrast(1.6);
transform: scale(1.1);
}


#next
{
background-image:url(images/arrowright.png);
background-size: 100px 100px;
	width:100px;
	height:100px;
	position:absolute;
	right:10px;
	top:500px;
	z-index:20;
	border-radius:100px;
	cursor:pointer;
		border:4px solid #008ae6;
}
#next:hover {
filter: contrast(1.8);
transform: scale(1.1);
}