.logo {
  display: inline-block;
  font-style: italic;
  position: relative;
  overflow: hidden;
  top: 25px;
  margin-left: -3px;
  z-index: 1000;

  h1 {
    line-height: 1;
    margin: 0;
    width: 290px;
    height: 55px;
    background: url(../assets/images/logo.svg) no-repeat;

    // Hide text using the Scott Kellum Technique - Reference:
    // http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }

  @include susy-breakpoint($mobile) {
    top: 20px;

    // hide 'beta' badge on mobile
    // by decreasig the width of the logo wrapper
    width: 170px;

    h1 {
      width: 200px;
    }
  }

  @include susy-breakpoint($tablet) {
    .home:not(.map) & {
      top: 100px;
    }
  }
}