.pswp__button {
	width:              44px;
	height:             44px;
	position:           relative;
	background:         none;
	cursor:             pointer;
	overflow:           visible;
	-webkit-appearance: none;
	display:            block;
	border:             0;
	padding:            0;
	margin:             0;
	float:              right;
	opacity:            0.75;
	-webkit-transition: opacity 0.2s;
	transition:         opacity 0.2s;
	-webkit-box-shadow: none;
	box-shadow:         none;
}

.pswp__button:focus, .pswp__button:hover {
	opacity: 1;
}

.pswp__button:active {
	outline: none;
	opacity: 0.9;
}

.pswp__button::-moz-focus-inner {
	padding: 0;
	border:  0;
}

/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
.pswp__ui--over-close .pswp__button--close {
	opacity: 1;
}

.pswp__button {
	background:      url(default-skin.png) 0 0 no-repeat;
	background-size: 264px 88px;
	width:           44px;
	height:          44px;
}

.pswp__button--close,
.pswp__button--zoom,
.pswp__button--arrow--left,
.pswp__button--arrow--right {
	position:        absolute;
	display:         flex;
	justify-content: center;
	align-items:     center;
	background:      none;
	cursor:          pointer;
}

/* no arrows on touch screens */
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
	visibility: hidden;
}

.pswp__button--close {
	right: 30px;
	top:   30px;
}

.pswp__button--zoom {
	top:        30px;
	right:      90px;
	visibility: hidden;
}


.pswp__button--arrow--left {
	left:       30px;
	top:        50%;
	margin-top: -25px;
}

.pswp__button--arrow--right {
	right:      30px;
	top:        50%;
	margin-top: -25px;
}

@media (max-width: 1189px) {
	.pswp__button--arrow--left,
	.pswp__button--arrow--right {
		top:    auto;
		bottom: 30px;
	}

	.pswp__button--zoom {
		visibility: visible;
	}
}

.pswp__button--arrow--left,
.pswp__button--arrow--right,
.pswp__button--close,
.pswp__button--zoom {
	-webkit-box-flex: 0;
	flex:             0 0 auto;
	width:            50px;
	height:           50px;
	line-height:      1;
	font-size:        18px;
	display:          flex;
	justify-content:  center;
	align-items:      center;
	text-align:       center;
	background-color: var(--white-color);
	color:            var(--text-color);
	border:           solid 1px var(--smart-color);
}

@media (min-width: 1190px) {
	.pswp__button--arrow--left:hover,
	.pswp__button--arrow--right:hover,
	.pswp__button--close:hover,
	.pswp__button--zoom:hover {
		background-color: var(--text-color);
		color:            var(--white-color);
	}
}

.pswp__bg {
	background-color: var(--shadow-color-desktop);
}

.pswp__button-svg {
	pointer-events: none;
}

.pswp__button-svg--left {
	transform-origin: center center;
	transform:        rotate(180deg);
	height:           18px;
}

.pswp__button-svg--right {
	height: 18px;
}

.pswp__button-svg--close {
	width:       20px;
	height:      20px;
	font-size:   20px;
	line-height: 1;
}

.pswp__button-svg--zoom {
	width:       25px;
	height:      25px;
	font-size:   25px;
	line-height: 1;
}

@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
	/* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
	.pswp--svg .pswp__button {
		background-image: url(default-skin.svg);
	}
}

/*

	3. Index indicator ("1 of X" counter)

 */
.pswp__counter {
	position:    absolute;
	left:        0;
	top:         0;
	height:      44px;
	font-size:   13px;
	line-height: 44px;
	color:       #FFF;
	opacity:     0.75;
	padding:     0 10px;
}

/*
	
	4. Caption

 */
.pswp__caption {
	position:   absolute;
	left:       0;
	bottom:     0;
	width:      100%;
	min-height: 44px;
}

.pswp__caption small {
	font-size: 11px;
	color:     #BBB;
}

.pswp__caption__center {
	text-align:  left;
	max-width:   420px;
	margin:      0 auto;
	font-size:   13px;
	padding:     10px;
	line-height: 20px;
	color:       #CCC;
}

.pswp__caption--empty {
	display: none;
}

/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake {
	visibility: hidden;
}

/*

	5. Loading indicator (preloader)

	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR

 */
