/**
 * PgwSlider - Version 1.3
 *
 * Copyright 2014, Jonathan M. Piat
 * http://pgwjs.com - http://pagawa.com
 *
 * Released under the GNU GPLv3 license - http://opensource.org/licenses/gpl-3.0
 */
/* -------------------------------------------- */
/* -- Die Groesse des Sliders mit thumbnails -- */
/* -------------------------------------------- */
.pgwSlider {
width: 100%;
}
/* -------------------------------------------- */
/* -------------------------------------------- */
/* ----- Die Groesse des 1. Grossen Bildes ---- */
/* -------------------------------------------- */
.ps-current {
max-height: 420px !important; /* Hoehe */
margin-top: 6px;
float: left;
width: 74.3%;
overflow: hidden;
height: 420px;
position: relative;
border-radius: 4px 4px 4px 4px;
margin-top: 0;
border: 1px solid #ADADAD;
-moz-box-shadow: 0px 0px 2px 2px #DCDCDC;
-webkit-box-shadow: 0px 0px 2px 2px #DCDCDC;
-ms-box-shadow: 0px 0px 2px 2px #DCDCDC;
box-shadow: 0px 0px 2px 2px #DCDCDC;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.ps-current:hover {
max-height: auto !important;
border-radius: 4px 4px 4px 4px;
border: 1px solid #ADADAD;
-moz-box-shadow: 0px 0px 3px 3px #CFCFCF;
-webkit-box-shadow: 0px 0px 3px 3px #CFCFCF;
-ms-box-shadow: 0px 0px 3px 3px #CFCFCF;
box-shadow: 0px 0px 3px 3px #CFCFCF;
overflow: hidden;
}
/* ----------------------------------------------------- */
/* ------ Die Groesse des Textes vom Grossen Bild ------ */
/* ----------------------------------------------------- */
/* Der Textschalter fuer d. Beschreibung im JS/slider.js */
/* ----------------------------------------------------- */
.ps-current span {
position: absolute;
width: 100%;
padding: 40px 0px 0px 30px; /* position des titels im grossen bild - oben, rechts, unten und links */
left: 0px;
bottom: 0px;
color: #fff;
height:100px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3a3a3a+0,000000+100&0+25,0.6+92 */
background: -moz-linear-gradient(top,  rgba(58,58,58,0) 0%, rgba(44,44,44,0) 25%, rgba(5,5,5,0.6) 92%, rgba(0,0,0,0.6) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(58,58,58,0) 0%,rgba(44,44,44,0) 25%,rgba(5,5,5,0.6) 92%,rgba(0,0,0,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(58,58,58,0) 0%,rgba(44,44,44,0) 25%,rgba(5,5,5,0.6) 92%,rgba(0,0,0,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003a3a3a', endColorstr='#99000000',GradientType=0 ); /* IE6-9 */
overflow: hidden;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-khtml-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
}
.ps-current a img:hover{
-webkit-transform: scale(1.02, 1.02);
-moz-transform: scale(1.02, 1.02);
-ms-transform: scale(1.02, 1.02);
-o-transform: scale(1.02, 1.02);
-khtml-transform: scale(1.02, 1.02);
transform: scale(1.02, 1.02);
overflow: hidden;
}
.ps-current a span:hover{
/*
-webkit-transform: scale(1.01, 1.01);
-moz-transform: scale(1.01, 1.01);
-ms-transform: scale(1.01, 1.01);
-o-transform: scale(1.01, 1.01);
-khtml-transform: scale(1.01, 1.01);
transform: scale(1.01, 1.01);
overflow-y: hidden;
*/
overflow: hidden;
}
.ps-current img {
/* max-width: 100%; */
/* min-width: 100%; */
width: 100%;
height: auto;
display: block;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-khtml-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
overflow: hidden;
}
.bgwslidertitle {
position: relative;
margin-bottom: -5px;
padding: 10px 30px 0px 0px; /* position des titels im grossen bild - oben, rechts, unten und links */
font-family: 'Oswald', sans-serif;
/* font-size: 1rem;  Original Textgroesse der Beschreibung */
font-size: 1.8em; /* Textgroesse der Beschreibung */
/* font-weight: bold; */
/* width: 500px; */
overflow: hidden;
white-space: nowrap;
text-overflow: ' ...       ';
/* text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis; 
-ms-text-overflow: ellipsis;  
-khtml-text-overflow: ellipsis;  
-moz-text-overflow: ellipsis; */
z-index: 4;
}
/* .bgwsliderdescription { */
/* position: relative; */
/* text-align: center; */
/* padding: 20px 30px 0px 0px; */ /* position des titels im grossen bild - oben, rechts, unten und links */
/* margin-bottom: -1px; /*
/* font-family: 'Oswald-Regular', sans-serif; */
/* font-size: 1rem; Original Textgroesse der Beschreibung */
/* font-size: 1.8em; */ /* Textgroesse der Beschreibung */
/* font-weight: bold; */
/* z-index: 3; */
/* } */
.bgwsliderdescription { /* NEW */
position: relative;
margin-bottom: -15px;
padding: 10px 30px 0px 0px; /* position des titels im grossen bild - oben, rechts, unten und links */
font-family: 'Oswald', sans-serif;
/* font-size: 1rem;  Original Textgroesse der Beschreibung */
font-size: 1.8em; /* Textgroesse der Beschreibung */
/* font-weight: bold; */
/* width: 500px; */
overflow: hidden;
white-space: nowrap;
text-overflow: ' ...       ';
/* text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis; 
-ms-text-overflow: ellipsis;  
-khtml-text-overflow: ellipsis;  
-moz-text-overflow: ellipsis; */
z-index: 4;
}
/* ------------------------------------------- */
/* -------- Groesses Sliderbild ENDE --------- */
/* ------------------------------------------- */

/* ------------------------------------------- */
/* ------------------------------------------- */
/* ------------------------------------------- */

/* ------------------------------------------- */
/* -- Der Platzhalter Rahmen fur die Thumbs -- */
/* ------------------------------------------- */
ul.pgwSlider, .pgwSlider > ul {
float: right;
margin-top:-6px;
width: 26.2%;
padding: 2px 0px 16px 16px; /* oben, rechts, unten und links */
/* list-style: none; */
margin-left: auto;
margin-right: -14px;
max-height:437px;
height: 437px;
/* overflow:hidden; */
/* border: 1px solid blue; */ /* -- zum testen -- */
overflow: hidden;
/* border: 1px solid red; */
}
/* ------------------------------------------- */
/* ------- Das erste kleine Thumbnails ------- */
/* ------------------------------------------- */
ul.pgwSlider > li:first-child, .pgwSlider > ul > li:first-child {
float: left;
overflow: hidden;
padding: 6px 4px 2px 3px; /* oben, rechts, unten und links */
margin-top: -1px;
margin-left: -4px;
/* margin-right: 12px; */
height: 31.74%;
/* border: 1px solid green; */
}
ul.pgwSlider > li:first-child img{
width: 97.4%;
border-radius: 4px 4px 4px 4px;
}
/* ------------------------------------------- */
/* --- Platzhalter fuer die kleinen Bilder --- */
/* ------------------------------------------- */
ul.pgwSlider > li,
.pgwSlider > ul > li {
float: right;
overflow: hidden;
position: relative;
padding: 2px 5px 2px 2px; /* oben, rechts, unten und links */
margin-bottom: 1px;
margin-left: -1px;
margin-right: auto;
height: 31.74%;
/* height: 55px; */
max-width: 100%;
/* border: 1px solid red; */ /* -- zum testen -- */
}
/* ------------------------------------------- */
/* ------- Das letzte kleine Thumbnail ------- */
/* ------------------------------------------- */
ul.pgwSlider > li:last-child, .pgwSlider > ul > li:last-child {
padding: 1px 5px 2px 2px; /* oben, rechts, unten und links */
margin-bottom: 1px;
margin-left: -1px;
margin-right: auto;
height: 31.74%;
overflow: hidden;
border-radius: 4px 4px 4px 4px;
/* border: 1px solid green; */ /* -- zum testen -- */
}
/* ------------------------------------------- */
/* ---- Textabstand der kleinen Bilder ------- */
/* ------------------------------------------- */
ul.pgwSlider > li span, .pgwSlider > ul > li span {
border-radius: 4px 4px 4px 4px;
display: block;
float: left;
width: 100%;
margin-left: 6px;
margin-top: -28px;
font-family: 'Oswald-Regular', sans-serif;
/* font-size: 1rem;  Original Textgroesse der Beschreibung */
font-size: 0.01em; /* Textgroesse der Beschreibung */
/* font-weight: bold; */
padding: 6px 6px 6px 10px;
color: #fff;
}
/* ------------------------------------------- */
ul.pgwSlider > li:hover,
.pgwSlider > ul > li:hover {
opacity: 1 !important;
overflow: hidden;
}
/* ------------------------------------------- */
/* --------- Groesse der Thumbnails ---------- */
ul.pgwSlider > li img,
.pgwSlider > ul > li img {
float: right;
margin-left: 14px;
margin-right: auto;
height: 94%;
width: 96%;
display: block;
border-radius: 4px 4px 4px 4px;
margin-top: -1px;
border: 1px solid #ADADAD;
-moz-box-shadow: 0px 0px 2px 2px #DCDCDC;
-webkit-box-shadow: 0px 0px 2px 2px #DCDCDC;
-ms-box-shadow: 0px 0px 2px 2px #DCDCDC;
box-shadow: 0px 0px 2px 2px #DCDCDC;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-khtml-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
}
ul.pgwSlider img:hover {
border: 1px solid #ADADAD;
overflow: hidden;
-moz-box-shadow: 0px 0px 3px 3px #CFCFCF;
-webkit-box-shadow: 0px 0px 3px 3px #CFCFCF;
-ms-box-shadow: 0px 0px 3px 3px #CFCFCF;
box-shadow: 0px 0px 3px 3px #CFCFCF;
-webkit-transform: scale(1.02, 1.02);
-moz-transform: scale(1.02, 1.02);
-ms-transform: scale(1.02, 1.02);
-o-transform: scale(1.02, 1.02);
-khtml-transform: scale(1.02, 1.02);
transform: scale(1.02, 1.02);
}
/* ------------------------------------------- */
/* ---------------- Mobile ------------------- */
@media (min-width: 481px) {
/* -------- Die grösse des ersten langen thumbnail ----------- */
ul.pgwSlider > li:first-child, .pgwSlider > ul > li:first-child {

width: 97.5% !important;
max-height: auto !important;
}
/* -------- 3 x lange oder 4 kleine thumbs ----------- */
/* -------- wenn 3 x lange dann muss in der php von 6 auf 4 gesetzt werden ----------- */
ul.pgwSlider > li, .pgwSlider > ul > li {
/* width: 100% !important; */ /* -------- 3 x lange thumbs ----------- */
width: 48.5% !important; /* -------- 4 x kleine thumbs ----------- */
float:left;
margin-bottom:18px;
max-height:auto !important;
}
}
@media (max-width: 480px) {
/* ----------- Das Grosse Bild --------------- */
.pgwSlider .ps-current {
margin: 5px;
margin-bottom: 24px;
font-size: 0.9rem;
}
/* ------------------------------------------- */
.pgwSlider .ps-current img {
width: 100%;
min-height: inherit;
}
/* ------------------------------------------- */
/* ------ Groessenabstand des Slider  -------- */
/* ------------------------------------------- */
.pgwSlider .ps-current, ul.pgwSlider, .pgwSlider > ul {
float:left;
width: 100%;
}
/* ------------------------------------------- */
/* ------------------------------------------- */
/* ------ Die Groesse der Kleinen Bilder ----- */
/* ------------------------------------------- */
ul.pgwSlider > li:first-child, .pgwSlider > ul > li:first-child {
float: inherit;
overflow: hidden;
margin-top:0px;
margin-left:0px;
/* margin-right: 12px; */
min-height: 50px;
max-height: 50px;
min-width: 50px;
max-width: 50px;
/* border: 1px solid green; */
border-radius: 4px 4px 4px 4px;
}
ul.pgwSlider > li, .pgwSlider > ul > li {
float: inherit;
margin-top: 1%;
margin-left: 1%;
margin-right: 2%;
min-height: 47px;
max-height: 47px;
min-width: 47px;
max-width: 47px;
overflow-y: hidden;
border-radius: 4px 4px 4px 4px;
}
/* ------------------------------------------- */
ul.pgwSlider > li span, .pgwSlider > ul > li span {
white-space: nowrap;
overflow-y: hidden;
}
ul.pgwSlider, .pgwSlider > ul {
float: left;
margin-top:-6px;
width: 100%;
padding: 2px 0px 16px 16px; /* oben, rechts, unten und links */
/* list-style: none; */
margin-left: 1px;
margin-right: -14px;
height: 180px;
max-height:181px;
/* overflow:hidden; */
/* border: 1px solid blue; */ /* -- zum testen -- */
overflow: hidden;
/* border: 1px solid red; */
}
.ps-current {
margin-top: 6px;
float: left;
width: 99%;
overflow: hidden;
height: 220px;
max-height: 220px !important; /* Hoehe */
position: relative;
border-radius: 4px 4px 4px 4px;
margin-top: 0;
border: 1px solid #ADADAD;
-moz-box-shadow: 0px 0px 2px 2px #DCDCDC;
-webkit-box-shadow: 0px 0px 2px 2px #DCDCDC;
-ms-box-shadow: 0px 0px 2px 2px #DCDCDC;
box-shadow: 0px 0px 2px 2px #DCDCDC;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
}
.pgwSlider .ps-current .ps-prev {
background: rgba(0, 0, 0, 0.5);
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000')";
border: 1px solid #777;
border-left: 0;
border-radius: 0 4px 4px 0;
position: absolute;
padding: 20px 20px 20px 17px;
left: 0;
top: 45%;
cursor: pointer;
}
.pgwSlider .ps-current .ps-next {
background: rgba(0, 0, 0, 0.5);
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000')";
border: 1px solid #777;
border-right: 0;
border-radius: 4px 0 0 4px;
position: absolute;
padding: 20px 17px 20px 20px;
right: 0;
top: 45%;
cursor: pointer;
}