cannot suppress top bar on mobile

I cannot suppress the top bar on mobile. Here is the code that I have in QUICK CSS

@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px)
{ 
      .avia-fullscreen-slider .avia-slideshow>ul>li {
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
}

}

@media only screen and (max-width: 1140px) { 
.av-main-nav > li > a { padding: 0 7px; }}

.avia-fullscreen-slider .avia-slideshow>ul>li.av-mobile-fallback-image {
width: 100%;
height: 100%;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
} 

@media only screen and (max-width: 480px) { 
 #top .avia-layerslider .ls-nav-prev, #top .avia-layerslider .ls-nav-next { 
       max-height: 220px;
   }
}

@media only screen and (max-width: 767px) { #socket { display: none !important;}}

#top .input-text, #top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select  {
 color: #000000!important;
}

@media only screen and (max-width: 767px) {
#header_meta {
  display:none !important;
}
}

.sub_menu_socket {
display:none !important;
}

@media only screen and (max-width: 767px){
.responsive #socket .sub_menu_socket {
    display: block !important;
}}

The site is https://bigrigwraps.feelinginspired.ca/bigrigwraps/
Where did I go wrong? I have added the backend login