@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i");
@import url("https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i");
.visualization {
  min-height: 70vh;
  position: relative;
  margin: 0 64px;
  border-bottom: 1px solid #f0f0f0;
  overflow: hidden; }
  .visualization h2 {
    margin: 0;
    text-transform: uppercase;
    font-size: 1.4rem;
    font-weight: 400;
    padding: 8px 8px 8px 16px; }
  .visualization .policies {
    position: absolute;
    height: 100%;
    left: 0;
    width: 30%;
    border-right: 1px solid #f0f0f0; }
    .visualization .policies #description {
      padding-left: 32px; }
      .visualization .policies #description h3 {
        font-size: 1em;
        font-weight: bolder; }
    .visualization .policies > ul {
      margin-top: 1em !important;
      font-size: 1.2rem !important; }
    .visualization .policies ul {
      list-style-type: none;
      line-height: 1.5;
      padding-left: .5em;
      margin-left: 32px;
      margin: 0;
      overflow-y: hidden;
      font-size: 0.9em; }
    .visualization .policies li > ul {
      max-height: 0; }
      .visualization .policies li > ul:before {
        display: block;
        width: 1em;
        height: 1em;
        content: "▶";
        font-size: .5em;
        position: absolute;
        left: -.5em;
        margin-top: -2em;
        color: #ddd;
        transition: .2s ease all; }
    .visualization .policies li {
      color: #16B7CC;
      position: relative;
      padding-left: .5em;
      cursor: pointer; }
      .visualization .policies li > span:hover {
        background-color: rgba(205, 231, 24, 0.1);
        color: #92D613; }
    .visualization .policies li.expanded > span {
      color: #92D613; }
    .visualization .policies li.selected > span {
      color: white;
      background: #92D613; }
    .visualization .policies span {
      padding: 0px 16px;
      border-radius: 32px; }
    .visualization .policies li.expanded > ul {
      max-height: 100vh;
      overflow: visible; }
      .visualization .policies li.expanded > ul:before {
        transform: rotate(90deg); }
  .visualization .impacts {
    height: 100%;
    margin-left: 30%;
    position: relative; }
    .visualization .impacts > ul {
      display: block;
      position: relative;
      padding: 0px 8px 8px 16px;
      height: 48px;
      list-style-type: none;
      overflow-x: scroll;
      white-space: nowrap; }
      .visualization .impacts > ul li {
        display: inline-block;
        padding: 2px 16px;
        margin-right: 4px;
        border: 2px solid #56D5EB;
        color: #16B7CC;
        border-radius: 32px;
        cursor: pointer;
        transition: .1s ease all; }
        .visualization .impacts > ul li:hover {
          background: rgba(205, 231, 24, 0.1);
          border-color: #CDE718;
          color: #92D613; }
        .visualization .impacts > ul li.selected {
          color: white;
          background: #FF5166;
          border-color: #FF5166; }
    .visualization .impacts #time-wrapper {
      text-align: center;
      min-height: 48px;
      margin-bottom: 16px;
      border-bottom: 1px solid #f0f0f0; }
      .visualization .impacts #time-wrapper span {
        display: inline-block;
        width: 10%;
        font-family: "Nunito", "Avenir Next", "Helvetica Neue", sans-serif;
        font-weight: lighter; }
      .visualization .impacts #time-wrapper #time {
        width: 75%;
        -webkit-appearance: none; }
        .visualization .impacts #time-wrapper #time:focus {
          outline: none; }
        .visualization .impacts #time-wrapper #time::-webkit-slider-runnable-track {
          background: #f0f0f0;
          border-radius: 8px;
          height: 4px; }
        .visualization .impacts #time-wrapper #time::-moz-range-track {
          background: #f0f0f0;
          border-radius: 8px;
          height: 4px; }
        .visualization .impacts #time-wrapper #time::-ms-track {
          background: #f0f0f0;
          border-radius: 8px;
          height: 4px; }
        .visualization .impacts #time-wrapper #time::-webkit-slider-thumb {
          box-sizing: border-box;
          -webkit-appearance: none;
          width: 24px;
          height: 32px;
          margin-top: -14px;
          border-width: 0;
          border-left: 10px solid black;
          border-right: 10px solid black;
          border-color: #56D5EB;
          transition: .1s ease all;
          cursor: pointer;
          border-radius: 0;
          background: transparent;
          z-index: 100; }
        .visualization .impacts #time-wrapper #time::-moz-range-thumb {
          box-sizing: border-box;
          -webkit-appearance: none;
          width: 24px;
          height: 32px;
          margin-top: -14px;
          border-width: 0;
          border-left: 10px solid black;
          border-right: 10px solid black;
          border-color: #56D5EB;
          transition: .1s ease all;
          cursor: pointer;
          border-radius: 0;
          background: transparent;
          z-index: 100; }
        .visualization .impacts #time-wrapper #time::-ms-thumb {
          box-sizing: border-box;
          -webkit-appearance: none;
          width: 24px;
          height: 32px;
          margin-top: -14px;
          border-width: 0;
          border-left: 10px solid black;
          border-right: 10px solid black;
          border-color: #56D5EB;
          transition: .1s ease all;
          cursor: pointer;
          border-radius: 0;
          background: transparent;
          z-index: 100; }
        .visualization .impacts #time-wrapper #time.play::-webkit-slider-thumb {
          width: 0;
          height: 0;
          border-top: 16px solid transparent !important;
          border-bottom: 16px solid transparent !important;
          border-right: none;
          border-left-style: solid;
          border-left-width: 24px;
          border-radius: 0;
          background: transparent; }
        .visualization .impacts #time-wrapper #time.play::-moz-range-thumb {
          width: 0;
          height: 0;
          border-top: 16px solid transparent !important;
          border-bottom: 16px solid transparent !important;
          border-right: none;
          border-left-style: solid;
          border-left-width: 24px;
          border-radius: 0;
          background: transparent; }
        .visualization .impacts #time-wrapper #time.play::-ms-thumb {
          width: 0;
          height: 0;
          border-top: 16px solid transparent !important;
          border-bottom: 16px solid transparent !important;
          border-right: none;
          border-left-style: solid;
          border-left-width: 24px;
          border-radius: 0;
          background: transparent; }
        .visualization .impacts #time-wrapper #time:hover::-webkit-slider-thumb {
          border-color: #CDE718; }
        .visualization .impacts #time-wrapper #time:hover::-moz-range-thumb {
          border-color: #CDE718; }
        .visualization .impacts #time-wrapper #time:hover::-ms-thumb {
          border-color: #CDE718; }
        .visualization .impacts #time-wrapper #time::-moz-focus-outer {
          border: 0; }
      .visualization .impacts #time-wrapper #timeline {
        height: 32px;
        width: 75%;
        left: 12.5%;
        position: absolute;
        z-index: -100; }
        .visualization .impacts #time-wrapper #timeline line {
          stroke: #92D613;
          stroke-width: 1; }
        .visualization .impacts #time-wrapper #timeline rect {
          fill: rgba(205, 231, 24, 0.01); }
  .visualization #map {
    background: #fff;
    width: 100%;
    margin: 0 auto;
    height: 480px; }
    .visualization #map * {
      box-sizing: content-box; }
    .visualization #map .stroke {
      fill: none; }
    .visualization #map .country {
      fill: #f0f0f0;
      stroke: #999;
      stroke-width: .5px; }
    .visualization #map .country.selected {
      stroke: #92D613;
      stroke-width: 1px; }
    .visualization #map .country:hover {
      fill: #CDE718 !important;
      stroke: #92D613; }
    .visualization #map .fill {
      fill: #fff; }
    .visualization #map .graticule {
      fill: none;
      stroke: none; }
    .visualization #map .land {
      fill: #f0f0f0; }
    .visualization #map .boundary {
      fill: none;
      stroke: transparent; }
  .visualization #legend {
    position: absolute;
    bottom: 16px;
    left: 16px;
    font-family: "Nunito", "Avenir Next", "Helvetica Neue", sans-serif;
    font-weight: lighter; }
    .visualization #legend .continuous {
      height: 128px;
      position: relative;
      width: 16px;
      border-radius: 4px;
      margin-bottom: 16px;
      box-shadow: inset 0 0 0.5px rgba(0, 0, 0, 0.4); }
      .visualization #legend .continuous > span {
        margin-left: 24px;
        white-space: nowrap; }
        .visualization #legend .continuous > span:last-child {
          position: absolute;
          bottom: 0; }
    .visualization #legend .swatch {
      padding: 0;
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 8px;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: inset 0 0 0.5px rgba(0, 0, 0, 0.4); }
      .visualization #legend .swatch svg {
        display: block; }

