/*! 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 ==============*/


/*============== Custom Styles ==============*/
div.my-gallery { clear:both;margin-top:40px;margin-bottom:40px;display:flex;justify-content:flex-start;flex-wrap:wrap;gap:20px;}}
div.my-gallery:after { content: " "; visibility: hidden; display: block; height: 0; clear: both; }
div.my-gallery figure {box-sizing:border-box;width:calc((((100% - (11 * 20px))/12) * 4) + ((4 - 1) * 20px));height:400px;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 a { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 1;}
div.my-gallery a img {display: none;}
div.my-gallery figcaption {
  display: none; top:50%; transform: translateY(-50%); position: absolute; text-align: center; 
  width: 100%; font-family: 'PT Sans Narrow', sans-serif; font-weight: 700; font-size: 20px; 
  line-height: 23px; color:#ffffff; padding: 0px 15px;
}
div.my-gallery figure .spacer { width: 100%;}
.pswp__caption__center {text-align: center !important;}

@media only screen and (max-width:1400px){
  div.my-gallery figure{width:calc((((100% - (11 * 20px))/12) * 4) + ((4 - 1) * 20px));}
}
@media only screen and (max-width:1024px){
  div.my-gallery figure{width:calc((((100% - (11 * 20px))/12) * 6) + ((6 - 1) * 20px));}
}
@media only screen and (max-width:767px){
  div.my-gallery figure{width:100%;height:300px;}
}