/* Product Gallery for OpenCart - works with Bootstrap 3.x */

.pg { position: relative; margin-bottom: 15px; }

/* Before JS runs (or without JS) show plain linked thumbnails */
.pg:not(.pg-ready) a { display: inline-block; margin: 0 8px 8px 0; }
.pg:not(.pg-ready) img { max-width: 100px; height: auto; }

/* ---------- Main slider ---------- */
.pg-stage { position: relative; overflow: hidden; background: #fff; border: 1px solid #ddd; outline: 0; }
.pg-view {
  overflow: hidden; cursor: pointer;
  -ms-touch-action: pan-y; touch-action: pan-y;
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pg-track { white-space: nowrap; font-size: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.pg-track.pg-anim {
  -webkit-transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
}
.pg-slide { display: inline-block; width: 100%; vertical-align: top; white-space: normal; text-align: center; }
.pg-slide img { display: block; max-width: 100%; height: auto; margin: 0 auto; -webkit-user-drag: none; }

.pg-hint {
  position: absolute; top: 8px; right: 8px; z-index: 2; pointer-events: none;
  padding: 6px; border-radius: 3px; background: rgba(0, 0, 0, .4); color: #fff; font-size: 14px; line-height: 1;
}
.pg-count {
  position: absolute; left: 8px; bottom: 8px; z-index: 2; pointer-events: none;
  padding: 2px 8px; border-radius: 10px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 12px; line-height: 18px;
}
.pg-nav {
  position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff;
  font-size: 30px; line-height: 36px; text-align: center; opacity: 0; outline: 0;
  -webkit-transition: opacity .2s; transition: opacity .2s;
}
.pg-prev { left: 8px; }
.pg-next { right: 8px; }
.pg-stage:hover .pg-nav, .pg-nav:focus { opacity: 1; }
.pg-nav.pg-off { display: none; }
@media (hover: none) { .pg-nav { display: none; } } /* touch screens: swipe instead */

/* Thumbnail strip */
.pg-thumbs {
  position: relative; margin-top: 10px; font-size: 0; white-space: nowrap;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
}
.pg-thumb {
  display: inline-block; width: 72px; margin: 0 8px 0 0; padding: 0; vertical-align: top;
  border: 2px solid #ddd; background: #fff; opacity: .65; outline: 0;
}
.pg-thumb:last-child { margin-right: 0; }
.pg-thumb img { display: block; width: 100%; height: auto; }
.pg-thumb:hover, .pg-thumb.active { opacity: 1; }
.pg-thumb.active { border-color: #333; }

/* ---------- Fullscreen lightbox ---------- */
html.pg-lb-lock, html.pg-lb-lock body { overflow: hidden; }

.pg-lb {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000;
  background: rgba(0, 0, 0, .95); opacity: 0;
  -webkit-transition: opacity .2s; transition: opacity .2s;
}
.pg-lb.pg-lb-in { opacity: 1; }

.pg-lb-view {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; cursor: zoom-in;
  -ms-touch-action: none; touch-action: none;
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pg-lb.pg-zoomed .pg-lb-view { cursor: move; }
.pg-lb-track { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.pg-lb-track.pg-anim {
  -webkit-transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
}
.pg-lb-slide { position: absolute; top: 0; width: 100%; height: 100%; text-align: center; font-size: 0; }
.pg-lb-slide:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
.pg-lb-slide img {
  display: inline-block; max-width: 100%; max-height: 100%; vertical-align: middle;
  -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%;
  -webkit-user-drag: none; will-change: transform;
}
.pg-lb-slide img.pg-anim { -webkit-transition: -webkit-transform .25s ease; transition: transform .25s ease; }

/* Loading spinner */
.pg-lb-slide.pg-loading:after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%;
  -webkit-animation: pg-spin .8s linear infinite; animation: pg-spin .8s linear infinite;
}
@-webkit-keyframes pg-spin { to { -webkit-transform: rotate(360deg); } }
@keyframes pg-spin { to { transform: rotate(360deg); } }

.pg-lb-btn {
  position: absolute; z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .15); color: #fff; text-align: center; outline: 0;
}
.pg-lb-btn:hover, .pg-lb-btn:focus { background: rgba(255, 255, 255, .3); }
.pg-lb-close { top: 12px; right: 12px; font-size: 30px; line-height: 40px; }
.pg-lb-prev, .pg-lb-next { top: 50%; margin-top: -22px; font-size: 36px; line-height: 38px; }
.pg-lb-prev { left: 12px; }
.pg-lb-next { right: 12px; }
.pg-lb-btn.pg-off { display: none; }
.pg-lb-count {
  position: absolute; top: 20px; left: 16px; z-index: 2; color: #fff; font-size: 14px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6); pointer-events: none;
}
@media (hover: none) { .pg-lb-prev, .pg-lb-next { display: none; } }