/************************************************
*
* LIGHTBOX
*
************************************************/

.lightbox{

    position:fixed;

    inset:0;

    z-index:99999;

    display:none;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.lightbox.show{

    display:flex;

}


/************************************************
*
* Background
*
************************************************/

.lb-background{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.92);

}


/************************************************
*
* Content
*
************************************************/

.lb-content{

    position:relative;

    z-index:2;

    width:min(95vw,1600px);

    display:flex;

    flex-direction:column;

    align-items:center;

}


.lb-image{

    width:100%;

    max-height:82vh;

    object-fit:contain;

    user-select:none;

    cursor:grab;

}


.lb-image:active{

    cursor:grabbing;

}


/************************************************
*
* Caption
*
************************************************/

.lb-panel{

    width:100%;

    background:#ffffff;

    padding:24px;

    border-radius:0 0 18px 18px;

}


#lbCity{

    margin:0;

    font-size:34px;

}


#lbMessenger{

    margin-top:12px;

    font-size:18px;

}


#lbMessage{

    margin-top:18px;

    font-size:18px;

    line-height:1.5;

}


/************************************************
*
* Buttons
*
************************************************/

.lb-close,
.lb-prev,
.lb-next{

    position:absolute;

    z-index:20;

    border:none;

    width:58px;

    height:58px;

    border-radius:50%;

    cursor:pointer;

    font-size:28px;

    color:white;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(6px);

    transition:.25s;

}


.lb-close:hover,
.lb-prev:hover,
.lb-next:hover{

    background:rgba(255,255,255,.35);

}


.lb-close{

    top:20px;

    right:20px;

}


.lb-prev{

    left:20px;

    top:50%;

    transform:translateY(-50%);

}


.lb-next{

    right:20px;

    top:50%;

    transform:translateY(-50%);

}


/************************************************
*
* Counter
*
************************************************/

.lb-counter{

    position:absolute;

    top:20px;

    left:20px;

    z-index:20;

    color:white;

    font-size:22px;

    font-weight:bold;

}


/************************************************
*
* Loading
*
************************************************/

.lb-loading{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    color:white;

    font-size:30px;

}


/************************************************
*
* Ken Burns
*
************************************************/

.kenburns{

    transform-origin:center center;

    will-change:transform;

}


/************************************************
*
* Mobile
*
************************************************/

@media(max-width:900px){

.lb-panel{

padding:18px;

}

#lbCity{

font-size:26px;

}

#lbMessenger{

font-size:16px;

}

#lbMessage{

font-size:16px;

}

.lb-close,
.lb-prev,
.lb-next{

width:48px;

height:48px;

font-size:22px;

}

}

@media(max-width:600px){

.lb-image{

max-height:65vh;

}

.lb-panel{

border-radius:0;

}

}