.axis path,
.axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;

      }

.axis text,
.label {
        font-family: sans-serif;
        font-size: 11px;
      }

circle{
  fill-opacity: 70%;
  stroke-width:11px;
}

circle.unfocused{
  fill-opacity: 20%;
  stroke-opacity:20%;
  r:6px;
}

circle.focused {
  fill-opacity:100%;
  stroke-opacity:100%;
  r:9px;
  fill:rgba(51,51,153,0.6);
}

circle:hover{
  stroke:  white 1px solid;
  opacity: 0.3;
}

rect:hover{
  opacity:0.3;
}

.tooltip{
  opacity:1;
  background-color: rgba(255,255,255,0.5);

}

.container {
  width: 890px;
}

#graphic {
  padding-top: 60px;
}


#sections {
  position: relative;
  display: inline-block;
  width: 280px;
  top: 0px;
  z-index: 90;
  padding-bottom: 250px;
}

.step {
  margin-bottom: 200px;
  font-family: "TiemposTextWeb-Regular","Georgia";
  font-size: 16px;
  line-height: 23px;
  color: #767678;
}

#sections .title {
  font-family: Arial,Helvetica,"san-serif";
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 2px;
  color: #262626;
  line-height: 1.2em;
}

#extra-space {
  height: 300px;
}

div#vis {
  display: none;
  position: fixed;
  top: 60px;
  z-index: 0;
  margin-left: 0;
  font-size: 10px;
}

.labelOnCircle{
  background-color: pink;
  color:black;
  display:block;
}