/* 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');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');



/* SCROLLBAR STYLING */
/* width */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
/* Track */
::-webkit-scrollbar-track {
	background: inherit; 
}
/* Handle */
::-webkit-scrollbar-thumb {
	background: black; 
	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;
	font-family: 'Raleway', sans-serif;
}

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

.panoramaroom{
	display: none;
}

#mobilemenu{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
}

#mobilemenucontent{
	margin: 1em;
	color: white;
	font-weight: bold;
}

#loadingtext{
	margin: 1em;
	color: white;
}

#mobileiframe{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: white;
	overflow: auto;
}

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

#loading{
	z-index: 100;
}

.fullwrapper{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.85);
}

#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,.25);
	display: none;
}

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

#dimmer3{
	position: fixed;
	top: 0; 
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,.75);
	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: 2px solid rgba(255, 255, 255, 0.5);
	transition: transform 100ms;
}

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

.hotspottwoicon{
	position: absolute; width: 26px; height: 26px; top: calc(50% - 13px); left: calc(50% - 13px);
	transition: all 100ms;
}
.hotspottwoicon:hover{
	transform: scale(1.15);
}


.hotspottwowhitecircle{
	position: absolute; width: 42px; height: 42px; background-color: white; border-radius: 50%; top: calc(50% - 21px); left: calc(50% - 21px);
}


.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 - 100px);
	left: 96px;
}

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

.subicon5c{
	top: calc(50% - 48px - 152px);
	left: 0px;
}

.subicon5d{
	top: calc(50% - 48px + 152px);
	left: 0px;
}

.subicon4c{
	top: calc(50% - 48px - 142px);
	left: 32px;
}

.subicon4d{
	top: calc(50% - 48px + 142px);
	left: 32px;
}

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

.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: -256px;
	top: calc(50% - 28px);
	color: white;
	cursor: pointer;
	font-weight: normal;
	font-size: 1.25em;
	/* font-family: 'Frank Ruhl Libre', serif; */
	font-family: 'DM Serif Display', serif;
}

.subicontext h1{
	font-weight: normal;
}

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

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

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

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

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

.subicontext5c{
	top: calc(50% - 50px - 128px);
}

.subicontext5d{
	top: calc(50% - 0px + 128px);
}

.subicontext4c{
	top: calc(50% - 62px - 96px);
}

.subicontext4d{
	top: calc(50% - 0px + 114px);
}


#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: 5em;	
}

#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;
}

#floorplanbutton{
	
	overflow: hidden;
	position: fixed;
	left: 32px;
	bottom: 32px;
	width: 300px;
	background-color: #282726;
	height: 70px;
	color: white;
	font-weight: bold;
	
}

#ofptable{
	cursor: pointer;
	transition: all 500ms;
	opacity: 0.9;
}
#ofptable:hover{
	opacity: 1;
}
#ofptext{
	transition: all 500ms;
}
#ofptable:hover #ofptext{
	padding-left: 5px;
}

#floorplancontent{
	position: fixed;
	top: 3em;
	left: 5em; 
	right: 5em;
	bottom: 3em;
	display: none;
}

#floorplanbackbutton{
	cursor: pointer;
	transition: all 500ms;
}

#floorplanbackbutton:hover{
	margin-left: -5px;
}

#floorplancanvas{
	box-sizing: border-box;
	width: 100%;
	height: 70%;
	margin-top: -2em;
}

#furnituresinroom{
	background-color: black;
	position: fixed;
	left: 0; 
	right: 0;
	bottom: 0;
}