/* Mobile logo alignment: keep the logo on the left, like the desktop header, without clipping. */
@media only screen and (max-width:768px){
  body > .row4 > .row3 > div{
    position:relative!important;
  }

  body > .row4 #brand{
    float:none!important;
    clear:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    position:absolute!important;
    left:20px!important;
    top:50%!important;
    width:auto!important;
    max-width:calc(100% - 86px)!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    transform:translateY(-50%)!important;
    overflow:visible!important;
    z-index:6!important;
  }

  body > .row4 #brand h1,
  body > .row4 #brand h2,
  body > .row4 #brand h3,
  body > .row4 #brand a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    line-height:1!important;
    background:transparent!important;
  }

  body > .row4 #brand img{
    display:block!important;
    width:168px!important;
    max-width:calc(100vw - 96px)!important;
    height:auto!important;
    max-height:38px!important;
    margin:0!important;
    padding:0!important;
    object-fit:contain!important;
  }
}

@media only screen and (min-width:481px) and (max-width:768px){
  body > .row4 #brand{
    left:-30px!important;
  }
  body > .row4 #brand img{
    width:190px!important;
    max-width:calc(100vw - 120px)!important;
    max-height:42px!important;
  }
}

@media only screen and (min-width:320px) and (max-width:480px){
  body > .row4 #brand{
    left:-30px!important;
  }
}