#header {
      background: #f2f2f2;
      position: fixed;
      z-index: 50;
      width: 100%;
      padding: 15px;
      top: 0;
      left: 0;
    }
    
    #headerBox {
      width: 800px;
      margin: 0 auto;
      padding: 0;
    }

    body {
      font-family: Helvetica, Arial, sans-serif;
      font-weight: normal;
      text-align: left;
      font-size: 1em;
      background: #f2f2f2;
      color: #444;
    }
    
    div#intro {
      width: 785px;
      margin: 0 auto 50px;
      padding: 0;
      font-weight: normal;
      position: relative;
      top: 2em;
      z-index: 20;
    }
    
    .btn {  
      float: right;
      font-size: .625em;
      font-weight: bold;
      width: 72px;
      text-align: center;
      border-radius: 4px;
      padding: 7px 0 7px 0;
      margin: 0 10px 0 10px;
      cursor: pointer;
      background: #444;
      color: #f2f2f2;
    }
    
    div.toggle {
      font-size: .625em;
      font-weight: normal;
      position: relative;
      float: right;
      margin-right: 1em; 
    }
    
    select {
      background: #444;
      color: #f5f5f5;
      border: none;
      font-weight: bold;
      padding: 5px; 
      font-size: 1em;
      width: 100px;
      height: 25px;
    }
    
    span#leadin {
      font-size: .38em;
      line-height: 100%;
      letter-spacing: 0;
    }
    
    h1#title {
      text-align: left;
      font-size: 2.625em; 
      font-weight: bold;
      margin-bottom: 0;
      line-height: 90%;
      letter-spacing: -1px;
    }
    
    div p#explainer {
      width: 64%;
      margin-top: 35px;
      line-height: 145%;
    }
    
    p#explainer a {
      text-decoration: underline;
      color: black;
    }
    
    h1.chart {
      text-align: left;
      font-size: .875em;
      font-weight: bold;
      display: block;
      width: 785px;
      position: relative;
      top: 12px;
      left: 20px;
      margin-bottom: 20px;
    }
    
    div.chart {
      height: 40px;
      border-bottom: 1px solid #a1b2c2;
      margin: -5px auto 0 auto;
      position: relative;
      left: 7px;
      cursor: pointer;
      opacity: 1;
      background: white;
    }
    
    svg {
      padding: 0 0 0 0;
      margin: 0 0 0 0;
      position: absolute;
      top: 0;
      right: -10px;
      display: block;
      z-index: 10;
      font-family: Arial, sans-serif;
      font-weight: normal;
      overflow: visible;
      shape-rendering: crispEdges;
    }
    
    /* AXES */
    .label {
      font-size: .625em;
    }
    
    .axis {
      opacity: 0;
    }
    
    .axis path.domain {
      display: none;
    }
    
    .y.axis text {
      fill: #434c55;
      opacity: .5;
      /*display: none;*/
    }
    
    .axis text {
      font-family: Arial, sans-serif;
      font-size: 1em;
      fill: #434c55;
    }
    
    .axis g line {
      stroke: #434c55;
      opacity: .5;
    }
    
    line.zero {
      stroke: #434c55;
      opacity: .5;
    }
    
    
    /* PTS DATA */
    rect.ptsAvg {
      opacity: .9;
    }
    
    rect.giniAvg {
      fill: #a21942;
    }
    
    rect.giniAvg.true {
      opacity: .9;
    }
    
    /* Y AXIS LABELS */
    svg.labels {
      position: absolute;
      z-index: 1;
      top: 0;
      background: #f2f2f2;
    }
    
    /* PITF INFO */
    rect.pitf {
      fill: #18486a;
      opacity: .1;
    }
    
    div.info {
      margin-top: 6px;
      font-size: 10px;
      position: relative;
      left: 20px;
      line-height: 150%;
    }
    
    div.info p {
      margin: -2px 0 0 0;
      padding: 0;
    }
    
    div.info h5 {
      margin: 0;
      padding: 0;
    }
    
    /* READ MORE BUTTON */
    .read {
      text-decoration: underline;
      cursor: pointer;
      color: #265f91;
    }
    
    /* X / CLOSE BUTTON */
    .close {
      width: 15px;
      height: 15px;
      position: absolute;
      top: 10px;
      right: 15px;
      
    }
    
    div.modal.back {
      width: 100%;
      height: 100%;
      background-color: black;
      opacity: .8;
      position: fixed;
      z-index: 500;
      top: 0px;
    }
    
    div.modal.front {
      width: 450px;
      height: auto;
      padding: 2em;
      background-color: white;
      position: fixed;
      top: 15%;
      left: 50%;
      font-size: 14px;
      z-index: 510;
      margin-left: -225px;
    }
    
    /* Country */
    div.modal h1 {
      text-align: left;
      font-size: 2em;
      font-weight: bold;
      opacity: 1;
      border-bottom: 1px solid black;
      padding: 0 0 10px 0;
      margin: 0;
      position: relative;
    }
    
    /* Date */
    div.modal span {
      font-size: 0.625em;
      float: right;
      font-weight: normal;
      position: relative;
      top: 2em;
    }
    
    div.modal p {
        font-size: 0.75em;
        font-weight: normal;
        line-height: 150%;
        padding: 8px 0 8px 0;
    }
    
    div.modal .sources {
        border-top: 1px solid black;
        margin-top: 5px;
        font-size: 0.625em;
    }
    
    div.modal a {
      color: #265f91;
    }
    
    div.modal a:visited {
      color: #265f91;
    }
    
    .open {
      margin-bottom: 15px;
    }
    
    #groupAxis {
      margin: 30px 0 0 0;
      width: 785px;
    }
    
    img.key {
      display: inline;
      padding: .15em;
      width: 1.25em;
      margin-bottom: -.1em;
    }
    
    #ptsKey {
        position: absolute;
        bottom: -10px;
        right: 0;
        width: 200px;
    }
    
    .povo {
      display: none;
    }
    
    .revo {
      display: none;
    }
    
    .hidden {
      display: none;
    }
    
    .tip text {
      font-size: .625em;
      font-weight: bold;
    }
    
    
    @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) { 
        
        div#intro {
          width: 95%;
          font-size: 2em;
          top: 3em;
        }
        
        div p#explainer {
          width: 95%;
          font-size: 1em;
          line-height: 150%;
        }
        
        div.chart {
          height: 240px;
          margin: 0;
          padding: 0;
          top: 3em;
          left: 1em;
        }
        
        div.chart svg {
          position:relative;
          right: 0;
          top: 2em;
          margin: 0;
          padding: 0;
        }
        
        h1.chart {
          font-size: 3em;
          margin: 1em 0;
          position: relative;
          top: .8em;
          left: 1em;
        }
        
        svg.labels {
          position: absolute;
          z-index: 10;
          font-size: 2em;
        }
        
        .axis text {
          font-family: Arial, sans-serif;
          font-size: 2em;
          fill: #434c55;
        }
        
        div.info {
          position: relative;
          font-size: 2em;
          top: 8.5em;
          left: 1.4em;
          margin-top: 1em;
          
        }
        
        div.modal.front {
          width: 80%;
          padding: 5%;
          font-size: 2.5em;
          top: 2.5%;
          left: 5%;
          margin: 0;
        }
        
        .btn {
          float: right;
          font-size: 2em;
          font-weight: bold;
          width: 7em;
          text-align: center;
          border-radius: .2em;
          padding: .75em .5em;
          margin: 0 .5em 0 .5em;
          cursor: pointer;
          background: #444;
          color: #f2f2f2;
        }
        
        div.toggle {
          font-size: 2em;
          width: initial;
          height: initial;
        }
        
        select {
          -webkit-appearance:none !important;
          background: #444;
          color: #f5f5f5;
          font-weight: bold;
          padding: .75em .75em;
          width: 8em;
          height: auto;
          border-radius: none;
        }
        
        #header {
          padding: 2em;
        }
        
        #headerBox {
          width: 90%;
        }
        
        #expandAll {
          display: none;
        }
        
        line.zero {
          stroke-width: 1px;
        }
        
        .x.axis {
          stroke-width: 1px;
        }
        
        .tip text {
          font-size: 1.2em;
        }
        
    }