.pswp__preloader {
	width:              44px;
	height:             44px;
	position:           absolute;
	top:                0;
	left:               50%;
	margin-left:        -22px;
	opacity:            0;
	-webkit-transition: opacity 0.25s ease-out;
	transition:         opacity 0.25s ease-out;
	will-change:        opacity;
	direction:          ltr;
}

.pswp__preloader__icn {
	width:  20px;
	height: 20px;
	margin: 12px;
}

.pswp__preloader--active {
	opacity: 1;
}

.pswp__preloader--active .pswp__preloader__icn {
	/* We use .gif in browsers that don't support CSS animation */
	background: url(preloader.gif) 0 0 no-repeat;
}

.pswp--css_animation .pswp__preloader--active {
	opacity: 1;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
	-webkit-animation: clockwise 500ms linear infinite;
	animation:         clockwise 500ms linear infinite;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
	-webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
	animation:         donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
}

.pswp--css_animation .pswp__preloader__icn {
	background: none;
	opacity:    0.75;
	width:      14px;
	height:     14px;
	position:   absolute;
	left:       15px;
	top:        15px;
	margin:     0;
}

.pswp--css_animation .pswp__preloader__cut {
	/*
			  The idea of animating inner circle is based on Polymer ("material") loading indicator
			   by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
		  */
	position: relative;
	width:    7px;
	height:   14px;
	overflow: hidden;
}

.pswp--css_animation .pswp__preloader__donut {
	-webkit-box-sizing:  border-box;
	box-sizing:          border-box;
	width:               14px;
	height:              14px;
	border:              2px solid #FFF;
	border-radius:       50%;
	border-left-color:   transparent;
	border-bottom-color: transparent;
	position:            absolute;
	top:                 0;
	left:                0;
	background:          none;
	margin:              0;
}

@media screen and (max-width: 1024px) {
	.pswp__preloader {
		position: relative;
		left:     auto;
		top:      auto;
		margin:   0;
		float:    right;
	}
}

@-webkit-keyframes clockwise {
	0% {
		-webkit-transform: rotate(0deg);
		transform:         rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform:         rotate(360deg);
	}
}

@keyframes clockwise {
	0% {
		-webkit-transform: rotate(0deg);
		transform:         rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform:         rotate(360deg);
	}
}

@-webkit-keyframes donut-rotate {
	0% {
		-webkit-transform: rotate(0);
		transform:         rotate(0);
	}
	50% {
		-webkit-transform: rotate(-140deg);
		transform:         rotate(-140deg);
	}
	100% {
		-webkit-transform: rotate(0);
		transform:         rotate(0);
	}
}

@keyframes donut-rotate {
	0% {
		-webkit-transform: rotate(0);
		transform:         rotate(0);
	}
	50% {
		-webkit-transform: rotate(-140deg);
		transform:         rotate(-140deg);
	}
	100% {
		-webkit-transform: rotate(0);
		transform:         rotate(0);
	}
}

/*
	
	6. Additional styles

 */
/* root element of UI */
.pswp__ui {
	-webkit-font-smoothing: auto;
	visibility:             visible;
	opacity:                1;
	z-index:                1550;
}

/* top black bar with buttons and "1 of X" indicator */
.pswp__top-bar {
	position: absolute;
	left:     0;
	top:      0;
	width:    100%;
}

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
	-webkit-backface-visibility: hidden;
	will-change:                 opacity;
	-webkit-transition:          opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
	transition:                  opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
	visibility: visible;
}

.pswp__caption {
	background-color: rgba(0, 0, 0, 0.5);
}

/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
.pswp__ui--fit .pswp__caption {
	background-color: rgba(0, 0, 0, 0.3);
}

/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
.pswp__ui--idle .pswp__top-bar {
	opacity: 0;
}

.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
	opacity: 0;
}

/*
	pswp__ui--hidden class is added when controls are hidden
	e.g. when user taps to toggle visibility of controls
*/
.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
	/* Force paint & create composition layer for controls. */
	opacity: 0.001;
}

/* pswp__ui--one-slide class is added when there is just one item in gallery */
.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
	display: none;
}

.pswp__element--disabled {
	display: none !important;
}

.pswp__video-wrap {
	width:           100%;
	height:          100%;
	display:         flex;
	justify-content: center;
	align-items:     center;
	position:        relative;
	max-width:       100%;
	max-height:      100%;

}

.pswp__video-wrap > * {
	max-width: 100%;
}