/* --- styles for smartGallery v2.1 by www.velforrester.com  -  requires smartGallery.js, smartGallery.css --- */

.sg-galleryImage, .sg-zoomImage {
	cursor:pointer;
}

/* --- other styles for sg-gallery and sg-galleryImage should be added to main style sheet --- */
/* --- lightbox styles ---------------------------- */

.sg-center {
	display:block;
	text-align:center;
	width:100%;
}
#sg-galleryCarousel {
	display:block;
	position: absolute;
	bottom: 0px;
	left: 0;
	padding: 10px;
	background: #000000c2;
	width:100%;
	/*overflow-y:scroll;*/
}

#sg-galleryCarousel > #sg-galleryCarouselImgCont {
	max-height:0;
	transition: max-height 1s ease-in-out;
}

#sg-galleryCarousel:hover > #sg-galleryCarouselImgCont {
	max-height:80vh;
	transition: max-height 1s ease-in-out;
}

#sg-openGalleryCarousel {
	color: #fff;
	font-size: 20px;
	padding: 0 0 8px;
}

.sg-carouselImg {
	max-height:120px;
	margin: 4px;
	vertical-align: top;
}
	
#sg-lightbox {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.9);
	z-index: 200;
	text-align:center;
	display:none;
	align-items: center;
	justify-content: center;
	top:0;
	left:0;
	transition: opacity .5s ease-in-out;
	opacity:0;
}

#sg-lightboxImgCont {
	display:block;
}

#sg-lightbox .sg-lightboxImage {
	border:1px solid #000;
	-webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.8);
	-moz-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.8);
	box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.8);
	background:#e6e3dd;
	padding:15px;
	border-radius:6px;
	max-width:90% !important;
	max-height:96vh;
}

#sg-lightboxClose {
	position:absolute;
	top:22px;
	right:20px;
	cursor:pointer;
	width:40px;
	z-index:2000;
	opacity:.7;
}

#sg-lightBoxClose:hover {
	opacity:1;
}

.sg-prevImg, .sg-nextImg {
	cursor:pointer;
	position:absolute;
	bottom:50%;
	z-index:2000;
	padding: 6px;
	opacity:.7;
	margin:0;
	width:40px;
}

.sg-prevImg {
	left:20px;
}

.sg-nextImg {
	right:20px;
}

.sg-prevImg:hover, .sg-nextImg:hover {
	opacity:.9;
}

@media only screen and (max-width: 1024px){

	#sg-lightbox .sg-lightboxImg {padding:0px;}

	.sg-prevImg {left:5px; bottom:10%; width:30px;}

	.sg-nextImg {right:5px; bottom:10%; width:30px;}
	
	#sg-galleryCarousel {display:none !important;}

}

@media only screen and (max-width: 912px){

	#sg-lightbox .sg-lightboxImg {max-width:92% !important;}

	#sg-lightboxClose {width:50px; top:6px; right:6px;}

}