Cyclone 2 slider – hide or responsive text on small screens

I can’t seem to get the CSS right to hide the Cyclone 2 sliders on small screens (i.e., smartphones). Or optionally, make it responsive on small screens to make the text and border area smaller.

I believe it may be something like this to hide it altogther:

@media (max-width: 300px) {
    .cycloneslider-template-default {
         display:none;
     }
}

To make font responsive, it may be like this:

@media (max-width: 300px) {
    .cycloneslider-template-default .cycloneslider-caption-title{
		font-size: 12px;
		padding: 5px 10px 5px 10px;
    }
	.cycloneslider-template-default .cycloneslider-caption-description{
		font-size: 10px;
		padding: 0 10px 5px 10px;
    }
}

Then the question is, where would does the CSS code go?:
* style.css of the Cyclone 2 slider template I’m using
* the Cyclone 2 plugin’s admin.css
* the theme’s style.css

Any help is appreciated.