Different background image for mobile

My pages are pretty well on all devices, except for one page title background image on iphone portrait. (Landscape works fine.) So what I thought I would do would be to switch the image using @media for small screen. But I can't get it to work. Here is page in question:

http://beta.of-g.com/meetdeveloper.html

I put the background image settings for this page in custom.css:

 .meet-dev{
   background-image: url('images/pyramid-ofg.jpg');
   padding: 120px 0;
   background-position: 85%;
   background-color:#26261c;
}

This works fine. Then below that I added this to use different image for small screen:

@media only screen and (max-width: 767px) {
   .meet-dev{
    background-image: url('images/pyramid-small-ofg.jpg');
  }
}

But the @media code does nothing. Clearly, I am missing something! Could someone please help?

Thank you!

Please disregard.