.sp-wrap { display: none; line-height: 0; font-size: 0; position: relative; margin: 0; float: left; max-width: 100%; margin-bottom: 20px}
.sp-thumbs { text-align: left; display: inline-block;}
.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: 0.3; display: inline-block; background-size: cover;
	background-position: center; transition: all .2s ease-out;}
.sp-thumbs a:hover { opacity: 1;}
.sp-thumbs a:active, .sp-current { opacity: 1!important; position: relative;}
.sp-large { position: relative; overflow: hidden; top: 0; left: 0;}
.sp-large a img { max-width: 100%; height: auto;}
.sp-large a { display: block;}
.sp-zoom { position: absolute; left: -50%; top: -50%; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; display: none;}

.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: 99999; 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;}

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