Hide Sub-Menu items in Mobile

I have organized my menu items great on desktop, but in mobile mode the number of sub-menu items is out of control.

I’ve tried the following code in a custom CSS area, but it doesn’t work:

@media screen and (max-width: 600px) {
	.sub-menu {
		display: none;
	}
}

Here is my site for reference

Any thoughts?