/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300&display=swap');



/* SCROLLBAR STYLING */
/* width */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
/* Track */
::-webkit-scrollbar-track {
	background: inherit; 
}
/* Handle */
::-webkit-scrollbar-thumb {
	background: #eba576; 
	transition: background .5s;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #ff6600; 
}

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
	top: 36px;
	left: 36px;
	width: 0;
	height: 0;
	opacity: 1;
  }
  100% {
	top: 0px;
	left: 0px;
	width: 72px;
	height: 72px;
	opacity: 0;
  }
}


#desc-container {
	max-width: 500px;
	max-height: 500px;
	min-width: 200px;
	min-height: 250px;
	background: #fff;
	color: #000;
	border-radius: 3px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
  }

  #desc-container > iframe {
	border: none;
	width:100%;
  }


html, body {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #000;
	color; black;
}

h1, h2, h3, h4, h5, h6{
	margin: 0px;
	padding: 0px;
}

a:link, a:visited{
	color: #bdc3c7;	
}

#loading{
	z-index: 100;
}

.fullwrapper{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: black;
}

#container {
	width: 100%;
	height: 100%;
}

#tmp{
	position: fixed;
	top: 0;
	left: 0; 
	right: 0;
	bottom: 0;
	padding: 100px;
	background-color: rgba(0,0,0,.01);
	backdrop-filter: blur(5px);
	display: none;
}

#dimmer{
	position: fixed;
	top: 0; 
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,.1);
	display: none;
}

#dimmer2{
	position: fixed;
	top: 0; 
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,.4);
	display: none;
}

#dimmer3{
	position: fixed;
	top: 0; 
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,.5);
	display: none;
}




/* Hotspot Styles */

.hotspotone{
	
	position: fixed;
	width: 96px;
	height: 96px;
	background-color: rgba(255, 255, 255, 0.05);
	border-radius: 50%;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.2);
	text-align: center;
}

.hotspotoneinnerdot{
	position: absolute;
	width: 12px;
	height: 12px;
	background-color: white;
	border-radius: 50%;
	top: calc(50% - 6px);
	left: calc(50% - 6px);
	transition: all 0.5s;
}

.hotspotone:hover > .hotspotoneinnerdot{
	transform: scale(1.4);
}

.hotspotoneinnerdotanimated{
	position: absolute;
	width: 96px;
	height: 96px;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	top: calc(50% - 48px);
	left: calc(50% - 48px);
	animation-name: h1idanim;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}

@keyframes h1idanim{
	0%   {height:0%; width:0%; opacity:1; top: 50%; left: 50%;}
	70% {height:100% width:100%; opacity:0.8}
	100% {height:100% width:100%; opacity:0}
}

.hotspotmenuone{
	position: fixed;
	top: 0;
	left: 0;
	width: 64px;
	height: 64px;
}

.hotspotclosebutton{
	transition: all 500ms;
}
.hotspotclosebutton:hover{
	transform: scale(1.1);
}


.hotspottwo{
	position: fixed;
	top: 0;
	left: 0;
	width: 64px;
	height: 64px;
	cursor: pointer;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: transform 100ms;
}

.hotspottwo:hover{
	transform: scale(1.1);
}

.hotspottwoicon{
	transition: all 100ms;
}
.hotspottwoicon:hover{
	transform: scale(1.15);
}



.submenuscontainer{
	position: absolute;
	width: 100%;
	height: 100%;
}

.subicon{
	position: absolute;
	top: calc(50% - 48px);
	left: 144px;
	width: 96px;
	height: 96px;
}

.subicon2a{
	top: calc(50% - 48px - 64px);
	left: 124px;
}

.subicon2b{
	top: calc(50% - 48px + 64px);
	left: 124px;
}

.subicon3a{
	top: calc(50% - 48px - 96px);
	left: 110px;
}

.subicon3b{
	top: calc(50% - 48px + 96px);
	left: 110px;
}

.subiconbigcirclebg{
	position: absolute;
	width: 96px;
	height: 96px;
	outline: 50px solid rgba(255,255,255,0.5);
	border-radius: 50%;
	transform: scale(0);
	transition: all 500ms;
}

.subiconimage{
	position: absolute;
	width: 64px;
	height: 64px;
	top: calc(50% - 32px);
	left: calc(50% - 32px);
	border-radius: 50%;
	background-color: white;
	cursor: pointer;
}

.subiconsmalltext{
	position: absolute;
	width: 128px;
	height: 64px;
	top: calc(50% - 32px);
	left: 100px;
	color: white;
	font-family: 'Raleway', sans-serif;
	opacity: 0;
	transition: all 500ms;
}

.subicontext{
	position: absolute;
	left: -300px;
	top: calc(50% - 18px);
	color: white;
	cursor: pointer;
	font-weight: lighter;
	font-family: 'Frank Ruhl Libre', serif;
}

.underline{
	width: 0%;
	height: 1px;
	background-color: white;
	transition: all 500ms;
}

.subicontext2a{
	top: calc(50% - 18px - 32px);
}

.subicontext2b{
	top: calc(50% - 18px + 32px);
}

.subicontext3a{
	top: calc(50% - 18px - 64px);
}

.subicontext3b{
	top: calc(50% - 18px + 64px);
}


#iframeview{
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 128px;
	right: 128px;
	overflow-y: auto;
}

#iframeview::-webkit-scrollbar{
	display: none;
}

#ifvcontainer{
	display: table;
	width: 100%;
	height: 100%;
	margin-top: 128px;	
}

#iframecontainer{
	height: 100%;
	overflow-y: auto;
	background-color: white;
}

#iframecontainer::-webkit-scrollbar{
	display: none;
}

.ifvclosebutton{
	cursor: pointer;
	transition: all 500ms;
}

.ifvclosebutton:hover{
	transform: scale(1.1);
}

.vmenu{
	font-family: 'Raleway', sans-serif;
	color: white;
	text-align: center;
	padding: 12px;
	width: 100%;
	box-sizing: border-box;
	background-color: #373534;
	border-bottom: 2px solid #565351;
	transition: background-color 500ms;
	cursor: pointer;
}

.vmenu:hover{
	background-color: #565351;
}

.touriframe{
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
}