Page customization through CSS

I’d like to further customize this page:

http://www.techsoft3d.com/products/hoops-toolkits/hoops-communicator/

We are using the Smartbox theme.

I’d like to make the content of this page responsive. If the screen is smaller than a than 480px (smartphones), we’d like to remove the header “Click to launch…” and everything below that. Here is the css media query I believe I need:

@media only screen and (max-width: 480px) {
.communicator_mobile {
display: none;
visibility: hidden;
}
}

And then apply it in a div:

<div class=” communicator_mobile “>
…
</div>

I just don’t know where to place the CSS. I don’t think it can go in the actual page and doesn’t seem to work when I put it in style.css. Where does it go or can I tap into an existing class that is already part of this theme.

Many thanks.