Custom ID to modify post slider

Hi

I am struggling with some customisation for a post slider.
I only want my custom css to style one slider and have given it custom ID of
.su-information-pages

The page it is inserted in is here
https://www.staging.traditionalsail.com/5717-2

I have used some custom css from this page on the Enfold Docs page here

/*—————————————-
// CSS – Post slider title, meta and excerpt
//————————————–*/

/* Title */
.avia-content-slider .slide-entry-title {
color:#fff
}

/* Excerpt content*/
#top .avia-content-slider .slide-entry-excerpt {
color:#fff
}

The above css works but interestingly if I put the CSS in the child theme css it does not work.
If I put it in the theme options> general styling> quick css it does.

If I add the custom ID of .su-information-pages as below the css does not work.

/*—————————————-
// CSS – Post slider title, meta and excerpt
//————————————–*/

/* Title */
.su-information-page .avia-content-slider .slide-entry-title {
color:#fff
}

/* Excerpt content*/
#top .su-information-page .avia-content-slider .slide-entry-excerpt {
color:#fff
}
Sure I am doing something wrong but can’t work out what.
Ideally I’d like to style the read more link too.

Thanks