Problems with @media selectors?

Question

I'm playing around with a header for a site I'm going to make, and I'm trying to use CSS media selectors to change how the header is viewed on mobile phones.

Here is a fiddle of what I'm trying to do: http://jsfiddle.net/ro7pbdkw/2/

and

Here is the code:

html:

<img src="http://lifetimefoundation.adoptsites.wpengine.com/wp-content/uploads/sites/3/2014/10/LifetimeLogolong.png" alt="LifetimeFoundation" width="311" height="122" class="header-img" align="left" style="margin-right: 10px;"/>
<div class="header" style="background-color:#6b3f24; height:122px; width:960px;" align="center">
<div class="header-text" style="padding-top: 10px; text-align: left;">
    <h1>BUILDING FAMILIES AND FUTURES</h1>
    <h5>Through Adoption Grants and Educational Scholarships</h5>
</div>
</div>

CSS:

h1 {
    font-family: Garamond;
    font-size: 200%;
    color: #FFFFFF;
    margin: 0px;
}
h5 {
font-family: Garamond;
    font-size: 100%;
    color: #D9825F;
    margin: 0px;
}
@media handheld {
    .header {
        display:none;
    }
}

I want the brown box to disappear on a cell phone and just leave the img as a header, however, I haven't been able to get the style selector to actually work properly. Any tips or comments to let me know what I'm doing wrong?

Much appreciated!