body {
    font-family:"Helvetica Neue";
    color: #686765;
}

h2{
  color: black;
  margin-left: 35px;
}

h3{
  margin-top: 30px;
  margin-bottom: 0px;
}

h5{
  margin-bottom: 5px;
}

.name {
    float:right;
    color:#27aae1;
}

.axis {
    fill: none;
    stroke: #AAA;
    stroke-width: 1px;
}

text {
    stroke: none;
    fill: #666666;
    font-size: 2em;
    font-family:"Helvetica Neue"
}

.label {
    fill: #414241;
}

.node {
    cursor:pointer;
} 

.dot {
    opacity: .7;
    cursor: pointer;
}
 
.axis text {
    font-family: sans-serif;
    font-size: 11px;
    font-weight:400;
    color:grey;
}

.tooltip1{
  position: absolute;
  width: 120;
/*  height: auto */  
  line-height: 1;
  font-size: 12px;
  text-align: center;
  border-style: solid; 
  border-width: 1px;
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  border-radius: 2px;
  padding: 12px;
 }

 .tooltip2{
  position: absolute;
  width: 120;
/*  height: auto */  
  line-height: 1;
  font-size: 12px;
  text-align: center;
  border-style: solid; 
  border-width: 1px;
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  border-radius: 2px;
  padding: 12px;
 }

*, *::after, *::before {
  box-sizing:border-box;
} 

.col-1-2{
  float:left;
  width:40%;
  padding:0;
  margin-left: 40px;
/*  margin:0;
*/}

.col-2-2{
  float:right;
  width:50%;
  padding:0;
  margin-left: 0px;
  margin-top: 60px;
}

#scatterplot1:after{
  content: "";
  display: table;
  clear: both;
}

.col2-2-2{
  float:left;
  width:50%;
}

.col3-1-2{
	float:left;
	width:30%;
}

.col3-2-2{
  margin-top: 40px;
  margin-left: 50px;
	float:left;
	width:70%;
}