#step-chart {
  width: 100%;
  height: 380px;
}

.x-axis {
  font-size: 19px;
  font-family: PT Sans;
  color: #333333;
  
}

.y-axis {
  font-size: 18px;
  font-family: PT Sans;
  color: #333333;
}

.label {
  font-size: 22px;
  font-style: italic;
  color: #333333;
}

.line {
    fill: none;
    stroke: #333333;
    stroke-width: 2.5px;
  }

  .annotation-path {
    fill: none;
    stroke: #A0A0A0;
    stroke-width: 2.5px;
  }

  .annotation-text {
    font-family: PT Serif, serif;
    font-size: 21px;
    color: #333333;
  }
  
  .bar {
    /* fill: #ade2ea; */
    fill-opacity: 0.45;
  }

  .bar:hover {
    fill-opacity: 0.2;
  }

  .tooltip {
	position: absolute;
	top: 100px;
	left: 100px;
  -moz-border-radius:5px;
	border-radius: 5px;
  border: 2px solid #000;
  background: #fff;
	opacity: .9;
  color: #333333;
	padding: 10px;
	max-width: 300px;
	font-size: 12px;
	z-index: 10;
}

.tooltip .title {
  font-size: 13px;
}

.tooltip span {
  font-family: PT Sans;
}

.tooltip .name {
  font-weight:bold;
}

/* make responsive */

@media (max-width: 1300px) {
  #step-chart {
    height: 350px;
  }
}

@media (max-width: 1200px) {
  #step-chart {
    height: 320px;
  }
}

@media (max-width: 1000px) {
  #step-chart {
    height: 300px;
  }
}

@media (max-width: 850px) {
  #step-chart {
    height: 250px;
  }
}

@media (max-width: 640px) {
  #step-chart {
    height: 180px;
  }
}