* {
	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-pixelated;
	image-rendering: pixelated;
}

@media only screen and (max-width: 800px) {
	html:after, html:before {
		position: fixed;
		z-index: 1000;
		top: 0;
		left: 0;
		height: 100%;
	}
	
	html:after {
		content: "CURRENT VESSEL DOES NOT SUPPORT MINDSPIKE INTEGRATION\A\AMINIMUM REQUIREMENT: \ASTANDARD DEPLOYABLE OR STATIONARY PROCESSING UNIT";
		box-sizing: border-box;
		white-space: pre-wrap;
		width: 100%;
		max-width: 100%;
		display: flex;
		margin: auto;
		justify-content: center;
		align-items: center;
		font-family: 'Libre Barcode 128 Text', sans-serif;
		font-size: calc(2rem + 1vw);	
		letter-spacing: 2.5px;
		padding: 10px;
		color: white;
		text-align: center;
	}
	
	html:before {
		content: "";
		position: fixed;
		background-color: black;
		width: 100%;
	}
}

::selection {
	background-color: gray;
	color: black;
}

img::selection {
	background-color: transparent;
}

.not-allowed, .not-allowed:after, .not-allowed:before {
	cursor: not-allowed !important;
}
	
@font-face {
	font-family: 'Beech';
	src: url('Beech.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

body {
	padding: 0;
	margin: 0;
	min-height: 100vh;
	background: white;
	overflow: hidden;
}
		
.preload {
	width: 1px;
	height: 1px;
	opacity: 0;
	position: absolute;
	top: -1px;
	left: -1px;
	overflow: hidden;
	font-family: 'Libre Barcode 128 Text', sans-serif;
}


/* SPEEK */		
.obeskspeak {
	position: relative;
	width: 60%;
	margin: 5vh 0;
	background: black;
	border-radius: 100%;			
	text-align: center;
	transition: transform 1s cubic-bezier(1,.02,.85,.6), opacity 2s cubic-bezier(1,.02,.85,.6);
	cursor: help;
}

.obeskspeak:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.obeskspeak:nth-child(even) {
	animation-delay: 10s;
}

.obeskwords {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 10%;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 1s cubic-bezier(1,.02,.85,.6), opacity 2s cubic-bezier(1,.02,.85,.6);
}

.obeskwords span {
	color: white;
	font-size: calc(1rem + 1vw);
	font-family: 'Beech', sans-serif;
	text-transform: uppercase;
}

.transmission {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	position: relative;
	width: 100%;
}

.transmission span {
	color: #2bef80;
	width: 30px;
	display: inline-block;
	position: relative;
	text-align: center;
	transform-style: preserve-3d;
}

.transmission span, .transmission span:after {
	backface-visibility: hidden;
}

.transmission span:after {
	color: white;
	font-family: 'Libre Barcode 128 Text', sans-serif;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotateY(180deg);
}

.transmission:after {
	content: "[[_TRANSLATE_OBESK_]]";
	font-family: 'Libre Barcode 128 Text', sans-serif;
	color: white;
	display: block;
	position:	absolute;
	left: 0;
	right: 0;
	margin: auto;
	bottom: -2em;
}

.transmission.started:after {
	content: "??__TRANSLATING__??";
	color: rgb(150, 0, 255);
	text-decoration: underline;
}

.transmission.done:after {
	content: "!!__TRANSLATED__!!";
	text-decoration: underline;
	color: white;
	opacity: 0.5;
}
		
.a:after {
	content:"a";
}

.b:after {
	content:"b";
}

.c:after {
	content:"c";
}

.d:after {
	content:"d";
}

.e:after {
	content:"e";
}

.f:after {
	content:"f";
}

.g:after {
	content:"g";
}

.h:after {
	content:"h";
}

.i:after {
	content:"i";
}

.j:after {
	content:"j";
}

.k:after {
	content:"k";
}

.l:after {
	content:"l";
}

.m:after {
	content:"m";
}

.n:after {
	content:"n";
}

.o:after {
	content:"o";
}

.p:after {
	content:"p";
}

.q:after {
	content:"q";
}

.r:after {
	content:"r";
}

.s:after {
	content:"s";
}

.t:after {
	content:"t";
}

.u:after {
	content:"u";
}

.v:after {
	content:"v";
}

.w:after {
	content:"w";
}

.x:after {
	content:"x";
}

.y:after {
	content:"y";
}

.z:after {
	content:"z";
}

.?:after {
	content:"?";
}

/* SPIKE */
.ui-text {
	font-family: 'Libre Barcode 128 Text', sans-serif !important;
	font-size: calc(1rem + 1vw) !important;	
	letter-spacing: 2.5px !important;
	text-align: center;			
}

/* DIALOGUE */
.responses span {
	display: block;
	color: orange;
	cursor: pointer;
	transition: color 0.4s ease-in-out;
}

.responses {
	transition: opacity 1s ease-in-out;
}

.responses.chosen {
	cursor: deny;
}

.responses.chosen span {
	pointer-events: none;
	color: gray;
}

.responses.chosen span.selected {
	color: purple;
}

.dialogue {
	display: none;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

/* MOTHMAN */
#mindspike-trigger {
	position: fixed;
	top: 2vw;
	right: 2vw;
	width: 6vw;
	background-image: url(badstatic.gif);
	border-radius: 100%;
	cursor: help;
	box-sizing: border-box;
	border: 2px outset white;
	z-index: 100;
	transition: opacity 1s ease-in-out;
	opacity: 0;
	pointer-events: none;
}

.active.mindspike-available #mindspike-trigger {
	opacity: 1;
	pointer-events: initial;
}

.mindspike-open.mindspike-available #mindspike-trigger {
	opacity: 0;
	pointer-events: none;
}

