.carouselcontainer {width:100%; border-bottom:1px solid #1056A0; border-top:1px solid #1056A0;
padding:48px 0px 48px 0px;
}


/*
    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) */
.slideshow, .slideshow * ,#carousel .cycle-slideshow ,#carousel .cycle-slideshow *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#carousel {/*max-width: 980px;width: 100% !important; height:304px; */background:transparent;}

 

#carousel .cycle-slideshow {/* width: 100% !important; min-width: 200px;*/ padding: 0; position: relative;
   /* background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat; margin:  30px 0px 0px 0px;   height:304px; */
    
width: 960px;
background:transparent;

 }
 
  
#carousel .cycle-slideshow { width: 100% !important;  max-width: 960px;  height:auto; margin-top:0px; padding:0px 20px 0px 40px; /*  min-height: 120px; padding-bottom:30px;*/ }

.carousel-element { width:33.3333%;max-width:336px;   width:300px;    height: auto;padding:0px 20px 0px 0px;   }
 
.carousel-inner { width:100%;max-width:280px;     height: auto;background-size:cover; background-repeat:no-repeat; background-position: center center;  }

 .carousel-element  a {display:block;  width:100%;max-width:280px;     height: auto;padding-bottom:66.0714286%; }
 





/* slideshow images (for most of the demos, these are the actual "slides") */
#carousel .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% !important; max-width:280px;height:auto;padding: 0; display: block;
}

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

/* pager */
#carousel #pager { display:none;}
/*	#carousel #pager { display:none;
	text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 4px; overflow: hidden; text-align:center;
	}
	#carousel #pager span {
	display:inline-block;
	width:11px;
	height:11px;
	background:#1056a0;
	text-indent:-9999px;
	border:0;
	margin: 0px;margin-right:5px;margin-top:2px;
	}
	#carousel #pager span.cycle-pager-active {
	background:#1056a0;opacity:0.6;
	}
	#carousel  #pager > * { cursor: pointer;}
*/





/* caption */
#carousel .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: 100%; z-index: 600;
    background: black; color: white; padding: 15px; opacity: .5;
}


/* prev / next links */
#carousel #prev,#carousel #next { position: absolute; top:0px; width: 40px; height:185px; 
opacity: 1; filter: alpha(opacity=1);    cursor: pointer; display:block;
overflow:visible;
z-index:1000;

background-size:10px auto; background-repeat:no-repeat;  background-color: #fff ;
}

#carousel #prev {  left: 0px;  background-image: url(../images/GaleriePfeile.svg);background-position:left center; }
#carousel #next{ right:  0px;  background-image: url(../images/GaleriePfeile.svg);background-position:left center; }
#carousel #next {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}

/*#carousel #prev:hover , #carousel #next:hover{  opacity:0.8}*/
  

/*#prev:hover, #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: ''; 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-paused {display:none;}
.cycle-paused:after {
    content: '';    opacity: 0; filter: alpha(opacity=0);}
 */

/*
 #carousel .cycle-slideshow {  width: 980px;  height:auto;  padding-bottom:30px;margin-top:0px;    min-height: 120px }

.carousel-element {  width:336px;     height: auto;padding:30px 16px 0px 16px;    }
 
.carousel-inner {  width:280px;     height: auto;background-size:cover; background-repeat:no-repeat; background-position: center center; padding-bottom:70%;  }

 .carousel-element  a {display:block;  width:280px;     height: auto;padding-bottom:100%; }*/
 


 


/*


@media all and (max-width: 600px){
#carousel {max-width: 524px;width: 100% !important; height:284px; background:transparent;}
#carousel .cycle-slideshow { width: 100% !important;  max-width: 542px;height:284px;   }
 
.carousel-inner {width:254px;max-width:254px;     height: 254px;background-size:cover; background-repeat:no-repeat; background-position: center center;}

}


*/