.content {
  margin: auto;
  max-width: 1000px;
  font-family: 'Neuton', serif;
}

h1 {
  text-align: center;
  font-size: 4em;
}

h2 {
  text-align: center;
  font-size: 2em;
}

h3 {
  text-align: center;
  font-size: 1.15em;
}

.ldBar {
  margin: auto;
  width: 100% !important;
  height: 150px !important;
  }

.ldBar-label {
  color: #fff;
  font-family: 'Varela Round', sans-serif;
  font-size: 2.5em;
  font-weight: 900;
}

.dataInfo, .dataUpdated, .legal {
  text-align: center;
}

.legal {
  margin-top: 10px;
}

#total1stVaccinated,
#total2ndVaccinated,
#totalBoosterDoses,
#yesterdayTotalDoses,
#yesterday1stDoses,
#yesterday2ndDoses,
#yesterdayBoosterDoses {
  font-weight: bold;
}

.sectionHeader {
  background: #aaaaaa;
}

.sectionHeader h2 {
  margin-bottom: 10px;
}

.sectionContent {
  text-align: center;
  margin-bottom: 50px;
}

#vaccinationGraph {
  width: 100%;
  height: 500px;
}

.sectionContent p {
  margin-top: 0px;
  font-size: 2em;
}

.sectionContent p.graphSummary {
  font-size: 1.5em;
}

.myProgress {
  width: 100%;
  background-color: #ddd;
  border: 1px solid black;
  position: relative;
}

.myBar {
  width: 0%;
  height: 80px;
  background-color: #3368bd;
}

.projection {
  left: 0%;
  width: 0;
  height: 80px;

  background-color: #3368bd;
  opacity: 0.3;
  position: absolute;
  top: 0;
}

.projectionLabel{
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0px;
  color: #ffffff;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.15em;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.percentageLabel {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0px;
  color: #ffffff;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 2em;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.modal {
  display: block;
  position: fixed;
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.5);
}

.modalContent {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  }

.close {
  color: black;
  top: auto;
  float: right;
  font-size: 48px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

iframe {
  height: 525;
}

@media only screen and (max-width: 840px) {
  h1 {
    font-size: 3em;
  }

  h2 {
    font-size: 1.5em;
  }

  .sectionContent p {
    font-size: 1.5em;
  }


  .secondLdBar {
    height: 20% !important;
    margin-bottom: 0px;
  }

  iframe {
    height: 260;
  }

}

@font-face {
  font-family: 'Neuton';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/neuton-v16-latin-ext_latin-regular.woff2') format('woff2'); /* Super Modern Browsers */
}