Transparent custom legend with mapbox/leaflet.js

I am building a map with mapbox.js. I have created a custom legend and want to make it partially transparent, but can't figure out the right CSS.

Here is my legend html snippet:

<div id='legend-content' style='display:none;'>
<div class='legend'>
<div class='legend-title'>My title</div>
<div class='legend-title'>My sub-title</div>
</div>
</div>

I can't figure out the right CSS to make it transparent.

.legend .legend-title {
    text-align: Center;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 120%;
    color: #ffffff;
    }

.legend{
    background: rgba(80,80,80,0.3);
       }

I have also tried to change the style of the map-legend directly. I don't think that this is a good way to go at it, but I found this obj in the browser dev tools.

.map-legend.wax-legend {
    background: rgba(80,80,80,.1);
    }  

Can anyone help me get this working? My preference is to use the alpha in rgba on the background and leave the text fully opaque.

Thanks!