/****************************************************/
/****************************************************/
/****************************************************/
/****************************************************/

/*******************LOBBY GALLERY********************/

#div_gallery {
    position: relative;
	width: 100%;
	height: 100%;
    height: fit-content;
	margin: 0px;
	padding: 0px;
	color: white;
}

#div_image {
    position: absolute;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
/*	padding-bottom: 30%;*/
	background-color: grey;	
	z-index: 17; -webkit-z-index: 17; -moz-z-index: 17; -o-z-index: 17;
}

#div_image img {
	width: 100%;
}

#gallery_image_preload {
	position: absolute;
	opacity: 1;
	transition: all 0.25s ease-in 1s;
	-webkit-transition: all 0.25s ease-in 1s;
	-moz-transition: all 0.25s ease-in 1s;
	-o-transition: all 0.25s ease-in 1s;
	z-index: 3; -webkit-z-index: 3; -moz-z-index: 3; -o-z-index: 3;
}

#gallery_image {
	position: absolute;
	opacity: 0;
	transition: all 0.91s ease-in 0.25s;
	-webkit-transition: all 0.91s ease-in 0.25s;
	-moz-transition: all 0.91s ease-in 0.25s;
	-o-transition: all 0.91s ease-in 0.25s;
	z-index: 5; -webkit-z-index: 5; -moz-z-index: 5; -o-z-index: 5;
}

#div_image_loading {
    position: absolute;
	width: fit-content;
	height: fit-content;
	margin-top: 10%;
  	left: 50%;  
  	transform: translate(-50%, -50%);
	padding: 11px;
	background-color: black;	
	z-index: 17; -webkit-z-index: 17; -moz-z-index: 17; -o-z-index: 17;
	opacity: 1;
}

#div_image_loading span {
  display: inline-block;
  vertical-align: middle;
  width: .6em;
  height: .6em;
  margin: .19em;
  background: #111111;
  border-radius: .6em;
  animation: loading 1s infinite alternate;
}

#div_image_loading span:nth-of-type(2) { background: #333333; animation-delay: 0.2s; }
#div_image_loading span:nth-of-type(3) { background: #555555; animation-delay: 0.4s; }
#div_image_loading span:nth-of-type(4) { background: #888888; animation-delay: 0.6s; }
#div_image_loading span:nth-of-type(5) { background: #AAAAAA; animation-delay: 0.8s; }
#div_image_loading span:nth-of-type(6) { background: #CCCCCC; animation-delay: 1.0s; }
#div_image_loading span:nth-of-type(7) { background: #FFFFFF; animation-delay: 1.2s; }

@keyframes loading {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


#div_background {
    width: 100%;
    height: 100%;
    height: fit-content;
    position: absolute;
    background-image: url("images_mockup/logo_s81_640x360.png");
    background-size: 35%;
    background-repeat: no-repeat;
    background-position: 47% 99%;
	z-index: 13; -webkit-z-index: 13; -moz-z-index: 13; -o-z-index: 13;
}

#background_video {
    margin:auto;
    margin-top:23.2%;
    margin-left:31.5%;
    width: 33%;
    background: transparent;
    transition: all 0s 0s;
	-webkit-transition: all 0s 0s;
	-moz-transition: all 0s 0s;
	-o-transition: all 0s 0s;
}

#background_video_controls {    
	z-index: 27; -webkit-z-index: 27; -moz-z-index: 27; -o-z-index: 27;
    position: absolute;
    background-color:none;
    background:transparent;
    color:brown;
    margin-top:75.3%;
    margin-left:1.3%;
    text-size:8%;
    display: flex;
    flex-direction: row;
    height: 32px;
}

#background_video_controls img {
    width:32px;
    display: flex;
}

#background_video_controls img:last-of-type {
	/*margin-right: 3vh;*/
}

#background_video_button_stop {

}

#div_foreground {
    width: 100%;
    height: 35%;
    height: fit-content;
    position: absolute;
	z-index: 18; -webkit-z-index: 18; -moz-z-index: 18; -o-z-index: 18;
	display: flex;
	overflow: hidden;
}

#div_foreground img {
    width: 100%;
    height: 100%;
}

#div_image_credits {
	position: absolute;
	margin-top:85.1%;
	right: 7px;
	z-index: 23; -webkit-z-index: 23; -moz-z-index: 23; -o-z-index: 23;
	width: calc(100% - 7px);
	font-size: 7px;
	color: sandybrown;
	text-align: right;
}

#div_image_credits a {
	color: sandybrown;
	text-decoration: none;
	font-weight: bold;
}

#div_image_credits a:hover {
	text-decoration: underline;
}

#div_retractable_outlet {
	position: absolute;
	z-index: 23; -webkit-z-index: 23; -moz-z-index: 23; -o-z-index: 23;
	width: 2%;
	height: 92px;
	margin-top:63.3%;
    margin-left:17.9%;
	border: none;
	overflow: visible;
	white-space: nowrap;
/*	background-image: url("images_mockup/retractable_outlet.png");
	background-repeat: no-repeat;
	background-position: 0% 0%;*/
}

#div_retractable_outlet img {
	display: none;
	width: 100%;
}

#div_retractable_outlet p {
	display: none;
	font-size: 9px;
	color: white;
}

#div_retractable_outlet:hover p {
	display: block;
}

#div_retractable_outlet:hover img{
		display: block;
}

#div_description_video {
	position: absolute;
	z-index: 23; -webkit-z-index: 23; -moz-z-index: 23; -o-z-index: 23;
