/* 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{display:none;position:relative;max-width:100%;}

/* Thumbnails */
.sp-thumbs{display:table;border-collapse:collapse;table-layout:fixed;width:100%;margin-top:1.5em;}
.sp-thumbs>div{display:table-row;}
.sp-thumbs>div>div{width:25%;display:inline-block;border:1px solid #ccc;display:table-cell;padding:.5em;}
.sp-thumbs a{width:100%;overflow:visible;display: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::after{content:"";display:block;padding-bottom:100%;}

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

/* Image currently being viewed */
.sp-large{position:relative;overflow:hidden;top:0;left:0;text-align:center;padding:.5em;border: 1px solid #E4E4B9;}
.sp-large a img{max-width:100%;height:auto;}
.sp-large a{display:block;}

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

/* 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;}
.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:1em;}
#sp-prev:before{content:'';border:7px solid transparent;border-right:15px solid #fff;position:absolute;top:16px;left:7px;}
#sp-next{right:1em;}
#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;}
#sp-close{position:fixed;top:0;right:.5em;color:#fff;font-size:2em;}
/* 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;}
}