/* Needed for the lightbox */
html,
body{height:100%;width:100%;}

/* CSS for the loading div */
.sp-loading{text-align:center;padding:15px;border:none;border-radius:3px;font-size:12px;color:#888;width:100%;padding-top:110px;padding-bottom:150px;line-height:32px;}

/* Element wrapper */
.sp-wrap{display:none;line-height:0;font-size:0;background:#fff;border:none;border-radius:3px;position:relative;margin:0;float:left;	/**************
		  Set max-width to your thumbnail width
		***************/width:auto;}

	/* Thumbnails */
	.sp-thumbs{text-align:center;display:inline-block;width:100%;padding-bottom:25px;padding-top:15px;overflow:auto;max-height:560px;}
	.sp-thumbs img{min-height:50px;min-width:50px;max-width:50px;}
	.sp-thumbs a:link,
	.sp-thumbs a:visited{width:50px;height:50px;overflow:hidden;opacity:.3;display:inline-block;background-size:cover;background-position:center;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;text-align:center;}
	#product .gallery .sp-wrap .sp-thumbs a{width:40px;height:40px;margin-right:15px;margin-left:11px;}
	.sp-thumbs a:hover{opacity:1;}

	/* Styles for the currently selected thumbnail */
	.sp-thumbs a:active,
	.sp-current{opacity:1!important;position:relative;}

	/* Image currently being viewed */
	.sp-large{position:relative;overflow:hidden;top:0;left:0;}
	.sp-large a img{max-width:100%;height:auto;max-height: 550px;}
	.sp-large a{display: flex;justify-content: center;}

	/* Panning Zoomed Image */
	.sp-zoom{position:absolute;left:-50%;top:-50%;cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in;display:none;}

	/* Lightbox */
	.sp-lightbox{position:fixed;top:0;left:0;height:100%;width:100%;background:rgb(0,0,0);background:rgba(0,0,0,.9);z-index:9999;display:none;cursor:pointer;}
	.sp-lightbox img{position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;max-width:90%;max-height:90%;border:2px solid #fff;}
	#sp-prev,
	#sp-next{position:absolute;top:50%;margin-top:-25px;z-index:501;color:#fff;padding:14px;text-decoration:none;background:#000;border-radius:25px;border:2px solid #fff;width:50px;height:50px;box-sizing:border-box;transition:.2s;}
	#sp-prev{left:10px;}
	#sp-prev:before{content:'';border:7px solid transparent;border-right:15px solid #fff;position:absolute;top:16px;left:7px;}
	#sp-next{right:10px;}
	#sp-next:before{content:'';border:7px solid transparent;border-left:15px solid white;position:absolute;top:16px;left:18px;}
	#sp-prev:hover,
	#sp-next:hover{background:#444;}

	/* Tweak styles for small viewports */
	@media screen and (max-width:400px){
		.sp-wrap{margin:0 0 15px 0;}
		#sp-prev,
		#sp-next{top:auto;margin-top:0;bottom:25px;}
	}