a, a:link,a:visited,a:active, a:hover{
	color: inherit;
	text-decoration: none;
	font-weight: bold;
}
body{
	overflow: scroll;
}
@font-face {
font-family: 'PlayfairDisplay';
src: url('../fonts/PlayfairDisplay-Regular.ttf');
font-family: "Roboto-Light"; 
src: url('../fonts/Roboto-Light.ttf');
}
html { 
	margin-top: 0!important;
	background-color: #f2f2f2 ;	
}
#carte{ 
	margin:0 auto; 
	text-align:center;
	position:relative;
}
#fd-carte{
	display: block;
	margin: 0 auto;
}	
#visites{
	position: absolute; 
	top:0;
	left:0;
}
#fermer{
	width:40px;
	height:40px;
	background-color: #7fc7af;
	position: absolute;
	right:5px;
	font-family: arial, sans-serif; 
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	color: #ffffff;
	cursor: pointer;
}
#fermer.ferme{
	display: none;
}
#fermer.ouvert{
	display: block;
}
div.circle{
	width:25px; 
	height:25px; 
	border-radius:50%;
	border: 2px solid #ffffff;
	position: absolute;
	background-color: #7fc7af;
	cursor:pointer;
	z-index: 20;
}
div.circle{
	width:25px; 
	height:25px; 
	border-radius:50%;
	border: 2px solid transparent;
	position: absolute;
	background-color: transparent;
	cursor:pointer;
	z-index: 20;
}
div.circle h3{
	width: 150px; 
	position: absolute;
	background-color: #fff;
	right: -150px;
	bottom: 0;
	padding:5px;
	color: #7fc7af;
	display: none;
	cursor:pointer;
	text-align: center; 
	border: solid 2px #7fc7af;
}
#nord-ouest div.circle h3{
	top:8px;
	width: 150px; 
	position: absolute;
	background-color: #fff;
	right: 0;
	height: 23px;
	padding:5px;
	color: #7fc7af;
	display: none;
	cursor:pointer;
	text-align: center;
	border: solid 2px #7fc7af;
}
div.circle:hover h3, #nord-ouest div.circle:hover h3{
	display: block;
}
.info-carte{
	border: solid #7fc7af 2px;
	width: 250px;
	max-height: 800px;	
	position: relative;
	display: none;
	overflow: auto;
}
.info-carte img{
	height: auto;
	width: 100%;
	display:block;
	padding: 0;
}
.info-carte p{
	color: #7fc7af;
	background-color: #ffffff;
	padding: 5px 0;
	margin: 0;
}
h2{
	background-color: #7fc7af;
	color: #ffffff;
	font-size:18px;
	font-family: verdana,sans-serif;
	text-align: center;
	padding: 10px;
	margin:0;
}
.affiche{
	display: block!important;
	z-index: 201;
}
h3.affiche{
	display: block!important;
	z-index: 200!important;
	background-color: #7fc7af!important;
	border: solid 2px #ffffff!important;
	color: #ffffff!important;
}
div.circle.affiche{
	display: block!important;
	z-index: 200!important;
	background-color: #ffffff!important;
	border: solid 1px #7fc7af!important;
	color: #7fc7af!important;
}
div.circle.affiche{
	display: block!important;
	z-index: 200!important;
	background-color: transparent!important;
	border: solid 1px transparent!important;
	color: #7fc7af!important;
}
div.circle.premierplan{ 
	z-index:300;
}
#titre{
	position: absolute;
	top:0;
	left: 15px;
}
#titre img{
	position: relative;
	left: 25px;
}
.menu{
	margin: 0;
	padding:0;
}
.menu li{
	background: #7fc7af none repeat scroll 0 0;
    color: #fff;
	font-family: "Roboto-Light", sans-serif;
	font-weight: normal;
    display: inline-block;
    letter-spacing: 1px;
    line-height: 1.5;
    margin: 3px 3px 3px 0;
    padding: 0.375em 0.8em;
    text-transform: uppercase;
    transition: background 0.3s ease-in-out 0s;
}
/* CHARGMENT */
#chargement{
	width: 100%;
	height: 100%;
	padding: 20px;
	background-color: #f2f2f2;
	position: absolute;
	top: 0;
	left: 0;
	z-index:9999;
	color: #000000;
	text-align: center;
	vertical-align: middle;
}
/* position des cercles sur la carte */
#rd-jardindesplantes{
	left: 64%;
	top: 65%;
}
#rd-perelachaise{
	left: 79%;
	top: 45%;
}
#rd-paris5{
	left: 56%;
	top: 59%;
}
#rd-palaisroyal{
	left: 50%;
	top: 45%;
}
#rd-butteauxcailles{
	left: 61%;
	top: 83%;
}
#rd-paris4{
	left: 54%;
	top: 54%;
}
#rd-paris1{
	left: 57%;
	top: 46.5%;
}
#rd-paris8{
	left: 38.5%;
	top: 42.5%;
}
#rd-carreaudutemple{
	left: 63%;
	top: 43%;
}
#rd-lavillette{
	left: 75%;
	top: 10%;
}
#rd-lemarais{
	left: 61%;
	top: 47%;
}
#rd-opera{
	left: 44%;
	top: 29%;
}
#rd-garedelest{
	left: 60%;
	top: 30%;
}
#rd-gdsbv{
	left: 52%;
	top: 37%;
}
#rd-monceau{
	left: 37.5%;
	top: 23%;
}
#rd-acclimatation{
	left: 12%;
	top: 33%;
}
#rd-bastille{
	left: 67.5%;
	top: 55%;
}
#rd-garedelyon{
	left: 71%;
	top: 63%;
}
#rd-montmartre{
	left: 50%;
	top: 20%;
}
#rd-paris20{
	left: 86%;
	top: 38%;
}
#rd-belleville{
	left: 75%;
	top: 30.5%;
}
#rd-paris14{
	left: 52%;
	top: 77%;
}
#rd-paris15{
	left: 27%;
	top: 72.5%;
}
#rd-paris16{
	left: 15.2%;
	top: 61.5%;
}
#rd-chaillot{
	left: 24%;
	top: 41.6%;
}
#rd-versailles{
	left: 1%;
	top: 89.5%;
}
#rd-paris6{
	left: 50%;
	top: 58.5%;
}
#rd-nord-ouest{
	left: 16.1%;
	top: 4.2%;
}
#rd-ouest{
	left: 5.1%;
	top: 39%;
}
#rd-boisdevincennes{
	left: 92%;
	top: 68.4%;
}
#rd-paris7{
	left: 41.5%;
	top: 56%;
}
#rd-paris10{
	left: 59%;
	top: 39%;
}
#rd-arcdetriomphe{
	left: 32.7%;
	top: 32.5%;
}
#rd-paris13{
	left: 68.7%;
	top: 76.9%;
}
#rd-clignancourt{
	left: 49%;
	top: 7.6%;
}
/* ASCENSEUR */
/* scrollbar styling non-standard version */
.info-carte::-webkit-scrollbar {
  width: 1rem;
  background-color: #ffffff; 
}
.info-carte::-webkit-scrollbar-thumb {
    background: #7fc7af; 
}
/* scrollbar styling standard version */
.info-carte {
  scrollbar-color:  #7fc7af #ffffff;
  scrollbar-width: thin;
}


