html,
body {
	margin: 0;
	padding: 0;
	background-color: white;

	font-family: sans-serif;
	font-size: 16px;
}

h2{
    font-size: 1.25em!important;
    text-wrap: wrap;
}
p{line-height:1.4;!important}
:root {
	--wp3d-earth-modal-color: #f5f5f5;
	--wp3d-earth-modal-quitcolor: #999;
	--wp3d-earth-modal-titlecolor: #111;
	--wp3d-earth-modal-contentcolor: #111;
	--wp3d-earth-modal-size: 50%;
	--wp3d-earth-button-textcolor: #fff;
	--wp3d-earth-button-bgcolor: #333;
	--wp3d-earth-button-strokecolor: #fff;
	--wp3d-earth-button-strokesizer: 0;
	--wp3d-earth-button-radius: 0
}
#wrapper {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;

	position: relative;
	margin: 0 auto;
	width: 64em;
	max-width: 100%;
	/*transition: width 0.5s ease-in-out;*/
	min-height: 100vh;
	font-family: monospace;
}
#myearth canvas {
	height:960px;
}
.sidebar-open #wrapper {
	width: 100vw;
}

#side-col{
	width: 50%;
	position: fixed;
	right: 0px;
	transform: translateX(100%) !important;
	transition: .5s all;
}
.sidebar-open #side-col{
	transform: translateX(0%) !important;

}
#main-col {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	transition: .3s all;
}
.wp3d-quit-earth {
	display: block;
	height: 40px;
	position: absolute;
	right: 10px;
	top: 10px;
	width: 40px;
}
.sidebar-open  #main-col{
	left: 0px;
	width: 50%;

	transform: translateX(0%);
}
.sidebar-open #logo {
	fill: rgb(0, 38, 93)!important;
}

#side-col {
	max-width: 50%;
	overflow: hidden;
	/*transition: max-width 0.5s ease-in-out;*/
	flex: 0 0 50vw;
}
/*.sidebar-open #side-col {*/
/*	max-width: 50%;*/
/*}*/

#side-col > div {
	padding: 3em;
	/*padding-right: 4em;*/
	white-space: nowrap;
}

#button-col {
	position: relative;
	width: 0px;
	z-index: 50;
	flex: 0 1 0px;
}

#button-toggle-sidebar {
	position: absolute;
	right: 0;
	width: 2em;
	height: 3em;
	margin-top: -1.5em;
	background: #66d8ff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNy4zMyAyNGwtMi44My0yLjgyOSA5LjMzOS05LjE3NS05LjMzOS05LjE2NyAyLjgzLTIuODI5IDEyLjE3IDExLjk5NnoiLz48L3N2Zz4=) center center no-repeat;
	background-size: 1.5em;
	color: white;
	transition: transform 0.5s ease-in-out;
	cursor: pointer;
}
.sidebar-open #button-toggle-sidebar {
	transform: scaleX(-1);
}


.wp-block-group:has(.wp-block-wp3d-earth3d)>.wp-block-wp3d-earth3d {
	width: 100%
}

.wp3d-scene-container {
	display: flex;
	position: relative;
	width: 100%
}

.wp3d-viewport_fixed {
	height: 100vh!important;
	left: 0;
	max-width: 100%;
	padding: 0!important;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: -1
}

.threed-stats>div {
	left: 5px!important;
	position: absolute!important;
	top: 5px!important
}

.wp3d-earth-container {
	position: relative
}

.e3d-text-location-earth {
	align-items: center;
	background-color: rgba(0,0,0,.3);
	color: hsla(0,0%,100%,.6);
	display: none;
	display: flex;
	font-size: clamp(2rem,5vw,3rem);
	height: 100%;
	justify-content: center;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	width: 100%
}

.circlenumber {
	display: none
}

.wp3d-modal {
	background-color: var(--wp3d-earth-modal-color);
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 2em
}

.wp3d-modalposition-right .wp3d-modal,.wp3d-modalposition-right.wp3d-modal {
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	transform: translate(100%);
	width: var(--wp3d-earth-modal-size,50%)
}

