/*! PhotoSwipe White UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*

	Contents:

	1. Buttons
	2. Share modal and links
	3. Index indicator ("1 of X" counter)
	4. Caption
	5. Loading indicator
	6. Additional styles (root element, top bar, idle state, hidden state, etc.)

*/
/*
	
	1. Buttons

 */
/* <button> css reset */
.pswp__button,
.pswp button {
	min-width:40px; /* just to ensure that these are not set for button in main css and mess things up */
	min-height:40px;
}

.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;
  -webkit-border-radius: 0px; /* restting after main hobones gives it some. */
	border-radius: 0px;
  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/*,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before*/ {
  background: url(skin.png) 0 0 no-repeat /* ensure background button css in main styles doesn't override, bg color results in double opacity, looks odd on mob.*/ ;
  background-size: 264px 88px;
  width: 44px;
  height: 44px; }

@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,
  .pswp--svg .pswp__button--arrow--left:before,
  .pswp--svg .pswp__button--arrow--right:before {
    background-image: url(skin.svg); }
  .pswp--svg .pswp__button--arrow--left,
  .pswp--svg .pswp__button--arrow--right {
    background: none; } }

.pswp__button--close {
  background-position: 0 -44px; }

.pswp__button--share {
  /*background-position: -44px -44px;*/
  background-position: -175px 0; /* heart*/ }

.pswp__button--fs {
  display: none; }

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

.pswp--fs .pswp__button--fs {
  background-position: -44px 0; }

.pswp__button--zoom {
  display: none;
  background-position: -88px 0; }

.pswp--zoom-allowed .pswp__button--zoom {
  display: none; /*block;*  rh 2017, don't want it and can't find anywhere else to remove it! js confusing */ }

.pswp--zoomed-in .pswp__button--zoom {
  background-position: -132px 0; }

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

/*
	Arrow buttons hit area
	(icon is added to :before pseudo-element)
*/
/*
.pswp__button--arrow--left,
.pswp__button--arrow--right {
  background: none;
  top: 50%;
  margin-top: -50px;
  width: 70px;
  height: 100px;
  position: absolute; }

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

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

.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  content: '';
  top: 35px;
  height: 30px;
  width: 32px;
  position: absolute;
	background-color: rgba(255, 255, 255, 0.6); /* rh ? * }
	
.pswp__button--arrow--left:before {
  left: 6px;
  background-position: -138px -44px; }

.pswp__button--arrow--right:before {
  right: 6px;
  background-position: -94px -44px; }
	
	*/
	



.pswp__button--arrow--left {
  background-position: -132px -37px; }

.pswp__button--arrow--right {
  background-position: -88px -37px; }







/*

	2. Share modal/popup and links

 */
.pswp__counter,
.pswp__share-modal {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none; }

.pswp__share-modal {
  display: block;
  /*background: rgba(0, 0, 0, 0.5);*/
	background: rgba(255, 255, 255, 0.7);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 10px;
  position: absolute;
  z-index: 1600;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-out;
          transition: opacity 0.25s ease-out;
  -webkit-backface-visibility: hidden;
  will-change: opacity; }

.pswp__share-modal--hidden {
  display: none; }

