title: CSS multiple @media (min-width) not working
body: <p>hopefully a very simple question. </p>
  
  <p>I have three @media (min-width) statements starting at mobile and building up to desktop. For some reason, the third statement doesn't fire.</p>
  
  <p>Example:
      .imgbox {height: 100px; width: 100px;}</p>
  
  <pre><code>@media (min-width: 768px) and (max-width: 899px)  { .imgbox { background-color:red; } } 
  
  @media (min-width:900px) and (max-width: 1000px) {
          .imgbox { background-color:green;}
  }​
  
  @media (min-width:1001px) {
      .imgbox { background-color:blue;}
  }​
  </code></pre>
  
  <p>JS Fiddle to show effect here: <a href="https://jsfiddle.net/t5vh316h/" rel="nofollow">https://jsfiddle.net/t5vh316h/</a> (drag the centre divider to different widths in order to see what I mean)</p>
  
  <p>The box never turns blue, the final query seems to be ignored. Why?!</p>
  
  <p>Thank you.</p>