/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img {
	/* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0;
	display: block;
}

/* in case script does not load */
.cycle-slideshow img:first-child {
	position: static;
	z-index: 100;
}

/* pager */
.cycle-pager {
	text-align: center;
	width: 100%;
	z-index: 500;
	position: absolute;
	top: 10px;
	overflow: hidden;
}

.cycle-pager span {
	font-family: arial;
	font-size: 50px;
	width: 16px;
	height: 16px;
	display: inline-block;
	color: #ddd;
	cursor: pointer;
}

.cycle-pager span.cycle-pager-active {
	color: #D69746;
}

.cycle-pager>* {
	cursor: pointer;
}

/* caption */
.cycle-caption {
	position: absolute;
	color: white;
	bottom: 15px;
	right: 15px;
	z-index: 700;
}


/* overlay */
.cycle-overlay {
    font-family: tahoma, arial;
    position: absolute;
    bottom: 0;
    width: 95%;
    z-index: 600;
    background: rgba(0,0,0,0.5);
    color: white;
       padding: 5px 15px 15px 15px;
    opacity: 1;
    left: 2.5%;
    bottom: 2%;
    border-top: 5px solid #ffcc00;
}


/* prev / next links */
.cycle-prev, .cycle-next {
	position: absolute;
	top: 0;
	width: 30%;
	opacity: 0;
	filter: alpha(opacity=0);
	z-index: 800;
	height: 100%;
	cursor: pointer;
}

.cycle-prev {
	left: 0;
	background: url(//malsup.github.com/images/left.png) 50% 50% no-repeat;
}

.cycle-next {
	right: 0;
	background: url(//malsup.github.com/images/right.png) 50% 50% no-repeat;
}

.cycle-prev:hover, .cycle-next:hover {
	opacity: .7;
	filter: alpha(opacity=70)
}

.disabled {
	opacity: .5;
	filter: alpha(opacity=50);
}


/* display paused text on top of paused slideshow */

.cycle-paused:after {
	content: 'Paused';
	color: white;
	background: black;
	padding: 10px;
	z-index: 500;
	position: absolute;
	top: 10px;
	right: 10px;
	border-radius: 10px;
	opacity: .5;
	filter: alpha(opacity=50);
}


/*rpd add*/

.slide-main { width: 100%; height: 100%; background-size:cover }


.wrap-headline{
    width: 100%;
    height: auto;
    background-color: #000000;
    color: #fff;
    overflow: hidden;
    position: relative;

}

.wrap-headline a{
    color:#fff;
    text-decoration: none;
}

.cycle-slideshow {
    width: 100%;
    max-width: 735px;
    position: relative;
    /*background: url(//malsup.github.com/images/spinner.gif) 50% 50% no-repeat;*/
    float: left;
    overflow: hidden;
    max-height: 305px;
}

.hl-list {
    width: 365px;
    float: left;
    height: auto;
    overflow: hidden;
}

li.cycle-pager-active {
    background-color: #2e2e2e;
}

ul#headline-list {
    padding:0px;
    margin: 0px;
} 

ul#headline-list li {
    list-style: none;
    border-bottom: 1px solid #4f4f4f;
    padding: 5px 20px;
    height: 51px;
    overflow: hidden;
}
ul#headline-list li:first-child {padding-top: 10px;}

.headlinetext {
    color: #fff902;
    background-color: #020021;
    padding: 10px;
    width: auto;
    text-align: center;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 999;
    font-weight: bold;
    font-size: 16px;
}

.slide-kanal {
    display: block;margin-bottom: 5px;
    background: #fe0000;
    width: 100px;
    text-align: center;
}
.slide-desc {
    display: block;
    font-size: 20px;
}
/* 
    media queries 
    some style overrides to make things more pleasant on mobile devices
*/

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
	.cycle-slideshow {
		width: 200px;
	}
	.cycle-overlay {
		padding: 4px
	}
	.cycle-caption {
		bottom: 4px;
		right: 4px
	}
}