/* popup */
#fcplb {
	display:flex;
    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.active {
	opacity:1;
    z-index:9996;
    transition:opacity .2s ease-out, z-index 0s linear;
}
#fcplb img {
    max-width:94%;
    max-height:95%;
    z-index:9997;
}

/* 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:18%;
	position:fixed;
	top:0;
    bottom:0;
	z-index:9998;
    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:9999;
    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,
    .fcplb-close {
        opacity:.7;
    }
    .fcplb-close {
        width:12vw;
        height:12vw;
    }
}

#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);}
}