html {
	background: url(./220ac2b2e39cefb5984eaf3767ce109f.jpg) repeat center;
	background-color: #000;
	background-size: cover;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

@media screen and (min-width: 768px) {
	html {
		background-image: url(./4e8b49d4d8e2e604c3a582bd07b1f164.jpg);
	}
}

body {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;

	font: 20px/1.2 chelsea-market-pro, sans-serif;
	text-transform: uppercase;
}

* {
	box-sizing: border-box;
}

a, button {
	text-transform: uppercase;
}

#app {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: 100vw;

	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms, visibility 300ms;
	overflow: hidden;
}

#app.READY {
	opacity: 1;
	visibility: visible;
}

canvas {
	position: absolute;
	top: 0;
	opacity: 1;
	transition: opacity 500ms;
}

.START canvas {
	opacity: 0;
}

.loading-spinner {
	position: absolute;
	z-index: 100;
	top: 50%;
	left: 50%;

	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -50%) scale(0.2);
	transform-origin: 50% 50%;

	transition: opacity 300ms,
		visibility 300ms,
		transform 300ms;
}

.loading-spinner.show {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%);
}

.label {
	box-shadow: 0px 0px 6px 8px #FFF;
	border-radius: 50%;
	width: 1px;
	height: 1px;
	background-color: #FFF;
}

#fm-desktopExperience {
	display: none;
	z-index: 30;
	position: absolute;
	top: 0;
	left: 0;
	background: transparent;
	color: #fff;
	min-height: 800px;
	min-width: 1115px;
	height: 100%;
	width: 100%;
}

.fm-content {
	text-align: right;
	max-width: 70%;
	margin-left: auto;
	position: absolute;
	right: 70px;
	bottom: 0;
	max-height: 75%;
}

.fm-firstManImage {
	max-width: 300px;
}

.fm-desktopHeader {
	font-size: 75px;
}

.fm-pAndHand {
	display: flex;
	justify-content: flex-end;
}

.fm-pAndHand .fm-desktopP p {
	max-width: 55%;
	margin-left: auto;
	line-height: 25px;
}

.fm-pAndHand .fm-desktopP, .fm-pAndHand .fm-handWrap {
	padding-left: 10px;
}

.fm-hand {
	max-width: 190px;
}

.FOUND .fm-backChevron,
.MOON_LANDING.ENTER_PANORAMA .fm-backChevron,
.MISSION_CONTROL.ENTER_PANORAMA .fm-backChevron {
	visibility: visible;
	opacity: 1;
}

#fm-desktopExperience .fm-plus-top {
	position: absolute;
	top: 30px;
	left: 30px;
}

#fm-desktopExperience .fm-top-horizontal-line {
	position: absolute;
	top: 40px;
	left: 0;
	width: 100vw;
	height: 2px;
	background: rgba(255, 255, 255, 0.4);
}

#fm-desktopExperience .fm-plus-bottom {
	position: absolute;
	bottom: 30px;
	right: 30px;
}

#fm-desktopExperience .fm-right-vertical-line {
	position: absolute;
	top: 0;
	right: 40px;
	width: 2px;
	height: 100vh;
	background: rgba(255, 255, 255, 0.4);
}

#fm-smallCanvasContainer canvas {
	opacity: 0;
}

.fm-captureButton {
	display: none;
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	opacity: 0;
	width: 60px;
	height: 60px;
	visibility: hidden;
}

.SEARCHING .fm-captureButton {
	visibility: visible;
}

#fm-startWrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	background: url(./d4eca28448315a084b0597147c6e10bd.jpg) no-repeat top center;
	background-size: 100% auto;
	padding: 40px 0;
	width: 100%;
	height: 100%;

	transition: all .5s ease-in-out;

	color: #ffffff;
	visibility: hidden;
	opacity: 0;
}

.START #fm-startWrapper {
	visibility: visible;
	opacity: 1;
}

.START_CONFIRM #fm-startWrapper {
	visibility: hidden;
	opacity: 0;
}

#fm-startWrapper #fm-startButtonWrap {
	padding: 20px 40px;
	width: 100%;
}

#fm-startConfirm {
	position: absolute;
	top: 0;
	left: 0;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	padding: 40px 20px;
	width: 100%;
	height: 100%;
	transition: all .5s ease-in-out;

	color: #ffffff;
	text-align: center;
	visibility: hidden;
	opacity: 0;	
}

.fm-startConfirmTitle {
	font: 28px/1.2 chelsea-market-pro, sans-serif;
	letter-spacing: 1.6px;
}

.fm-startConfirmMessage {
	padding: 40px 20px;
	font: 18px/1.2 chelsea-market-pro, sans-serif;
}

.fm-startConfirmButtonWrap {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
}