.wp3d-modalposition-left .wp3d-modal,.wp3d-modalposition-left.wp3d-modal {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transform: translate(-100%);
	width: var(--wp3d-earth-modal-size,50%)
}

.wp3d-modalposition-top .wp3d-modal,.wp3d-modalposition-top.wp3d-modal {
	height: var(--wp3d-earth-modal-size,50%);
	left: 0;
	position: absolute;
	top: 0;
	transform: translateY(-100%);
	width: 100%
}

.wp3d-modalposition-bottom .wp3d-modal,.wp3d-modalposition-bottom.wp3d-modal {
	bottom: 0;
	height: var(--wp3d-earth-modal-size,50%);
	left: 0;
	position: absolute;
	transform: translateY(100%);
	width: 100%
}

@media only screen and (max-width: 768px) {
	.wp3d-modalmobile .wp3d-modal,.wp3d-modalmobile.wp3d-modal {
		height:100%!important;
		width: 100%!important
	}
}

.wp3d-modal-title {
	color: var(--wp3d-earth-modal-titlecolor)!important;
	margin: 1rem 0
}

.wp3d-modal-image img {
	width: 100%
}

.wp3d-modal-description {
	color: var(--wp3d-earth-modal-contentcolor)
}

.wp3d-quit-earth {
	display: block;
	height: 40px;
	position: absolute;
	right: 10px;
	top: 10px;
	width: 40px
}

.wp3d-quit-earth:hover {
	cursor: pointer
}

.wp3d-quit-earth:after,.wp3d-quit-earth:before {
	background-color: #000000;
	content: " ";
	height: 100%;
	left: 50%;
	position: absolute;
	width: 2px
}

.wp3d-quit-earth:before {
	transform: rotate(45deg)
}

.wp3d-quit-earth:after {
	transform: rotate(-45deg)
}

.wp3d-modal .wp3d-earth-button {
	margin: 20px 0
}

.wp3d-modal .wp3d-earth-button.extrasmall {
	font-size: .7rem
}

.wp3d-modal .wp3d-earth-button.small {
	font-size: .8rem
}

.wp3d-modal .wp3d-earth-button.medium {
	font-size: 1rem
}

.wp3d-modal .wp3d-earth-button.large {
	font-size: 1.3rem
}

.wp3d-modal .wp3d-earth-button.extralarge {
	font-size: 1.5rem
}
/*#button-reset {*/
/*	position: absolute;*/
/*	right: 8%;*/
/*	bottom: 8%;*/
/*	width: 8%;*/
/*	height: 8%;*/
/*	border-radius: 50%;*/
/*	background: #66d8ff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTMuNSAyYy01LjYyOSAwLTEwLjIxMiA0LjQzNi0xMC40NzUgMTBoLTMuMDI1bDQuNTM3IDUuOTE3IDQuNDYzLTUuOTE3aC0yLjk3NWMuMjYtMy45MDIgMy41MDgtNyA3LjQ3NS03IDQuMTM2IDAgNy41IDMuMzY0IDcuNSA3LjVzLTMuMzY0IDcuNS03LjUgNy41Yy0yLjM4MSAwLTQuNTAyLTEuMTE5LTUuODc2LTIuODU0bC0xLjg0NyAyLjQ0OWMxLjkxOSAyLjA4OCA0LjY2NCAzLjQwNSA3LjcyMyAzLjQwNSA1Ljc5OCAwIDEwLjUtNC43MDIgMTAuNS0xMC41cy00LjcwMi0xMC41LTEwLjUtMTAuNXoiLz48L3N2Zz4=) 41% 50% no-repeat;*/
/*	background-size: 60%;	*/
/*	transition: transform 0.3s ease, opacity 0.3s ease;*/
/*	cursor: pointer;*/
/*	z-index: 5000;*/
/*	transform: scale(0.01);*/
/*	opacity: 0;*/
/*	pointer-events: none;*/
/*}*/

.config-start #button-reset {
	transform: scale(1);
	opacity: 1;
	pointer-events: inherit;
}


#from,
#to {
	font-family: inherit;
	font-size: 1.2em;
	max-width: 100%;
	margin-top: -0.25em;
	margin-bottom: 0.25em;
}

