html{
  background-color:rgba(0,0,0,0.5);
	font-family: 'Lobster', cursive;
}

#droite{
	float: right;
	width: 40%;
	position: fixed;
	margin-left: 60%;
}


        	.map{
        				position:relative;
        				box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
        				margin:20px auto
        				}


			.map__image{position:relative;
        				top:0;
        				left:0;
        				bottom:0;
						width:480px
						
						}


        	.map__image svg
        				{width:100%;
        				height:370px}

        	.map__image path{
        				fill:rgb(37 96 167);
        				stroke:#FFFFFF;
        				stroke-width:1px;
        				transition:fill .3s}
        	.map__image .is-active path{
        				fill:rgba(158, 28, 57,1)}
        	.map__list{
        				margin-left: 6%;
        				float:left;
        				width:60%;
        				border-left:1px solid #dbdbdb}
        	.map__list li,.map__list ul{
        				margin:0;
        				padding:0;
        				list-style:none}
        	.map__list a{
        				box-shadow:0 1px 3px rgba(0,0,0,0.2),0 1px 2px rgba(0,0,0,.24);
        				background-color:white;
        				border-radius:20px;
        				margin-bottom:5px;
        				padding-left:10px;
        				display:inline-block;
        				height:30px;
        				width:100%;
        				line-height:30px;
        				color:inherit;
        				text-decoration:none;
        				transition:.3s}
        	.map__list a.is-active{
        				color:rgba(158, 28, 57,1);
        				background-color:#f4f4f4}
        	@media screen and (max-width:720px){
        	.map__list{
        				float:none;
        				width:100%;
        				border-left:1px solid #dbdbdb}
        	.map__image{padding:10px;
        				position:static;
        				width:100%}}