Text as logo centered but left aligned on mobile screens

I’m working on a concept and stuck with the following: I’d like to get my logo centered on a desktop, but aligned left on mobile screens. The menu should be on the right on a screens. The problem is that I replaced my logo with text using this in my functions.php:

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub) {
    $sub .= "LAURA DANIQUE";
    return $sub;
}

And in quick CSS:

.logo img { display: none !important; }

.logo .subtext {
    font-size: 38px;
    color: #000000;
    position: relative;
    top: 34px;
}

.logo i {
    font-size: 14px;
}

.logo > a {
    text-decoration: none;
}

.logo a {
line-height: 20px;
}

.responsive #top .logo {
    display: block;
    height: 120px !important
}

.responsive .logo a {
    display: block
}

@media only screen and (max-width: 768px) {
.subtext { font-size: 30px !important; }}
@media only screen and (max-width: 480px) {
.subtext { font-size: 20px !important; }}

#top div .logo {
    float: none;
    position: absolute;
    left: 50%;
    z-index: 1;
    transform: translate3d(-50%, 0, 0);
}

.avia_textblock a {
    font-weight: bold;
}

Unfortunately the logo disappears on a smartphone screen and runs through the navigation menu on a tablet screen.