/*
    these are just the default styles used in the Cycle2 demo pages.  
    you can use these styles or any others that you wish.
*/


/* 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; }


.cycle-slideshow {/* width: 100% !important;*/margin: 0; padding: 0; position: relative;top:0px;
/*    background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat; max-width: 1900px; */
  
  width:320px;  min-width: 200px; height:500px;
  
  margin:0px auto 0px auto;padding-bottom:30px;
 }



/* 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; bottom: 0; left: 200px; 
    width: 35% !important; height:auto; max-width:500px;
    padding: 0; display: block;*/
}



.newscontainer{ width:100%;  max-width:320px; height:475px;overflow:hidden;  margin: 0px auto 0px auto;position:relative; padding:0px 60px 0px 60px;}

.slide-element {float:left; width:200px; height:475px; /**/display:block;padding:0px 0px 0px 0px;  /* margin-right:30px; */overflow: hidden; /*padding-bottom:200%;*/}

.slide-element img {width:100%; height:auto;} 

.newscontainer #prev {position:absolute; left:0px; top: 0px; width:60px; height:475px;cursor:pointer;background-color:#D8D8D8;
 
background-image:url('../images/karousell_links.png');
background-repeat:no-repeat;
background-size:auto 30px;
background-position: center center;
}
.newscontainer #next {position:absolute; right:0px; top:0px; width:60px; height:475px;cursor:pointer;background-color:#D8D8D8;
 

background-image:url('../images/karousell_rechts.png');
background-repeat:no-repeat;
background-size:auto 30px;
background-position:center center;

}

/*

.cycle-slideshow img { width: 100%; height: auto; display: block; }*/
 

.newsbox {position:relative;  width: 200px; height:475px; background:#00A89E; padding:0; }

 .newsbox img {width:100%; height:auto;}
 .newsheadline h3 {padding:0px 12px 12px 12px}
 
 .newsbox p  {padding:0px 12px 12px 12px}
 
 .newsheadline {position: absolute; bottom:40%;  bottom:250px;width:200px; height:60px; white-space:normal; display:block;}
 
 .newsteaser {position: absolute;  bottom:0px; width:200px; white-space:normal; display:block; height:220px;}

 
 .newsteaser .morelink {position:absolute; bottom: 23px;right:4px;}
 
 
 
@media all and (min-width: 768px){
 
 
.cycle-slideshow {width:530px; height:541px;}
 
.newsbox { width: 350px;  max-width:350px;height:541px;  }	

.slide-element { height:541px;  width:350px;  }
.newscontainer{ width:530px; max-width:530px; padding:0px 90px 0px 90px;height:541px;}
 
 
 .newsbox p  {padding:0px 24px 12px 24px}
 .newsheadline h3 {padding:0px 24px 12px 24px}
  
.newscontainer #prev, .newscontainer #next{ width:90px; background-size:auto 60px;height:541px;}
 

 .newsheadline {position: absolute; bottom:40%;  bottom:210px;width:350px; height:60px; white-space:normal; display:block;}
 .newsteaser {position: absolute; bottom:10%; bottom:0px; width:350px; white-space:normal; display:block; height:185px;}

 .newsteaser .morelink {position:absolute; bottom: 23px;right:12px;}
} 
 
 
@media all and (min-width: 1024px){
	

.cycle-slideshow {margin: 0; padding: 0; position: relative;top:0px;
  width:970px;  min-width: 200px; height:541px;
 }



.newsbox { width: 350px;  max-width:350px;height:541px;  }	

.slide-element { height:541px; margin-right:30px;width:350px;  }
	
 .newscontainer{ width:930px; max-width:930px; padding:0px 80px 0px 110px;height:541px;}
 
  
.newscontainer #prev {position:absolute; left:12px; top: 50%; width:64px; height:64px;cursor:pointer;
 
background-image:url('../images/karousell_links.png');
background-repeat:no-repeat;
background-size:auto 60px;
background-position: center center;
}
.newscontainer #next {position:absolute; right:0px; top:50%; width:64px; height:64px;cursor:pointer;
 

background-image:url('../images/karousell_rechts.png');
background-repeat:no-repeat;
background-size:auto 60px;

}

 .newsteaser .morelink {position:absolute; bottom: 23px;right:4px;}


}