/* Gallery Addon Styles */
#gallery-1 .gallery-item { }

.thumbnailBox { position: relative; flex: 0 0 calc(25% - 10px); margin: 5px;}
img.attachment-thumbnail.size-thumbnail { width: 75px !important; height: 75px;  }
.imageOverlay{position: absolute; top: 0; width: 100%; height: 100%;border: 1px solid #FFF; transition: border .3s ease;}
.imageOverlay:hover{border: 5px solid #fff; transition: border .3s ease; }


#galleryWrapper { width: 1000px;  height: 550px; position: absolute; top: 27px; right: 0; left: 0; bottom: 0; margin: auto; display: flex; align-items: center;}
#galleryWrapper .galleryRight{ height: 100%; align-items: center; display: flex; position: relative; top: -16px;}


.galleryThumbnails { position: relative; width: 100%;}
.galleryThumbnails img {width: 100%; height: 100%; border: 2px solid #FFF; position: relative; display: block;}
.selectedGalleryItem { position: relative; width: 638px; float: left; margin-right: 45px;}
.selectedGalleryItem img { display: none; border: 5px solid #FFF;}
.selectedGalleryItem img.current { display: block; width: 100%; height: auto; }
.galleryDescriptionsWrapper .galleryDescription { display: none;}
.galleryDescriptionsWrapper .galleryDescription.current { display: block; text-align: center;}
.galleryRight { width: 350px; position: relative;}
#galleryNav { width: 100%; text-transform: lowercase; margin-top: -5px; letter-spacing: 1px; color: #6C6969; font-size: 13px; font-style: italic; position:  absolute; top: 330px;}
#prev { float: left;}
#prev:before { content: "<"; padding-right: 5px;}
#next:after { content: ">"; padding-left: 5px;}
#next { float: right; margin-right: 10px;}
ul#pagin li { cursor: pointer; margin-left: -40px;}
.disabled { opacity: .5; cursor: default !important;}
.galleryDescription { width: 100%; color: #6c6969; font-size: 14px; clear: both; padding-top: 10px; font-weight: 100;}
.pageTitle { text-transform: capitalize; font-size: 14px; letter-spacing: 1px; margin: 0; padding: 0; float: left;}
#galleryHeader { margin-bottom: 20px; width: 100%; float: left;}
#itemNumber { float: right; margin-right: 10px; font-size: 13px; }
.scrollNav { position: absolute; top: 0px; left: 0; height: 100%; width: 100%;}
#scrollPrev, #scrollNext { width: 50%; height: 100%; display: inline-block; position: relative;}
#scrollPrev:before, #scrollNext:before { content: ''; height: 50px; width: 50px; position: absolute; top: 45%; opacity: 0;transition: ease-in opacity .5s;}
#scrollPrev:before { background-image:  url(../img/koegel_leftArrow.png)}
#scrollNext:before { right: 0;background-image:  url(../img/koegel_rightArrow.png)}
#scrollPrev:hover:before, #scrollNext:hover:before{ opacity: 1; transition: ease-in opacity .5s;}

.galleryDescription a:link{text-decoration: underline;}

.thumbnailPage { display: flex; flex-wrap: wrap;}
/* .thumbnailPage.currentThumbnailPage { display: block; height: 346px;} */




body { overflow: hidden;}



@media all and (max-height: 600px)  {
#galleryWrapper{top: 140px;}
body { overflow: visible;}

}

@media all and (max-height: 500px)  {
#galleryWrapper{top: 200px;}

}

@media all and (max-height: 440px)  {
#galleryWrapper{top: 250px;}

}

@media all and (max-height: 340px)  {
#galleryWrapper{top: 300px;}

}

@media all and (max-width: 1000px)  {

#scrollPrev, #scrollNext{width: 50%;}


#galleryWrapper{height: auto;position: relative; top: 0px;width: 66%;margin: 40px 17%;display: block;}
.selectedGalleryItem{margin: 0 0 0px 0;float: none; clear: both;width: 100%;}
.galleryRight{float: none; clear: both;width: 100%; margin-top: 35px;}

.thumbnailPage{position: relative;}
body { overflow: visible;}

/* #galleryNav{position: relative;clear: both;} */
ul#pagin li{margin-top: 10px;}

.imageOverlay{border: 0px solid #FFF; }



}


@media all and (max-width: 910px)  {

#galleryWrapper{width: 76%;margin: 40px 12%;}

}


@media all and (max-width: 860px)  {

#galleryWrapper{width: 80%;margin: 40px 10%;}

}


@media all and (max-width: 810px)  {

#galleryWrapper{width: 84%;margin: 40px 8%;}

}

@media all and (max-width: 760px)  {

#galleryWrapper{width: 90%;margin: 40px 4%;}

}


@media all and (max-width: 700px)  {

#galleryWrapper{width: 92%;margin: 40px 4%;}

}