/* ATMOSPHERE GLOW */

/*#myearth::after {*/
/*	content: "";*/
/*	position: absolute;*/
/*	top: 0;*/
/*	bottom: 0;*/
/*	left: 0;*/
/*	right: 0;*/
/*	z-index: 1200;*/
/*	pointer-events: none;*/
/*	background: radial-gradient(ellipse at center, rgba(0,160,255,0) 0%, rgba(0,160,255,0) 48%, rgba(0,160,255,0.05) 52%, rgba(0,160,255,0.25) 54%, rgba(0,160,255,0.05) 60%, rgba(0,160,255,0) 64%, rgba(0,160,255,0) 100%);*/
/*}*/


#tip-layer {
	content: "";
	position: absolute;
	top: 60%;
	left: 50%;
	width: 200px;
	height: 200px;
	right: 40%;
	transform: translateX(-50%);
	bottom: 20%;
	border-radius: 50%;
	background-color: RGBA(0,0,0,0.6);
	color: white;
	user-select: none;
	pointer-events: none;
	z-index: 5000;
	transition: opacity 0.25s ease;
	opacity: 0;

	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	text-align: center;
}

#tip-big {
	font-size: 3em;
	letter-spacing: 0.05em;
}


@media (max-width: 999px) {
	#wrapper {
		display: block;
	}

	#wrapper,
	#side-col {
		width: auto !important;
		max-width: 100% !important;
	}

	#side-col > div {
		padding-top: 0;
		padding-right: 1em;
		margin-top: -1em;
		text-align: center;
	}

	#button-col {
		display: none;
	}

	#tip-layer > div {
		font-size: 2vw;
	}

}

@media (max-width: 719px) {
	#button-reset {
		width: 12%;
		height: 12%;
	}
	#side-col > div {
		font-size: 0.8em;
	}
}




html,
body {
	margin: 0;
	padding: 0;
	background: black;
	font-family: sans-serif;
}

.label {
	font-family: sans-serif;
	font-size: 15px;
	text-shadow: 0 2px 2px black;
	text-align: center;
	line-height: 130%;
	transform: translate(-50%, 100%);
}

.hotspot {
	display: block;
	width: 1.5em;
	color:"red";
	height: 1.5em;
	cursor: pointer;
	border-radius: 50%;
	pointer-events: all;
	transform: translate(-50%, -50%);
}
.hotspot::before {
	content: "";
	position: absolute;
	left: 0.375em;
	top: 0.375em;
	width: 0.75em;
	height: 0.75em;
	opacity: 0.5;
	background-color: #00b4f7;
	border-radius: 50%;
}
.hotspot:hover::before {
	opacity: 1;
}

.hotspot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0.75em;
	height: 0.75em;
	border: 1px #00b4f7 solid;
	opacity: 0.8;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(1);
	animation: pulse 3s infinite;
}

.hotspot + .hotspot::after {
	animation-delay: 1.5s;
}

@keyframes pulse {
	0% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
	50%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.5); }
}

#res {
	width: 0;
	height: 0;
	overflow: hidden;
}


#myearth {
	width: 100%;
	height: 100vh;
	max-height: 100vw;
	overflow: hidden;
	opacity: 0;
	transition: opacity 2s ease;
}
#myearth.earth-ready {
	opacity: 1;
}

#myearth::before {
	content: none;
}


#atmos {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 122vw;
	max-width: 122vh;
	height: 122vh;
	max-height: 122vw;
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center, rgba(0,160,255,0) 0%, rgba(0,160,255,0) 48%, rgba(0,160,255,0.05) 52%, rgba(0,160,255,0.25) 54%, rgba(0,160,255,0.05) 60%, rgba(0,160,255,0) 64%, rgba(0,160,255,0) 100%);

	/*background: radial-gradient(ellipse at center, rgba(200,230,255,0) 40%,rgba(130,195,255,0.2) 49%,rgba(33,63,255,0.05) 50.5%,rgba(18,0,255,0) 64%);*/
	z-index: 1200;
	pointer-events: none;

	/*transition: all 400ms;*/
}


