/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; justify-content: center;}
#cboxWrapper {max-width: none; }
#cboxOverlay{position:fixed;
    width:100%;
    height:100%;
}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; border: 0px solid black; border-radius: 12px; margin: 5px 0px 0px 4px;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic {position: absolute; top: 0px; left: 0px;
    width: 100%;
    height: 100%;
}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width: none; -ms-interpolation-mode:bicubic;}
.cboxIframe{
    /*width:100%;*/
    height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{
    background-color: #111;
    background: rgba(2,2,2,0.0);
    backdrop-filter: blur(16px);
}

#colorbox{outline:0;}
    #cboxTopLeft{display: none; width:2px; height:2px; background:#eee;}
    #cboxTopCenter{display: none; height:2px; background:#eee;}
    #cboxTopRight{display: none; width:2px; height:2px; background:#eee;}
    #cboxBottomLeft{display: none; width:2px; height:2px; background:#eee;}
    #cboxBottomCenter{display: none; height:2px; background:#000;}
    #cboxBottomRight{display: none; width:2px; height:2px; background:#eee;}
    #cboxMiddleLeft{display: none; width:2px; background:#eee;}
    #cboxMiddleRight{display: none; width:2px; background:#eee;}
    #cboxContent{background:#111; overflow:hidden;}
        .cboxIframe{background:#111;  opacity: 0.5}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:40px;}
        /*
        #cboxTitle{position:absolute; bottom:10px; left:260px; text-align:left; width:100%; color:#999; font-size: 16px;}
        */
        #cboxTitle{position:absolute; display:flex; top:10px; left:10px; text-align:left; width:auto; min-height: fit-content; max-height: 130px; color: #fff; font-size: 16px; background-color: #111; border: 0px solid #888; border-radius: 8px; padding: 5px 10px 5px 10px; opacity: .4;}
        #cboxCurrent{display: none; position:absolute; bottom:10px; left:100px; color:#999; font-size: 16px;}
        #cboxLoadingOverlay{background:#111 url(images/loading2.gif) no-repeat 50% 50%;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:10px; right:87px; color:#444; font-size: 16px;}
        #cboxPrevious{display: none; position:absolute; bottom:10px; left:15px; color:#444; font-size: 16px;}
        #cboxNext{display: none; position:absolute; bottom:10px; left:213px; color:#444; font-size: 16px;}
        #cboxClose{position:absolute; bottom:10px; right:15px; display:block; color:#ffffcc; font-size: 16px; font-weight: bold;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/*@media screen and (max-width: 2560px) {*/
/*  #cboxCurrent{bottom:5px; left:90px; font-size: 2.0em;}*/
/*  #cboxSlideshow{bottom:5px; right:177px; font-size: 2.6em;}*/
/*  #cboxPrevious{bottom:3px; left:15px; font-size: 2.6em;}*/
/*  #cboxNext{bottom:3px; left:213px; font-size: 2.6em;}*/
/*  #cboxClose{bottom:5px; right:30px; font-size: 2.6em; font-weight: bold;}*/
/*}*/

/*@media screen and (min-width: 240px) and (max-width: 480px) {*/
/*    #cboxCurrent{display: unset; bottom:5px; left:90px; font-size: 2.0em;}*/
/*    #cboxSlideshow{bottom:5px; right:177px; font-size: 2.6em;}*/
/*    #cboxPrevious{display: unset; bottom:3px; left:15px; font-size: 2.6em;}*/
/*    #cboxNext{display: unset; bottom:3px; left:213px; font-size: 2.6em;}*/
/*}*/