.container {
  margin: 0 auto;
  min-width: 900px;
  max-width: 1000px;
  background-color: #161617;

}

#timeline {
  margin: 0 0 0px 0;
  text-align: center;
  position: absolute;
  top: 0px;
}

.year label {
  font-size: 12px;
  font-weight: normal;
  border: 1px solid #161617;
  color: #fff;
  background-color: #565656;
  padding: 1px 15px 1px 15px;
  margin: 0 5px;
  cursor: pointer;
  border-radius: 15px;
}

.year input {
  display: none;
}
.year input[checked] + label {
  color: #fff;
  background-color: #FF6600;
}

.year input[checked] + label:hover {
  color: #fff;
  background-color: #FF6600;
}

/* ---------------------------------------------------------
   SVG styles
   ---------------------------------------------------------*/
svg {
  font-size: 12px;
  font-weight: bold;
  vector-effect: non-scaling-stroke;
}
.info, .label {
  pointer-events: none;
}
.info text {
  fill: white;
}

#circle circle {
  fill: none;
  pointer-events: all;
}
text {
  cursor: default;
  fill: #FFFFFF;
  font-size: 12px;
  font-family: 'CartoGothic', Arial, sans-serif;
  font-weight: bold;
}
.group-arc + text {
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.group-arc.animate + text {
  opacity: 0;
}
#circle path {
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
#circle:hover path.fade,
#circle path.unselected {
  opacity: 0;
  pointer-events: none;
}
text.fade {
  opacity: 0;
}
.group-arc {
  cursor: pointer;
}
text.region {
  font-family: 'CartoGothic', Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
}
.chord {
  opacity: 0.85;
}
.chord:hover {
  opacity: 1;
}