Problem with Logo Alternate on tablet

Hi,

we use an alternative white logo on our site for the transparent header. When using the Menu items option on mobile devices we have entered “Activate only for Smartphone (768 px).
And everything seemed ok.

Having now several menu items we have activated the option “Activate for Smartphone and Tablet (990px) but the logo remains the classic black on smartphones and tablets (no white). Why?

In addition, the google test shows us the warning that “The site is not optimized for mobile.

Here is the custom CSS code that we have added via Enfold panel:

@media only screen and (max-width: 767px) { 
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
  background: transparent!important;
  position: absolute!important;
}}

@media only screen and (max-width: 767px) {
.responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {
  opacity: 0;
}
.responsive #top .av_header_transparency .logo img.alternate {
  display: block;
}}

/* LayerSlider height in portable device*/
@media only screen and (max-width: 767px) {
    #top #main #layer_slider_1{ 
    height: auto !important;
    }}

Thank you