@font-face {
  font-family: 'GoboldThin';
  src: url('GoboldThin.eot?#iefix') format('embedded-opentype'),  url('GoboldThin.woff') format('woff'), url('GoboldThin.ttf')  format('truetype'), url('GoboldThin.svg#GoboldThin') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
	background-color:rgba(255,255,255,1.0);
	margin:0;
	padding:0;	
	font-family:arial;
}

.big-container {
	position:absolute;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	background-color:#00335a;
}

.parentContainer{
	width: 100vw; 
    height: 56.25vw;
	max-height: 100vh;
    max-width: 177.78vh; /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
}

.lightBox{
	width: 100vw; 
    height: 100vh;
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
	background-color:rgba(0,0,0,0.8);
	display:none;
	opacity:0.0;
}

.iFrame_Container{
	width: 80vw; 
    height: 51.875vw;
	max-height: 80vh;
    max-width: 123.3749vh;
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
	background-color:rgba(255,255,255,1);
	border: 3px solid  #000;
}

.ifrm-axo{
	width: 100%; 
    height: 100%;
    margin: 0;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
	background-color:rgba(255,255,255,1);
	border: 0;
	overflow:hidden;
}

#fermerFrame{
	position:absolute;
	top:-1vw;
	right:-1vw;
	width:2vw;
	height:2vw;
	border:0px;
	cursor:pointer;
	margin:0;
}

.container-map {
	position:absolute;
	margin:auto;
	width: 70vw; 
    height: 37.5521vw;
	max-height: 70vh;
    max-width: 130.4854vh;
	top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */	
}

.imgFond {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:2px solid #00335a;
}

#panel_BatA {	
	opacity:0.0;
	cursor:pointer;
}
#panel_BatB {	
	opacity:0.0;
	cursor:pointer;
}
#panel_BatC {	
	opacity:0.0;
	cursor:pointer;
}
#panel_BatD {	
	opacity:0.0;
	cursor:pointer;
}
#panel_BatE {	
	opacity:0.0;
	cursor:pointer;
}
#panel_BatF {	
	opacity:0.0;
	cursor:pointer;
}
#Bat_A{	
	cursor:pointer;
}
#Bat_B{	
	cursor:pointer;
}
#Bat_C{	
	cursor:pointer;
}
#Bat_D{	
	cursor:pointer;
}
#Bat_E{	
	cursor:pointer;
}
#Bat_F{	
	cursor:pointer;
}
.batAB{
	fill:rgba(110, 217, 1, 0.3);
	stroke: #fff;
	stroke-miterlimit: 10;
	stroke-width: 3px;
	opacity:0.0;
	transition: opacity 0.3s linear;
	cursor:pointer;
}
#Bat_A:hover > .batAB{
	opacity:1.0;
	transition: opacity 0.3s linear;
}
#Bat_A:hover > #panel_BatA {	
	opacity:1.0;
}

#Bat_B:hover > .batAB{
	opacity:1.0;
	transition: opacity 0.3s linear;
}
#Bat_B:hover > #panel_BatB {	
	opacity:1.0;
}

.batC{
	fill:rgba(255, 147, 38, 0.3);
	stroke: #fff;
	stroke-miterlimit: 10;
	stroke-width: 3px;
	opacity:0.0;
	transition: opacity 0.3s linear;
	cursor:pointer;
}
#Bat_C:hover > .batC{
	opacity:1.0;
	transition: opacity 0.3s linear;
}
#Bat_C:hover > #panel_BatC {	
	opacity:1.0;
}

.batDE{
	fill:rgba(255, 53, 107, 0.3);
	stroke: #fff;
	stroke-miterlimit: 10;
	stroke-width: 3px;
	opacity:0.0;
	transition: opacity 0.3s linear;
	cursor:pointer;
}
#Bat_D:hover > .batDE{
	opacity:1.0;
	transition: opacity 0.3s linear;
}
#Bat_D:hover > #panel_BatD {	
	opacity:1.0;
}

#Bat_E:hover > .batDE{
	opacity:1.0;
	transition: opacity 0.3s linear;
}
#Bat_E:hover > #panel_BatE {	
	opacity:1.0;
}

.batF{
	fill:rgba(53, 153, 255, 0.3);
	stroke: #fff;
	stroke-miterlimit: 10;
	stroke-width: 3px;
	opacity:0.0;
	transition: opacity 0.3s linear;
	cursor:pointer;
}
#Bat_F:hover > .batF{
	opacity:1.0;
	transition: opacity 0.3s linear;
}
#Bat_F:hover > #panel_BatF {	
	opacity:1.0;
}

.blanc {
	fill: #fff;
	fill-rule: evenodd;
}

.vert {
	fill: #6ed901;
	fill-rule: evenodd;
}

.bleu {
	fill: #3599ff;
	fill-rule: evenodd;
}

.orange {
	fill: #ff9326;
	fill-rule: evenodd;
}

.rose {
	fill: #ff356b;
	fill-rule: evenodd;
}

.fondPuces {
    fill: #3e3f44;
    fill-rule: evenodd;
}

.textPuces {
    font-size: 18px;
    font-family: GoboldThin;	
    fill: #ffffff;
}

.textAxo{
    font-size: 30px;
    font-family: GoboldThin;	
    fill: #222;
}

#idBat{
    font-size: 30px;
    font-family: GoboldThin;	
    fill: #FFF;
}

.affBat{
	position:absolute;
	width:12vw;
	height:5vw;
	min-width:120px;
	left:2%;
	top:0;
	margin:0;
	padding:0;
}

/* Select Batiment */
.selectBat{
	position:absolute;
	width:12vw;
	height:10vh;
	min-width:120px;
	left:0;
	right:0;
	bottom:2vh;
	margin:0 auto;
	padding:0;
}
.boutonFond {
    fill: #bbb;
    stroke: #fff;
    stroke-miterlimit: 10;
    fill-rule: evenodd;
}

.textBouton {
    font-size: 20px;
    fill: #222;
    font-family: GoboldThin;
}

/* Logo GreenCity */
.logo_GreenCity{
	position:absolute;
	width:12vw;
	height:10vh;
	min-width:120px;
	left:2vw;
	top:2vh;
	margin:0;
	padding:0;
}

.cls-1 {
	fill: #00335a;
}
.cls-2 {
	fill: #fff;
}
.cls-3 {
	fill: #94b0b7;
}
.cls-4 {
	fill: #c5a877;
}