#mindspike-trigger:hover {
	border-color: #2bf5f4;
	opacity: 1;
}

.mindspike-ui {
	min-height: 100vh;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: flex-end;
	transition: transform 3s cubic-bezier(.33,.63,.14,.99), opacity 3s ease-in-out;
	transition-delay: 1;
	opacity: 0;
	transform: translateX(100%);
	z-index: 1000;
}

.mindspike-ui br {
	display: block;
  margin: 10px;
}

.mindspike-readout {
	position: relative;
	background: black;
	color: white;
	text-transform: uppercase;
	font-family: 'Libre Barcode 128 Text', sans-serif;
	font-size: calc(1rem + 1vw);
	letter-spacing: 2.5px;
	transition: opacity 1s ease-in-out;
	text-align: center;
	box-sizing: border-box;
	flex-basis: 50%;
	display: flex;
	width: 50%;
	min-height: 100vh;
	justify-content: flex-start;
	padding: 10vh 0 30vh;
	align-items: center;
	flex-direction: column;
	height: 100vh;
	overflow-y: scroll;
	overflow-x: hidden;
	box-sizing: border-box;
}
		
.mindspike-ui .data-quote {
	font-family: 'Share Tech Mono', monospace;
	font-size: calc(0.5rem + 0.5vw);
	letter-spacing: 2px;
	display: block;
	padding: 1em;
	box-sizing: border-box;
	border: 2px solid green;
	margin: 20px;
	text-transform: initial;
	background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.79),rgba(0, 0, 0, 0)), url(badstatic.gif);
	color: lime;
}

.mindspike-ui .data {
	text-align: left;
	display: inline-block;
	padding: 20px 40px;
	width: 100%;
	max-width: 90%;
}

.mindspike-ui .mth-back {
	position: fixed;
	top: 0;
	left: 50%;
	padding: 20px;
	cursor: pointer;
	color: orange;
	background-color: black;
}

.mindspike-ui .mth-back:hover {
	color: rgb(150, 0, 255);
}

.mindspike-ui .mth-back.quick-return {
	position: relative;
	left: 0;
	right: 0;
	display: block;
}

.pre-meet #mindspike-trigger {
	display: none !important;
}

.pre-meet .mindspike-ui .mth-back {
	display: none;
}

.pre-meet .mindspike-ui .mth-back.quick-return {
	display: block;
}

.mothman {
	transition: transform 3s cubic-bezier(.33,.63,.14,.99), opacity 3s ease-in-out;
	position: fixed;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	opacity: 0;
	transform: translateX(-100%);
	background-image: url('mothman.gif');
	background-size: cover;
	z-index: 999;
	pointer-events: none;
}

.mothman-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
	z-index: 998;
	transition: opacity 2s ease-in-out;
	background: linear-gradient(to bottom, rgba(155, 0, 0, 0.71), #000), url(static.gif);
}

.mindspike-open .mothman-bg {
	opacity: 1;
	pointer-events: initial;
}

.mindspike-open .mindspike-ui {
	opacity: 1;
  transform: translateX(0);	
}

.mindspike-open .mothman {
	transform: scaleY(1);
	opacity: 1;
}
		
/* ANIM */		
@keyframes WATCH {
	0% { transform: translateY(0px) }
	100% { transform: translateY(-566px) }
}

@keyframes DUST {
	0% { transform: translate(0, 0) }
	10% { transform: translate(-10%, -7%) }
	20% { transform: translate(-15%, 6%) }
	30% { transform: translate(8%, -18%) }
	40% { transform: translate(-10%, -3%) }
	50% { transform: translate(5%, -13%) }
	60% { transform: translate(10%, 2%) }
	70% { transform: translate(2%, -10%) }
	80% { transform: translate(15%, 0) }
	90% { transform: translate(0, 15%) }
	100% { transform: translate(0, 0) }
}

@keyframes SHAKE {
	0% { transform: translate(-2.5px, -5px);}
	15% { transform: translate(1.5px, 2.5px);}
	30% { transform: translate(2.5px, 1.5px); }
	45% { transform: translate(-1.5px, -2.5px); }
	15% { transform: translate(2.5px, -2.5px);}
	60% { transform: translate(1px, 5px);}
	75% { transform: translate(1.5px, 2.5px);}
	90% { transform: translate(-0.5px, -5px); }
	100% { transform: translate(2.5px, 0px);}
}

@keyframes INDICATOR {
	0% { transform: translateY(-10%) translateX(5%); }
	50%{ transform: translateY(0%) translateX(0); }
	50%{ transform: translateY(-10%) translateX(-5%); }
}