@font-face {
    font-family: 'MarkerFeltWide-Plain-Regular';
    src:  url('fonts/MarkerFeltWide-Plain-Regular.ttf.woff') format('woff'),
    url('fonts/MarkerFeltWide-Plain-Regular.ttf.svg#MarkerFeltWide-Plain-Regular') format('svg'),
    url('fonts/MarkerFeltWide-Plain-Regular.ttf.eot'),
    url('fonts/MarkerFeltWide-Plain-Regular.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
  }
  
  html, body {height: 100%;}

  body {
    font-family: "Lato", sans-serif;
      color: black;
      font-weight: 300;
      margin: 0;
      font-size: 22px;
  }
  .text-muted {
    color: #bcbbbb;
  }

  .text-thin {
    font-weight: 300;
  }

  /* More Specific Classes */
  .title-super {
      font-family: 'MarkerFeltWide-Plain-Regular';
      color: #42ddd0;
      font-size: 2em;
      text-shadow: 1px 1px 1px #000;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: black;
  }

  .title-medium {
      color: #747704;
      font-size: 45px;
  }

  /* Often used Classes */
    .header {
      background: #000000;
      height: 50px;
      color: #fff;
      position: fixed;
      top: 0;
      width: 100%;
      padding: 0.5em 1em;
      z-index: 2;
    }
    .logo-container {
      margin-top: 20px; //pad top 50px to compensate for fixed header div
    }

    /* Menu */
    .menu {
      position: absolute;
      top: 5em;
      padding: 1em;
      background: #FFC20B;
      height: 100%;
      width: 12em;
      transform: translate3d(0, 0, 0);
      transition: transform 0.2s;
      z-index: 5;
      opacity: .95;
    }

    .menu-hidden .menu {
        transform: translate3d(-14em, 0, 0);
        transition: transform 0.2s;
    }

    .menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 18px;
    //font-weight: bold;
    }

    .menu li a {
        color: #000;
        display: block;
        padding: 0.25em 0;
    }

    /* Trail Details */
    div.trail-name:hover {
        background-color: #fff7e8;
    }
    .trail-name { 
      border-top: .5px solid #ddd; padding: 15px; 
      cursor: pointer;
    }
    .length {
      width: 105px;
    }

    /* Mobile Small Screen*/
    @media only screen and (max-width: 768px) {

      .logo-container {
      margin-top: 20px; //pad top 50px to compensate for fixed header div
      }
    }