// Parade logo
.logo,
.site-branding__logo {
  display: block;
  z-index: 501;
  position: fixed;
  top: 0;
  left: 0;
  padding-left: 15px;
  width: 100%;
  border-bottom: 0;
  margin-right: 0;
  padding-right: 1em;
  transition: transform .2s, all .2s ease ;
  img {
    //margin: 15px 0;
    margin: 20px 10px; //fix for druplicon
    transition: transform .2s, all .2s ease ;
    max-width: 120px;
    box-sizing: border-box;
  }
  &::after {
    //		transform: $parade-logo-transform;
    will-change: transform, width;
    background: $parade-blue;
    content: " ";
    position: absolute;
    display: block;
    z-index: -1;
    top: 5px;
    left: 5px;
    //width: 140px;
    width: 100px; //fix for duplicon
    height: 100px;
  }
  &.not-fixed {
    img {
      transition: transform .2s, all .2s ease .2s;
    }
    &:after {
      transition: width .2s, transform .2s ease .2s;
      //transform: $parade-logo-transform;
    }
  }
  &.fixed {
    padding-left: 5px;
    img {
      margin: 5px 0;
      padding: 0 40px 20px 0;
      max-height: 75px;
    }
    &:after {
      transition: transform .2s, width .2s ease .2s;
      transform: rotate(0) skew(0) translate3d(-5px, -40px, 0);
      width: 100%;
    }
  }
  // Make horizontal bar and logo smaller on mobile
  @include breakpoint-max(md) {
    &::after {
      top: -105px;
    }
    img {
      width: 80px;
      height: 53px;
      margin: 0;
    }
  }
}