/* 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;
line-height:0;
font-size:0;
background:#eee;
border:5px solid #eee;
border-radius:3px;
position:relative;
margin:0 10px 10px 0;
float:left;
/**************
  Set max-width to your thumbnail width
***************/

max-width:100%;
}

/* 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:90px;
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;
margin:5px;
}
.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;
min-width:280px!important;
}
.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;
}
/* Lightbox */

.sp-lightbox {
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
background:rgb(256, 256, 256);
background:rgba(256, 256, 256, 1);
z-index:9999;
display:none;
cursor:pointer;
min-width:240px;
min-height:240px;
}
.sp-lightbox img {
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
max-width:100%;
max-height:100%;
min-width:240px;
min-height:240px;
border:2px solid #fff;
}
#sp-prev, #sp-next {
position:absolute;
top:90%;
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;
}
}
.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #222;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}