.jcarousel {
	margin: 3.2em auto 0 auto;
    position: relative;
    overflow: hidden;
    width: 700px; /* default width of each of each item (technically, item_width × number of items, if you want to show more than 1 item at a time */
}

.jcarousel ul {
    width: 20000em; /* ample room for many items */
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    float: left;
    margin: 0; padding: 0;
}

.jcarousel li .img-box {
    float: left;
    min-width: 700px; /* the img-box must completely fill the carousel item container */
    margin: 0 !important; padding: 0 !important;
}


/* This was REALLY hard to figure out, though perhaps the resutl is straightforward: basically just smaller carousel items for smaller windows. The declarations above set a default width of 700 for each carousel item.  This then needs to be granularly constrained for each of several breakpoints, over-riding the min- and max-width declarations for the carousel iself and the img-box within it. */

@media screen and (max-width: 900px) {.jcarousel, .jcarousel li .img-box {min-width: 650px; max-width: 650px;}
	.jcarousel {margin-top: 2.5em}}
@media screen and (max-width: 800px) {.jcarousel, .jcarousel li .img-box {min-width: 550px; max-width: 550px;}}
@media screen and (max-width: 700px) {.jcarousel, .jcarousel li .img-box {min-width: 500px; max-width: 500px;}
	.jcarousel {margin-top: 2.3em}}
@media screen and (max-width: 600px) {.jcarousel, .jcarousel li .img-box {min-width: 425px; max-width: 425px;}}
@media screen and (max-width: 500px) {.jcarousel, .jcarousel li .img-box {min-width: 325px; max-width: 325px;}
	.jcarousel {margin-top: 2.0em}}
@media screen and (max-width: 400px) {.jcarousel, .jcarousel li .img-box {min-width: 350px; max-width: 350px;}}
@media screen and (max-width: 320px) {.jcarousel, .jcarousel li .img-box {min-width: 290px; max-width: 290px;}
	.jcarousel {margin-top: 1.7em}}