/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
/* 
    Created on : 07.04.2018, 12:37:26
    Author     : juergen kind it-kind.de
*/
.klightbox { 
    display: none;
}
.klightbox { 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.swiper-overlay {
    display: none;
    position: fixed;
    z-index: 1009;
    background: rgba(0,0,0,.75);
    width: calc(100vw);
    height: calc(100vh);
    left: 0px;
    top: 0px;
    touch-action: none;
/*    position: absolute;*/
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

:root{--swiper-theme-color:#ffffff}


@media (min-width:420px) {
    .swiper-button-next, .swiper-button-prev {
/*        top: calc(50vh - 100px);*/
    }
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {  
        right: 20px;
        left: auto;
        height: 50px;
        width: 50px;
        /*border: 1px solid red;*/
    }   
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
        left: 20px;
        right: auto;
         height: 50px;
        width: 50px;
        /*border: 1px solid red;*/
        
    }
}

.klightbox.on {
    border: 0px solid red;
}




@media (min-width:992px) {



    .klightbox.on {
        position: fixed;
        /* height: calc(80vh); */

        width: 800px;
        max-width: 800px;

        
        max-height: calc(80vh);height: calc(80vh);
        top: calc(10vh);
        left: calc(50vw - 400px);
        z-index: 10012;
    }

    .klightbox.off { 
        position: fixed;

    }

    .swiper-container {
        width: 100%;
        height: 100%;
        z-index: 1010;
        /* disable selecting */
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
    }
    
    .swiper-slide img {
        z-index: 10016;
    }
    .swiper-slide {
         z-index: 10013;
        text-align: center;
        font-size: 18px;
        background: #fff;
        background: transparent;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;

        /* disable selecting */
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;


    }

    .swiper-button-next { outline: none;}
    .swiper-button-prev { outline: none; }
    
    
    
    .swiper-button-next, .swiper-button-prev {
        top: calc(50vh - 100px);
    }
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {  
        right: 0px;
        left: auto;
        height: 50px;
        width: 50px;
        /*border: 1px solid red;*/
    }   
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
        left: 0px;
        right: auto;
         height: 50px;
        width: 50px;
        /*border: 1px solid red;*/
        
    }

    /*.swiper-pagination { display: none; }*/ 
    .swiper-pagination { position: fixed; }
    /*.swiper-pagination { display: none; }*/
    .swiper-pagination-bullet {
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        color:#000;
        opacity: 1;
        background: rgba(250,250,250,0.2);
        margin-top: 40px;
        outline: none;
    }
    .swiper-pagination-bullet-active {
        color:#fff;
        background: #007aff;
    }

}


/* Bilder */
@media (min-width: 200px) and (max-width: 992px) {
    .swiper-slide img {
        max-width: calc(100vw - 40px);
        max-height: calc(80vh);
        border: 6px solid white;
        border-radius: 2px;
    }

    .klightbox { 
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .swiper-button-next { outline: none;}
    .swiper-button-prev { outline: none; }
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {  
        right: 10px;
        left: auto;
    }   
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
        left: 10px;
        right: auto;
    }


}


.swiper-slide img { 
    border: 6px solid white;
    border-radius: 2px;
}

@media (min-width:992px) {
    .swiper-slide img {max-width: 800px;max-height: 100%;z-index: 10014;}
}

@media (min-width: 768px) {
    .copyright {
   
    z-index: 1008;
   
}

}

/* Mobile version es swiper */
@media (min-width:200px) and (max-width: 992px){

    .klightbox { 
        display: none;
    }

    .klightbox.on {
        position: fixed;
        top: 0px;
        left: 0px;
        margin: 0px;
        padding: 0px;
        display: flex;
        align-items:center;
        justify-content:center;
        width: 100%;
        
        
        z-index: 10012;
    }

    .klightbox.off { 
        position: fixed;

    }

    .swiper-container {

        height: 100%;
        z-index: 1010;
        /* disable selecting */
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        background: transparent;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;

        /* disable selecting */
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
        border: 0px solid transparent;

    }

    .swiper-button-next { outline: none;}
    .swiper-button-prev { outline: none; }
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {  
        right: 20px;
        left: auto;
    }   
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
        left: 20px;
        right: auto;
    }

    /*.swiper-pagination { display: none; }*/ 
    .swiper-pagination { position: fixed; }
    /*.swiper-pagination { display: none; }*/

    .swiper-pagination-bullet {
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        color:#000;
        opacity: 1;
        background: rgba(250,250,250,0.2);
        margin-top: 40px;
        outline: none;
    }
    .swiper-pagination-bullet-active {
        color:#fff;
        background: #007aff;
    }

}

.swiper-overlay {
    display: none;
    position: fixed;
    z-index: 1009;
    background: rgba(0,0,0,.75);
    width: calc(100vw);
    height: calc(100vh);
    left: 0px;
    top: 0px;
    touch-action: none;
/*    position: absolute;*/
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.body-scroll-lock {
    
    overflow: hidden;
    
}


/* individuelle Knöpfe slide next prev */


.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
    content: '';
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev { 
background-image: url(/fileadmin/templates/kreuder1/arrows/lb_arrow_right.svg);
background-repeat: no-repeat;

background-position: center;
}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
    content: '';
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next { 
background-image: url(/fileadmin/templates/kreuder1/arrows/lb_arrow_left.svg);
background-repeat: no-repeat;

background-position: center;
}
    



/* KLIGHBOX Close Button */
@media (min-width: 200px) {
    
    .klightbox-close { 
       z-index: 10017;
        position: absolute;
        top: 0px;
        right: 0px;
        background: black;
        
        width: 50px;
        height: 50px;
        fill: white;
        background: url('/fileadmin/templates/kreuder1/arrows/close.png');
        background-size: contain;
        opacity: .85;
    }
    
    .klightbox-close:hover  { 
       opacity: 1;
       cursor: pointer
    }
    
    
    .klightbox-close {
        fill: white;
}
    
    
}