.logo {
  float: left;
  width: @logo-width;
  .logo-img,
  .logo-type {
    float: left;
  }
  .logo-img {
    opacity: .9;
    height: @logo-img-height;
    width: 100%;
    margin-top: -@logo-img-height*.2;
    background-image: url(@logo-img);
    background-size: 100% @logo-img-height;
  }
  .logo-type {
    margin-left: 8px;
    font-size: 3em;
    line-height: 1.1;
    text-transform: lowercase;
    letter-spacing: -1px;
    color: @text-color;
  }
  &:hover .logo-img { opacity: 1; }
  .clearfix();
}
/**
 * When we hit the breakpoint
 * Center the logo in the middle
 **/
@media (max-width: @navs-breakpoint-justified) {
  .logo {
    float: none;
    display: block;
    margin: auto;
  }
}
@media (max-width: @logo-breakpoint) {
  .logo {
    width: auto;
    .logo-img {
      display: block;
      float: none;
      margin: auto;
    }
    .logo-type { display: none; }
  }

}
