Burger Menu Overlaying Logo On Mobile Can't Seem To Modify CSS

Hello,

I can’t seem to change this no matter what CSS I enter.
I tried entering the following CSS in the enfold general styling area, the WordPress customize additional CSS, and even added it to the Enfold CSS custom.css file but it simply will not render to the browser.

When I modify the following in the inspect mode I get the desired result. But when I add this CSS to the above-referenced areas nothing seems to change.

@media only screen and (max-width: 767px)
.responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img {
opacity: 1;
max-width: 55%;
}