.lightbox3-overlay{
    --lb-backdrop-color:#eeeeeeea;
    --lb-chrome-bg:none;
    --lb-chrome-text:hsla(0, 0%, 100%, 0);
    --lb-chrome-font-size:15px;
    --lb-chrome-padding:0px;
    --lb-chrome-border-radius:0px;
    --lb-image-border-radius:0px;
    --lb-image-padding:40px;
    --lb-z-index:999999;
    inset:0;
    outline:none;
    overflow:hidden;
    position:fixed;
    touch-action:none;
    z-index:var(--lb-z-index);
    cursor:url(../../img/cd-design/cursor-pointer.png), auto;
}

.lightbox3-backdrop{
    background:var(--lb-backdrop-color);
    cursor:url(../../img/cd-design/cursor-pointer.png), auto;
    inset:0;
    position:absolute
}

.lightbox3-strip{
    inset:0;
    pointer-events:none;
    position:fixed;
    will-change:transform
}

.lightbox3-slide{
    height:100vh;
    pointer-events:none;
    position:absolute;
    top:0;width:100vw
}

.lightbox3-image{
    -webkit-user-drag:none;
    object-fit:cover;
    position:absolute;
    touch-action:none;
    transform-origin:center center;
    user-select:none;
    will-change:transform;
    cursor:url(../../img/cd-design/cursor-pointer.png), auto !important;
    pointer-events: auto !important;
}

.lightbox3-spinner{
    animation:lightbox3-spin .7s linear infinite;
    border:3px solid hsla(0,0%,100%,.2);
    border-radius:50%;
    border-top-color:hsla(0,0%,100%,.8);
    height:32px;
    left:50%;
    margin:-16px 0 0 -16px;
    position:absolute;
    top:50%;
    width:32px
}

@keyframes lightbox3-spin{to{transform:rotate(1turn)}}

.lightbox3-chrome{
    align-items:center;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    background:var(--lb-chrome-bg);
    border-radius:var(--lb-chrome-border-radius);
    bottom:var(--lb-chrome-padding);
    box-shadow:inset 0 1px 0 hsla(0,0%,100%,.08);
    color:var(--lb-chrome-text);
    display:flex;
    font-size:var(--lb-chrome-font-size);
    font-weight:500;
    gap:12px;
    left:50%;
    letter-spacing:.02em;
    line-height:1;
    max-width:min(90vw,600px);
    padding:6px 6px 6px 18px;
    pointer-events:none;
    position:fixed;
    user-select:none;
    width:max-content;
    z-index:1
}

.lightbox3-chrome--minimal{
    padding:6px
}

.lightbox3-counter{
     display: none !important;
}

.lightbox3-caption{
    -webkit-box-orient:vertical;
    -webkit-line-clamp:10;
    color:hsla(0,0%,100%,.9);
    display:-webkit-box;
    flex:1;
    line-height:1.3;
    min-width:0;
    overflow:hidden;
    pointer-events:auto
}

.lightbox3-close{
    align-items:center;
    background:hsla(0,0%,100%,.08);
    border:none;
    color:#fff;
    cursor:url(../../img/cd-design/cursor-pointer.png), auto;
    display:flex;
    flex-shrink:0;
    height:40px;
    justify-content:center;
    padding:0;
    pointer-events:auto;
    transition:background .15s ease;
    width:40px
}

.lightbox3-close:hover{
    background:hsla(0,0%,100%,.16)
}

.lightbox3-close:focus{outline:none}

.lightbox3-close:focus-visible{outline:2px solid hsla(0,0%,100%,.8);outline-offset:2px}

.lightbox3-close svg{height:22px;opacity:.85;transition:opacity .15s ease;width:22px}

.lightbox3-close:hover svg{opacity:1}

.lightbox3-arrow{
    align-items:center;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    background:hsla(0,0%,100%,.1);
    border:none;
    border-radius:50%;
    box-shadow:inset 0 1px 0 hsla(0,0%,100%,.08);
    color:#fff;
    cursor:url(../../img/cd-design/cursor-pointer.png), auto;
    display:flex;
    height:48px;
    justify-content:center;
    padding:0;
    pointer-events:auto;
    position:fixed;
    top:50%;
    transform:translateY(-50%);
    transition:background .15s ease;width:48px;z-index:1
}

.lightbox3-arrow:hover{background:hsla(0,0%,100%,.18)}

.lightbox3-arrow:focus{outline:none}

.lightbox3-arrow:focus-visible{outline:2px solid hsla(0,0%,100%,.8);outline-offset:2px}

.lightbox3-arrow svg{height:28px;opacity:.7;transition:opacity .15s ease;width:28px}

.lightbox3-arrow:hover svg{opacity:1}

.lightbox3-arrow-prev{left:var(--lb-chrome-padding)}

.lightbox3-arrow-next{right:var(--lb-chrome-padding)}

@media (max-width:600px){
    
    .lightbox3-overlay{--lb-image-border-radius:16px;--lb-image-padding:8px}
    .lightbox3-arrow{display:none}
    .lightbox3-chrome{--lb-chrome-padding:12px;--lb-chrome-font-size:14px;bottom:var(--lb-chrome-padding);font-size:var(--lb-chrome-font-size);gap:10px;padding:5px 5px 5px 14px}
    .lightbox3-chrome--minimal{padding:5px}
    .lightbox3-close{height:36px;width:36px}
    .lightbox3-close svg{height:20px;width:20px}
}

@media (prefers-reduced-motion:reduce){
    .lightbox3-backdrop,.lightbox3-image,.lightbox3-spinner{animation-duration:.01ms!important;transition-duration:.01ms!important}}
