CSS: Hide a div - Why it's not working?

CSS: Hide a div - Why it's not working?

I'm trying to use jquery-cookie to deal with the recent EU cookie laws.
Everything is working good, however I'd like to display different cookie
"warning" messages according to different devices.
<div id="cookiepopup" class="mobile_no">
<p>Questo sito utilizza i cookie, per garantire una migliore
esperienza di navigazione. Continuando, ne accetti l'utilizzo.<br
/>
This website uses cookies to improve your user experience. By
continuing to browse the site you are agreeing to our use of
cookies.<br />
<a href="/foo" target="_blank"><b>(Dettagli / Details)</b></a>
<input type="submit" class="cookieclose" value="Accetto /
Continue" /></p>
</div>
<div id="cookiepopup" class="mobile_yes">
<p>Questo sito utilizza i cookie. Continuando, ne accetti l'utilizzo.
This website uses cookies. By continuing to browse the site you
are agreeing to our use of cookies.<br />
<a href="/foo" target="_blank"><b>(Dettagli / Details)</b></a>
<input type="submit" class="cookieclose" value="Accetto /
Continue" /></p>
</div>
In style.css:
.mobile_yes{ display:none } <--- normal behaviour
.mobile_no{ display:none } <---- it goes under a specific css media query
for smartphones
Speaking in general terms and without considering the css media queries, I
can't hide any of the divs. Whatever I do, .mobile_no div is always
showed.
/* COOKIE POPUP */
#cookiepopup {
display:none;
background: #eee; border-top:1px solid #ddd; color:#555;
bottom: 0;
padding: 5px 2% 10px;
position: fixed;
width: 96%;
z-index: 10;
font-size:0.8em;
}
#cookiepopup p {
width:90%; margin:0 auto; max-width: 970px;
}
.mobile_no{ display:none }
Demo at http://www.flapane.com/test/test.php
I'm sure I'm missing something. Any help would be much appreciated.