@media (min-width: 768px) {
    /*  <<  root element for the scrollable.
  when scrolling occurs this element stays still.
    >>
  */
    a.right:hover {
        background-position: -33px -33px;
    }

    a.right:active {
        background-position: -33px -33px;
    }


    /* left */
    #Headlines a.left {
        margin-left: 0;
    }

    a.left:hover {
        background-position: -33px 0;
    }

    a.left:active {
        background-position: -33px 0;
    }

    /* up and down */
    a.up, a.down {
        background: url(./../img/scrollabl/vert_large.png) no-repeat;
        float: none;
        margin: 10px 50px;
    }

        /* up */
        a.up:hover {
            background-position: -33px 0;
        }

        a.up:active {
            background-position: -66px 0;
        }

    /* down */
    a.down {
        background-position: 0 -33px;
    }

        a.down:hover {
            background-position: -33px -33px;
        }

        a.down:active {
            background-position: -66px -33px;
        }


    /* disabled navigational button */
    a.disabled {
    }

    .navi a {
        width: 10px;
        height: 10px;
        float: left;
        margin: 2px;
        background: url(/asset/image/scrollabl/navigatorBig.jpg) 0 -10px no-repeat;
        display: block;
        font-size: 1px;
    }

        /* mouseover state */
        .navi a:hover {
            background-position: 0 0;
        }

        /* active state (current page state) */
        .navi a.active {
            background-position: 0 -20px;
        }


    /*----- Headlines_scrollable -----*/
    .Headlines_scrollable {
        /* required settings */
        position: relative;
        overflow: hidden;
        width: 680px;
        height: 453px;
        /*background:url(/staticelement/img/default_img.jpg) center center no-repeat;*/
    }

        /*
   root element for scrollable items. Must be absolutely positioned
   and it should have a extremely large width to accomodate scrollable
   items.  it's enough that you set the width and height for the root
   element and not for this element.
*/
        .Headlines_scrollable .items {
            /* this cannot be too large */
            width: 20000em;
            position: absolute;
            clear: both;
        }

            .Headlines_scrollable .items div {
                float: left;
                width: 680px;
            }

                .Headlines_scrollable .items div.td-post-author-name, .Headlines_scrollable .items div.td-post-date {
                    float: none;
                    width: auto;
                    display: inline-block;
                    text-shadow: 1px 1px 1px #000;
                }
        /*@media (max-width: 767px) {
    .Headlines_scrollable .items div.td-post-author-name a{ color:#fff;
    }
}*/

        .Headlines_scrollable .last {
            border-right: none;
        }

        /* active item */
        .Headlines_scrollable .active {
            border: 2px solid #000;
            position: relative;
            cursor: default;
        }



    /* <<  Button  >>  */
    .Headlines_scrollable {
        float: left;
        top: 0px;
        left: 0px;
    }

    /* prev, next, prevPage and nextPage buttons */
    #Headlines a.browse {
        background: url(/asset/image/scrollabl/hori_large.png) no-repeat;
        display: block;
        width: 23px;
        height: 36px;
        float: left;
        cursor: pointer;
        font-size: 1px;
        position: absolute;
        z-index: 20;
        *left: 0px;
        top: 50%;
    }

        #Headlines a.browse:hover {
            background-position: 0 -36px;
        }

    #Headlines a.right:hover {
        background-position: -23px 0;
    }
    /* right */
    #Headlines a.right {
        position: absolute;
        left: 638px;
        *left: 638px;
        background-position: -23px -36px;
        clear: right;
        margin-left: 9px;
    }

    #Headlines .scroll_navi {
        position: absolute;
        z-index: 9999;
        float: right;
        right: 15px;
        bottom: 15px;
        margin-right: 0;
    }

    .td-big-grid-post-0 .td-big-grid-meta {
        position: absolute;
        bottom: 0px;
    }

    .td-big-grid-post .td-module-thumb .td-image-gradient:last-child {
        position: initial;
    }
}

@media (min-width: 768px) and (max-width: 1023px){
    .Headlines_scrollable .items div {
        width: 500px;
    }
/* right */
#Headlines a.right {left:458px; *left:458px;}
}


