Custom CSS for iPad Mini 2, retina display and @me

I'm trying to specify different colors for selected range of screen sizes, however I just can't seem to figure out the iPad Mini 2 with Retina Display. It does simply not follow the rules of it's pixel resolution and I wonder why.

Here is my code:

/** Retina iPad **/
@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (-o-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5){
    body {
        background-color: #486ffd;
    }
}
/** 1600px non-retina screen **/
@media screen and (max-width: 1600px){
    body {
        background-color: #770029;
    }
}
/** 1000px non-retina screen **/
@media screen and (max-width: 1000px){
    body {
        background-color: #117700;
    }
}
/** 500px non-retina screen **/
@media screen and (max-width: 500px){
    body {
        background-color: #ffce00;
    }
}
/** 300px non-retina screen **/
@media screen and (max-width: 300px){
    body {
        background-color: #770200;
    }
}

Now when my iPad Mini 2 is in portrait mode it shows the background color #117700, and when I have it in landscape it shows the color #770029. How come it does not follow the rules of its resolution on: 2048x1536?

I also have this in my HTML:

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=3;" />

I've tried using both a pixel ratio on 1.5 and 2 which has been suggested by others in previous questions. Any help?

The website I am using is here if you wish to see for yourself.

The problem was solved by putting the CSS specification in the correct order.

When selectors have an equal specificity value, the latest rule is the one that counts.

I also added:

only screen and (min-resolution: 192dpi)
only screen and (min-resolution: 2dppx)

In order for it to be even more fit and specified.

/** 1600px non-retina screen **/
@media screen and (max-width: 1600px){
    body {
        background-color: #770029;
    }
}

/** Retina iPad **/
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){
    body {
        background-color: #486ffd;
    }
}

So correct order is: LAST overrules FIRST, which means device-width needs to be overruled by the retina specifics. More about this can be read here CSS Specificity