/*!
	HesGallery v1.4.11
	Copyright (c) 2018-2019 Artur Medrygal <medrygal.artur@gmail.com>
	Product under MIT licence
*/

/*Thumbnails*/

.hes-gallery {display: table; position: relative; text-align: center; margin: 40px auto 40px auto; width: 100%;}

.hes-gallery div {margin: 18px 10px; position: relative; display: inline-block; vertical-align: top; text-align: center;}
.hes-gallery div, .hes-gallery img {width: 300px;}
.hes-gallery img {display: block; cursor: pointer; border-radius: 4px; transition: 0.2s; -webkit-transition: 0.2s;}
.hes-gallery img:hover {filter: brightness(110%) saturate(110%);}
.hes-gallery span:not(span span) {text-align: center; display: block; margin-top: 7px; padding-top: 4px; font-size: .85em; line-height: 1.4;} /*caption*/
.hes-gallery span span {display: block; font-size: 1.1em; font-weight: 600;}

.hes-gallery div:after
{content: ""; background-image:url(enlarge.png); background-repeat: no-repeat; opacity: 1; background-size: contain; height: 25px; width: 25px; position:absolute; top: 4px; right: 4px; z-index: 1; pointer-events: none;}

@media (max-width: 780px) {.hes-gallery div, .hes-gallery img {width: 250px;}}
@media (max-width: 640px) {
.hes-gallery img {width: 100%; max-width: 500px;} .hes-gallery div {width: 95% !important;}
.hes-gallery div {margin: 15px 0 20px auto; width: auto;} .hes-gallery span:not(span span) {margin-top: 10px;}
}
@media (max-width: 480px) {.hes-gallery span:not(span span) {font-size: .85em;}}
@media (max-width: 360px) {.hes-gallery span:not(span span) {font-size: .9em;}}

/*Lightbox*/

#hgallery {display: block; content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.9); visibility: hidden; display: flex; justify-content: center; align-items: center; opacity: 0; transition: 0.3s; z-index: 99999;}

/*close button*/
#hg-bg::after {content: ''; position: absolute; display: block; top: 20px; right: 20px; width: 36px; height: 36px;
  background-image: url(close.png); background-position: center; background-size: contain; cursor: pointer; opacity: .8;}

/*lightbox pic back - left & right padding so arrows still show at smaller widths*/
#hg-pic-cont {/*max-width: calc(70% - 40px);*/ max-width: 70%; max-height: 90vh; cursor: default; z-index: 12; position: relative; background-color: white; transition: transform 0.3s; transform: scale(1);}

#hg-pic-cont {border-radius: 7px;} #hg-pic {border-radius: 5px;}
#hg-pic-cont.hg-transition {transform: scale(0.1);}

/*lightbox caption*/
#hg-subtext {color: #DDD; font-size: 16px; line-height: 21px; position: absolute; display: block; left: 5px; top: calc(100% + 6px);}

/*lightbox pic*/
#hg-pic {width: auto; height: auto; min-height: 100px; min-width: 100px; max-width: 100%; max-height: 90vh; box-sizing: border-box; display: block; cursor: default; object-fit: contain; margin: 0;}

/*nav arrows*/
#hgallery.open button {visibility: visible; opacity: 0.7;}
#hgallery button {position: absolute; display: block; margin: auto 0; width: 54px; height: 44px; z-index: 11; cursor: pointer; background-color: transparent; background-image: url(arrow.png); background-repeat: no-repeat; border: 0; outline: 0; opacity: 0; transition: opacity 0.3s, visibility 0.3s; visibility: hidden;}
#hgallery button:hover {opacity: 1}

#hgallery button#hg-prev {left: 20px; -webkit-transform: rotate(180deg); transform: rotate(180deg);}
#hgallery button#hg-next {right: 20px;}
#hgallery button#hg-prev:active {left: 16px;} #hgallery button#hg-next:active {right: 16px;}

@media (max-width: 985px) {#hg-pic-cont {max-width: 75%;}}
@media (max-width: 645px) {
#hgallery button#hg-prev {left: -4px;} #hgallery button#hg-next {right: -4px;}
#hgallery button#hg-prev:active {left: -1px;} #hgallery button#hg-next:active {right: -1px;}
}
@media (max-width: 380px) {
#hgallery button#hg-prev {left: -9px;} #hgallery button#hg-next {right: -9px;}
#hgallery button#hg-prev:active {left: -6px;} #hgallery button#hg-next:active {right: -6px;}
}

/*nav by clicking on pic*/
#hgallery #hg-prev-onpic, #hgallery #hg-next-onpic {position: absolute; top: 0; left: 0; width: 34%; height: 100%; cursor: pointer;}
#hgallery #hg-next-onpic {right: 0; left: auto; width: 66%;}
.hg-unvisible {opacity: 0 !important; visibility: hidden;}