Vertical align of logo

Hello, I am trying to center the logo vertically. I had a similar issue as in this topic: https://kriesi.at/support/topic/logo-vertical-align/
I tried the code mentioned there and it worked well. However, on smaller screen sizes the logo is not centered again. While trying to add the top margin for smaller screens, the logo is cut off: http://i.imgur.com/f7Ntftu.png
Is there a way to fix this?
I used this code for smaller screen sizes:

@media only screen and (max-width: 767px) {
.responsive .logo img {
top: 15px;
}
}

Thank you.