wordpress media query issues

I have a different header I want to do for different screensizes. I am having trouble getting the @media queries working or understanding them . Right now i have a slogan hard coded. For the wide screens i have the image bigger. And smaller another one. I can not get the small image to go away on the wide screen

view the issues here

http://ift.tt/1DMPmCX

Here are my media queries

@media only screen and ( min-width: 768px ) and ( max-width: 960px )

@media only screen and ( max-width: 960px )

@media only screen and ( max-width: 767px )

  @media only screen and ( max-width: 479px ) {
  #slogan{display: none !important;}
  #slogan2 { float: none;  background: url (http://ift.tt/1C3HMAu) no-repeat !important; }
 }

for the smaller screen i have the the slogan div show but i think for other width it should not show but maybe . Please use firefox and make screen bigger and smaller to see the issues and how i can hide the big image and then show the little or the other way around.