CSS for mobile captions and desktop captions on image carousel (Ishimoto)

Site URL: https://www.briankellymusic.com/home

Hi, I'm having trouble with a bit of CSS I'm using to style to font color and size for image captions on a client's homepage. They're using the Ishimoto template, and the website is: www.briankellymusic.com Here's what I'm using for CSS: 

.collection-type-gallery #slideshow .slide .image-description {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 30px 20px 15px;
    background: #111;
    background: rgba(0, 0, 0, .5);
    color: #a49c52 important!;
    font-size: 9 px important! 
    opacity: 0;
}

Is something wrong with this code? I've tried several other CSS bits with no luck. 

Also, is there a CSS snippet for keeping the caption over the image on the mobile version site? Currently, the caption is situation below the image, and I'd like it to appear on a opaque box on the lower portion of the image .

Would love any advice or workarounds you might have!

Hi. You mean this slide image caption?