.map-container path {
  fill: #d0d0d0;
  stroke: #fff;
  stroke-width: 1px;
}

.states {
  stroke: #bfbfbf;
  stroke-width: .5;
  fill: none;
}

.out-of-state {
  fill: #fff;
  z-index: -1
}

.key.text {
  font-size: 12px;
}

.mapTitle {
  font-size: 15px;
  font-weight: bold;
  fill: black;
  z-index: 1;
}

.subtitle, .barLabels{
  font-size: 12px;
  fill: black;
  z-index: 1;
}

.subtitle.barChart {
  font-size: 12px;
  font-style: italic;
  font-weight: bold;
  fill: black;
  z-index: 1;
}

.q0-10 { fill: #D3E7EC; }
.q1-10 { fill: #A0D8D8; }
.q2-10 { fill: #42BECA; }
.q3-10 { fill: #31A2B6; }
.q4-10 { fill: #2693B3; }
.q5-10 { fill: #1B82AE; }
.q6-10 { fill: #0065A4; }
.q7-10 { fill: #024D7B; }
.q8-10 { fill: #1C3F5B; }
.q9-10 { fill: #163244; }

#de-container, #ap-container {
  width: 50%;
  float: left;
}

#data-notes, #viz-intro, #before-viz, #after-viz {
  max-width: 700px;
  margin: 10px;
  display: none;
  float: left;
}

#popoverText1, #popoverText2  { 
  position: absolute;     
  text-align: center;         
  padding: 4px;       
  font-family: Lato, sans-serif;
  font-size: 12px;    
  background: #fffffff2; 
  border: 0;    
  border-radius: 3px;     
  pointer-events: none;
  opacity: 0;
  max-width: 230px;     
}

.tick, .barLabels {
font-family: Lato, sans-serif;
font-size: 12px;
}

@media (max-width: 768px) {
 #de-container, #ap-container {
   float: unset;
   width: 100%;
   max-width: 400px;
}