/*
    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; -webkit-transform: translate3d(0,0,0);}
#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;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;border-radius: 1.6rem;}
.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:rgba(0, 0, 0, 0.6);}
#colorbox{outline:0;max-width: 100vw; max-height: 100vh;}
    #cboxContent{background:#d3d3d3;padding: 40px 0;border-radius: 1.6rem;}
	#colorbox.gallery #cboxContent{background:transparent; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom: 0;box-sizing: content-box;padding: 0 50px;border-radius: 1.6rem;}
        #colorbox.gallery #cboxLoadedContent{margin-bottom:28px;padding: 0;}
        #cboxTitle{background:#fff;position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;opacity:0;}
        #cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
        #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;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        /*#cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}*/
		#cboxPrevious{
			position:absolute; 
			top:calc(50% - 20px); 
			left:5px; 
			background: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.5429 32.4571C15.1524 32.0666 15.1524 31.4334 15.5429 31.0429L21.9069 24.6789C22.2974 24.2884 22.9305 24.2884 23.3211 24.6789C23.7116 25.0694 23.7116 25.7026 23.3211 26.0931L18.6642 30.75H47.75C48.3023 30.75 48.75 31.1977 48.75 31.75C48.75 32.3023 48.3023 32.75 47.75 32.75H18.6642L23.3211 37.4068C23.7116 37.7974 23.7116 38.4305 23.3211 38.8211C22.9305 39.2116 22.2974 39.2116 21.9069 38.8211L15.5429 32.4571Z' fill='black'/%3E%3C/svg%3E%0A") no-repeat 0 0 transparent;
			background-size: contain;
			width:40px; 
			height:40px; 
			text-indent:-9999px;
			border: 1px solid rgba(0, 0, 0, .5);
			border-radius: 100%;
		}
        #cboxNext{
			position:absolute; 
			top:calc(50% - 20px); 
			right:5px; 
			background: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.5429 32.4571C15.1524 32.0666 15.1524 31.4334 15.5429 31.0429L21.9069 24.6789C22.2974 24.2884 22.9305 24.2884 23.3211 24.6789C23.7116 25.0694 23.7116 25.7026 23.3211 26.0931L18.6642 30.75H47.75C48.3023 30.75 48.75 31.1977 48.75 31.75C48.75 32.3023 48.3023 32.75 47.75 32.75H18.6642L23.3211 37.4068C23.7116 37.7974 23.7116 38.4305 23.3211 38.8211C22.9305 39.2116 22.2974 39.2116 21.9069 38.8211L15.5429 32.4571Z' fill='black'/%3E%3C/svg%3E%0A") no-repeat 0 0 transparent;
			background-size: contain;
			width:40px; 
			height:40px; 
			text-indent:-9999px;
			border: 1px solid rgba(0, 0, 0, .5);
			border-radius: 100%;
			transform: rotate(180deg);
		}
		#cboxPrevious:hover,
        #cboxNext:hover {
			border-color: rgba(0, 0, 0, 1);
		}
        /*#cboxClose{border-radius: 50%; border-width: 0px; position:absolute; top:10px; right:10px; background:url(images/close.png) no-repeat 0 0; background-size: contain; width:30px; height:30px; text-indent:-9999px;background-color: rgba(0, 0, 0, .3);}
        #cboxClose:hover{background-color: rgba(0, 0, 0, .9);}*/
		#cboxClose{
			background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5L19 19M5 19L19 5' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 transparent;			
			background-size: contain;
			width:40px; 
			height:40px; 
			text-indent:-9999px;
			border: 1px solid rgba(0, 0, 0, .5);
			border-radius: 100%;
			position:absolute; top:10px; right:10px;
			padding: 10px;
		}
        #cboxClose:hover{border-color: rgba(0, 0, 0, 1);}

/*
  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 (max-width: 991px) {
	#cboxWrapper, #cboxContent {
		max-width: 100vw !important;
		height: auto !important;
	}
	.cboxPhoto {
		max-width: calc(100vw - 100px) !important;
		height: auto !important;
	}
	#cboxLoadedContent {
		padding: 0 30px;
		max-width: calc(100vw - 100px);
	}
	#cboxPrevious,
	#cboxNext {
		top: calc(50% - 15px);
		width: 30px;
		height: 30px;
	}
	#cboxClose {
		width: 30px;
		height: 30px;
	}
}