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

/*
  Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/

/* pswp = photoswipe */
.pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; -ms-touch-action: none; touch-action: none; z-index: 1500000000; -webkit-text-size-adjust: 100%;  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */ -webkit-backface-visibility: hidden; outline: none; }
.pswp * { -webkit-box-sizing: border-box; box-sizing: border-box; }
.pswp img { max-width: none; }

/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
opacity: 0.001; will-change: opacity;  /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp--open { display: block; }
.pswp--zoom-allowed .pswp__img {  /* autoprefixer: off */
cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; }
.pswp--zoomed-in .pswp__img {  /* autoprefixer: off */
cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; }
.pswp--dragging .pswp__img {  /* autoprefixer: off */
cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; }

/*
  Background is added as a separate element.
  As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; -webkit-backface-visibility: hidden; will-change: opacity; }
.pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.pswp__container,
.pswp__zoom-wrap { -ms-touch-action: none; touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }

/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.pswp__zoom-wrap { position: absolute; width: 100%; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top;  /* for open/close transition */ -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp__bg { will-change: opacity;  /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap { -webkit-transition: none; transition: none; }
.pswp__container,
.pswp__zoom-wrap { -webkit-backface-visibility: hidden; }
.pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; }
.pswp__img { position: absolute; width: auto; height: auto; top: 0; left: 0; }

/*
  stretched thumbnail or div placeholder element (see below)
  style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder { -webkit-backface-visibility: hidden; }

/*
  div element that matches size of large image
  large image loads on top of it
*/
.pswp__img--placeholder--blank { background: #222; }
.pswp--ie .pswp__img { width: 100% !important; height: auto !important; left: 0; top: 0; }

/*
  Error message appears when image is not loaded
  (JS option errorMsg controls markup)
*/
.pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 14px; line-height: 16px; margin-top: -8px; color: #CCC; }
.pswp__error-msg a { color: #CCC; text-decoration: underline; }

/*============== Custom Styles ==============*/

div.my-gallery { clear: both; margin-top: 40px; margin-bottom:40px;display: flex; justify-content: flex-start; flex-wrap: wrap;}
div.my-gallery figure {
  box-sizing:  border-box; width: calc(100% / 4); 
  height: 150px; border: 1px solid #ffffff; 
  opacity: 1.0; margin: 0; 
  background-repeat: no-repeat; background-size: cover; background-position: center; position:  relative; transition:  0.25s ease-in-out all;
}

div.my-gallery figure:hover {opacity:  0.6;}
div.my-gallery figure a {position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;}
div.my-gallery figure img {width:  100%; opacity: 0; height: 0px; pointer-events: none;}
/*div.my-gallery img {width: 100%; opacity: 1.0;}*/
div.my-gallery figcaption { display: none; }

@media only screen and (max-width:1400px) {
  div.my-gallery figure {width: calc(100% / 4);}
}
@media only screen and (max-width:767px) {
  div.my-gallery figure {width: calc(100% / 2);}
}
@media only screen and (max-width:500px) {
  div.my-gallery figure {width: 100%;}
}
@media only screen and (max-width:464px) {
  div.my-gallery figure {height: 120px;}
}