:root {
  --slider-width: 400px;
  --slider-height: 300px;
  --height-topmenu: 0px;
  --height-gallery: 100vh;
}

@media screen and (max-width: 600px) {
  :root {
    --slider-width: 100%;
    --height-gallery: 70vh;
  }
}

.gallery-box-title {border-bottom: 1px solid #5e5e5e; padding: 5px; background: #1e1d1d; color: #fff; font-weight: bold;}
.gallery-box-container {background: #1e1d1d; padding: 5px; height: 200px; overflow: scroll; display: flex; flex-wrap: wrap;}
.gallery-box-container::-webkit-scrollbar {display: none;}
.gallery-box-container {-ms-overflow-style: none; scrollbar-width: none; }
.gallery-box .gallery-column img {max-height: calc(100% - 5px); width: 100%; margin: 2px; box-shadow: 0 0 11px 2px #000; cursor: pointer;}

/* preview-box */
.gallery-box {display: grid; grid-gap: 10px; grid-template-columns: auto auto auto;}
.gallery-box .gallery-column {float: left; width: 100%;}

/* vertical  */
.gallery-vertical-div {text-align: center; max-width: 100%;}
.gallery-vertical-div .gallery-column {float: none; cursor: pointer;}
.gallery-vertical-legend {font-size:8pt; color:gray; text-align: left; padding-left: 20px; line-height: initial;}
.gallery-vertical-title {font-weight: bold;}

/* horizontal */
.gallery-horizontal-div {white-space: nowrap; overflow-x:hidden; display: flex;}
.gallery-row.horizontal {display: flex; min-width: 50vw; margin-left: 20px; position: relative;}
.gallery-row.horizontal .gallery-column {width: 100%;}
.gallery-row.horizontal .legend {position: absolute; display: none; transition: 0.2s ease-out;}
.gallery-row.horizontal:hover .legend {display: block;}

/* grid  */
.gallery-flexbox-div {display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.gallery-flexbox-div .gallery-column {float: none; margin: 0; cursor: pointer; width: 150px; height:150px; overflow: hidden; }
.gallery-flexbox-div .gallery-column img {object-fit: cover; height: 100%; min-width: 100%;}
.gallery-flexbox-div .gallery-column:hover img {transform: scale(120%); transition: 0.5s;}

/* modal */
.gallery-modal {display: none; position: fixed; z-index: 9999; padding-top: 20px; left: 0; top: 0; width: 100%; height: 100vh; max-height: 100vh; overflow: auto; background-color: rgba(0,0,0,0.95);}
.gallery-modal::-webkit-scrollbar {display: none;}
.gallery-modal {-ms-overflow-style: none; scrollbar-width: none; }

.gallery-modal-content {position: relative; background-color: transparent; margin: auto; padding: 0; width: 90%; max-width: 1200px; max-height: 100vh;}

.gallery-controller-container {background: transparent; display: grid; grid-gap: 5px; grid-template-columns: auto auto auto auto auto;}

.gallery-close {color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; z-index: 10;}
.gallery-close:hover,
.gallery-close:focus {color: #999; text-decoration: none; cursor: pointer;}

.gallery-slides {display: none; background-color: inherit; text-align: center; height: calc(100vh - 50px); min-height: calc(100vh - 60px); position: relative;  overflow: hidden;}

.gallery-pic-description {position: absolute; bottom:0; left:0; width:100%; z-index: 999; background: rgba(0,0,0,0.85); font-size:80%; line-height: 1.2em; color: #bbb; transition: 0.5s; text-align: initial;}
.gallery-slides .media:not(:hover) .gallery-pic-description {height:0 !important; }
.gallery-slides .media:hover .gallery-pic-description {height:auto; padding:10px; }

.gallery-slides .media img {max-height: 100%; height: 100%; width: auto !important; max-width: 100%;}
.gallery-slides .media img, .gallery-slides .media audio, .gallery-slides .media video {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: fadeEffect 1s;}
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

.g-control {cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.2s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none;}
.g-control:hover {background-color: rgba(0, 0, 0, 0.8);}
.g-control:active {transform: scale(.8);}

.gallery-next {right: 0; border-radius: 3px 0 0 3px;}

.gallery-numbertext {color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;}

.gallery-caption-container {text-align: center; background-color: inherit; padding: 5px 16px; color: #a2a2a2; font-size: 80%; height: auto;}
.gallery-caption-container .title{font-weight: bold;}

img.gallery-demo {opacity: 0.6;}

.gallery-active, .gallery-demo:hover {opacity: 1;}

img.gallery-hover-shadow {transition: 0.3s;}

.gallery-hover-shadow:hover {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}

.gallery-pointer {cursor: pointer;}

.gallery-img-editmode {position:relative; width: max-content; overflow: hidden;}
.gallery-img-editmode img {height: 150px;}
.gallery-info-image {position: absolute; width: 100%; padding:10px; top:-20px; left: 0; height: 0; overflow: hidden; transition: 0.5s; background: rgba(0, 0, 0, 0.8); color: #fff;}
.gallery-img-editmode:hover .gallery-info-image {height:150px; top:0px;}

@media screen and (max-width: 600px) {
  .gallery-modal {padding-top:50px; }
  .gallery-numbertext {top:-45px;}
  .gallery-slides .media img {}
  .gallery-slides .media img, .gallery-slides .media audio, .gallery-slides .media video {max-height: 100%; height: auto; transform: translate(0%, calc(-50% - 70px)); left:0;}
  .gallery-slides .media audio{width: 100% !important;}
  .gallery-prev, .gallery-next {top: initial; bottom: 0px !important;} 
  .gallery-controller-container {grid-template-columns: auto; text-align: center;}
  .gallery-caption-container {position: absolute; bottom: 20px; width: calc(100% - 70px); left: 50%; transform: translateX(-50%);}
  .gallery-slides .media {top: calc(var(--vh, 1vh) * 50 - 50px);}
  .gallery-modal-content {height: calc(var(--vh, 1vh) * 100 - 50px); max-height: calc(var(--vh, 1vh) * 100 - 50px); }
}



.g-slider {position: relative; width: var(--slider-width); height: var(--slider-height); box-shadow: 3px 3px 10px rgba(0,0,0,.2);}

.g-wrapper {overflow: hidden; position: relative; width: 100%; height: 100%; z-index: 1;}

.g-slides {display: flex; position: relative; top: 0; left: calc( var(--slider-width) * -1); width: 100000px;}

.g-slides.shifting {transition: left .2s ease-out;}

.g-slide {width: var(--slider-width); height: var(--slider-height); cursor: pointer; display: flex; flex-direction: column; justify-content: center; transition: all 1s; position: relative; background: #000; border-radius: 2px;}
.g-slide img {object-fit: cover;}

.g-prev,
.g-next {position: absolute; top: 50%; width: 50px; height: 60px; margin-top: -20px; z-index: 2; background-position: center; background-repeat: no-repeat; cursor: pointer;}

.g-prev {left: -0px;}
.g-next {right: -0px;}

.homepage_slider {width: 100%; height: calc(100vh - var(--height-topmenu)); animation: fadeEffect 2s; max-height: calc(100vh - var(--height-topmenu)); overflow: hidden;}
.homepage_slider .g-wrapper {width: 100%; height: 100%; max-height: 100%;}
.homepage_slider .g-wrapper .slick-slider {max-height: calc(100vh - var(--height-topmenu)) !important;}
.homepage_slider .g-wrapper .g-slides.shifting {  transition: left .7s ease-out;}
.homepage_slider .g-wrapper .g-slides .g-slide {width:150vw; height:initial; background-color: #000; 
  background-size: cover; background-repeat: no-repeat; background-position: center; }
.homepage_slider .g-wrapper .g-slides .g-slide img { opacity: 0;}

/*
#homepage_slider_bottom {height: 0px; background: #292929; overflow: hidden;}
#homepage_slider_bottom .triangle-down {display:block; margin: auto; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #555;}
*/

@media screen and (max-width: 600px) {
/*
  #homepage_slider_bottom {height: 50px; padding: 15px;}
  .homepage_slider { height: calc(calc(100vh - var(--height-topmenu)) - 50px);}
*/
  .g-slides {left: 0;}
  .g-slide {width:100vw;}
}