Need to disable custom CSS for specific page

We're using custom CSS in the Maple template to make a parallax hero image on the home page that takes up the entire height of the screen:

#hero-banner,
.Parallax-host .Parallax-item {
   height: 100vh;
}

However, that CSS is forcing our product pages to have a bunch of empty white space at the top. I'm hoping we can use Code Injection to disable that CSS just on the Product pages. Please help!

@peterward13 You can edit code to apply only homepage

 .homepage #hero-banner, .homepage .Parallax-host .Parallax-item {
    height: 100vh;
}

Thank you, @tuanphan! I'm obviously not a coder, and you just solved in a minute what I'd been trying to figure out for over an hour!