#HeroLogo {
    background-image   : url(/img/logos/sq-white.png);
    background-repeat  : no-repeat;
    background-position: center;
    background-size    : contain;

    height  : 60%;
    width   : 30%;
    top     : 10%;
    left    : 60%;
    position: relative;
}

#HeroLogo h1 {
    margin-left: -1000%;
}

@media (min-width: 576px) {
    #HeroLogo {
        left: 60%;
    }
}

/* 
alternative query to swap the logo to either side of JJ

@media (min-width:427px) and (max-width:575px) {
    #HeroLogo {
        left: 10%;
    }
}
*/

@media (max-width: 576px) {
    #HeroLogo {
        display: none;
    }

    #LogoImg {
        display: block;
    }
}

@media (min-width: 576px) {
    #HeroLogo {
        display: block;
    }

    #LogoImg {
        display: none;
    }
}