/* RESPONSIVE */
@media screen and (max-width:960px){
	#chargement img{ 
		width: 90%;
		max-width: 350px;
		left:0;
	}
	#chargement{ 
		margin: auto;
		text-align: center;
		left:0;
		padding: 0px;
	}
	#titre{
		position: relative;
		margin: auto;
		text-align: center;
		left:0;
	}
	#titre img{ 
		width: 100%;
		max-width: 350px;
		left:0;
	}
	#page{
		position: relative;
		margin: auto;
	}
	#carte{ 
		margin:0 auto; 
		text-align:center;
		position:relative;
		width: 95%;
	}
	#carte img{ 
		width: 100%;
		left:0;
	}
	.menu{
		width: 97%;
		margin: auto;
	}
	.menu li{
		display: inline-block;
		font-size: .8em;
	}
	.menu ul{
		width: 100%;
		left:0;
		padding:0;
		margin:0;
	}
	#visites{
		position: relative;
		left:0;
		width: 100%;
	}
	.info-carte{
		border: solid #7fc7af 2px;
		width: 90%;	
		position: relative;
		display: block;
		margin: auto;
		border-bottom: #ffffff solid 1px;
	}
	.info-carte h2{
		cursor: pointer;
	}
	.info-carte a{
		display: none;
	}
	.info-carte p{
		padding: 0;
	}
	div.circle:hover h3{
		display: none;
	}
}