CSS styling for secondary max-width logo in header

Hello,

I have a secondary logo which appears when the browser or screen size is smaller than 1200px. I would like to apply some styling to this logo only, which would be similar to this:

#header_meta {z-index: 1;}
#header_main {z-index: 3;}
strong.logo {top: -55px; height: 120px !important; width: auto;}
h1.main-title {padding-left: 250px;}

I had copied the above css from another forum, and it was working on the logo before. But now the client wants the full logo to appear first on full screen view, and then change to the overhang icon logo with smaller screen sizes (before button menu and after)
The goal is to have that logo overhang the header bar by about 10px.

This is the current custom css I pieced together from other forums:
.logo img {
height: auto;
max-width: 280px;
}

.header-scrolled .logo img { opacity: 0; }
.header-scrolled .logo a {
background-image: url(http://www.coastalblissdayspa.com/wp-content/uploads/HeaderLogo_1.png);
background-size: contain;
background-repeat: no-repeat;
}

@media only screen and (max-width: 1385px) and (min-width: 990px) {
.container { width: 96%; }}

@media only screen and (max-width: 1200px) {
.logo img { opacity: 0; }
.logo a { background-image: url(http://www.coastalblissdayspa.com/wp-content/uploads/HeaderLogo_1.png);
background-repeat: no-repeat;
background-size: contain;
}}

Any help is appreciated! Thanks!