/* set styles for container size before miniature.earth.js is loaded */
		
.earth-container {
	position: relative;
}
.earth-container::before {
	content: "";
	display: block;
	padding-top: 100%;
}


/* preload animation */

#spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -1.5em 0 0 -1.5em;
	width: 3em;
	height: 3em;
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMGMtNi42MjcgMC0xMiA1LjM3My0xMiAxMnM1LjM3MyAxMiAxMiAxMiAxMi01LjM3MyAxMi0xMi01LjM3My0xMi0xMi0xMnptOCAxMmMwIDQuNDE4LTMuNTgyIDgtOCA4cy04LTMuNTgyLTgtOCAzLjU4Mi04IDgtOCA4IDMuNTgyIDggOHptLTE5IDBjMC02LjA2NSA0LjkzNS0xMSAxMS0xMXYyYy00Ljk2MiAwLTkgNC4wMzgtOSA5IDAgMi40ODEgMS4wMDkgNC43MzEgMi42MzkgNi4zNjFsLTEuNDE0IDEuNDE0LjAxNS4wMTRjLTItMS45OTQtMy4yNC00Ljc0OS0zLjI0LTcuNzg5eiIvPjwvc3ZnPg==) center center no-repeat;
	background-size: contain;
	animation: spin 1s linear infinite;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


/* fade in after load */

.earth-container canvas {
	opacity: 0;
	transition: opacity 2s ease;
}
.earth-container.earth-ready canvas {
	opacity: 1;
}
/* .earth-container.earth-ready::after {
	content: "";
	position: absolute;
	top: 12%;
	bottom: 12%;
	left: 12%;
	right: 12%;
	z-index: 1200;
	pointer-events: none;
	border-radius: 50%;
	box-shadow: 0 0 20px RGBA(172,157,120,0.4) inset;
} */


/* hide fallback before it is displayed */

.earth-fallback {
	display: none;
}


/* reverse the styles if unsupported */

.earth-show-fallback .earth-fallback {
	display: block;
}	
.earth-show-fallback #spinner {
	display: none;
}
.earth-container.earth-show-fallback::before {
	content: none;
}

/********/

.earth-container {
	width: 100%;
	margin: 0 auto;
	max-width: 800px;
	overflow:hidden;
}

#place {
	position: absolute;
	left: -150px;
	width:415px;
	padding:3px 3px;
	border-left: 2px solid #877c61;
	background-color: white;
	filter: drop-shadow(0 2px 8px RGBA(0,0,0,0.5));
	transform: scale(0.001);
	transition: transform 0.1s ease-out;
	display:flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content:space-between;
}

#place.place-appear {
	transition: transform 0.15s ease-out;
	transform: scale(1);
}

#close-place {
	width: 32px;
	height: 32px;
	background: url('/wp-content/uploads/2023/09/x-symbol-svgrepo-com.svg') center center no-repeat;
	background-size: 16px 16px;
	cursor: pointer;
	pointer-events: all;
	position: absolute;
  	top: 0;
  	right: 0;
}

#place #place-title {
	font-size:22px;
	font-weight:500;
	margin-bottom:0px;
	color:#000;
	width:85%;
	display:flex;
}

#place #place-details {
	font-size: 15px;
	font-weight: 300;
	margin-bottom:0px;
	color:#000;
	width:100%;
	display:flex;
}

#photo {
	display:flex;
	width: 150px;
	height: 175px;
  	background-position: center center;
	background-clip: content-box;
	background-repeat: no-repeat;
}

#content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 10px; 
	height: 175px;
  }