.lightboxImage{
	cursor: zoom-in;
}

picture i{

	position: absolute;
    bottom: 10px;
    right: 10px;
}



#lightbox{
	position:fixed;
	top:0;
	left:0;
	height:100vh;
	width:100vw;
	background:#000000;
	z-index:3000;
}

picture:has(.lightboxImage) {
	position: relative;
}

.lightboxImage{


}

#image-container{
	position:absolute;
	top:0;
	left:0;
	height:100vh;
	width:100vw;
	    transition: all 0.3s ease-in-out;
}
#image-container.thumbs-active{
	height:calc(100vh - 100px) !important;
	    transition: all 0.3s ease-in-out;
}

#thumbs-container{
	position:fixed;
	bottom:-100px;
	left:0;
	height:100px;
	min-height:100px;
	width:100vw;
	background:#000000;
	z-index:3030;
	    transition: all 0.3s ease-in-out;
}

#thumbs-container.thumbs-active{
	bottom:0 !important;
	    transition: all 0.3s ease-in-out;
}


#lb-thumb-toggle{
	position:fixed;
	bottom:0px;
	right:0;
	height:20px;
	width:20px;
	background:#000000;
	z-index:3035;
	width:30px;
	height:30px;

	background: url(../svg/arrow-up-short.svg);
	background-repeat: no-repeat;
	background-size: 30px;
	transition: bottom 0.3s ease-in-out;
}
#lb-thumb-toggle.thumbs-active{
	bottom:100px !important;
	transform: rotate(180deg);
	transition: bottom 0.3s ease-in-out;
}




#image-tools{
	position:fixed;
	top:0;
	left:0;
	height:30px;
	width:100vw;
	background:#000000;
	z-index:3034;
}

.lb-image{
	position: absolute;
	width:100%;
	height:100%;
	padding-bottom:10vh;
}
.lb-image img{
	position: absolute;
	    height: auto;
    max-height: 100%;
    width: auto;
    max-width: 100%;
	left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.lb-conntainer-desc{
	position: absolute;
	z-index:3040;
	width:100%;
	text-align: center;
    top: 10%;
	padding: 0 10px;

}

.lb-thumb{
	height:auto;
	width:150px;
}

.lb-imgThumb-container{
	width: 150px;
    height: 92px;
	overflow:hidden;
    display: inline-block;
	border:1px solid var(--black);
	margin: 3px;
	cursor: pointer;
}

.lb-imgThumb-container.active{
	border:1px solid var(--white);
	cursor: inherit;
}

#lb-next-image{
	position: absolute;
	z-index:3010;
	right: 5%;
    top: 50%;
	width:30px;
	height:30px;
    transform: translate(0%, -50%);
	background: url(../svg/arrow-right-short.svg);
	background-repeat: no-repeat;
	background-size: 40px;
	cursor: pointer;
}

#lb-prev-image{
	position: absolute;
	z-index:3020;
	left: 5%;
    top: 50%;
    transform: translate(0%, -50%);
	width:30px;
	height:30px;
	background: url(../svg/arrow-left-short.svg);
	background-repeat: no-repeat;
	background-size: 40px;
	cursor: pointer;
}

#lb-conntainer-pagi{
	position: absolute;
	z-index:3031;
	left:20px;
    top: 20px;
	color: var(--white);
}

#lb-conntainer-close{
	position: absolute;
	z-index:3030;
	right:30px;
    top: 20px;
		width:30px;
	height:30px;
	background: url(../svg/x.svg);
	background-repeat: no-repeat;
	background-size: 35px;
	cursor: pointer;
}


#lb-conntainer-fullscreen{
	position: absolute;
	z-index:3036;
	right:50px;
    top: 20px;
		width:30px;
	height:30px;
	background: url(../svg/fullscreen-exit.svg);
	background-repeat: no-repeat;
	background-size: 20px;
}

#lb-conntainer-fullscreen.fullscreen{

	background: url(../svg/fullscreen.svg) !important;
	background-repeat: no-repeat !important;
	background-size: 20px !important;

}

@media all and (orientation:portrait) {
	
}

@media all and (orientation:landscape) {
}