* {
  box-sizing: border-box; }

body {
  padding: 0;
  font-family: "Catamaran", "Avenir Next", "Helvetica Neue", sans-serif;
  font-size: 1em;
  max-width: 1200px;
  margin: 0 auto; }

a.img,
a:hover.img,
img {
  border: none; }

a {
  text-decoration: none;
  color: #56D5EB; }
  a:hover {
    color: #16B7CC; }

.content {
  padding: 32px; }

h1,
h2,
h3,
h4,
h5 {
  font-family: "Nunito", "Avenir Next", "Helvetica Neue", sans-serif;
  font-weight: 100;
  margin-bottom: .5em; }

h2 {
  font-size: 2em;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: .2em; }

h3 {
  font-size: 1.5em; }

.title {
  text-align: center;
  font-family: "Nunito", "Avenir Next", "Helvetica Neue", sans-serif; }

.title a {
  font-weight: 100;
  font-size: 3em;
  color: black; }
  .title a:hover {
    color: black; }

div.placeholder {
  background: #f0f0f0;
  border: 1px solid #ddd; }

span.placeholder {
  color: #CDE718;
  font-weight: 400; }
  span.placeholder::before {
    content: "{ ";
    opacity: .5; }
  span.placeholder::after {
    content: " }";
    opacity: .5; }

ul {
  list-style-type: circle; }

p.authors {
  font-family: "Catamaran", "Avenir Next", "Helvetica Neue", sans-serif;
  text-align: center;
  font-size: 1.2em;
  color: #263947;
  color: transparent; }

p.directions {
  color: #FF5166;
  display: none;
  font-weight: 500; }

section {
  max-width: 640px;
  margin: 0 auto; }
  section.full-width {
    max-width: 100%; }

.footer {
  margin-top: 30px;
  padding: 4px 8px 8px;
  text-align: right;
  font-size: 12px;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 100;
  background: #fff; }

.footer a {
  color: #21346B; }

.footer a:hover {
  color: #ce3333; }

#tooltip {
  text-align: center;
  position: fixed;
  transform: translate(-50%, 32px);
  background: white;
  padding: 4px 8px;
  border-radius: 8px;
  pointer-events: none;
  max-width: 40vw;
  color: #263947;
  z-index: 1000;
  font-family: "Nunito", "Avenir Next", "Helvetica Neue", sans-serif;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 16px -4px rgba(0, 0, 0, 0.5);
  transition: .1s ease opacity; }

.units {
  opacity: .5; }

/*# sourceMappingURL=style.css.map */