.h2{
  font-family:'akkurat';
  font-size:20px;
  font-weight:800;
  margin:0px;
  padding:0px;
}
.h3{
  font-family:'akkurat';
  font-size:18px;
  font-weight:100;
  margin:0px;
  padding:0px;
}

.axis path,.axis line, .tick line, .line{
  fill:none;
  stroke-width:.5px;
  stroke:#999;
}
.axis{
  font-family:'akkurat';
  font-size: 10px;
  font-weight:800;
  color:#999;
}

.x .tick text, .axis, .label, .axis, .text{
  font-family:'akkurat';
  font-size: 13px;
  font-weight:lighter;
  color:#999;
  stroke:none;
}
.text{
  font-weight: 800;
  color:black;
}
.label{
  font-weight:500;
}
.plot-container{
  width:75%;
  margin:auto;
  margin-bottom:50px;
  margin-top:50px;
}
.plot{
  width:100%;
  height:300px;
  margin-bottom:10px;
  margin-top:20px;
}

.line{
  stroke-width:1px;
  stroke:#e84040;
}
.points{
  fill:#e84040;
}
svg:not(:root) {
    overflow: visible;
}
.dotted{
  stroke:rgba(0,0,0,.3);
  stroke-width:.5px;
  stroke-dasharray: 2, 2;
}

/*this is for between 480 and 770 tablet*/
@media screen and (min-width: 450px) and (max-width: 780px) {

  .plot-container{
    width:100%;
  }
  .plot{
    height:300px;
  }

}

/*this is only for iphone*/
@media only screen and (max-width: 449px) {

  text{
    overflow:visible;
  }
  .plot-container{
    width:100%;
  }
  .plot{
    height:250px;
  }
  .axis{
    font-size: 10px;
  }

  .tick text, .axis, .tick{
    font-size: 10px;
  }

  .x .tick text, .axis, .label, .axis{
    font-size: 10px;
  }
  .text{
    font-size:9px;
  }

.h2, .h3{
  font-size:18px;
}

}

.red{
  fill:#e84040;

}
.hig{
  text-decoration:underline;
  
}