I need help figuring out what CSS is controling the mobile menu

ON my site, ebolacommunicationnetwork.org, when viewed on a mobile device, the menu items turn white and you can't see them in the menu (only when you roll over them.) I can't figure out what style is controlling it. There is a stylesheet on this theme call main-menu.css. I'm thinking the style is somewhere in here, but nothing is working for me (I need help!)

@media only screen and (min-width: 480px) and (max-width: 767px) {
#nav { left:51px; width: 278px;}
#nav li {color: #000000;}
#menu-icon { width: 246px; }
#header.sm-rgt-mn #nav { width:100#; left:0;}
#header.sm-rgt-mn #menu-icon { width:32px;}

@media only screen and (max-width: 767px) {

#header.sm-rgt-mn .logo-wrap { float:left; width:70%; height:45px; }
#header.sm-rgt-mn .logo-wrap .logo { text-align:left !important; line-height:50px;}
#header.sm-rgt-mn .logo-wrap .logo img { max-height:48px; width:auto;}