/* popup */
#fcplb {
	display:flex!important;
    align-items:center;
    justify-content:center;
	position:fixed;
	top:0; right:0; bottom:0; left:0;
	overflow:hidden;
	background-color:#000000bb;
    opacity:0;
    z-index:-1;
	transition:opacity .3s ease-out, z-index 0s .3s linear;
    user-select:none;
}
#fcplb.fcplb-active {
	opacity:1;
    z-index:99995;
    transition:opacity .2s ease-out, z-index 0s linear;
}
#fcplb img {
    max-width:94%;
    max-height:95%;
    z-index:99996;
}

/* navigation */
#fcplb button {
    -webkit-appearance:none;
    cursor:pointer;
    background-repeat:no-repeat;
    background-size:4vw;
    background-position:center;
    border:none;
}

.fcplb-prev,
.fcplb-next {
	width:12%;
	position:fixed;
	top:0;
    bottom:0;
	z-index:99998;
    background-color:transparent;
}
.fcplb-prev {
	left:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke-width='.5' %3E%3Cpath stroke='%23333' d='M 11.6,15.8 4.4,8.5 11.84,1.2'/%3E%3Cpath stroke='%23eee' d='M 11.6,15 4.4,7.75 11.84,0.4'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.fcplb-next {
	right:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke-width='.5' %3E%3Cpath stroke='%23333' d='M 4.4,15.8 11.66,8.5 4.2,1.17'/%3E%3Cpath stroke='%23eee' d='M 4.4,15 11.66,7.75 4.2,0.4'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.fcplb-close {
    width:6vw;
    height:6vw;
    position:fixed;
    top:0;
    right:0;
    z-index:99999;
    background-color:#000000bb;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cg fill='none' stroke='%23fff' stroke-width='.5'%3E%3Cpath d='M 0.5,0.5 15.5,15.5' /%3E%3Cpath d='M 15.5,0.5 0.5,15.5'/%3E%3C/g%3E%3C/svg%3E");
}
.admin-bar .fcplb-close {
    top:46px;
}

.fcplb-prev.hide,
.fcplb-next.hide {
    display:none;
}

/* effects */
.fcplb-prev,
.fcplb-next,
.fcplb-close {
    opacity:.3;
    transition:opacity .2s ease-out;
}
.fcplb-close {
    opacity:.6;
}
.fcplb-prev:hover,
.fcplb-next:hover,
.fcplb-close:hover {
    opacity:1;
}

@media( max-width:800px ) {
    #fcplb img {
        max-width:100%;
        max-height:100%;
    }
    
    #fcplb button {
        background-size:8vw;
    }
    .fcplb-prev,
    .fcplb-next {
        top:30vh;
        bottom:60vh;
        opacity:.7;
    }
    .fcplb-close {
        width:10vw;
        height:10vw;
        opacity:.7;
    }
}

/* loading */
#fcplb.fcplb-active::before {
    content:'';
    display:block;
    width:8vw;
    height:8vw;
    position:fixed;
    left:calc( 50% - 4vw );
    top:calc( 50% - 4vw );
    border:1.5px solid #fff;
    border-color:#fff transparent;
    box-sizing:border-box;
    border-radius:50%;
    animation:fcplb-spin 2s infinite linear;
}
@keyframes fcplb-spin {
    from { transform:rotate( 0deg ) }
    to { transform:rotate( 359deg ) }
}

/* swipe */
img.fcplb-swipe-left { /* next */
    transform:translate( -100vw, 0 ); /* must override the style attr */
    transition:transform 0.3s ease-out;
}
img.fcplb-swipe-right { /* prev */
    transform:translate( 100vw, 0 );
    transition:transform 0.3s ease-out;
}
img.fcplb-swipe-up {
    transform:translate( 0, -100vh );
    transition:transform 0.2s ease-out;
}
img.fcplb-swipe-down {
    transform:translate( 0, 100vh );
    transition:transform 0.2s ease-out;
}
#fcplb.fcplb-swipe-return img {
    transform:translate( 0, 0 );
    transition:transform 0.4s ease-out;
}
#fcplb.fcplb-hide-loading::before {
    content:none;
}

/* caption figcaption */
.fcplb-caption {
    display:block;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:99996;
    padding:20px;
    box-sizing:border-box;
    text-align:center;
    color:#fff;
    background-color:#000000bb;
}
.fcplb-caption:empty {
    display:none;
}