/* Reset CSS
 * --------------------------------------- */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

table {
  border-spacing: 0;
}

fieldset, img {
  border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
  font-weight: normal;
  font-style: normal;
}

strong {
  font-weight: bold;
}

ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%;
  margin: 0;
  padding: 0;
  color: #444;
}

q:before, q:after {
  content: '';
}

abbr, acronym {
  border: 0;
}

body {
  font-family: arial, helvetica;
  color: #333;
  color: rgba(0, 0, 0, 0.5);
}

.wrap {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
  position: relative;
}

h1 {
  font-size: 5em;
  margin: 20px auto;
}
h2 {
  font-size: 3em;
  margin: 20px auto;
}
h3 {
  font-size: 2em;
  margin: 50px auto 10px;
}

p {
  font-size: 2em;
}

.intro p {
  width: 70%;
  margin: 20px auto;
  font-size: 1.5em;
  text-align: left;
}

.section {
  text-align: center;
}

a {
  color: #8FB98B;
}

.fp-controlArrow.fp-prev {
  border-color: transparent #333 transparent transparent;
}
.fp-controlArrow.fp-next {
  border-color: transparent transparent transparent #333;
}

.section-1-button{
  width: 300px;
  margin: 1em auto 0.2em auto;
  padding: 0.2em;
  background: #87BDC0;
  border-radius: 5px;
  display: block;
  color: #fff;
  text-align: center;
}

.chart + .intro p, .panel + .intro p {
  font-size: 1.2em;
}

.chart {
  margin: 20px auto 20px;
  width: 850px;
  height: 502px;
}

.chart svg {
  border: 1px solid #333;
  background-color: #FAF9F6; /* Add this */
}

#svg1,
#svg2,
#svg3 {
  width: 850px;
  height: 500px;
}

/* chart 1 */
text.annotation {
  font-size: 15px;
  font-style: italic;
  stroke: #ff5f45;
  fill: #ff5f45;
}
rect.annotation {
  stroke: #ff5f45;
  fill: transparent;
}
line.annotation {
  stroke: #ff5f45;
}

/* chart 2 3 */
.chart2, .chart3 {
  margin-bottom: 60px;
}
.panel {
  margin: 10px auto 10px;
}
.panel input[type="checkbox"] {
  margin: 0 20px;
}

/* chart 4 */
.chart4 {
  width: 502px;
  height: 502px;
}
#svg4 {
  width: 500px;
  height: 500px;
}
#svg4 rec {
  opacity: 0.1;
}
#map {
  position: relative;
  top: -505px;
  width: 500px;
  height: 500px;
}
.panel input[type="button"] {
  margin: 0 20px;
}