/*
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;
    background: #777;
}

.jcarousel-wrapper {
    padding-left: 0; 
    padding-right: 0;
}
/*
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: 10000em;
    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;
    width: 192px;
    height: 180px;
}

.jcarousel-control-prev, .jcarousel-control-next {
    text-align: center;
    color: #6ef0cf;
    font-size: 90px;
    line-height: 1.0em;
    text-shadow: 0 0 1px #000;
    position: absolute;
    margin-top: -140px;
}

a:hover.jcarousel-control-next,
a:hover.jcarousel-control-prev {
    color: #6ef0cf;
}

.jcarousel-control-prev {
    left: 3px;    
}

.jcarousel-control-next {
    right: 3px;
}

.jc_control_bg {
    padding: 0px;
    overflow: hidden;
    height: 180px;
}

.jc_control_bg img {
    height: 100%;
}

.jc_element {
    width: 100%;
}

.jc_element img {
    opacity: 0.5;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.jc_element:hover img {
    opacity: 1.0;
    filter: grayscale(50%);
    transition: filter 0.3s ease;
}

.jc_element.active img,
.jc_element.active img:hover {
    opacity: 1.0;
    filter: grayscale(0%);
}

.jc_content_logo {
    margin: 30px 0 15px 0;
}

.jc_content_block {
    display: none;
    transition: display 0.6s ease-in-out; 
}

#jc_content_01.jc_content_block {
    display: block;
}


@media (min-width: 784px) {
    .jcarousel li {
        /* Required only for block elements like <li>'s */
        width: 227px;
        height: 213px;
    }    
    
    .jc_control_bg {
        height: 213px;
    }   
    
    .jcarousel-control-prev, .jcarousel-control-next {
        margin-top: -130px;
    }
    
}

@media (min-width: 1200px) {
    .jcarousel li {
        /* Required only for block elements like <li>'s */
        width: 553px;
        height: 520px;
    }    
    
    .jcarousel-control-prev, .jcarousel-control-next {
        font-size: 150px;
        margin-top: -340px;
    }

    .jcarousel-control-prev {
        left: 30px;    
    }

    .jcarousel-control-next {
        right: 30px;
    }   
    
    .jc_control_bg {
        height: 520px;
    }
}

@media (max-width: 468px) {
  .jcarousel ul {
    transform: translateX(-80px); /* feste Verschiebung */
  }
}