/*
This is the visible area of you carousel.
Set a width here to define how much items are visible.
The width can be either fixed in px or flexible in %.
Position must be relative!
*/
.jcarousel
{
    position: relative;
    overflow: hidden;
}

/*
This is the container of the carousel items.
You must ensure that the position is relative or absolute and
that the width is big enough to contain all items.
*/
.jcarousel ul
{
    width: 2000em;
    position: relative;

    /* Optional, required in this case since it's a <ul> element */
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
These are the item elements. jCarousel works best, if the items
have a fixed width and height (but it's not required).
*/
.jcarousel li
{
    /* Required only for block elements like <li>'s */
    float: left;
    margin: 5px 10px;
    width: 165px;
    height: 83px;
}

.jcarousel-nav
{
    position: absolute;
    top: 25px;
    font-size: 40px;
    color: #85888C;
}

.jcarousel-nav.prev
{
    left: -50px;
}

.jcarousel-nav.next
{
    right: -50px;
}

.marketing-navigation .jcarousel-nav.inactive {
    cursor: default;
    opacity: 0.1;
}

.marketing-navigation
{
    margin: 20px auto;
    position: relative;
    width: 925px;
}

@media all and (max-width: 1173px) and (min-width: 993px)
{
    .marketing-navigation
    {
        width: 740px;
    }
}

@media all and (max-width: 992px) and (min-width: 803px)
{
    .marketing-navigation
    {
        width: 555px;
    }
}

@media all and (max-width: 802px) and (min-width: 618px)
{
    .marketing-navigation
    {
        width: 370px;
    }
}

@media all and (max-width: 617px)
{
    .marketing-navigation
    {
        width: 185px;
    }
}