/*
#############################
 Slider
#############################
*/

/* Bewertungen */
#bewertungen {
        width: calc(100% - 20px);
         padding: 20px 10px;
         margin: 0px auto;
}

#bewertungen #slider-bewertung {
         float:left;
         width: calc(100% - 160px);
         text-align: center;
}

#bewertungen .item {
        float: left;
         min-height: 80px;
         max-height: 250px;
        display: block;
         width: calc(25% - 20px);
         margin: 5px 10px 10px 10px;
         padding: 10px;
         font-size: 0.8em;
         text-align: left;
         background: #FFFFFF;

        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
}

#bewertungen hr { width: 100%; border: 0px #FFFFFF dotted; border-top: 3px #BFBFBF dotted; }
#bewertungen .item .text  { min-height: 50px }
#bewertungen .item .name  { float:left; font-size: 0.9em; text-align: left; color: #ff5a00; }
#bewertungen .item .sterne  { float:right; }
#bewertungen .item .sterne img { float:left; }

/* Kundenlogo */
#kunden_logos {
         height: auto;
         width: calc(100% - 10px);
         padding: 0px 5px;
         margin: 20px auto;
}

#kunden_logos #slider-logo {
         float:left;
         width: calc(100% - 0px);
         text-align: center;
}

#kunden_logos #slider-logo img {
         display: inline-block;
         width: 240px;
         height: auto;
         margin: 10px 20px;

         filter: grayscale(100%);
         opacity: 0.6;

}

#kunden_logos #slider-logo img:hover {
         filter: grayscale(0%);
         opacity: 1.0;
}

/* Referenzen */
#slider-referenzen {
        display: block;
         width: calc(100% - 160px);
         min-height: 80px;
         text-align: center !important;
}

#slider-referenzen .item {
         float: left;
         width: calc(100% - 40px);
         vertical-align: middle;
         text-align: center;
         min-height: 80px;
         border:0px #DF00FF solid;
}

#slider-referenzen .item img {
         margin: 0px auto;
}

div[id^="slider-refs-all-"] {
        display: block;
         width: calc(100% - 0px);
         min-height: 80px;
         text-align: center !important;
}

div[id^="slider-refs-all-"] .item {
         float: left;
         width: calc(100% - 0px);
         vertical-align: middle;
         text-align: center;
         min-height: 60px;
         border:0px #DF00FF solid;
}

div[id^="slider-refs-all-"] .item img {
         margin: 10px auto;
}

div[id^="refs_"] .slider_menu {
        float: right;
         border: 0px #000000 solid;
         width: 90px;
         height: 40px;
         margin-top: -55px;
}

#slider-banner {
         background: transparent;
         display: none;
         position: fixed;

         z-index: 250;
         height: calc(100vh - 100px);
         width: calc(100vw - 100px);
         margin: 50px;

         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
}

#slider-banner #slider-prev-banner, #slider-banner #slider-next-banner {
         display: table-cell;
         width: 50px;
         height: calc(100vh - 100px);
         background: rgba(255,255,255,0.0);
}
#slider-banner #slider-prev-banner:hover, #slider-banner #slider-next-banner:hover { background: rgba(255,255,255,0.0); }
#slider-banner #slider-prev-banner .icon, #slider-banner #slider-next-banner .icon { margin-top: calc(50vh - 50px - 20px); background-color: rgba(0,0,0,0.2); border-radius: 50px; -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5); box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);}

#slider-banner .slider-items {
         display: table-cell;
         width: calc(100vw - 100px - 100px - 40px);
         max-width: calc(100vw - 100px - 100px - 40px);

         height: calc(100vh - 100px);
         background: rgba(0,0,0,0.0);
         margin: 0px 20px;
         text-align: center;
         vertical-align: middle;
         overflow: hidden;
}

#slider-banner .slider-items img {
         width: calc(100% - 0px);
         height: auto;
         margin: 0px auto;
}

#slider-banner .slider-items img.width-120 { max-width: 120px !important; }
#slider-banner .slider-items img.width-160 { max-width: 160px !important; }
#slider-banner .slider-items img.width-200 { max-width: 200px !important; }
#slider-banner .slider-items img.width-234 { max-width: 234px !important; }
#slider-banner .slider-items img.width-300 { max-width: 300px !important; }
#slider-banner .slider-items img.width-320 { max-width: 320px !important; }
#slider-banner .slider-items img.width-336 { max-width: 336px !important; }
#slider-banner .slider-items img.width-468 { max-width: 468px !important; }
#slider-banner .slider-items img.width-480 { max-width: 480px !important; }
#slider-banner .slider-items img.width-728 { max-width: 728px !important; }
#slider-banner .slider-items img.width-800 { max-width: 800px !important; }
#slider-banner .slider-items img.width-970 { max-width: 970px !important; }


/* Pfeile */
div[id^="slider-prev-"] { float:left; cursor: pointer; border: 0px #000000 solid; height: auto; }
div[id^="slider-prev-"] .icon { margin-top: calc(50% - 20px); margin-left: calc(50% - 20px); opacity: 0.5; display: inline-block; }
div[id^="slider-prev-"]:hover > .icon { opacity: 1.0; }

div[id^="slider-next-"] { float:right; cursor: pointer; text-align: right; }
div[id^="slider-next-"] .icon { margin-top: calc(50% - 20px); margin-right: calc(50% - 20px); opacity: 0.5; display: inline-block; }
div[id^="slider-next-"]:hover > .icon { opacity: 1.0; }

#bewertungen #slider-next-bewertung, #bewertungen #slider-prev-bewertung { width: 80px; height: 120px !important; }
#slider-next-referenzen, #slider-prev-referenzen { width: 80px; height: 120px; border: 0px #000000 solid; }
#slider-next-logo, #slider-prev-logo { display: none; width: 80px; height: 160px !important; }

div[id^="slider-next-refs-"], div[id^="slider-prev-refs-"] { width: 40px; height: 40px; }