/* ============================================================================================================================================================================== */
/*                                                                                                                                                                                */
/*                                        Systemeinstellungen für Slide (Lightslider, Lightgallery, JSSOR))                                                                       */
/*                                                                                                                                                                                */
/* ============================================================================================================================================================================== */

/* ============================================================================================================================================================================== */
/* Lightslider styles																				  */
/* ============================================================================================================================================================================== */

.lightslider div.slide .caption{
    width: 100%;
    position: absolute;
    text-align: center;
    box-sizing: border-box;
    bottom: 0px;
}
/* ============================================================================================================================================================================== */
/* Lightgallery styles																				  */
/* http://dev.home/wp-content/themes/junge-muenchner-symphoniker/WPExtensions/lightgallery/demo/index.html
/* ============================================================================================================================================================================== */
.lg-backdrop.in{
    opacity: 0.7;
}

.lightgallery > ul {
    margin-bottom: 0;
    list-style: none;
}
.lightgallery > ul > li {
    position: relative;
    float: left;
    margin-bottom: 15px;
    margin-right: 20px;
    width: 200px;
    height: 180px;
}
.lightgallery > ul > li .caption{
    position: absolute;
    padding: 0px;
    margin: 0px;
    bottom: 0px;
    _font-size: 85%;
    width: 100%;
    text-align: center;
}
.lightgallery > ul > li > a {
    border: 3px solid #FFF;
    border-radius: 3px;
    display: block;
    overflow: hidden;
    position: relative;
    float: left;
    background-color: white;
}
.lightgallery > ul > li a > img {
    transition: transform 0.15s ease 0s;
    transform: scale3d(1.05, 1.05, 1.05);
    height: 100%;
    width: 100%;
}
.lightgallery > ul > li a:hover > img {
    transform: scale3d(1.15, 1.15, 1.15);
}
.lightgallery > ul > li a:hover .lightgallery-poster > img {
    opacity: 1;
}
/* ============================================================================================================================================================================== */
/* JSSOR styles																				  */
/* http://www.jssor.com/
/* ============================================================================================================================================================================== */
.jssor .slider{
    position: relative; 
    top: 0px; 
    left: 0px; 
    width: 640px; 
    height: 480px;
}
.jssor .slider > .slides{
    position: absolute;
    overflow: hidden;
    left: 0px;
    top: 0px;
    width: 640px;
    height: 480px;
    cursor: move; 
}
.jssor .slider > .slides .slide .caption{
    position: absolute;
    text-align: center;
    width: 100%;
    top:0px;
    left: 0px;

}

.jssor .slider .navigator{
    position: absolute;
    bottom: 0px;
}
/* jssor slider bullet navigator skin 05 css */
/*
.navigator div           (normal)
.navigator div:hover     (normal mouseover)
.navigator .av           (active)
.navigator .av:hover     (active mouseover)
.navigator .dn           (mousedown)
*/
.jssor .slider .navigator div,
.jssor .slider .navigator div:hover,
.jssor .slider .navigator .prototypeav{
    position: absolute;
    /* size of bullet elment */
    width: 16px;
    height: 16px;
    background: url('../WPExtensions/jssor/img/b05.png') no-repeat;
    overflow: hidden;
    cursor: pointer;
}
.jssor .slider .navigator div{ 
    background-position: -7px -7px; 
}
.jssor .slider .navigator div:hover,
.jssor .slider .navigator .prototypeav:hover{
    background-position: -37px -7px; 
}
.jssor .slider .navigator .prototypeav{
    background-position: -67px -7px; 
}
.jssor .slider .navigator .prototypedn, 
.jssor .slider .navigator .prototypedn:hover{
    background-position: -97px -7px; 
}

/* jssor slider thumbnail navigator skin 01 css */
/*
.thumbnavigator .p            (normal)
.thumbnavigator .p:hover      (normal mouseover)
.thumbnavigator .p.pav        (active)
.thumbnavigator .p.pdn        (mousedown)
*/

.jssor .slider .thumbnavigator{
    position: absolute;
    /* size of thumbnail navigator container */
    width: 300px;
    height: 72px;
    bottom: 0px;
}

.jssor .slider .thumbnavigator .p {
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 72px;
}