.fm-startCancelButton,
.fm-startConfirmButton {
	margin: 20px 10px;
	outline: none;
	border: 6px solid #979797;
	border-radius: 18px;
	background: transparent;
	padding: 10px;
	width: 140px;

	color: #ffffff;
	font: 20px/1 chelsea-market-pro, sans-serif;
	font-weight: bold;
	transition: transform 100ms;
}

.fm-startCancelButton {
	border-width: 3px;
	border-color: #444444;
	color: #444444;
}

.START_CONFIRM #fm-startConfirm {
	visibility: visible;
	opacity: 1;
}

.START_CONFIRM_COMPLETE #fm-startConfirm {
	visibility: hidden;
	opacity: 0;
}

.fm-foundExtras {
	position: absolute;
	z-index: 100;
	bottom: 0;
	left: 0;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	padding: 20px;
	width: 100%;
	transition: all .5s ease-in-out;

	color: #ffffff;
	text-align: center;
	visibility: hidden;
	opacity: 0;
}

.fm-foundExtrasButton {
	margin: 0 10px;
	outline: none;
	border: 6px solid #ff0000;
	border-radius: 22px;
	background: #000;
	padding: 20px;
	width: 100%;

	color: #ff0000;
	font: 20px/1 chelsea-market-pro, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	transition: transform 100ms;
}

.FOUND .fm-foundExtras {
	visibility: visible;
	opacity: 1;
}

.fm-homeTitle {
	position: relative;
	width: 100%;

	background-image: url(./c136bfd3c90ef82f555dec9483857bd9.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms, visibility 300ms;
}

.fm-homeTitle:before {
	content: "";
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 64.5%;
}

.fm-homeDescription {
	padding: 20px 40px;
	font: 30px/1.7 chelsea-market-pro, sans-serif;
	font-weight: 600;
	font-style: normal;
	text-align: center;
}

.START .fm-homeTitle {
	opacity: 1;
	visibility: visible;
}

.fm-experienceTitle {
	position: absolute;
	top: 10px;
	left: 20px;

	width: 80px;
	height: 80px;

	background-image: url(./63658f16c04fdad9ce91c2956651d437.png);
	background-size: contain;;
	background-repeat: no-repeat;
	background-position: center;

	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms, visibility 300ms;
}

.SEARCHING .fm-experienceTitle,
.FOUND .fm-experienceTitle,
.ENTER_PANORAMA .fm-experienceTitle {
	opacity: 1;
	visibility: visible;
}


.fm-startButton {
	outline: none;
	border: 6px solid #979797;
	border-radius: 22px;
	background: transparent;
	padding: 20px;
	width: 100%;

	color: #979797;
	font: 20px/1 chelsea-market-pro, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-weight: bold;
	transition: transform 100ms;
}

.fm-startButton.active {
	transform: scale(1.05);
}

.fm-btn--small-bottom {
	position: absolute;
	right: 52px;
	bottom: 34px;
	z-index: 10;

	border: 1px solid #CD8416;
	background: none;
	font-family: CeraBold;
	color: #fff;
	padding: 5px 15px;
	outline: none;

	transition: opacity 300ms,
		visibility 300ms,
		transform 100ms;
	visibility: hidden;
	opacity: 0;
}

.fm-btn--small-bottom.active {
	transform: scale(1.2);
}

#fm-helpBtn {
	display: none;
}

.SEARCHING #fm-helpBtn {
	visibility: visible;
	opacity: 1;
}

#fm-manualMoonLocate {
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0;

	display: flex;
	flex-direction: column;
	color: white;

	margin: 0 auto;
	width: 100%;

	opacity: 0;
	visibility: hidden;
	transform: translateY(100%);
	transition: opacity 300ms,
		visibility 300ms,
		transform 100ms;
}

#fm-moonLocateButtonContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.moonButton {
	margin: 20px 10px;
	border-radius: 12px;
	background: #979797;
	padding: 12px;
	width: 100px;

	color: #000;
	font: 15px/1 chelsea-market-pro, sans-serif;
	text-align: center;

	opacity: 1;
	visibility: visible;
	transition: opacity 300ms,
		visibility 300ms,
		transform 100ms;
}

.moonButton.active {
	transform: scale(1.1);
}

#fm-moonLocateText {
	height: 60%;
	text-align: center;
}

#fm-cantSeeMoon {
	position: absolute;
	left: 0;
	bottom: 0;

	width: 100%;
	height: 50px;

	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms,
		visibility 300ms,
		transform 100ms;
}

#fm-cantSeeMoon.active {
	transform: scale(1.1);
}

