Changing CSS for Mobile Menu

I am needing my menu to change to a mobile menu at a wider width to accommodate tablets. I have found the CSS to change the breakpoint, but I don't know where to put it. Also, is there a way I can set it so that it is not overwritten when the theme is updated?

@media (max-width: 768px) {
	.main-navigation .menu-toggle,
	.main-navigation .mobile-bar-items,
	.sidebar-nav-mobile:not(#sticky-placeholder) {
		display: block;
	}

	.main-navigation ul,
	.gen-sidebar-nav {
		display: none;
	}

	[class*="nav-float-"] .site-header .inside-header > * {
		float: none;
		clear: both;
	}
}