.pswp {
	--pswp-bg: black;
	--pswp-placeholder-bg: transparent;

	--pswp-icon-color: var(--site-bg-color);
	--pswp-icon-color-secondary: var(--site-bg-color);
	--pswp-icon-stroke-color: var(--site-color);
	--pswp-icon-stroke-width: 2px;
}
.pswp, .pswp__bg {
  will-change: unset;
}
.pswp__button--zoom, .pswp--zoom-allowed .pswp__button--zoom {
	display: none;
}

/* Otherwise the video would not show up in the slide */
.pswp__item video {
  position: relative !important;
}

.pswp__counter{
	color:white;
}
.pswp__button {
	opacity: 1;
	margin: var(--site-padding);
	box-sizing: border-box;
}
.pswp__button--close {
	position: fixed;
}

.pswp__icn{
	fill: white;
}

.pswp__button--arrow{
	width:3.8em;
  color:white;
}

.pswp__button--arrow--prev{
	transform: scale(1, 1) translateY(-100%);
}

.pswp__button--arrow--next{
	transform: translateY(-100%);
}

.pswp__button--arrow--next .pswp__icn{
	/* transform: scale(1); */
}

/* because when ui is not visible on smartphone (on tap action), closing x shadow is still visible */
.pswp .pswp__top-bar.pswp__hide-on-close {
	opacity: 1;
}
.pswp__button--arrow .pswp__icn {
	width: 5.5rem;
	height: 5.5rem;
}

.pswp__button--close {
	width: 3rem;
	height: 3rem;
  color: white;
}

.pswp__button--close .pswp__icn-shadow {
	stroke-width: 1px;
}

.pswp__dynamic-caption, .pswp__dynamic-caption--mobile {
	background-color: transparent;
	padding: 0;
	height: 0;
}
.pswp__dynamic-caption--below {
	max-width: initial;
}
.pswp__dynamic-caption p:last-child, .pswp__dynamic-caption--mobile p:last-child {
	margin-bottom: 0;
}
.pswp__dynamic-caption a, .pswp__dynamic-caption--mobile a {
	color: inherit;
}
.pswp__dynamic-caption.pswp__hide-on-close.fade_out span {
	opacity: .33;
	display: block;
	transition: opacity .33s;
}
.pswp__dynamic-caption.pswp__hide-on-close.fade_out span:not(.credits) {
	opacity: 0;
}
.pswp__dynamic-caption.pswp__hide-on-close.fade_out:hover span,
.pswp__dynamic-caption.pswp__hide-on-close.fade_out:hover span:not(.credits) {
	opacity: 1;
}

.pswp__dynamic-caption .caption_inner,
.pswp__dynamic-caption--mobile .caption_inner,
.pswp__dynamic-caption--below .caption_inner {
	position: absolute;
	line-height: inherit;
	font-size: var(--fs0);
	bottom: 0;
	padding: var(--site-padding);
	color: white;
	text-shadow: var(--black-outline);
}
.pswp__dynamic-caption--mobile .caption_inner {
	color: var(--site-bg-color);
	background-color: var(--site-color);
}
.caption_inner .credits {
	display: block;
	margin-top: 1em;
	font-weight: 500;
	font-size: var(--fs2);
}

/* because dynamic caption on ios also shows the alt text */
.pswp__dynamic-caption--on-hor-edge {
	/* display: none; */
}