/*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: 20px auto 30px auto; width: 100%; max-width: 1150px;}

.hes-gallery div {margin: 13px 6px !important; position: relative; display: inline-block; vertical-align: top; margin: 20px !important; text-align: center;}
.hes-gallery div, .hes-gallery img {width: 320px;}
.hes-gallery img {display: block; cursor: pointer; border-radius: 0; transition: 0.3s; -webkit-transition: 0.3s; border: 2px solid #BBB;}
.hes-gallery img:hover {filter: brightness(95%) saturate(150%); border: 2px solid #42A46E;}

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

.hes-gallery span {display: block; padding-top: 4px; font-size: .8em; line-height: 1.55;}

@media (max-width: 820px) {.hes-gallery div, .hes-gallery img {width: 240px;} .hes-gallery span {font-size: .75em;}}
@media (max-width: 640px) {.hes-gallery div, .hes-gallery img {width: 200px;}}
@media (max-width: 560px) {.hes-gallery div, .hes-gallery img {width: 300px;} .hes-gallery div {margin: 20px auto !important;}}
@media (max-width: 360px) {.hes-gallery div, .hes-gallery img {width: 250px;}}

/*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;}

#hg-subtext, #hg-bg span, #hg-pic-cont::after span, #hg-pic::after span, #hg-pic-cont span, #hg-pic span, .hes-gallery span {position: relative !important; z-index: 1000 !important; margin-top: 0 !important; font-size: 20px !important;}

/*.hg-disable-scrolling {overflow: hidden !important;}*/
/*#hg-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 1;}*/

/*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;}

/*#hg-bg::after:hover {background-color: white;}*/
#hgallery.open {visibility: visible !important; opacity: 1;}

/*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, #hg-pic-cont {border-radius: 8px;}*/
#hg-pic-cont.hg-transition {transform: scale(0.1);}

/*lightbox pic description*/
#hg-subtext {color: #DDD; font-size: 16px; line-height: 21px; position: absolute; display: block; left: 5px; top: calc(100% + 6px);}
#hg-howmany {color: #AAA; font-size: 14px; position: absolute; display: block; right: 5px; bottom: -20px;}

/*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;}

#hg-pic:hover {transform: none; box-shadow: none;}

/*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: -7px;} #hgallery button#hg-next {right: -7px;}
#hgallery button#hg-prev:active {left: -4px;} #hgallery button#hg-next:active {right: -4px;}
}

/*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;}

/*@media (max-width: 1100px) {#hg-pic-cont {max-width: calc(100% - 40px);}}*/