.item {
border: 0px solid #fff;
height: 200px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
1.item1 {
background-image: url(../images/klinik-bad-oexen-winter-nr1.jpg);
}
1.item2 {
background-image: url(../images/klinik-bad-oexen-winter-nr2.jpg);
}
1.item3 {
background-image: url(../images/klinik-bad-oexen-winter-nr3.jpg);
}
1.item4 {
background-image: url(../images/klinik-bad-oexen-winter-nr4.jpg);
}
1.item5 {
background-image: url(../images/klinik-bad-oexen-winter-nr5.jpg);
}
1.item6 {
background-image: url(../images/klinik-bad-oexen-winter-nr6.jpg);
}
.item1 {
background-image: url(../images/klinik-bad-oexen-nr1.jpg);
}
.item2 {
background-image: url(../images/klinik-bad-oexen-nr2.jpg);
}
.item3 {
background-image: url(../images/klinik-bad-oexen-nr3.jpg);
}
.item4 {
background-image: url(../images/klinik-bad-oexen-nr4.jpg);
}
.item5 {
background-image: url(../images/klinik-bad-oexen-nr5.jpg);
}
.item6 {
background-image: url(../images/klinik-bad-oexen-nr6.jpg);
}
/********************************/
/*    carousel-flextext         */
/********************************/
.carousel-flextext {
position: absolute;
z-index: 40;
text-align: center;
background: rgba(255, 255, 255,0.5);
background: rgba(0,51,102,0.6);
color: #fff;
font-size:13px;
padding: 5px 10px;
top:20%;
left: 50%;
width:95%;
transform: translate(-50%, -50%);
}
.carousel-inner span {
font-size:20px;
}
.focus-png {
position: absolute;
top:70%;
transform: translate(-50%, -50%);
left: 80%;
width: 110px;
}
.weiter-abs {
position: absolute;
transform: translate(-50%, -50%);
top:-1%;
left: 80%;
width: 180px;
}
/* ********************************************************************************************* */
/* STANDARD col-sm */
/* ********************************************************************************************* */
@media only screen
and (min-width: 768px) {
.item {
height: 250px;
}
.carousel-flextext {
font-size:16px;
width:75%;
}
.carousel-inner span {
font-size:24px;
}
.focus-png {
position: absolute;
top:70%;
transform: translate(-50%, -50%);
left: 85%;
width: 140px;
}
.weiter-abs {
top:-0.5%;
left: 89%;
width: 160px;
}
}
/* ********************************************************************************************* */
/* STANDARD col-md */
/* ********************************************************************************************* */
@media only screen
and (min-width: 992px) {
.item {
height: 300px;
}
.carousel-flextext {
width: 880px;
font-size:24px;
}
.carousel-inner span {
font-size:30px;
}
.focus-png {
left: 85%;
width: 180px;
top:75%;
}
.weiter-abs {
top:-0.5%;
left: 87%;
width: 210px;
}
}
/* ********************************************************************************************* */
/* STANDARD col-lg */
/* ********************************************************************************************* */
@media only screen
and (min-width: 1200px) {
.item {
height: 400px;
}
.carousel-flextext {
width: 880px;
font-size:24px;
}
.carousel-inner span {
font-size:30px;
}
.focus-png {
left: 85%;
width: 180px;
top:75%;
}
.weiter-png {
margin-top:-100px;
margin-left:35px;
width:200px;
}
}
@media only screen
and (min-width: 1920px) {
.focus-png {
left: 73%;
width: 180px;
top:75%;
}
}
/********************************/
/*    carousel-indicators       */
/********************************/
.carousel-indicators {
bottom: 0px;
}
.carousel-indicators > li {
background-color: #fff;
border-color: #fff;
opacity: .5;
}
.carousel-indicators > li.active {
background-color: #fc3;
opacity: 1;
}
/********************************/
/*    carousel-control          */
/********************************/
.carousel-control {
width: 0;
}
.carousel-control.left,
.carousel-control.right {
opacity: 1;
filter: alpha(opacity=100);
background-image: none;
background-repeat: no-repeat;
text-shadow: none;
}
.carousel-control.left span {
padding: 10px;
}
.carousel-control.right span {
padding: 10px;
}
.carousel-control .fa-chevron-left,
.carousel-control .fa-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
position: absolute;
top: 40%;
z-index: 5;
display: inline-block;
}
.carousel-control .fa-chevron-left {
left: 0;
}
.carousel-control .fa-chevron-right {
right: 0;
}
.carousel-control.left span,
.carousel-control.right span {
background-color: #000;
opacity: .3;
filter: alpha(opacity=30);
}
.carousel-control.left span:hover,
.carousel-control.right span:hover {
opacity: .5;
filter: alpha(opacity=50);
}
/********************************/
/*       Fade carousel      */
/********************************/
.carousel.fade {
opacity: 1;
}
.carousel.fade .item {
transition: opacity ease-out .7s;
left: 0;
opacity: 0; /* alle slides versteckt */
top: 0;
position: absolute;
width: 100%;
display: block;
}
.carousel.fade .item:first-child {
top: auto;
opacity: 1; /* show first slide */
position: relative;
}
.carousel.fade .item.active {
opacity: 1;
}