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

#graphique_vac_hosp {
	margin-top: 3%;
	width:95%;
}

#boutons{
	margin-left: 15%;
}

.bouton{
  background-color:#3F6148;
   margin-left: 6%;
   width: 20%;
   border-radius: 8%;
   height: 37%;
   border-color:#fff;
   color: #fff;
   cursor: pointer;
   opacity:.3;
  }

.active, .bouton:hover{
   opacity: 1;
  }

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

.moyenne {
	color:#c33434;
}

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

#infobulle {
  position:absolute;
  margin-left:5%;
  margin-top:3%;
  font-family: Arial;
  pointer-events:none;
  background: rgba(255, 255, 255, .85);
}

#legende {
  position:absolute;
  margin-left:3%;
  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, .myY1axis {
    font-size: .7em;
  }

}

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

  .bouton{
    font-size: .9em;
  }

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


  .myXaxis, .myYaxis, .myY1axis {
    font-size: .6em;

  }

}

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

  .bouton{
    font-size: .6em;
  }

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

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

  .myXaxis, .myYaxis, .myY1axis {
    font-size: .2em
  }

}