.dataviz {
  /* Keep the data vizualization from floating off the side.
   * It should instead fill the content area and "break the grid" like a large
   * image would. */
  clear: both;
  width: 100%;

  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 20px;

}

.dataviz p,
.dataviz h1, .dataviz h2, .dataviz h3, .dataviz h4, .dataviz h5, .dataviz h6 {
  float: none;
  color: black;
  opacity: .8;
  width: 100%;
}

.bar {
  fill: orange;
}

.solidArc:hover {
  fill: black !important;
  opacity: .8 !important;
}

.outlineArc:hover {
  fill: black !important;
  opacity: .8 !important;
}

.sponsorspie:hover {
  fill: black !important;
  opacity: .8 !important;
}

.d3-tip {
  font: 300 11px;
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  -webkit-transition: opacity 0.3s; /* For Safari 3.1 to 6.0 */
  transition: opacity 0.3s;
}

.legend:hover {
  font-weight: bold;
}
#dataviz-chart {
  z-index: 1;
}

#dv-main {
 z-index: 2;
}

#sunburst {
  z-index: 3;
}

#explainer, #ctrials-gif, #play {
  width: 100%;
  height: auto;
}

#explainer {
  z-index: 8;
  position: absolute;  
}

#ctrials-gif {
  position: relative;
  visibility: hidden;
  z-index: 4;
  cursor: pointer;
}

#play {
  position: absolute;
  left: 0;
  cursor: pointer;
  z-index: 9;
}