@charset "utf-8";
/* CSS Document */

/*LIGHTBOX*/	
#lightboxWrapper { position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.9); width: 100%; height: 100%; z-index: 20; overflow: hidden; display: grid; place-items: center;}
#loader 		 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px;}
#lightbox 	     { touch-action: auto;}

@media (orientation: landscape) { 
	#lightboxWrapper #lightbox 	     { max-height: 80vh;}
	#lightboxWrapper video 			 { width: 90% }
	#lightboxWrapper img 			 { object-fit: contain;}
}

@media (orientation: portrait) { 
	#lightboxWrapper #lightbox 	     { max-width: 80vw;}
	#lightboxWrapper video 			 { width: 90% }	
	#lightboxWrapper img 			 { object-fit: contain;}	
}


/*LIGHTBOX NAVIGATIONSBUTTONS*/	
#lightboxButtons { position: absolute; height: 5vh; min-height: 15px; bottom: 5%; z-index: 1000; padding: 1vh; box-sizing: border-box; background-color: #000000; border-radius: 20px; display: flex; left: 50%; transform: translate(-50%, 0); transition: 1s all ease;} 
#lightboxButtons button { text-align: center; background-color: #000000; box-shadow: none; box-sizing: border-box; padding: 0px; height: 100%; border: none; margin: 0 20px; white-space: nowrap; font-size: 2.5vh; color: white;} 
#lightboxButtons button:disabled { display: none;} 
#resetView_BTN:disabled { display: flex!important; opacity: .5; transform: scale(1);}
#lightboxButtons svg { fill: white; height: 100%}	
svg path, svg rect {fill: white;}
	
.clfadeOutButtons { animation: fadeOutNavigation 1s 0.5s forwards; }	 
@keyframes fadeOutNavigation  {
  from {opacity:1}
  to {opacity:.1}
}