.fm-cantSeeMoonActivate,
.fm-cantSeeMoonBack {
	position: absolute;
	bottom: 20px;
	left: 50%;

	margin: 0 0 0 -110px;
	border-radius: 12px;
	background: #979797;
	padding: 12px;
	width: 220px;

	color: #000;
	font: 15px/1 chelsea-market-pro, sans-serif;
	text-align: center;

	opacity: 1;
	visibility: visible;
	transition: opacity 300ms, visibility 300ms;
}

.fm-cantSeeMoonBack,
.SKY_FALLBACK .fm-cantSeeMoonActivate {
	opacity: 0;
	visibility: hidden;
}

.SKY_FALLBACK .fm-cantSeeMoonBack {
	opacity: 1;
	visibility: visible;
}

#fm-noWebcamMessage {
	position: absolute;
	bottom: 0;
	left: 0;

	background-color: #000;
	background-image: url(./9d51bbab6a5259fd75be280a6d9b7ce0.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center top;

	width: 100%;
	height: 0;
	padding-top: 17.5%;

	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms, visibility 300ms;
}

.SEARCHING #fm-cantSeeMoon {
	opacity: 1;
	visibility: visible;
}

.NO_WEBCAM.SEARCHING #fm-noWebcamMessage,
.NO_WEBCAM.FOUND #fm-noWebcamMessage {
	opacity: 1;
	visibility: visible;
}

.MOON_LANDING.INTRO_PANORAMA #fm-skipBtn,
.MISSION_CONTROL.INTRO_PANORAMA #fm-skipBtn {
	visibility: visible;
	opacity: 1;
}

.TAP_PROMPT #fm-manualMoonLocate {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.TAP_PROMPT #fm-cantSeeMoon {
	opacity: 0;
	visibility: hidden;
}

.fm-muteButton {
	position: absolute;
	top: 0;
	right: 0;
	width: 60px;
	height: 60px;

	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms, visibility 300ms;
}

.fm-muteButtonPlaying,
.fm-muteButtonMuted {
	position: absolute;
	top: 50%;
	left: 50%;

	margin: -15px 0 0 -15px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 24px;
	height: 24px;

	transition: opacity 300ms;
}

.fm-muteButtonPlaying {
	background-image: url(./61dfcba3eefa894c76bf578ce53f854e.png);
}

.fm-muteButtonMuted {
	opacity: 0;
	background-image: url(./a41b9775043115491c815793c37e3fb3.png);
}

.FOUND .fm-muteButton {
	opacity: 1;
	visibility: visible;
}

.MUTED .fm-muteButtonPlaying {
	opacity: 0;
}

.MUTED .fm-muteButtonMuted {
	opacity: 1;
}

#fm-helpView {
	z-index: 20;
	position: absolute;
	background: #0C070D;
	bottom: 0;
	left: 0;
	opacity: 0;
	color: #fff;
	transform: translateY(100%);
	transition: transform .5s ease-in-out;
	overflow: hidden;
}

.fm-helpText {
	width: 55%;
	margin: 30px auto 0;
	text-align: center;
	font-size: 14px;
	line-height: 25px;
}

.fm-helpCTA {
	text-align: center;
	margin-bottom: 20px;
}

#fm-helpCtaBtn,
.fm-btn-orange {
	color: #fff;
	border: 0px;
	padding: 25px;
	background: url(./bbaaca05bddef6b5b8b3797987b133d1.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	font-size: 15px;
	font-family: CeraBold;
	outline: none;
}

#fm-exitHelp {
/*	position: absolute;
	top: 10px;
	right: 10px;*/
	width: 30px;
	height: 30px;
}

#fm-exitHelp:before, #fm-exitHelp:after {
	content: '';
	position: absolute;
	width: 200vw;
	height: 1px;
	background: #fff;
	opacity: .2;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

#fm-exitHelp:after {
	width: 1px;
	height: 100vh;
	top: 0;
	left: 50%;
	transform: translateX(0%) translateY(-50%);
}

#fm-exitHelp img {
	width: 100%;
}

#fm-trailerCta {
	position: absolute;
	bottom: 40px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-align: center;

	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms, visibility 300ms;
}

.ENTER_PANORAMA #fm-trailerCta {
	opacity: 1;
	visibility: visible;
}

.fm-desktopContent {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
}

.fm-desktopContent:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;

	background: url(./83944285ad214f3daa9e1418d6b3b997.jpg) no-repeat center top;
	background-size: contain;
	width: 100%;
	height: 200px;
}

.fm-desktopContentInner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	position: relative;
	width: 100%;
	height: 100%;
}

.fm-desktopContent h1 {
	margin: 50px 0;
	font: 65px/1 chelsea-market-pro, sans-serif;
}

.fm-desktopContent img {
	position: relative;
}

.fm-desktopContent p {
	margin: 0;
	max-width: 500px;
	font: 26px/1.8 chelsea-market-pro, sans-serif;
}