/*
    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;*/ min-width: 200px;margin: 0; padding: 0; position: relative;top:0px;
/*    background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat; max-width: 1900px; */
    background:#fff;
  width:100%; max-width:1440px;max-width:4500px;
  
  margin:0px auto 0px auto;padding-bottom:230px;
 }



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



.sliderlink a {display:block; padding-bottom:73.333333%; width:100%; }
.sliderlink span { display:none;  }

 .slide-element {
position:relative; width:100%; height:auto; /* max-width: 1900px;    height:100vh;padding-bottom:0 !important; */

/* padding-bottom:73.333333%;*/
 
background-repeat: no-repeat;
background-position:center center;
background-size:  auto 100% ; background-size:cover;  }



 
.caption {
position: absolute;
left: 0px;bottom:-230px;height:230px;
 
overflow: hidden;
width: 100%;
background:#005EA8;
color:#fff;
}
 


.captiontext {padding:16px 20px 16px 20px;}

.captiontext span > a , .captiontext span#readmore_text{ display:inline-block;margin-top:20px; margin-left:0px;  padding-left:21px;
/*background-image:url('../images/icons/pfeil_slider.svg');*/
background-repeat:no-repeat;
background-size:16px 16px; 
background-position:left top 4px ;
background-image:url('../images/icons/button_arrow_weiss.svg');
/*filter:brightness(1000%); 
-moz-filter: brightness(1000%); */
   
 }
.captiontext span > a:hover,  .captiontext span#readmore_text:hover { /*filter:brightness(100%);
-moz-filter: brightness(100%); */
background-image:url('../images/icons/button_arrow_orange.svg');

color:#EC9A29;}


/* pager */
.cycle-pager { 
 width: 100%; z-index: 500; position: absolute; bottom:  0px; left:64px;left:0px;overflow: hidden; height:5px;
    background:transparent ; padding:0px 20px 0px 20px; 
 
}




.cycle-single  .cycle-pager span { display:none;}

.cycle-pager span { display:  block; float:left; cursor: pointer; margin-right:6px;margin-bottom:0px; width:50px;background:#9A9188;    width:calc(100% / 8 - 6px);
}
.cycle-pager span:hover { background:#F4F4F3;    }

.cycle-pager span.cycle-pager-active { background:#F4F4F3;     }

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



/* overlay */
.cycle-overlay { 
    font-family: tahoma, arial;
    position: absolute; bottom: 0; width: 100%; z-index: 600;
    background: black; color: white; padding: 15px; opacity: .5;
}



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

 /* display paused text on top of paused slideshow */
.cycle-paused:after {display:none;
    content: ''; color: white; background: transparent; padding: 10px;
    z-index: 500; position: absolute; top: 10px; right: 10px;
    border-radius: 10px;
    opacity: .5; filter: alpha(opacity=50);
}
 
 
 .cycle-prev, .cycle-next, .captionoverlay {display:none;}
 
 
@media all and (min-width: 480px){	 
 .caption {
bottom:-200px;height:200px;
 }
 .cycle-slideshow {padding-bottom:200px;}
}
 
 
 


@media all and (min-width: 768px){	

/*   .slide-element {
position:relative; width:100%; height:auto;  
 padding-bottom:51.948051%;
background-size:  100% auto;background-size:cover;
}*/

.sliderlink a {padding-bottom:51.948051%;}

.captiontext span#readmore_text{ margin-top:0px; margin-left:6px;}


}


 
@media all and (min-width: 900px){	
  

 
 
.cycle-slideshow { padding-bottom:120px;}
 
 
.caption {
position: absolute;
left: 0px;bottom:-120px;height:120px;
 
overflow: hidden;
width:  100% ;
background:#005EA8;
color:#fff; 
}
.captiontext {padding:16px 156px 16px 156px;max-width:1440px;margin:0px auto 0px auto;}
 
 
 .cycle-pager { left:156px;bottom:0px;}
 
.cycle-pager { width: calc(100% - 312px);padding:0px 0px 0px 0px;}
 
.cycle-pager span {  /*width:100px; */ }


 .cycle-prev { 
background:#005EA8; display:block;position:absolute;bottom:0px; left:0px; height:120px; width:156px;  z-index:105;

 }
 
.cycle-prev div { 
display:block;position:absolute;top:40px;  
left:40px;
width:37px ;height:37px;
/*border:1px solid #fff;*/
cursor:pointer; z-index:106;
}
.cycle-prev img { /* width:20px !important; height:20px !important;filter:brightness(1000%); margin:-10px 0px 0px -10px*/  width:37px !important; height:37px !important;
margin:-18px 0px 0px -18px;
position:relative;top:50%;left:50%; 

transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);

}


 .cycle-next { 
background:#005EA8; display:block;position:absolute;bottom:0px; right:0px; height:120px; width:156px; z-index:105;
 }

.cycle-next div {display:block;position:absolute;top:40px;right:40px;

width:37px ;height:37px;
/*border:1px solid #fff;*/
cursor:pointer; z-index:106;
}

.cycle-next img {/* width:20px !important; height:20px !important;filter:brightness(1000%);  margin:-10px 0px 0px -10px;*/ width:37px !important; height:37px !important; margin:-18px 0px 0px -18px;
position:relative;top:50%;left:50%;

}

.cycle-prev:hover img , .cycle-next:hover img {opacity:0.7}
 

}
 
   
 
@media all and (min-width:1200px){	
  
/* .slide-element {
position:relative; width:100%; height:auto;  
 padding-bottom:37.5%;
 
background-size:  100% auto;background-size:cover;
}*/

.sliderlink a{padding-bottom:37.5%}
}



@media all and (min-width:1440px){	

.cycle-slideshow { padding-bottom:107px;}

@keyframes delayedShow {
  to {
    visibility: visible;
  }
}

.delayedShow{
  visibility: hidden;
  animation: 0s linear 0.3s forwards delayedShow ;
}



.captionoverlay {position:absolute; display:block; width: calc((100vw - 1360px) / 2); background:#005EA8;bottom:0px;height:107px; z-index:105;}

.captionoverlay.left { left: 0px; }
.captionoverlay.right {right: 0px;  }


 .cycle-prev { left:50%; margin-left:-720px; height:107px;}
 
 .cycle-next{ left:50%; margin-left:560px; height:107px;}
 
 .cycle-next , .cycle-prev { height:107px;}
.cycle-next  div, .cycle-prev div {top:32px;}
 
.caption {
position: absolute;
left: 0px;bottom:-107px;height:107px;
 
overflow: hidden;
width: 100%;
background:#005EA8;
color:#fff;
}
.captiontext {padding:16px 156px 16px 156px;max-width:1440px;margin:0px auto 0px auto;}


 
.cycle-pager { /* left:50%; margin-left:-564px;bottom:0px; width:1128px;*/
 left: 50%;
transform: translateX(-50%); width:1128px;

}
.cycle-pager span {   width:135px;  /*1128 / 8 = 141*/ }

}
 

@media all and (min-width:1920px){	 
/*  .slide-element {
position:relative; width:100%; height:auto;  
padding-bottom:30%; 
background-size:  100% auto;background-size:cover;
}
*/
.sliderlink a{padding-bottom:30%}
}