#titre {
  margin-left:22%;
  font-style: bold;
  font-family: Arial;
  pointer-events:none;
}

#graphique_mortalite {
	margin-top: 3%;
	widht:90%;
	height: 25%
}

#boutons{
	margin-left: 30%
}

.bouton{
   display: inline-block;
   margin-left: 6%;
   width: auto;
   background-color:#34c37c;
   border-radius: 8%;
   height: 37%
   border-color:#fff;
   color: #fff;
   cursor: pointer;
   opacity:.3;
  }

.active, .bouton:hover{
   background-color:#34c37c;
   opacity: 1;
  }

.consigne {
  font-style: italic;
  font-family: Arial;
}

.moyenne {
	color:#c33434;
}

#detail {
  position:absolute;
  margin-left:4%;
  margin-top:.5%;
  font-weight: :bold;
  font-family: Arial;
  pointer-events:none;
}

#infobulle {
  position:absolute;
  margin-left:5%;
  margin-top:6%;
  font-family: Arial;
  pointer-events:none;
}

#legende {
  position:absolute;
  margin-left:5%;
  margin-top:6%;
  font-family: Arial;
  pointer-events:none;
}

#source {
  margin-left:2.5%;
  font-style: italic;
  font-family: Arial;
  
}

@media screen and (min-width: 1000px)  {
  #titre {
    font-size: 1.3em;
  }

  .bouton{
    font-size: 1.2em;
  }

  #source, #legende, #infobulle, .consigne {
    font-size: .9em;
  }

  #detail {
    font-size: .8em;
  }

  .myXaxis, .myYaxis {
    font-size: .6em;
    font-weight: bold;
  }

}

@media screen and (min-width: 600px) and (max-width: 999px) {
  #titre {
    font-size: 1em;
  }
  
  .bouton{
    font-size: .9em;
  }

  #source, #legende, #infobulle, .consigne {
    font-size: .7em;
  }

  #detail {
    font-size: .6em;
  }

  .myXaxis, .myYaxis {
    font-size: .35em;
    font-weight: bold;
  }

}

@media screen and (min-width: 0px) and (max-width: 599px) {
  #titre {
    font-size: .6em;
  }
  
  .bouton{
    font-size: .55em;
  }

  #source, #legende, #infobulle, .consigne {
    font-size: .45em;
  }

  #detail {
    font-size: .4em;
  }

  .myXaxis, .myYaxis {
    font-size: .3em;
    font-weight: bold;
  }

}