Something is not right here, I have the following CSS:

.jumbotron h1 {color: #fff;font-weight: 700;font-size: 30px;text-transform: uppercase; padding-bottom: 0;margin-bottom: 0;}

And at the end of the page, using a media query, I want to make it larger on devices that are wider than the @screen-sm-min variable, so I did this:

@media (min-width: @screen-sm-min ) { .jumbotron h1 {color: #fff;font-weight: 700;font-size: 50px;text-transform: uppercase; padding-bottom: 0;margin-bottom: 0;}
}

It is not affecting my css.. Any suggestions?