html {
  color: #333;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 140%;
  height: 100%; }

body {
  height: 100%; }
  body > #app {
    height: 100%; }

[v-cloak] {
  display: none; }

section {
  padding: 10px; }

section#top {
  background: #eee;
  border-bottom: solid 1px #ddd;
  display: flex;
  flex-direction: row; }
  section#top p {
    margin: 0;
    margin-left: auto;
    text-align: right;
    font-size: 0.8em;
    color: #999; }
  section#top a {
    color: inherit;
    text-decoration: none; }

section#sites {
  padding: 0; }
  section#sites #map {
    height: 50vh; }
  section#sites #info {
    padding: 10px; }
  @media (max-width: 767px) {
    section#sites #info {
      border-top: solid 1px #ddd;
      margin-top: 0; } }
  @media (min-width: 768px) {
    section#sites {
      height: 50vh; }
      section#sites #info {
        overflow: auto;
        border-left: solid 1px #ddd;
        margin-left: 0; } }

section#options {
  background: #eee;
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd; }
  section#options label + select {
    margin-top: 1px; }
  section#options label {
    font-weight: bold;
    color: #555; }
  section#options select {
    border: solid 1px #ddd;
    width: 100%;
    font-family: "Roboto", sans-serif;
    color: #444; }

section.chart {
  box-sizing: border-box;
  height: 100vh; }
  section.chart > * {
    width: 100%;
    height: 100%; }
  section.chart svg text {
    font-family: "Roboto", sans-serif;
    fill: #555; }
  section.chart svg .nvd3 .nv-groups path.nv-line {
    opacity: 0.75;
    stroke-width: 3; }
  section.chart svg .nvd3 .nv-line .nv-scatter .nv-groups .nv-point.hover {
    stroke-width: 3; }
  section.chart svg .nvd3 .nv-axis line {
    stroke: white;
    stroke-width: 2; }
  section.chart svg .nvd3 .nv-axis path {
    opacity: 0; }
  section.chart svg .nvd3 .nv-background {
    fill: #eee;
    fill-opacity: 1; }
  section.chart svg .nvd3 .nv-guideline {
    stroke-width: 2; }

.nvtooltip {
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #333;
  font-family: "Roboto", sans-serif; }

h1, h2, h3 {
  margin: 0;
  color: #555; }
  h1:first-letter, h2:first-letter, h3:first-letter {
    text-transform: capitalize; }

a {
  color: #F90; }

dl {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 100%; }
  dl dt, dl dd {
    flex-grow: 0;
    flex-shrink: 0; }
  dl dt {
    flex-basis: 30%; }
  dl dd {
    flex-basis: 70%;
    margin-left: auto; }
  dl dd:first-letter {
    text-transform: capitalize; }

#map {
  font-family: "Roboto", sans-serif; }
  #map .leaflet-control-refresh-button {
    width: 6em;
    font-size: 16px; }
  #map .leaflet-bar {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: 2px; }
    #map .leaflet-bar a:first-child {
      border-top-left-radius: 2px;
      border-top-right-radius: 2px; }
    #map .leaflet-bar a:last-child {
      border-bottom-left-radius: 2px;
      border-bottom-right-radius: 2px; }
  #map .leaflet-div-icon {
    border-radius: 50%;
    background-color: rgba(255, 115, 102, 0.8);
    border-color: rgba(255, 105, 92, 0.8); }
  #map .marker-cluster {
    background-color: rgba(255, 162, 153, 0.6); }
    #map .marker-cluster > div {
      background-color: rgba(255, 162, 153, 0.6);
      font-family: "Roboto", sans-serif;
      font-weight: bold;
      color: white; }

.row {
  display: flex;
  flex-direction: column; }
  @media (min-width: 768px) {
    .row {
      flex-direction: row; }
      .row .col-10 {
        width: 10%; }
      .row .col-20 {
        width: 20%; }
      .row .col-30 {
        width: 30%; }
      .row .col-40 {
        width: 40%; }
      .row .col-50 {
        width: 50%; }
      .row .col-60 {
        width: 60%; }
      .row .col-70 {
        width: 70%; }
      .row .col-80 {
        width: 80%; }
      .row .col-90 {
        width: 90%; }
      .row .col-100 {
        width: 100%; }
      .row > * + * {
        margin-left: 10px; }
      .row.reverse {
        flex-direction: row-reverse; }
        .row.reverse > * + * {
          margin-left: 0;
          margin-right: 10px; } }

@media (min-width: 768px) {
  .middle {
    display: flex;
    flex-direction: column;
    justify-content: center; } }

.loading {
  height: 100%; }
  .loading > * {
    animation-name: loading;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    width: 4em;
    height: 4em;
    line-height: 4em;
    border-radius: 50%;
    display: block;
    margin: auto;
    color: white;
    font-weight: bold;
    background-color: rgba(255, 0, 0, 0.25); }

@keyframes loading {
  50% {
    background-color: rgba(255, 0, 0, 0.5); } }

@media (max-width: 767px) {
  .row > * + * {
    margin-top: 10px; } }

section#landing-header {
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  min-height: 50%;
  display: flex;
  justify-content: center;
  background-image: url(/images/pattern.png);
  background-color: #F90;
  flex-direction: column;
  padding: 0 1em;
  margin: 0 auto;
  align-items: center; }
  section#landing-header h1, section#landing-header h2, section#landing-header a {
    color: white; }
  section#landing-header h1 {
    font-size: 8vw;
    line-height: initial; }
  section#landing-header h2 {
    font-size: 2.5vw; }
  @media (max-width: 767px) {
    section#landing-header h1 {
      font-size: 16vw; }
    section#landing-header h2 {
      font-size: 5vw; } }

section#landing-footer p {
  color: #666;
  margin: 1em 0; }

section.landing .container {
  max-width: 40em;
  margin: 0 auto; }
  section.landing .container > div {
    padding: 2em 0; }
  section.landing .container p {
    margin: 1em 0 0; }
    section.landing .container p.cta {
      margin: 2em 0; }
      section.landing .container p.cta a {
        background: #F90;
        color: white;
        padding: 10px;
        border-bottom: solid 3px #E80;
        display: block;
        border-radius: 2px;
        width: 10em;
        margin: 0 auto;
        transition: background-color 200ms linear; }
        section.landing .container p.cta a:hover {
          background: #FA3; }
        section.landing .container p.cta a:active {
          border-bottom: none;
          border-top: solid 3px #E80;
          background: #F90; }

section.landing img {
  text-align: center;
  max-width: 100%; }

@media (max-width: 767px) {
  section.landing .media.right,
  section.landing .media.left {
    text-align: center; } }

section.grey {
  background-color: #eee; }

.left {
  text-align: left; }

.right {
  text-align: right; }

.center {
  text-align: center; }