.pswp {
  --pswp-bg: #000;
  --pswp-placeholder-bg: #222;

  --pswp-root-z-index: 100000;

  --pswp-preloader-color: rgba(255, 255, 255, 0.6);
  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.1);

  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #4F4F4F;
  --pswp-icon-stroke-color: #000;
  --pswp-icon-stroke-width: 2px;

  --pswp-error-msg-color: var(--pswp-icon-color);

  --pswp-control-bg: rgba(0, 0, 0, 0.33);
  --pswp-control-active-bg: rgba(0, 0, 0, 0.44);

  --pswp-counter-color: var(--pswp-icon-color);

  --pswp-zoom-transition-duration: 250ms;
  --pswp-zoom-easing: cubic-bezier(0.4, 0, 0.22, 1);

  --pswp-spacing-mult: 1;

  --pswp-top-bar-height: 50px;
}


/*
	Styles for basic PhotoSwipe functionality.
	
	You can import this file in your project either
	via JavaScript module import: `import 'photoswipe/style.css';`
	or as a plain CSS file.
*/

.pswp {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--pswp-root-z-index);
  display: none;
  touch-action: none;
  outline: 0;
  -webkit-text-size-adjust: 100%;
  -webkit-backface-visibility: hidden;
}

.pswp--open {
  display: block;
}

.pswp__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--pswp-bg);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.22, 1),
              transform 250ms cubic-bezier(0.4, 0, 0.22, 1);
  will-change: opacity, transform;
}

.pswp--preloading .pswp__bg {
  opacity: 0.005;
}

.pswp--open .pswp__bg {
  opacity: 1;
  transform: scale(1);
}

.pswp__scroll-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pswp__container,
.pswp__zoom-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pswp__container,
.pswp__img,
.pswp__item {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pswp__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* allow transform scale */
}

.pswp__img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  transform-origin: 0 0;
  will-change: transform, opacity;
}

.pswp__img--placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--pswp-placeholder-bg);
  will-change: opacity;
}

.pswp__img--placeholder--blank {
  background: transparent;
}

.pswp--open .pswp__img--placeholder {
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}

.pswp__error-msg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--pswp-error-msg-color);
  font-size: 16px;
  line-height: 1.4;
  width: auto;
  max-width: 300px;
  text-align: center;
}

.pswp__error-msg a {
  color: var(--pswp-error-msg-color);
  text-decoration: underline;
}


/*
	
	User interface

*/

.pswp__button {
  position: absolute;
  top: 0;
  width: 50px;
  height: 50px;
  padding: 0;
  margin: 0;
  border: 0;
  cursor: pointer;
  background: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.pswp__button:focus,
.pswp__button:hover {
  background: var(--pswp-control-active-bg);
  outline: 0;
}

.pswp__button:active {
  background: var(--pswp-control-bg);
  outline: 0;
}

.pswp__button--close {
  right: 0;
}

.pswp__button--arrow {
  top: 50%;
  margin-top: -50px;
  width: 60px;
  height: 100px;
}

.pswp__button--arrow--prev {
  left: 0;
}

.pswp__button--arrow--next {
  right: 0;
}

.pswp__button--zoom {
  right: 50px;
}

.pswp__counter {
  position: absolute;
  top: 15px;
  left: 20px;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  color: var(--pswp-counter-color);
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.pswp__top-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--pswp-top-bar-height);
  background: var(--pswp-control-bg);
  opacity: 0;
  transform: translateY(-100%);
  transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1),
              opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  will-change: transform, opacity;
}

.pswp--has_controls .pswp__top-bar {
  transform: translateY(0);
  opacity: 1;
}


/*

	Icons

*/

.pswp__icn {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 22px;
  height: 22px;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pswp__icn-slot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: var(--pswp-icon-color);
  stroke: var(--pswp-icon-stroke-color);
  stroke-width: var(--pswp-icon-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pswp__icn-slot--secondary {
  fill: var(--pswp-icon-color-secondary);
  stroke: none;
}

.pswp__button--zoom .pswp__icn-slot--secondary {
  display: none;
}

.pswp--zoomed-in .pswp__button--zoom .pswp__icn-slot--secondary {
  display: block;
}

.pswp--zoomed-in .pswp__button--zoom .pswp__icn-slot--primary {
  display: none;
}

.pswp__button--arrow .pswp__icn {
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -12px;
  width: 24px;
  height: 30px;
}


/*

	Preloader

*/

.pswp__preloader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  margin-left: -25px;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  will-change: opacity;
}

.pswp--loading .pswp__preloader {
  opacity: 1;
}

.pswp__preloader__icn {
  width: 50px;
  height: 50px;
}

.pswp__preloader__cut {
  position: relative;
  width: 25px;
  height: 50px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.pswp__preloader__donut {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border: 4px solid var(--pswp-preloader-color);
  border-radius: 50%;
  border-left-color: var(--pswp-preloader-color-secondary);
  border-top-color: var(--pswp-preloader-color-secondary);
  animation: pswp-preloader-spin 1s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes pswp-preloader-spin {
  to {
    transform: rotate(360deg);
  }
}


/*

  some UI tweaks: 

*/

/* remove vertical margin on image */
.pswp__img {
  vertical-align: bottom;
}

/* hide data-pswp-caption */
.pswp__caption {
  display: none;
}

/* hide data-pswp-src */
.pswp [data-pswp-src] {
  display: none;
}