﻿/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class 
   Mit den Veränderungen für die Produktanzeige
    02/2015 WS

*/
/* Die Breiten für Bootstrap sind wie folgt festgelegt
   --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
*/

.carousel,
.carousel-banner,
.carousel-teaser {
    min-width: 300px;
    width: 100%;
}
.carousel-banner {
    margin:0 auto 0 auto;
    max-width: 960px;
    height: 100px;
    /*border: solid 2px red;*/
}
.carousel-teaser {
    max-width: 600px;
    /*min-width:300px;*/
    height: calc(300px + 0.5rem);
    /*border: solid 2px blue;*/
}

.carousel > .carousel-inner,
.carousel-banner > .carousel-inner,
.carousel-teaser > .carousel-inner{
    height: 100%;
}

.carousel-inner{
    height:100%;
    /*width: calc(100% - 80px);*/
    /*left:40px;*/
    /*right:40px;*/
    /*background-color:ActiveCaption;*/
    /*border:1px solid green;*/
}


/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
  min-width: 306px;
  width: calc(100% - 80px);
  left:40px;
  right:40px;
  padding: 0 0 5px 0;
  text-shadow:none;
  /*border: 1px solid yellow;*/
}

/* Declare heights because of positioning of img element */
.carousel .item, 
.carousel .carousel-item {
  height: 100%;
  background-color: transparent;
}

.carousel-inner > .item > img,
.carousel-inner > .carousel-item,
.carousel-item,
.carousel-inner > .carousel-item > img {
    top: 0;
    left: 0;
    width: 100%;
    height: calc(300px + 0.5rem);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    /*border:solid 1px pink;*/
}

.carousel-control {
    font-size: 20px;
    width:40px;
}

.carousel-indicators {
    /*position: absolute;*/
    /*bottom: -2px;*/
    /*color:aqua;*/
    /*left: 50%;*/
    /*z-index: 15;*/
    /*width: 60%;*/
    /*padding-left: 0;*/
    /*margin-left: -30%;*/
    /*text-align: center;*/
    /*list-style: none;*/
    /*border:1px solid red;*/
}

/*
    Die CSS Klasssen für den Werbe-Banner
*/


/* Ende Banner Klassen*/

/*
    Die CSS Klassen für das Teaser-Carousel
*/

/* Ende Tease Klassen*/

/*  RESPONSIVE CSS
    --------------------------------------------------
*/

/* Die Breiten für Bootstrap sind wie folgt festgelegt
   --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
*/
/* Der Bootstrapbereich xs*/
@media (min-width: 0px) and (max-width: 575px) {
    .carousel-banner{
        height:50px;
    }

    .carousel-teaser{
        height:200px;
    }

    .carousel-inner > .item > img,
    .carousel-inner > .carousel-item,
    .carousel-item,
    .carousel-inner > .carousel-item > img {
        top: 0;
        left: 0;
        width: 100%;
        height: 200px;
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
        /*border: solid 1px pink;*/
    }

    /*.carousel-banner .carousel-inner .carousel-item img{
        height:50px;
        width:50px;
        color:green;
    }*/

    /*.carousel-banner,
    .carousel-banner .item,
    .carousel-banner .carousel-item{
        height: 50px;
    }*/

    /*.carousel {
        height: 200px;
        border:solid 1px green;
    }*/


        /*    .carousel-inner > .item > img,
    .carousel-inner > .carousel-item,
    .carousel-item,
    .carousel-inner > .carousel-item > img {
        height: calc(100% + 0.5rem);
top: 0;
        left: 0;
        width: 100%;
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
        border: solid 3px green;
    }*/




}
/* Der Bootstrapbereich sm*/
@media (min-width: 576) and (max-width: 767px) {
    .carousel-banner {
        height: 75px;
    }

    /*.carousel-teaser {
        height: 250px;
    }*/
    .carousel-banner,
    .carousel-banner .item,
    .carousel-banner .carousel-item{
        height: 75px;
    }
    /*.carousel {
        height: 110px;
        border: solid 2px green;
    }*/


}
/* Der Bootstrapbereich md*/
@media (min-width: 768px) and (max-width: 991px) {
/*@media (min-widht: 768px) {*/
    .carousel-caption p {
        margin-bottom: 20px;
        font-size: 21px;
        line-height: 1.4;
    }
    .carousel-teaser {
        height: calc(300px + 0.5rem);
    }
}
/* Der Bootstrapbereich lg*/
@media (min-width: 992px) and (max-width: 1200px) {
/*@media (min-widht: 992px) {*/

}
/* Der Bootstrapbereich xl*/
@media (min-width: 1200px) {

}