title: @media min-witdth is being ignored by browser
body: <p>I've a pair of rules for screens with 768 width. The problem is that on screens bigger than that, the browser takes the wrong rule, applying the one for the older screens.</p>
  
  <pre><code>@keyframes p1
  {
      from{
          bottom:0;display:none;opacity:0;
      }
      50% {
          bottom:15;opacity:0.5;
      }
      to{
          bottom:25%;display:block;opacity:1;
      }
  }
  
  
  @media screen and (max-width: 800px) {
      @keyframes p1
      {
          from{
              bottom:0;display:none;opacity:0;
          }
          50% {
              bottom:10;opacity:0.5;
          }
          to{
              bottom:15%;display:block;opacity:1;
          }
      }
  }
  </code></pre>
  
  <p>On bigger screens, the browser takes the max-width rule, ignoring the default.</p>