/* ================================= */
/* WAMI LIGHTBOX PLUGIN 1.2 */
/* ================================= */

#w_lightbox{
    display: none;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    z-index: 999;
    
    -webkit-transition:opacity 550ms;
    -moz-transition:opacity 550ms;
    transition:opacity 550ms;
}
#w_lightbox.open{display: block;}
#w_lightbox .w_lightbox-overlay{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}
#w_lightbox .img-wrapper{
    display: block;
    position: absolute;
    text-align: center;
    z-index: 2;
    pointer-events: none;
    -webkit-transition: all 550ms;
    -moz-transition: all 550ms;
    transition: all 550ms;
}

#w_lightbox .img-wrapper li{
    display: none;
    position: relative;
    width: inherit;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 2;
    opacity: 0;
    -webkit-transition: all 550ms;
    -moz-transition: all 550ms;
    transition: all 550ms;
    pointer-events: auto;
}
#w_lightbox .img-wrapper li.w-media{width: 100%;}


#w_lightbox .img-wrapper li:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}


#w_lightbox .img-wrapper li.current{
    display: inline-block;
    opacity: 1;
    transform: scale(1) translateX(0) translateY(0) rotate(0deg);
}
#w_lightbox .img-wrapper li.old-current{
    display: inline-block;
}
#w_lightbox .img-wrapper li.none.rtl{
    display: none;
}
#w_lightbox .img-wrapper li.none.ltr{
    display: none;
}

#w_lightbox .img-wrapper li img{
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

#w_lightbox .img-wrapper li #w_prev-light,
#w_lightbox .img-wrapper li #w_next-light{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
}
#w_lightbox .img-wrapper li #w_next-light{
    left: auto;
    right: 0;
}
#w_lightbox .img-wrapper li #w_prev-light span,
#w_lightbox .img-wrapper li #w_next-light span{
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    opacity: 0;
}
#w_lightbox .img-wrapper li #w_next-light span{
    left: auto;
    right: 0;
}
#w_lightbox .img-wrapper li #w_prev-light:hover span,
#w_lightbox .img-wrapper li #w_next-light:hover span{
    opacity: 1;
}

#w_lightbox #controls, #w_close-light{
    display: block;
    width: 40px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    z-index: 2;
}
#w_close-light{
    top: 10%;
    right: 0;
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #000;
}
#w_lightbox #controls a{
    display: block;
    text-align: center;
    width: 40px;
    height: 39px;
    line-height: 40px;
    color: #000;
    border-bottom: 1px solid #eee;
}
#w_lightbox #controls a.disabled{
    cursor: default;
    opacity:0.5;
}
#w_lightbox #dotnav{
    display: block;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
#w_lightbox #dotnav ul{
    text-align: center;
}
#w_lightbox #dotnav ul li{
    display: inline-block;
    padding: 0 5px;
}




/* =============================== */
/* === GOOGLE IMAGE LIKE POPIN === */
/* =============================== */
#w_lightbox.gstyle{
    position: absolute;
    top: 0;
    left: 0;
    height: 80vh;
    width: 100%;
}
#wlightbox-split{
    position: relative;
    clear:both;
    height: 0;
    margin-bottom: 30px;
    -webkit-transition: all 850ms;
    -moz-transition: all 850ms;
    transition: all 850ms;
}
#wlightbox-split.open{
    height: 80vh;
}

/* AJAX */
#w_lightbox .img-wrapper li.w-ajax-wrap{
    width: 100%;
    height: 100%;
}
.w-ajax-container{
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}



/* =============================== */
/* ======== ANIMATIONS =========== */
/* =============================== */

/* FOR THE POPIN */

/* === scale === */
#w_lightbox.open-scale{opacity: 0;}
#w_lightbox.scale{opacity: 1;}
#w_lightbox.open-scale .img-wrapper{
    transform:scale(0.8);
    opacity: 0;
}
#w_lightbox.scale .img-wrapper{
    transform:scale(1);
    opacity: 1;
}

/* === fade === */
#w_lightbox.open-fade .img-wrapper{
    opacity: 0;
    -webkit-transition: 350ms;
    -moz-transition: 350ms;
    transition: 350ms;
}
#w_lightbox.fade .img-wrapper{
    opacity: 1;
}


/* FOR THE ZOOMED IMG */

/* === swipe === */
#w_lightbox .img-wrapper li.swipe.rtl{
    transform: translateX(10%);
    display: inline-block;
    opacity: 0;
}
#w_lightbox .img-wrapper li.swipe.ltr{
    transform: translateX(-10%);
    display: inline-block;
    opacity: 0;
}

/* === scale === */
#w_lightbox .img-wrapper li.scale{
    transform: scale(0.8);
    display: inline-block;
    opacity: 0;
}
#w_lightbox .img-wrapper li.scale{
    transform: scale(0.8);
    display: inline-block;
    opacity: 0;
}

/* === rotate === */
#w_lightbox .img-wrapper li.rotate.rtl{
    transform: rotate(10deg);
    display: inline-block;
    opacity: 0;
}
#w_lightbox .img-wrapper li.rotate.ltr{
    transform: rotate(-10deg);
    display: inline-block;
    opacity: 0;
}

/* === fade === */
#w_lightbox .img-wrapper li.fade{
    display: inline-block;
    opacity: 0;
}
#w_lightbox .img-wrapper li.fade{
    display: inline-block;
    opacity: 0;
}