.pswp__share-tooltip {
  z-index: 1620;
  position: absolute;
  background: #FFF;
  top: 56px;
  border-radius: 2px;
  display: block;
  min-width:180px; /* rh added after removed 'on facebook' shrunk in width alot */
  width: auto;
  box-sizing:border-box;/* rh - so any padding doesnt push too far.. width set to 100% in mobile*/
  right: 44px;
  /*-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);*/
  -webkit-transform: translateY(6px);
      -ms-transform: translateY(6px);
          transform: translateY(6px);
  -webkit-transition: -webkit-transform 0.25s;
          transition: transform 0.25s;
  -webkit-backface-visibility: hidden;
  will-change: transform; }
  .pswp__share-tooltip a {
    display: block;
    padding: 8px 12px;
    color: #222;
    text-decoration: none;
    font-size: 14px;
    line-height: 18px;
		vertical-align:middle; /*rh*/ }
		.pswp__share-tooltip a:link{
	  color:#222; }
    .pswp__share-tooltip a:visited{
	  color:#222; }
    .pswp__share-tooltip a:hover {
      text-decoration: none;
      color: #000; }
    .pswp__share-tooltip a:first-child {
      /* round corners on the first/last list item */
      /*border-radius: 2px 2px 0 0; */ }
    .pswp__share-tooltip a:last-child {
     /* border-radius: 0 0 2px 2px;*/ }

.pswp__share-modal--fade-in {
  opacity: 1; }
  .pswp__share-modal--fade-in .pswp__share-tooltip {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0); }

/* increase size of share links on touch devices */
.pswp--touch .pswp__share-tooltip a {
  padding: 16px 12px; }

a.pswp__share--facebook:before,
a.pswp__share--twitter:before,
a.pswp__share--pinterest:before {
  font-family: 'hofont';
  margin-right:30px;
  line-height:25px;
  vertical-align:middle;
  font-size:20px;
  display:inline-block; }
a.pswp__share--facebook:before {
  content: '\ea90'; }
a.pswp__share--twitter:before {
  content: '\ea96'; }
a.pswp__share--pinterest:before {
  content: '\ead1'; }

  
a.pswp__share--facebook:hover {
  background: #3E5C9A;
  color: #FFF!important; /* getting overridden by default styles */ }
a.pswp__share--twitter:hover {
  background: #55ACEE;
  color: #FFF!important; }
a.pswp__share--pinterest:hover {
  background: #CCC;
  color: #CE272D!important; }

a.pswp__share--download:hover {
  background: #DDD; }
a.pswp__share--download{
	display:none;} /* elso removed in php/js */

/*
a.pswp__share--facebook:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: -12px;
  right: 15px;
  border: 6px solid transparent;
  border-bottom-color: #FFF;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  pointer-events: none; }

a.pswp__share--facebook:hover {
  background: #3E5C9A;
  color: #FFF; }
  a.pswp__share--facebook:hover:before {
    border-bottom-color: #3E5C9A; }

a.pswp__share--twitter:hover {
  background: #55ACEE;
  color: #FFF; }

a.pswp__share--pinterest:hover {
  background: #CCC;
  color: #CE272D; }

a.pswp__share--download:hover {
  background: #DDD; }
*/
/*

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

 */
.pswp__counter {
  /*position: absolute;
  left: 0;
  top: 0;*/
	float:left; /* rh */
  height: 44px;
  font-size: 13px;
  line-height: 44px;
  color: #000;
  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; rh */
  text-align: center;
 /* max-width: 420px; rh */
  margin: 0 auto;
  font-size: 1em;
  padding: 10px 10px 20px; /* rh feb 17, increased from 10 all round to 20 bottom. */
  line-height: 20px;
  color: /*#CCC;*/ #000; }

.pswp__caption--empty {
  display: none; }

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

/* rh */

.photoswipe-gallery-caption,
.share-text{
	display:none;} /* hides caption when in gallery/masonry */
/*.pswp__caption__center {
  text-align: center;
} keep left sop can have a 'more' link on right.. maybe .*/
.pswp__caption .figcaption-title{
	text-transform:uppercase; }
/* rh to make links in img caption move to right while text is left */
.pswp__caption a.figcaption-link {
	/*width:100%;
	max-width:320px;*/
	display:inline-block;
	text-align:center;
	margin:0.5em 0 0;
	padding:0.3em 2em;
	box-sizing:border-box;
	border:1px solid rgba(0,0,0,0.4);
	text-decoration:none;
	/*text-transform:uppercase;*/
	color:inherit;
	background: transparent; 
	opacity: 0.7;
	-webkit-border-radius: 3px;
	border-radius: 3px;
  -webkit-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
	/* visibility:hidden; just for now, while shop isn't ready */ 
}
.pswp__caption a.figcaption-link:hover{
	color:inherit;
	border:1px solid rgba(0,0,0,0.7);
	background: #eee;
	opacity:1; 
}

/* /rh */


/*

	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 #666; /* change preloader color? */
  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;
  height: 44px;
  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; }


/* TOP and BOTTOM bars.. *************************/

/* rh */
.pswp__top-bar, .pswp__caption {
  background-color: rgba(255, 255, 255, 0.85);  }

	
/* nothing in orig
.pswp__top-bar,
.pswp__caption {
  }
*/


/* 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);*/
	background-color: rgba(255, 255, 255, 0.65); }

/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) .
rh apr 17 , now using woocommerce which uses photoswipe, which when disabled uses the masonry swipe css, so need to fix the disappearing top bar. 
trying to make opacity stay 1, but think my version just breaks the js.. can't do that with wc, too messy! */
.pswp__ui--idle .pswp__top-bar {
  opacity: 1; /* was 0 */}

.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
  opacity: 1; /* was 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; }
  
/* overides 
rh.. this was already here, for the 'white' I guess, but think I also covered some of it below */

/*.pswp__bg{
  background: white;
}
*/
.pswp__top-bar button:hover,
.pswp__ui--fit .pswp__top-bar, 
.pswp__ui--fit .pswp__caption,
.pswp__ui--idle .pswp__top-bar,
.pswp__img--placeholder--blank{
	background-color:white;	
}


/* rh .. img placeholder is hidden (which uses the thumb.. can be dif dimensions so I've removed), so can be a moment of seeing nothing before proper image loads.. try get preloader gif behind image */

.pswp__container{
	background-image: url(preloader.gif);
	background-repeat:no-repeat;
	background-position: center center;
}

/*  7.    rh.  */
/* rh */

/*
* Photoswipe gallery - page masonry styles. ( RH moved from being embedded in body by php to this css file )
* This css was in photoswipe masonry php file so php could fetch the wp settings for the image width, but better to use a css file than have css in the page body.
* core of lightbox css is in - photoswipe.css

* added 'body' before some of the classes as some where overwritten by regular css file styles.. adding body makes them more dominant.
*/
.psgal,
.photoswipe_gallery {
	margin: auto;
	 /*margin-top:2em; should absorb any other margin on above elements.. eg p tags */
	padding-bottom:2.5em;/*padding may be better at bottom, as full of absolute and floated? elements*/
	/*padding-top:2em;*/
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;


	opacity:0.1;
	
	/* if not using masonry? 2017 *
	opacity:1; 
	text-align:center;
	*/
}


.psgal.photoswipe_showme,
.photoswipe_gallery.photoswipe_showme{
	opacity:1;
}

.psgal figure,
.photoswipe_gallery figure {
	float: left;
	
	text-align: center;
	/*width: 300px;*/ /* rh change this to change sizes of images, but must also change the column width in masonry js, set in photoswipe-masonry.php, now removed that line in js so seems css is doing it's job and taking charge, at least in chrome and iphone. */
	
	width:300px; /* was 270, as was max w */
	max-width:300px; /* setting w and max w as was below, as that was overiding this anyway. */
	padding:5px;
	margin: 0px;
	box-sizing:border-box;
	
	/* if not use masonry? 2017 *
	float:none; 
	display:inline-block;
	*/
}

/* rh new from plugin 2017 */
.psgal a{
	display:block;
}
.pswp__caption__center{
	text-align: center;
}
/* / new */

body .psgal img ,
body .photoswipe_gallery img {
	margin:auto;
	max-width:100%;
	width: auto;					
	height: auto;
	/*max-height: 500px;  rh added, as php wasnt even fetching the image height from the server anyway */
	border: 0;
}
/* let the font size be normal
.psgal figure figcaption,
.photoswipe_gallery figure figcaption{
	font-size:13px;
}			
*/

.msnry{
	margin:auto;	
}



/* / end copied from php file */







.pswp__bg {
	background:#fff;
	opacity:1!important;}

/* give hover states a change of some sort */
.pswp__top-bar button:hover{
	background-color:#f9f9f9;}
	
/* setting responsive sizes for images within masonry display.
Also removed the js line in photoswipe masonry php that sets the column width based on the size entered in the plugin wp settings. 
The dimensions entered in settings are used to save the image at that size.. while this css adjusts that to make fit better. 
Want saved images bigger than displayed so any pin will fetch a decent size.
*/

.psgal .msnry_item img,
.photoswipe_gallery .msnry_item img{
	vertical-align:bottom;}/* so gaps below match gaps at sides*/


/* rh added2015, then added new gallery class 2017 .. but repeat of styles above!! why??.. trying to leave copied stuff intact. */
/*body .psgal figure,
body .photoswipe_gallery figure {
	width:270px;
	max-width:270px;
} *//* both were 245 */


/* rh attempting to make masonry a choice in shortcode.. and setting the class in the psgal tag */
.psgal.ho-masonry-false{
	opacity:1; 
	text-align:center;
}
.psgal.ho-masonry-false figure{
	float:none;
	display:block;
	border-bottom:1px solid #eee;
	margin-bottom:10px;
	padding-bottom:10px;
}
/* rh added feb 17, sizes for when masonry false in gallery shortcode.. my edit to code. */
/*body */.psgal.ho-masonry-false figure,
/*body */.photoswipe_gallery.ho-masonry-false figure {
	width:auto;
	max-width:650px;
	margin:0px auto 13px;
} 

.psgal.ho-masonry-false .photoswipe-gallery-caption{
	margin-top:8px;
	display:block;
}
.psgal.ho-masonry-false .photoswipe-gallery-caption .figcaption-title,
.psgal.ho-masonry-false .photoswipe-gallery-caption .figcaption-content-desc {
	display:none;
}

/* allow square inline thumbnails. central? force removal of caption */
.psgal.ho-masonry-false.square-thumbs figure{
	/*float:left;*/
	display:inline-block;
	border:0;
	margin:0 2px 0px;
	padding:0;
	vertical-align:middle;
}
.psgal.ho-masonry-false.square-thumbs figure img{
	display:block;
	margin:0;
	padding:0;
}

.psgal.ho-masonry-false.sqaure-thumbs .photoswipe-gallery-caption{
	display:none;
}


@media screen and (max-width: 1029px) {
	body .psgal figure,
	body .photoswipe_gallery figure {
		width:280px; /* was 260 was 200, and 150 after mob break below */
	}
		
	.psgal.ho-masonry-false figure,
	.photoswipe_gallery.ho-masonry-false figure {
		max-width:100%;
	} 

}


/* mobiles and up to max small tablets */
@media screen and (max-width: 767px) {
	body .psgal figure,
	body .photoswipe_gallery figure {
		/*width:150px;*/ /* setting the width on small screen, mobiles etc.. make bigger than 150?.. trying to remove, see if works. percentages are bad, masonry messes up while scaling.. overlaps.*/
		padding-left:2px;
		padding-right:2px;
	}
	.pswp__caption__center {
	  text-align: left;
		font-size:13px;
  	padding: 10px; 
	}
	  
	.pswp__counter {
	  float:right; }
	  
	  
	/* getting the close button on the left.. also have already adjusted above code to get the counter on right.
	.touch class before these can also target smaller phone/tablet devices. 
	*/
		
	.pswp__button--close {
		float:left; } 
	.pswp__button--share{
		float: none; 
		display:block;
		position:absolute;
		left:0;
		right:0;
		margin:0 auto;
		padding-left:5px;
		padding-right:5px;
		}
	.pswp__share-tooltip {
		width: 100%;
		right:0; }
	.pswp__share-tooltip a{
		text-align:center; } /* untested as broadband went down.. want to centralise things.*/
	
	
	
	.pswp__button--arrow--left,
	.pswp__button--arrow--right {
		position:absolute;
		top:150px;
		background-color:#fff; }
	.pswp__button--arrow--left{
		left:0;}
	.pswp__button--arrow--right {
		right:0px;}
			
			
		
/* hidden on small screens, so do they need to be in main area at all, just in topbar. 
	.pswp__button--arrow--left,
	.pswp__button--arrow--right{
		display:block;
	}
	.pswp__top-bar .pswp__button--arrow--left,
	.pswp__top-bar .pswp__button--arrow--right{
		display:none;
	}
	*/
	
}