Media query issue on iPad/iPhone sizes?

I’ve got a newly updated client site ALMOST ready to go with a Genesis Executive theme here:

http://www.outdoorkidsclub.com/outdoorkidsclub/

which will replace the older site here shortly:

http://www.outdoorkidsclub.com/

There are 7 pages on the site which use a flipbook plugin:

http://readyshoppingcart.com/product/ready-digital-publications-plugin/

… which we discovered is NOT responsive, so, as a workaround, I used media queries such as this:

/* ———————————————————————– */
/* custom styling to Hide the slideshow, Show the flip book for large window widths */
/* ———————————————————————– */

.flipbook720x490, /* Ultimate Guides */
.flipbook720x560 /* ABC books */
{ /* display the flipbook; default behavior */
}

.slider464x600, /* Ultimate Guides */
.slider864×1296 /* ABC books */
{ /* hide the slideshow; default behavior */
display: none;
}

… and this …

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

.site-container {
max-width: 960px;
}

.site-header .widget-area {
width: 700px;
}

.content {
width: 660px;
}

.sidebar-primary {
width: 300px;
}

.title-area {
width: 260px;
}

.breadcrumb {
margin: -30px -40px 30px;
}

.content {
padding: 30px 40px 10px;
}

.site-header .genesis-nav-menu a {
padding: 38px 14px 40px;
}

.content #genesis-responsive-slider .flex-control-nav,
.content #genesis-responsive-slider .flex-direction-nav li a,
.content #genesis-responsive-slider .flex-direction-nav li a.prev {
display: none;
}

.slider464x600, /* Ultimate Guides */
.slider864×1296 /* ABC books */
{ /* display the slideshow */
display: block;
}

.flipbook720x490, /* Ultimate Guides */
.flipbook720x560 /* ABC books */
{ /* hide the flipbook */
display: none;
}
}

… to hide the flip book at lower window widths and instead show a responsive slider:
Easing Slider Version 2.2.0.6
https://wordpress.org/plugins/easing-slider/

which SEEMED to work fine on my development site and when I tested this workaround on pages that use your very handy (THANKS!) mobile responsive test page here:
http://www.studiopress.com/responsive/

HOWEVER, now that is running from a live (temporary URL noted above) server, where I can see it on my iPad and iPhone, the easing slider just seems to show a static image of the first page of the slideshow!

Any suggestions? Is there something else I need to add/modify in the media queries, or some other configuration settings I could try?

MANY thanks in advance!!!