/*	width: 0px;*/
/*	width: fit-content;*/
/*	height: fit-content;*/
	margin-top:37.8%;
    margin-left:24.4%;
    padding-top: 3%;
    padding-left: 2%;
	border: none;
	overflow: hidden;
	white-space: nowrap;
}

#div_description_video p {
	font-size: 7px;
	color: white;	
	display: none;
	opacity: 0;
	transition: all 0.25s ease-in 0.25s;
	-webkit-transition: all 0.25s ease-in 0.25s;
	-moz-transition: all 0.25s ease-in 0.25s;
	-o-transition: all 0.25s ease-in 0.25s;
}

#div_description_video img {
	height: 100%;
	vertical-align: middle;
	margin-left: -15px;
}

#div_description_video:hover {
	width: fit-content;
	height: fit-content;
    padding: 7% 5% 5% 5%;
	background-color: rgba(255, 255, 255, 0.15);
/*	transition: all 0.25s ease-in 1.0s;
	-webkit-transition: all 0.25s ease-in 1.0s;
	-moz-transition: all 0.25s ease-in 1.0s;
	-o-transition: all 0.25s ease-in 1.0s;*/
}

#div_description_video:hover p {
	display: block;
	opacity: 1;
}

#div_description_video a {
	color: white;
	width: 0px;
	text-decoration: underline overline;
}

#div_description_video a:visited {
	color: white;	
}

/*****************************************************/

#div_description_statue {
	position: absolute;
	z-index: 24; -webkit-z-index: 24; -moz-z-index: 24; -o-z-index: 24;
/*	width: 32px;*/
/*	width: fit-content;*/
/*	height: 64px;*/
	margin-top:54.1%;
    margin-left:57.3%;
    padding-top: 3%;
    padding-left: 5%;
	border: none;
/*	background-color: rgba(255, 255, 255, 0.05);*/
	overflow: hidden;
	white-space: nowrap;
}


#div_description_statue p {
	font-size: 7px;
	color: white;	
	display: none;
	opacity: 0;
	transition: all 0.25s ease-in 0.25s;
	-webkit-transition: all 0.25s ease-in 0.25s;
	-moz-transition: all 0.25s ease-in 0.25s;
	-o-transition: all 0.25s ease-in 0.25s;
}

#div_gallery p.p_title {
	font-size: 12px;
	font-weight: bold;
}

#div_description_statue img {
	height: 100%;
	vertical-align: middle;
	margin-left: -15px;
}

#div_description_statue a {
	color: white;
	width: 0px;
	text-decoration: underline overline;
/*	display: none;*/
	transition: all 5s linear 0.1s;
	-webkit-transition: all 5s linear 0.1s;
	-moz-transition: all 5s linear 0.1s;
	-o-transition: all 5s linear 0.1s;
}

#div_description_statue a:visited {
	color: white;	
}

#div_description_statue:hover {
	width: fit-content;
	overflow: visible;
	margin-top: 52.7%;
	margin-left: 52.3%;
	padding: 5% 5% 5% 5%;
	background-color: rgba(255, 255, 255, 0.15);
/*	transition: all 0.25s ease-in 1.0s;
	-webkit-transition: all 0.25s ease-in 1.0s;
	-moz-transition: all 0.25s ease-in 1.0s;
	-o-transition: all 0.25s ease-in 1.0s;*/
}

#div_description_statue:hover a {
	width: 100%;
/*	display: inline-block;*/
}

#div_description_statue:hover p {
	display: block;
	opacity: 1;
}

/*****************************************************/

#div_description_right {
	position: absolute;
	z-index: 25; -webkit-z-index: 25; -moz-z-index: 25; -o-z-index: 25;
/*	width: 32px;*/
/*	width: fit-content;*/
/*	height: 64px;*/
	margin-top:37.8%;
    margin-left: 80.5%;
    padding-top: 3.3%;
    padding-left: 1.9%;
	border: none;
/*	background-color: rgba(255, 255, 255, 0.15);*/
	overflow: hidden;
	white-space: nowrap;
}

#div_description_right p {
	font-size: 7px;
	color: white;	
	display: none;
	opacity: 0;
	transition: all 0.25s ease-in 0.25s;
	-webkit-transition: all 0.25s ease-in 0.25s;
	-moz-transition: all 0.25s ease-in 0.25s;
	-o-transition: all 0.25s ease-in 0.25s;
}

#div_description_right:hover {
	width: fit-content;
	overflow: visible;
	margin-top:37.8%;
	margin-left: calc(80.5% - 81px);
	padding: 5% 5% 5% 5%;
	background-color: rgba(255, 255, 255, 0.15);
/*	transition: all 0.25s ease-in 1.0s;
	-webkit-transition: all 0.25s ease-in 1.0s;
	-moz-transition: all 0.25s ease-in 1.0s;
	-o-transition: all 0.25s ease-in 1.0s;*/
}


#div_description_right:hover p {
	display: block;
	opacity: 1;	
}


/*ADJUSTMENTS*/

@media only screen and (min-width: 900px){
    #div_description_video p {
    	font-size: 11px;
    }
    #div_retractable_outlet p {
	    font-size: 11px;
    }
    #div_description_statue p {
    	font-size: 11px;
    }
    #div_description_right p {
    	font-size: 11px;
    }
}

@media only screen and (min-width: 1200px){
    #div_description_video p {
    	font-size: 13px;
    }
    #div_retractable_outlet p {
	    font-size: 13px;
    }
    #div_description_statue p {
    	font-size: 13px;
    }
    #div_description_right p {
    	font-size: 13px;
    }
}


/****************************************************/
/*********************NFT GALLERY********************/