@-moz-document and @media together

Question

How can I combine above prefixes? This doesn't work:

@media screen and (max-width: 991px) and (min-width: 768px) {

    @-moz-document url-prefix()   { 
    .navbar-default .navbar-brand  {margin-left:30%;}
    }
}

And @media inside of @-moz-document url-prefix() also deosn't work.

Answer 1

It works fine for me by using the @-moz-document at first and the @media query inside:

@-moz-document url-prefix() {
    @media screen and (max-width: 991px) and (min-width: 768px) {
        .navbar-default .navbar-brand  {margin-left:30%;}
    }
}

Demo: JSFiddle

Answer 2

Every pseudo-element must be valid within a rule, otherwise the whole rule is dropped.

Refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/@document, and http://www.w3.org/TR/css3-syntax/#rule-sets