.jssor .slider .thumbnavigator .t {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.jssor .slider .thumbnavigator .w {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.jssor .slider .thumbnavigator .c {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 68px;
    height: 68px;
    border: #000 2px solid;
    box-sizing: content-box;
    background: url(../WPExtensions/jssor/img/t01.png) -800px -800px no-repeat;
    _background: none;
}

.jssor .slider .thumbnavigator .pav .c {
    top: 2px;
    _top: 0px;
    left: 2px;
    _left: 0px;
    width: 68px;
    height: 68px;
    border: #000 0px solid;
    _border: #fff 2px solid;
    background-position: 50% 50%;
}

.jssor .slider .thumbnavigator .p:hover .c {
    top: 0px;
    left: 0px;
    width: 70px;
    height: 70px;
    border: #fff 1px solid;
    background-position: 50% 50%;
}

.jssor .slider .thumbnavigator .p.pdn .c {
    background-position: 50% 50%;
    width: 68px;
    height: 68px;
    border: #000 2px solid;
}

/* jssor slider arrow navigator skin 05 css */
/*
.arrownavigator-l                  (normal)
.arrownavigator-r                  (normal)
.arrownavigator-l:hover            (normal mouseover)
.arrownavigator-r:hover            (normal mouseover)
.arrownavigator-ldn      (mousedown)
.arrownavigator-rdn      (mousedown)
*/
.jssor .slider .arrownavigator-l,
.jssor .slider .arrownavigator-ldn,
.jssor .slider .arrownavigator-r,
.jssor .slider .arrownavigator-rdn {
    display: block;
    position: absolute;
    /* size of arrow element */
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: url(../WPExtensions/jssor/img/a17.png) no-repeat;
    overflow: hidden;
    top:  90px; /* (Slides Height - Arrow Height) / 2 */
}
.jssor .slider .arrownavigator-l,
.jssor .slider .arrownavigator-ldn{ 
    background-position: -10px -40px;
    left: 5px;
}
.jssor .slider .arrownavigator-r,
.jssor .slider .arrownavigator-rdn{ 
    background-position: -70px -40px; 
    right: 5px;
}
.jssor .slider .arrownavigator-l:hover { 
    background-position: -130px -40px; 
}
.jssor .slider .arrownavigator-r:hover { 
    background-position: -190px -40px; 
}
.jssor .slider .arrownavigator-ldn { 
    background-position: -250px -40px; 
}
.jssor .slider .arrownavigator-rdn { 
    background-position: -310px -40px; 
}
/* ============================================================================================================================================================================== */
/* FancyBox generelle Formatierungen
/* ============================================================================================================================================================================== */
.fancybox-overlay{
    background: rgba(200,200,200,0.95);
}
.fancybox-overlay .fancybox-outer{
    overflow: hidden;
}
.fancybox-overlay .fancybox-inner .fancybox-title{
    width: 100%;
}
/* FancyBox individuelle Formatierungen */
.fancybox-overlay .seis .fancybox-inner .fancybox-title{
    text-align: center;
    padding-top: 0;
    padding-bottom: 0;
    color: black;
    background: rgba(255,255,255,0.75);
}
/* Bei image hover Bild vergrößern */
.fancybox a.lightbox a img{
    transition: transform 0.25s ease-out 0.0s;
}
.fancybox a.lightbox img:hover{
    transition: transform 0.25s ease-out 0.0s;
    transform: scale(1.05);
    cursor: zoom-in;
}
/* ============================================================================================================================================================================== */
/* Galerie mit Fancybox: link (a) und bild (img) müssen mit div umrahmt sein
/* http://maurice-web.de/css-vertikale-zentrierung-unbekannter-hoehe/														  */
/* http://jsfiddle.net/fmaurice/f2c9Q/																		  */
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/															  */
/* ============================================================================================================================================================================== */
.fancygallery{
    border: 0px dotted #dddd00;
    display: flex;
    margin: 0 auto;
    _width: 80%;	    /* Breite prozentual vom Parent */
    max-width: 800px;	    /* feste Breite */
    flex-wrap: wrap;
    justify-content: center;/* vertikales Ausrichten im Parent */
    text-align: center;
    box-sizing: border-box;
    _align-items: center; /* Ausrichten am Bild das am höchsten ist, deaktiviert: alle gleich hoch */ 
}
@media (max-width: 820px) {
    .fancygallery{
	width: 100%;
    }
}
.fancygallery div {
    border: 0px dotted #bbbbbb;
    _width:100px;	    /* feste Breite und Höhe */
    _height: 100px;
    width: 24%;		    /* Prozentual der Galerie */
    display: flex;
    flex-wrap: wrap;
    align-items: center;    /* Bilder vertikal ausrichten */
    padding: 4px;	    /* Rand um das Bild */
    _margin: 4px;	    /* Abstand der Bild-container */
    box-sizing: border-box;
}
.fancygallery div a.lightbox img{
    background-color: lightgray;
    width: 90%;
    height: auto;
    padding: 5%;	    /* Bilderrahmen */
    border-radius: 5px;
    box-sizing: border-box;
    box-shadow: 1px 1px 2px 2px #aaaaaa;
    transition: transform 0.25s ease-out 0.0s;
}
.fancygallery div a.lightbox img.portrait{
    width: 60%;
    height: auto;
}
.fancygallery div a.lightbox img:hover{
    transition: transform 0.25s ease-out 0.0s;
    transform: scale(1.05)!important;
    box-shadow: 2px 2px 2px 3px #aaaaaa;
}

/* ============================================================================================================================================================================== */