/* Color: #383825 */

body {
  margin: 0;
  padding: 0;
  font-family: 'Saira Extra Condensed', sans-serif;
}
  container {
    display: block;
    box-sizing: border-box;
    /*max-width: 100em;*/
    margin: 0 auto;
    padding: 0 2em;
  }
  header {
    position: sticky;
    height: 4rem;
    top: 0;
    background: #00619d;
  }
    header container {
      display: grid;
      grid-template-columns: 4rem 1fr 4rem;
      grid-gap: 1em
    }
      header img {
        height: 4rem;
        width: auto;
        float: left;
      }
      header container > form {
        padding-top: .75rem;
        position: relative;
      }
        header container > form input {
          width: 100%;
          font-size: 1.25em;
          line-height: 2.5rem;
          text-indent: 1em;
          border: none;
          border-radius: .25em;
          padding: 0;
        }
          header container > form input:before {
            font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007";
          }
        header container > form #searchResult {
          position: absolute;
          top: 3rem;
          width: 100%;
          background: #fff;
          box-shadow: 0 7px 10px rgba(0,0,0,0.5);
          border-radius: .25em;
        }
          header container > form #searchResult ul {}
            header container > form #searchResult ul li {}
              header container > form #searchResult ul li type {}
              header container > form #searchResult ul li name {
                display: inline-block;
                font-size: 1.5em;
              }
        header container > form button {
          position: absolute;
          right: 0;
          top: 0.75rem;
          height: 2.5rem;
          width: 2.5rem;
          border: 0;
          padding: 0;
          border-top-right-radius: .25em;
          border-bottom-right-radius: .25em;
          font-size: 1.5em;
          background: #0c0;
          color: #fff;
        }
      header container > a {
        font-size: 1.5em;
        width: 2.5rem;
        line-height: 2.5rem;
        margin: .75rem;
        color: white;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        background: rgba(0,0,0,0.5);
        border-radius: .25em;
      }
  wrapper {
    display: block;
    background: #ddd;
    padding: 10vh 0 0 0;
    overflow: hidden;
  }
    timeline {
      position: relative;
      display: block;
      height: calc(90vh - 4em);
    }
      timeline item {
        position: relative;
        display: block;
        background: #ccc;
        overflow: visible;
        margin-bottom: .25em;
        height: 2em;
      }
        timeline item.fuzzy-start:before {
          content: '\00a0';
          position: absolute;
          left: -1em;
          top: 0;
          width: 1em;
          height: 100%;
          background: linear-gradient( 90deg, transparent, #ccc );
        }
        timeline item.fuzzy-end:after {
          content: '\00a0';
          position: absolute;
          right: -1em;
          top: 0;
          width: 1em;
          height: 100%;
          background: linear-gradient( 90deg, #ccc, transparent );
        }
        timeline item.highlighted {
          background: #ff9;
          font-size: 1.25em;
        }
        timeline item.highlighted.fuzzy-start:before {
          background: linear-gradient( 90deg, transparent, #ff9 );
        }
        timeline item.highlighted.fuzzy-end:after {
          background: linear-gradient( 90deg, #ff9, transparent );
        }
        timeline item name {
          display: block;
          font-size: 1.325em;
          text-transform: uppercase;
          white-space: nowrap;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
          timeline item name container {
            position: absolute;
            left: 0;
            transform: translateX(-100%);
          }
        timeline item description {
          display: block;
        }
        timeline item start,
        timeline item end {
          position: absolute;
          display: block;
          bottom: 0.2em;
          /*transform: translate(-50%, 1.25em);*/
        }
        timeline item start {
          left: 0.25em;
        }
        timeline item end {
          right: 0.25em;
        }
      timeline ruler {
        position: absolute;
        display: block;
        bottom: 6em;
        width: 100%;
      }
        timeline ruler container {
          position: relative;
          display: block;
          height: 1px;
          background: #666;
        }
          timeline ruler container start,
          timeline ruler container end,
          timeline ruler container marker {
            position: absolute;
            display: block;
            bottom: -2em;
            transform: translate(-50%, 0);
          }
            timeline ruler container start:after,
            timeline ruler container end:after,
            timeline ruler container marker:before {
              content: '';
              position: relative;
              display: block;
              width: 1px;
              height: 0.875em;
              left: 50%;
              background: #666;
            }
          timeline ruler container start {
            left: 0;
            bottom: 0;
          }
          timeline ruler container end {
            left: 100%;
            bottom: 0;
          }
          timeline ruler container label {
            position: absolute;
            display: block;
            width: 100%;
            bottom: -4em;
            left: 0;
            text-align: center;
            font-style: italic;
          }

      timeline events {
        position: absolute;
        bottom: 6rem;
        width: 100%;
        font-size: .75em;
        color: rgba(0,0,0,.5);
      }
        timeline events item {
          position: absolute;
          bottom: 0;
          min-width: 1px;
          background: rgba(0,0,0,.25);
        }
          timeline events item name {
            top: -.5em;
            font-size: 1.25em;
          }
          timeline events item start,
          timeline events item end {
            bottom: 0;
          }

@media screen and (max-width: 420px) {
  wrapper {
    /*padding: 1vw;*/
  }
}