/*
    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;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.zzzcboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; width:100%;height:100%; -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:#000;}
#colorbox{outline:0;}
    #cboxContent{margin-top:45px;; overflow:visible; background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #fff;}
        #cboxLoadedContent{ }
        #cboxTitle{position:absolute; top:-35px; left:0; color:#fff;}
        #cboxCurrent{position:absolute; top:-35px; right:200px; color:#ccc;}
        // #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

        /* 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;}


/* playing button */
		
        #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{
			display: block;
			position:absolute;
			top: -55px;
			display:block;
			width:45px;
			height:45px;
			color: #aaa;
			outline: 0;
			color: transparent; 
        }
        #cboxPrevious:before, #cboxNext:before, #cboxClose:before, #cboxSlideshow:before {
			zfont-family: FontAwesome;
			font-size: 48px;
			color:#ccc;
								font-family: 'Font Awesome 5 Free';
								font-weight: 900;
        } 
        #cboxPrevious:hover:before, #cboxNext:hover:before, #cboxClose:hover:before, #cboxSlideshow:hover:before {
			color: #dbb300;
        } 
		#cboxPrevious{
          right: 150px;
        }
		#cboxSlideshow{
          right: 100px;
        }
		#cboxNext{
          right: 50px;
        }
		#cboxClose{
          right: 0px;
        }
        
		#cboxPrevious:before{
          content: "\f0a8"; 
        }		
        #cboxSlideshow:before{
          content: "\f144"; 
        }
		.cboxSlideshow_on  #cboxSlideshow:before {
          content: "\f28b"; 			
		}		
		
        #cboxNext:before{
          content: "\f0a9"; 
        }
        #cboxClose:before{
          content: "\f057";
        }		
		@media only screen and (max-device-width: 1024px) { 
			#cboxTitle, #cboxCurrent {display:'none';visibility: hidden;}
		}