/* BOUTONS ZOOM */

.leaflet-touch .leaflet-bar a:first-child {
  border: 1px solid white;
  border-radius: 20px;
  margin:15px;
}
.leaflet-touch .leaflet-bar a:last-child {
 border: 1px solid white;
  border-radius: 20px;
  margin:15px;
}

.leaflet-left .leaflet-control {
  margin: 0px;
}

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
  border: 0px ;
}

.leaflet-touch .leaflet-bar a {
  width: 20px;
  height: 20px;
}

.leaflet-touch .leaflet-bar a {
  line-height: 20px;
  font-size: 20px;
  font-family: arial;
  color: white;
  background: rgba(0, 0, 0, 0);
  text-indent: 0px;
  font-weight: normal;
}

/* .leaflet-bar a, .leaflet-bar a:hover { */
 /* color: red; */
/* } */


.leaflet-container .leaflet-control-mouseposition {
  background-color: black;
  box-shadow: 0 0 0px #bbb;
  padding: 0 5px;
  margin: 5px;
  color: white;
  font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}

body {
	text-shadow: black 0px 0px 5px;
}

#croix {
	display: none;
}

#titre {
	position: fixed;
	top:0px;
	margin-top: 10px;
	margin-left: 20%;
	margin-right:20%;
	width: 60%;
	z-index:100;
}

#legende {
	/*position: fixed;*/
	/*top:0px;*/
	/*right:0px;*/
	/*margin: 15px;*/
	/*border: 1px solid white;*/
	/*border-style: dashed;*/
	width: 55px;
	height:75px;
	position: absolute;
	top: 15px;
	left: 0;
}

#legende_genre {
	column-count: 2;
	border-bottom: solid white 1px;
}

#drawer{
	top: 0;
	z-index:100;
	position: fixed;
	right: -30vw;
	width: calc(30vw + 70px);
	height: 100vh;
	transition: right .5s ease-in-out;
	overflow: hidden;
}

#drawer main{
	width: 30vw;
	margin-left: 55px;
	color: #FFF;
	padding: 15px;
	background-color: rgba(0, 0, 0, 0.9);
}

#drawer:hover{
	right: 0;
}

#drawer a {
	color: white;
}

#petit_texte {
	column-count: 3;
	position:fixed;
	bottom:11%;
	left:0px;
	margin:0px;
	margin-left:15px;
	width: 100%;
	height:35px;
	color: white;
	z-index:100;
}

#info {
	column-count:3;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	color: white;
	margin-bottom:15px;
	margin-left:15px;
	margin-right:15px;
	height:10%;
}

#info_album{
	display: inline-block;
	}

#info_artiste{
	display: inline-block;
	}
	
#info_astre {
	display: inline-block;
}


/*Titre*/
h1 {
	font-family: Arial;
	font-weight: normal;
	font-size: 4ex;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	text-align: center;
	color: white;
	margin:0px;
}

#petit_texte p {
	font-family: Arial;
	font-size: 1.8ex;
	display: inline;
	margin-bottom: 20px;
}

#legende p {
	font-family: Arial;
	font-weight: normal;
	font-size: 3ex;
	line-height:0.5ex;
	color: white;
	margin: 8px;
	margin-top:8px;
	margin-bottom:8px;
}

#drawer h5 {
	font-family: Arial;
	font-weight: normal;
/*	font-style: italic;*/
	font-size: 4ex;
	color: white;
	margin: 0px;
	margin-bottom: 15px;
	width: 100%;
	border-bottom: solid white 1px;
}

#l_electro {
	font-family: Roboto Light;
	font-weight: Lighter;
	font-size: 3ex;
	letter-spacing: 0.1ex;
	margin-top: 0px;
	margin-bottom: 23px;
}

#l_metal {
	font-family: XXII Ultimate-Black-Metal;
	font-weight: Lighter;
	font-size: 3ex;
	letter-spacing: 0.1ex;
	margin-top: -10px;
	margin-bottom: 0px;
	padding-left: 10px;
}

#l_rock {
	font-family: Roboto condensed;
	font-weight: bold;
	font-size: 3ex;
	text-transform: uppercase;
	letter-spacing: -0.1ex;
	margin-top: -6px;
}

#l_jazz {
	font-family: PP Editorial New;
	font-weight: bold;
	font-size: 3ex;
	margin-top: -10px;
}

#l_classique {
	font-family: Cormorant Upright;
	font-size: 3ex;
	margin-top: -10px;
}

#l_divers {
	font-family: Roboto;
	font-weight: normal;
	font-size: 3ex;
	letter-spacing: 0.03ex;
	margin-top: -6px;
}

#credits {
	font-family: arial;
	font-size: 1.8ex;
}

#explications {
	font-family: arial;
	font-size: 1.8ex;
	border-bottom: solid white 1px;
}

/* album */		
h2 {
	margin:0px;
	margin-bottom:50px;
	line-height: 2.8ex;
}

/* artiste */		
h3 {
	margin:0px;
	margin-bottom:50px;
	line-height: 2.8ex;
	}

/* objet*/
h4 {
	font-family: Arial;
	font-weight:normal; 
	font-size:3ex;
	margin:0px;
	margin-top: -5px;
	margin-right: 20px;
}
	
.metal {
	font-family: XXII Ultimate-Black-Metal;
	font-size: 5ex;
	margin-top: -10px;
}
.metala {
	font-family: PP Editorial New;
	font-stretch: condensed;
	font-weight: lighter;
	text-transform: uppercase;
	font-size: 3.5ex;
	margin-top: -5px;
}