#info {
	height: 2em;
	margin-top: -3em;
	font-size: 11px;
	text-align: center;
	box-sizing: border-box;
	padding: 0 2em;
}


#controls {
	height: 5em;
	margin-top: -5.1em;
	position: relative;
	z-index: 200;
}

@media (max-width: 719px) {
	#controls {
		margin-top: -2em;
	}
}


#sun-slider {
}
#sun-slider-wrap {
	position: relative;
	margin: 0 auto;
	width: 20em;
	max-width: 80%;
	box-sizing: border-box;
}

#sun-slider-wrap::before {
	content: "";
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNC4wNjkgMTNoLTQuMDY5di0yaDQuMDY5Yy0uMDQxLjMyOC0uMDY5LjY2MS0uMDY5IDFzLjAyOC42NzIuMDY5IDF6bTMuMDM0LTcuMzEybC0yLjg4MS0yLjg4MS0xLjQxNCAxLjQxNCAyLjg4MSAyLjg4MWMuNDExLS41MjkuODg1LTEuMDAzIDEuNDE0LTEuNDE0em0xMS4yMDkgMS40MTRsMi44ODEtMi44ODEtMS40MTQtMS40MTQtMi44ODEgMi44ODFjLjUyOC40MTEgMS4wMDIuODg2IDEuNDE0IDEuNDE0em0tNi4zMTItMy4xMDJjLjMzOSAwIC42NzIuMDI4IDEgLjA2OXYtNC4wNjloLTJ2NC4wNjljLjMyOC0uMDQxLjY2MS0uMDY5IDEtLjA2OXptMCAxNmMtLjMzOSAwLS42NzItLjAyOC0xLS4wNjl2NC4wNjloMnYtNC4wNjljLS4zMjguMDQxLS42NjEuMDY5LTEgLjA2OXptNy45MzEtOWMuMDQxLjMyOC4wNjkuNjYxLjA2OSAxcy0uMDI4LjY3Mi0uMDY5IDFoNC4wNjl2LTJoLTQuMDY5em0tMy4wMzMgNy4zMTJsMi44OCAyLjg4IDEuNDE1LTEuNDE0LTIuODgtMi44OGMtLjQxMi41MjgtLjg4NiAxLjAwMi0xLjQxNSAxLjQxNHptLTExLjIxLTEuNDE1bC0yLjg4IDIuODggMS40MTQgMS40MTQgMi44OC0yLjg4Yy0uNTI4LS40MTEtMS4wMDMtLjg4NS0xLjQxNC0xLjQxNHptMi4zMTItNC44OTdjMCAyLjIwNiAxLjc5NCA0IDQgNHM0LTEuNzk0IDQtNC0xLjc5NC00LTQtNC00IDEuNzk0LTQgNHptMTAgMGMwIDMuMzE0LTIuNjg2IDYtNiA2cy02LTIuNjg2LTYtNiAyLjY4Ni02IDYtNiA2IDIuNjg2IDYgNnoiLz48L3N2Zz4=) center center no-repeat;
	position: absolute;
	top: calc(50% - 1em);
	left: -3em;
	width: 2em;
	height: 2em;
	background-size: 60%;
}

#sun-slider-wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	border-top: 1px white solid;
	left: 2px;
	right: 2px;
}


#sun-slider {
	-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
	width: 100%; /* Specific width is required for Firefox. */
	background: transparent; /* Otherwise white in Chrome */
	display: block;
	height: 1em;
}

#sun-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
}

#sun-slider:focus {
	outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

#sun-slider::-ms-track {
	width: 100%;
	cursor: pointer;

	/* Hides the slider so custom styles can be added */
	background: transparent;
	border-color: transparent;
	color: transparent;
}


#sun-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 24px;
	width: 24px;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	cursor: grab;
}

/* All the same stuff for Firefox */
#sun-slider::-moz-range-thumb {
	height: 24px;
	width: 24px;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	cursor: grab;
}

/* All the same stuff for IE */
#sun-slider::-ms-thumb {
	height: 24px;
	width: 24px;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	cursor: grab;
}