
/* - unibonnstartseite.css - */
@media screen {

/* hide elements from easyslider_interface */
#formfield-form-centered, 
#formfield-form-odd_pause,
#formfield-form-odd_speed,
#formfield-form-easytemplate_enabled,
#formfield-form-resume_play,
#formfield-form-vertical,
#formfield-form-on_hover,
#formfield-form-navigation_buttons_rendering_type {
    display: none;
}


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


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

/* 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: 101;
    position: absolute;
    /*overflow: hidden;*/
}
.cycle-pager span { 
    font-size: 70px;
    width: 30px;
    display: inline-block;
    color: rgba(255,255,255,.4);
    cursor: pointer;
}

.cycle-pager span.cycle-pager-active {
    color: rgba(255,255,255,.9);
}

.cycle-pager span:hover {
    color: rgba(255,255,255,.7);
}
.cycle-pager > * {
    cursor: pointer;
}

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

/* overlay */
.cycle-overlay { 
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 600;
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    color: white;
    padding: 15px;
    width: 25%;
    height: 100%;
}

.cycle-overlay.right {
    right: 0;
}

.cycle-overlay.top {
    top: 0;
    width: 100%;
    height: auto;
    bottom: inherit;
}

.cycle-overlay.bottom {
    bottom: 0;
    width: 100%;
    height: auto;
}

/*.cycle-overlay > *{ 
    opacity: 1;
 }
 
 .cycle-slide-active .cycle-overlay {
    transition-duration: 0.8s;
    transform: translateX(0px) translateY(0px);
    transform: translateX(0%);
    opacity: 1;
}*/
    
/* prev / next links */
.cycle-prev, .cycle-next {
    position: absolute;
    top: calc(50% - 30px);
    width: auto;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 800;
    height: auto;
    cursor: pointer;
    color: #ffffff;
    font-size: 60px;
}
.cycle-prev {
    left: 20px;
    /*background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;*/
}
.cycle-next {
    right: 20px;
    /*background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;*/
}

.big_arrows {
    background-size: 100%;
}

.small_arrows {
    background-size: 30%;
}    


.cycle-slideshow:hover .cycle-prev, .cycle-slideshow:hover .cycle-next {
    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);
}

.slide-cycle2 {
    width: 100%;
}

.slide-cycle2 p{
    margin: 0;
}

.news-image img {
    width: 100%;
    height: auto;
}

}

