.states :hover{
    fill: black;
    
  }

  .state-borders {
      fill: none;
      stroke:black;
      stroke-width: 0.5px;
      stroke-linejoin: round;
      stroke-linecap: round;
      pointer-events: none;
  }

  .countries :hover{
    fill: black;
    
  }

  .country-borders {
      fill: none;
      stroke:black;
      stroke-width: 0.5px;
      stroke-linejoin: round;
      stroke-linecap: round;
      pointer-events: none;
  }
 
  .line {
    fill: none;
    stroke: steelblue;
    stroke-width: 2px;
  }
  
#worldmap{
    color: black;
    text-align: center;
    font-family: 'Montserrat'; 
}

#s1h1{
    color: black;
    text-align: center;
    font-family: 'Montserrat'; 
    font-size: 4em;
}

#s1p1{
    color: black;
    text-align: center;
    font-family: 'Montserrat';
}
#spara{
    color: black;
    text-align: center;
    font-family: 'Montserrat';
}

#s2{
    color: black;
    text-align: center;
    font-family: 'Montserrat';
    
}

#s2h1{
    color: black;
    text-align: center;
    font-family: 'Montserrat';
    
}

#s2-2{
    color: black;
    text-align: center;
    font-family: 'Montserrat';   
}

#s3{
    color: black;
    text-align: center;
    font-family: 'Montserrat';   
}
#s4{
    color: black;
    text-align: center;
    font-family: 'Montserrat';   
}

#s5{
    color: black;
    text-align: center;
    font-family: 'Montserrat';
    
}

#s6{
    color: black;
    text-align: center;
    font-family: 'Montserrat';
    
}

#map{
    height: 75%;
    width: 75%;
}
#map2{
    height: 100%;
    width: 100%;
}

#test{
    height: 100%;
    width: 100%;
}

#chart{
    height: 200%;
    width: 200%;
}

#introh1{
    color: black;
    text-align: center;
    font-family: 'Montserrat';
    font-size: 4em;
    margin-top: 100px;
    margin-bottom: -10px;
}

#introp1{
    color: black;
    text-align: center;
    font-family: 'Montserrat';
    
}
#section2{
    color: black;
    text-align: center;
    font-family: 'Montserrat';
    
}

#chart {                                                          
    height: 360px;                                                  
    position: relative;                                             
    width: 360px;                                                  
  }                                                                
  .tooltip {                                                       
    background: #eee;                                               
    box-shadow: 0 0 5px #999999;                                  
    color: #333;                                                   
    display: none;                                                  
    font-size: 12px;                                               
    left: 130px;                                                   
    padding: 10px;                                                 
    position: absolute;                                            
    text-align: center;                                            
    top: 95px;                                                      
    width: 80px;                                                    
    z-index: 10;                                                   
  }                                                                
  .legend {
    font-size: 12px;
  }
  rect {
    stroke-width: 2;
  }

.focus circle {
    fill: steelblue;
}

.focus text {
    font-size: 14px;
}

.tooltip {
    fill: white;
    stroke: #000;
}

.navigationTooltips{
    color: black;
}