/* Needed for the lightbox*/
html, body{height: 100%;width: 100%;}
/* CSS for the loading div*/
.sp-loading{text-align: center;max-width: 270px;padding: 15px;border: 5px solid #eee;border-radius: 3px;font-size: 12px;color: #888;}
/* Element wrapper*/
.sp-wrap{width:50%;height:400px;float:left;display: none;line-height: 0;font-size: 0;border: 5px solid #eee;border-radius: 3px;position: relative;margin: 0 25px 15px 0;float: left;/************** Set max-width to your thumbnail width***************/max-width: 550px;}
/* Thumbnails*/
.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:1;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;}
.sp-thumbs a:hover{opacity: 1;height: 90%!important;width: 100%;overflow: hidden;object-fit: cover;}
/* 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{height: 90%;width: 100%;overflow: hidden;object-fit: cover;}
.sp-large a img:hover{height: 90%;width: 100%;overflow: hidden;object-fit: cover;}
.sp-large a{display: block;overflow:hidden;height:400px;}
/* 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: 500;display: none;cursor: pointer;z-index: 99999;}
.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:767px){
.sp-wrap{width:100%;height:180px;float:none;margin: 0 0 15px 0;}
#sp-prev, #sp-next{top: auto;margin-top: 0;bottom: 25px;}
.sp-large a{height:200px;}
.sp-large a img{height:80%;}
}