CSS help logo position

Hi there,

I need css assistance please. I want to move the logo so it overlaps hero image. But needs to look good on all pages.

I have put css in to configure the home page which looks good. However, it makes all other pages so the logo covers important info like titles and other info.

How can I push the content down below to logo?

Code:

@media only screen and (max-width: 980px) {
.body_template_two #masthead .site-branding  {
margin-bottom: -100px;
	position: relative;
    z-index: 1;
}
}
@media only screen and (min-width: 981px) {
.body_template_two #masthead .site-branding  {
margin-bottom: -130px;
	position: relative;
    z-index: 999 !important;
}
}
@media(max-width:479px) {
 .body_template_two #masthead .site-branding img {
    width: auto;
	 max-width: 60%;
  }
}

@media only screen and (max-width: 980px) {
.body_template_two #masthead .site-branding  {
margin-bottom: -100px;
	position: relative;
    z-index: 0;
}
}
@media only screen and (min-width: 981px) {
.body_template_two #masthead .site-branding  {
margin-bottom: -130px;
	position: relative;
    z-index: 1;
}
}
@media(max-width:479px) {
 .body_template_two #masthead .site-branding img {
    width: auto;
	 max-width: 60%;
  }
}

• This topic was modified 6 years, 9 months ago by Jan Dembowski.
• This topic was modified 6 years, 9 months ago by Steven Stern (sterndata).

The page I need help with: [log in to see the link]