/*@media (min-width: 680px) and (max-width: 768px) {
     .Headlines_scrollable .items div {
         margin:0 auto;
         text-align:center;
        width: 680px;
    }
}

@media (min-width: 640px) and (max-width: 680px) {
     .Headlines_scrollable .items div {
        width: 680px;
    }
}

@media (min-width: 600px) and (max-width: 640px) {
     .Headlines_scrollable .items div {
        width: 640px;
    }
}

@media (min-width: 580px) and (max-width: 600px) {
     .Headlines_scrollable .items div {
        width: 600px;
    }
}

@media (min-width: 560px) and (max-width: 580px) {
     .Headlines_scrollable .items div {
        width: 580px;
    }
}

@media (min-width: 540px) and (max-width: 560px) {
     .Headlines_scrollable .items div {
        width: 560px;
    }
}

@media (min-width: 520px) and (max-width: 540px) {
     .Headlines_scrollable .items div {
        width: 540px;
    }
}

@media (min-width: 500px) and (max-width: 520px) {
     .Headlines_scrollable .items div {
        width: 520px;
    }
}
@media (min-width: 480px) and (max-width: 500px) {
     .Headlines_scrollable .items div {
        width: 500px;
    }
}
@media (min-width: 460px) and (max-width: 480px) {
     .Headlines_scrollable .items div {
        width: 480px;
    }
}
@media (min-width: 440px) and (max-width: 460px) {
     .Headlines_scrollable .items div {
        width: 460px;
    }
}
@media (min-width: 420px) and (max-width: 440px) {
     .Headlines_scrollable .items div {
        width: 440px;
    }
}
@media (min-width: 400px) and (max-width: 420px) {
     .Headlines_scrollable .items div {
        width: 420px;
    }
}
@media (max-width: 400px) {
     .Headlines_scrollable .items div {
        width: 400px;
    }
}

@media (max-width: 767px){
    #Headlines a.browse {
    display:none;
     position:relative
}
     .Headlines_scrollable .items div a img{
        width: 100%;
        max-width:100%;
        height:auto;
    }
    .td-big-grid-post-0 {
        min-height:300px;
        height:300px;
         margin-bottom:0;
    }

#Headlines a.right {left:auto; right:0;}
.td-big-grid-post-0 .td-big-grid-meta {
  bottom:0;
}
    .headline_item { height:300px;
    }
    #Headlines .scroll_navi {
        right:5px; top:5px;
        margin-top:0;
        z-index:1;
    }
}
*/

@media (max-width: 767px) {
    .td-big-grid-post-1, .td-big-grid-post-2 {
        padding:12px 10px;
        height: auto;
        width: 100%;
        float: none;
        position:relative;
        left:0;
        z-index:initial;
        background-color:#fff;
        border-bottom: 1px dotted #a5a5a5;
    }
    .td-big-grid-post-2 {margin-bottom:0;}
    .td-big-grid-post-0 .td-big-grid-meta { background-color:black; padding-top:10px;}
    .td-big-grid-post-0 .td-module-meta-info { display:none;}
    .td-big-grid-post-1 .td-big-grid-meta,.td-big-grid-post-2 .td-big-grid-meta { background-color:none; position:initial; padding:5px 8px;}
    .td-big-grid-post-1 .td-module-thumb, .td-big-grid-post-2 .td-module-thumb {width: 120px; height:80px; position: relative; margin:0 15px 0 auto; overflow: hidden; float: left; z-index: 1;}
    .td-big-grid-post-1 .entry-title a, .td-big-grid-post-2 .entry-title a {font-size: 18px; line-height: 26px; color:#444; font-weight:normal;}
        .td-big-grid-post-1 .entry-title a:hover, .td-big-grid-post-2 .entry-title a:hover {color:#444;}
    .td-big-grid-post .entry-title a { text-shadow:none;}
    /*.td-big-grid-post .entry-title a:hover {color:#4db2ec;}*/
    .td-big-grid-post-1 .td-post-category, .td-big-grid-post-2 .td-post-category {display:inline;}
}

@media (max-width: 767px){
    .td-big-grid-post-0 { height:auto; max-height:10000px; }
    .Headlines_scrollable {display:block; height:auto; background:#000;}
    .td-big-grid-overlay:after {transition:none; opacity:0;}
    .Headlines_scrollable .items div {width:100%; float:none;}
    .Headlines_scrollable .headline_item {height:auto; /*background:#fff;*/ border-bottom:10px solid #eee;}
    .Headlines_scrollable .td-module-thumb{margin-bottom:0; height:400px; overflow:hidden;}
    .Headlines_scrollable .td-big-grid-meta {position:relative;}
    .Headlines_scrollable .td-module-meta-info {display:none;}
    .td-big-grid-post-0 .entry-title {margin:8px 5px;}
    .td-big-grid-post-0 .td-big-grid-meta {padding:0 9px;}

}
@media (min-width: 450px) and (max-width: 600px){
    .Headlines_scrollable .td-module-thumb {height: 300px;}
}
@media (min-width: 380px) and (max-width: 450px){
    .Headlines_scrollable .td-module-thumb {height: 253px;}
}
@media (min-width: 300px) and (max-width: 380px){
    .Headlines_scrollable .td-module-thumb {height: 200px;}
    .Headlines_scrollable h3 {font-size:20px; line-height:22px;}
}