Mobile view different from desktop view

Hi,

I’ve added some Quick CSS to make a two line menu and to display correctly on mobile. However, I also added CSS to make the social media icons top right of page to appear their regular colors facebook, twitter, instead of the theme gray color. Then on the primary color for links #d1000 (burgundy) for Primary color to underline the menu items.

However, when I view the site on mobile, the social media icons up top still appear gray and the 3 bars in the mobile menu appear as #d100000 (burgundy) instead of white like the menu links are. Can you please see attached screenshots and recommend how to change the 3 mobile menu bars to white, but leave he red underline on the desktop site menu and also to have the social media icons to appear the normal facebook, twitter colors as they do on the desktop site? I’ve included the Quick CSS I’m using now. Many thanks.

#top #wrap_all .av-social-link-facebook a {
color: #fff;
background-color: #37589b;
}
#top #wrap_all .av-social-link-twitter a {
color: #fff;
background-color: #46d4fe;
}
.phone-info span {
color:white !important;
font-size: 14px;
}
#scroll-top-link {
background-color: #001d5b;
color: white;
border-color: white;
}
#header #header_main_alternate .container {
height: 80px;
}
@media only screen and (min-width: 767px) {
#header #header_main_alternate .container {
height: 80px;
}
.html_header_top.html_header_topbar_active.html_header_sticky.html_bottom_nav_header #top #main {
padding-top: 198px !important;
}
.logo img {
min-width:350px!important;
height:auto!important;
}