.jazz {
	font-family: PP Editorial New;
	font-weight: bold;
	font-size: 3.5ex;
	margin-top: -5px;
}

.jazza {
	font-family: PP Editorial New;
	font-weight: normal;
	text-transform: uppercase;
	font-size: 3.5ex;
	margin-top: -5px;
}

.classical {
	font-family: Cormorant Upright;
	/* font-weight: medium; */
	font-size: 4ex;
	margin-top: -10px;
}
.classicala {
	font-family: Cormorant SC;
	/* font-weight: medium; */
	font-size: 4ex;
	margin-top: -10px;
}

.electro {
	font-family: Roboto Light;
	font-weight: Lighter;
	font-size: 4ex;
	letter-spacing: 0.2ex;
	margin-top: -5px;
	line-height: 2.2ex;
}

.electroa {
	font-family: Roboto Light;
	font-weight: lighter ;
	font-size: 4ex;
	text-transform: uppercase;
	letter-spacing: 0.2ex;
	margin-top: -5px;
	line-height: 2ex;
}

.rock {
	font-family: Roboto Condensed;
	font-weight: bold;
	letter-spacing: -0.1ex;
	text-transform: uppercase;
	font-size: 4ex;
	letter-spacing: 0.03ex;
	margin-top: -10px;
}

.rocka {
	font-family: Roboto Condensed;
	letter-spacing: -0.1ex;
	font-size: 4ex;
	letter-spacing: 0.03ex;
	margin-top: -10px;

}

.other {
	font-family: Roboto;
	font-weight: normal;
	font-size: 4ex;
	letter-spacing: 0.03ex;
	margin-top: -12px;
}

.othera {
	font-family: Roboto;
	font-weight: normal;
	text-transform: uppercase;
	font-size: 4.5ex;
	letter-spacing: 0.03ex;
	margin-top: -12px;
}

::selection {
  color: black;
  background-color: white;
}

/*-----------------------------------------------------------------------RESPONSIVE---------------------*/

@media only screen and (max-width:900px) {
	#croix {
		display: block;
		position: fixed;
		top: 50%;
    	left: 50%;
   		width: 24px;
    	height: 28px;
 		transform: translate(-50%, -50%);
		font-size: 24px;
		color: white;
		z-index: 3;
		text-align: center;
		padding: 0;
		margin: 0;
	}

#legende_genre {
	column-count: 1;
	border-bottom: solid white 1px;
}

#drawer {
	right: -65vw;
width: calc(65vw + 70px);
}

#drawer main{
	width: 65vw;
	margin-left: 55px;
}

#petit_texte {
  bottom: 17%;
  width: 95%;
}

#info {
  width: 95%;
  height: 15%;
}

h1 {
	font-size: 2.3ex;
	margin-top:5px;
}

#petit_texte p {
	font-size: 1.8ex;
}

#legende p {
	font-size: 3ex;
	line-height:0.5ex;
}

#drawer h5 {
	font-size: 2.4ex;
}

#l_electro {
	font-size: 2.3ex;
	margin-top: 0px;
	margin-bottom: 23px;
}

#l_metal {
	font-size: 2.3ex;
	margin-top: -10px;
	margin-bottom: 7px;
}

#l_rock {
	font-size: 2.7ex;
	margin-top: -6px;
}

#l_jazz {
	font-size: 2.7ex;
	margin-top: -10px;
}

#l_classique {
	font-size: 3ex;
	margin-top: -10px;
}

#l_divers {
	font-size: 2.7ex;
	letter-spacing: 0.03ex;
	margin-top: -6px;
}

#credits {
	font-size: 1.2ex;
}

#petit_texte p {
	font-size: 1.5ex;
}

/* album */		
h2 {
	margin:0px;
	margin-bottom:50px;
	line-height: 2.8ex;
}

/* artiste */		
h3 {
	margin:0px;
	margin-bottom:100px;
	line-height: 2.8ex;
	}

/* objet*/
h4 {
	font-size:1.8ex;
	line-height: ;
	margin:0px;
	margin-top: -10px;
	margin-right: 20px;
}
	
.metal {
	font-size: 2.31ex;
	margin-top: -10px;
}
.metala {
	font-size: 2.1ex;
	margin-top: -10px;
}

.jazz {
	font-size: 1.68ex;
	margin-top: -10px;
}
.jazza {
	font-size: 1.68ex;
	margin-top: -10px;
}

.classical {
	font-size: 2.1ex;
	margin-top: -10px;
}
.classicala {
	font-size: 2.1ex;
	margin-top: -10px;
}

.electro {
	font-size: 1.96ex;
	letter-spacing: 0.1ex;
	margin-top: -10px;
}
.electroa {
	font-size: 1.96ex;
	letter-spacing: 0.1ex;
	margin-top: -10px;
}

.rock {
	font-size: 1.89ex;
	letter-spacing: 0.03ex;
	margin-top: -2px;
	line-height: normal;
}
.rocka {
	font-size: 1.89ex;
	letter-spacing: 0.03ex;
	margin-top: -20px;
}

.other {
	font-size: 1.89ex;
	letter-spacing: 0.03ex;
	margin-top: -12px;
}
.othera {
	font-size: 1.89ex;
	letter-spacing: 0.03ex;
	margin-top: -12px;
}

}