/*
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 : 06.05.2019, 15:04:22
    Author     : Neko
*/

.jellyfish-wrap{
    position: relative;
    max-width: 600px;
    max-height: 600px;
}
.owlmodal-body .jellyfish-wrap{
    max-width: none;
    max-height: none;
}

.epicZoomWrap{top:0px;z-index:9999;position:relative;}
.epicZoom,.epiczoom{}
.jellyfish-loading{
    transition: visibility 0.5s, opacity 0.5s;
    visibility: hidden;
    opacity:0;
    
    position:absolute;
    top:75%;
    text-align:center;
    color:white;
    background:#222;
    padding:3px;
    border:1px solid #000;
}
.jellyfish-loading.visible{
    visibility: visible;
    opacity:1;
}

.jellyfish-mousetrap{z-index:999;position:absolute;left: 0px;top: 0px;cursor: zoom-in;}
.jellyfish-mousetrap-active{cursor: all-scroll !important;}
.jellyfish-zoom-box{
    transition: visibility 0.5s, opacity 0.5s;
    visibility: hidden;
    opacity:0;
    
    border: 1px solid #ccc;
    overflow: hidden;
    
    background-repeat: no-repeat !important;
    background-color: white !important;
    position: absolute;
    z-index: 99;
}

.jellyfish-zoom-box-open{
    visibility: visible;
    opacity:1;
}


.jellyfish-aperture{
    transition: visibility 0.5s, opacity 0.5s, box-shadow 0.5s;
    visibility: hidden;
    opacity:0;
    background: white;
    z-index:98;
    position:absolute;
    box-shadow: 0 0 0px rgba(0,0,0,0.5);
}
.jellyfish-aperture.visible{
    visibility: visible;
    opacity: 0.3;
    box-shadow: 0 0 14px rgba(0,0,0,0.5);
}

.jellyfish-overlay{
    transition: visibility 0.5s, opacity 0.5s;
    visibility: hidden;
    opacity:0;
    
    background: white;
    position:absolute; 
    left:0px; 
    top:0px;
    opacity: 0;
}
.jellyfish-overlay.visible{
    visibility: visible;
    /*opacity: 0.3;*/
}

/*.jellyfish-aperture-overlay{opacity: 1;}*/
.jellyfish-apertureBlur{opacity: 1;}
.epicZoomBlur{position:absolute;display:none;top:2px;left:2px;opacity: 0.5;}

.jellyfish-zoom-box-close{
    transition: visibility 0.5s, opacity 0.5s;
    visibility: hidden;
    opacity:0;
    
    position: absolute;
    top:5px;
    right: 5px;
    
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 19px;
    cursor: pointer;z-index: 1000;
}
.jellyfish-zoom-box-close:before{
    content: "\e903";
    font-family: "etivera_font";
    color: #a5a5a4;
}
.jellyfish-zoom-box-close.visible{
    visibility: visible;
    opacity: 1;
}

/** theming **/

.epicZoomWrap{}
.jellyfish-aperture{cursor:move;}
.epicZoomGalleryActive{box-shadow: 0 0 2px #FF0000;display: block;float: left;}

.iB .iB-box-images {
    border-left: 0px none;
    height: 80px;
    left: 10px;
    top: 512px;
    width: 780px;
}
.iB .iB-box-next-images{
    right: 5px;
}

/* */
.jellyowl-arrow{
    position: absolute;
    width: 30px;
    height: 60px;
    top: 50%;
    margin-top: -30px;
    cursor: pointer;
    z-index: 1000;
    
    font-size: 30px;
    line-height: 30px;
    color: #a5a5a4;
    line-height: 60px;
}

.jellyowl-arrow.jellyowl-arrow-left{
    left: 0px;
    
}
.jellyowl-arrow.jellyowl-arrow-left:before{
    content: "\e922"!important;
    font-family: "etivera_font";
}
.jellyowl-arrow.jellyowl-arrow-right{
    right: 0px;
}
.jellyowl-arrow.jellyowl-arrow-right:before{
    content: "\e924"!important;
    font-family: "etivera_font";
}
.jellyowl-content{
    text-align: center;
    position: relative;
}
.jellyowl-content #popup-jellyfish{
    display: inline-block;
}
.jellyowl-content .jellyfish-wrap{
    display: inline-block;
    position: relative;
}




.jellyowl-content{
    height: 100%;
    overflow: hidden;
}
.jellyowl-content .jellyfish-wrap{

}
.jellyowl-content .jellyfish-wrap #popup-jellyfish{

    
}
.jellyowl-content .jellyfish-wrap #popup-jellyfish img{

    max-width: inherit;
}

.jellyowl-content .jellyfish-mousetrap{

}


.jellyfish-navi a{
    cursor: pointer;
}

.jellyfish-navi a:after{
    position: absolute;
    transition: all 0.5s;
    width: 0px;
    margin-left: -0px;
    height: 2px;
    bottom: 0px;
    left: 50%;
    background: #64B075;
    content: "";
    display: block;
    position: relative;
}

.jellyfish-navi img{
    display: block;
}
.jellyfish-navi .jellyfish-navi-active img{
    
}
.jellyfish-navi .jellyfish-navi-active:after{
    width: 80px;
    margin-left: -40px;
}

@media screen and (max-width:880px){
    .jellyowl-content{
        width: 100%;
    }
    .jellyowl-content .jellyfish-wrap{
        width: 100%;
        max-width: 1200px;
    }
    .jellyowl-content .jellyfish-wrap #popup-jellyfish{
        width: 100%;

    }
    .jellyowl-content .jellyfish-wrap #popup-jellyfish img{
        width: 100%;
    }
}
@media screen and (min-width:881px){
    .jellyowl-content{
        height: 100%;
    }
    .jellyowl-content .jellyfish-wrap{
        height: 100%;
    }
    .jellyowl-content .jellyfish-wrap #popup-jellyfish{
        height: 100%;
    }
    .jellyowl-content .jellyfish-wrap #popup-jellyfish img{
        height: 100%;
    }
}



.fullscreen{
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    z-index: 999999;
    text-align: center;
    line-height: 30px;
}
.fullscreen:before{
    font-family: 'etivera_font';
    content: "\e930";
    color: #a5a5a4;
    font-size: 20px;
}


.jellyfish img{
    height: auto;
    max-width: 100%;
}


body .jellyfish-navi-elem img{
    width: 80px;
    height: 80px;
}