Styling multiple jumbotrons - Bootstrap

Question

I want my homepage to feature multiple Jumbotrons, but when I try to style the Jumbotron class in my css.css file, they stylings are applied to each jumbotron. Without using inline css, how can I modify jumbotrons individually within my css file?

My css.css file, jumbotron class. Currently the changes are applied to both jumbotrons on my home page, when I just want the css below to be applied to the first.

.jumbotron{
    width:100%;
    height: 1400px;
    background-color:#f39c12;
    padding:0px;
    margin:0px;
    opacity: 0.7;
    text-align: center;
}

My homepage. I would like the two jumbotrons to be different

<div class="jumbotron">
    <div id="firstJBox">
    </div>
</div>
<div class="jumbotron">
</div>

Answer 1

Add another class for specificity..

<div class="jumbotron jumbotron-special">
    <div id="firstJBox">
    </div>
</div>
<div class="jumbotron">
</div>

CSS

.jumbotron-special{
    width:100%;
    height: 1400px;
    background-color:#f39c12;
    padding:0px;
    margin:0px;
    opacity: 0.7;
    text-align: center;
}

Demo: http://www.bootply.com/122798