html{
  min-height:100%;
  height:100%;
}

#wrapper{
  min-height: 100%;
  height:100%;
  overflow: auto;
  background: #faf5f0;
}

#main {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

#div_artiste{
  position:absolute;
  top:150px;
  left:30px;
  z-index:1001;
  width: 30%;
  background-color: #faf5f0;
  color: #4e4852;
}

#div_artiste h1{
  color: #4e4852;
  font-size: 1em;
  line-height: 1.75em;
}

#div_artiste h2, #div_artiste p, #div_artiste a{
  color: #4e4852;
  font-size: 0.75em;
  line-height: 1.25em;
}

#div_artiste a:hover{
  color: #2b2b2b;
}

#artiste_grid{
  display: grid;
  grid-template-columns: 30% 70%;
}

#artiste_image{
   width:100%
}

#artiste_detail{
  padding-left: 10px;
}

#artiste_description{
  text-align: justify;
}

footer{
  background: #faf5f0;
  position:absolute;
  z-index:1000;
  bottom:0;
  padding: 0;
}

#audio {
  width: 100%;
  padding-top: 10px;
}

.timeline{
  line-height: 5%;
  display: flex;
  align-items: center;
}

#timeline_annee{
  background-color: rgb(240, 222, 205);
}

.vignette_scene, .vignette_timeline{
  width: 5%;
  display:inline-block;
  height:40px;
  text-align: center;
  opacity: 70%;
}

.vignette_scene img {
  height:40px;
}

.timeline_scene, .timeline_globale{
  background-color: rgba(240, 222, 205, 0.5);
  display: flex;
  border-radius: 20px;
  position: relative;
  align-items: center;
}

.timeline_scene{
  width: 94%;
  padding-top: 10px;
  padding-bottom: 10px;
}

.timeline_globale{
  width: 95%;
}

#timeline_svg{
    width: 100%;
}

#curseur{
 border-left: 1px solid #232950;
 height:100%;
 position: absolute;
}

.concert{
  background-color:rgba(111,60,144,0.6);
  padding: 10px;
  display: inline-block;
  border-radius: 10px;
  position: absolute;
}

.concert.sans_son{
  background-color:rgb(200,200,200);
}

.concert.sans_son:hover{
  background-color:rgb(150,150,150) !important;
}

.concert:hover{
  background-color:rgba(111,60,144,1) !important;
}

html, body, #map {
    height: 100%;
    width: 100vw;
}