/*
Author: Cole Thorsen

TABLE OF CONTENTS

BODY ............. body styles for our custom ad implementation.
BUTTONS .......... styles buttons at the top
INDEX ............ Index indicator ("1 of X" counter)
LOADING .......... Loading indicator
ADDITIONAL ....... Additional styles (root element, top bar, idle state, hidden state, etc.)

*/

/* $BODY
____________________________________*/
.gallery_ad {
	display: none;
}

@media only screen and (min-width: 870px) {
	.pswp--open.show_ad .gallery_ad {
		display: block;
		position: absolute;
		top: 50%;
		right: 20px;
		z-index: 2;
		margin-top: -300px;

	}
	.show_ad .pswp__scroll-wrap {
		width: auto;
		position: relative;
		margin-right: 340px;
	}
}

/* $BUTTONS
____________________________________*/
/* <button> css reset */
.pswp svg {
	fill: #fff;
}

.pswp i {
    pointer-events: none;
}

.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;
	color: #fff !important;
	font-size: 18px;
}
	.pswp__button:focus,
	.pswp__button:hover {
		outline: none;
		opacity: 1;
	}
	.pswp__button:active {
		outline: none;
		opacity: 0.9;
	}
	.pswp__button::-moz-focus-inner {
		padding: 0;
		border: 0;
	}

.pswp__button .s {
	width: 22px;
	height: 22px;
	pointer-events: none;
}

.pswp__button .s_chevron-left,
.pswp__button .s_chevron-right {
	transform: scale(1.5);
}


.pswp__button .s_chevron-right {
	float: right;
}

/* 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,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
	width: 44px;
	height: 44px;
}

.pswp__button--fs {
	display: none;
}

.pswp--supports-fs .pswp__button--fs {
	display: block;
}

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

/*
	Arrow buttons hit area
*/
.pswp__button--arrow--left,
.pswp__button--arrow--right {
	background: none;
	width: 150px;
	height: 100%;
	padding: 0 10px;
	position: absolute;
	z-index: 2;
}

.pswp__button--arrow--left {
	left: 0;
	text-align: left;
}

.pswp__button--arrow--right {
	right: 0;
	text-align: right;
}

/* $INDEX_INDICATOR
____________________________________*/
.pswp__counter {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
			user-select: none;
	position: absolute;
	left: 0;
	top: 0;
	height: 44px;
	font-size: 13px;
	line-height: 44px;
	color: #FFF;
	opacity: 0.75;
	padding: 0 10px;
}

/* $CAPTION
____________________________________*/
.pswp__caption {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	min-height: 44px;
	z-index: 1;
}
	.pswp__caption a {
		color: #eb2a2e;
	}
	.pswp__caption .credit {
		font-size: 11px;
		color: #BBB;
		text-align: left;
		font-style: normal;
	}
	.pswp__caption  .credit:before {
		content: 'Photo: ';
	}

.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;
}


 /* $LOADING
____________________________________*/
/*
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--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);
	}
}

/* $ADDITIONAL
____________________________________*/
/* 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;
	height: 44px;
	width: 100%;
	z-index: 3;
}

.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__counter,
.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__top-bar,
.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--minimal--dark .pswp__top-bar {
	background: none;
}