@import url('./colors.css');
@import url('./type.css');

html {
	background-color: black;
}

body {
	background-color: #fcfbfb;
	margin: 0 !important;
}

.noMax {
	max-width: none;
	max-height: none;
}

.full-width {
	width: 100%;
}

.full-height {
	height: 100%;
}

.max-width-responsive {
	max-width: 80rem;
}

.max-width-5 {
	max-width: 80rem;
}

.max-width-6 {
	max-width: 96rem;
}

.max-width-0 {
	max-width: 16rem;
}

.rounded, .videoCrop {
	border-radius: 16px;
}

.no-select {
	user-select: none;
}

.markdown hr {
	opacity: .2;
	margin-top: 6rem;
	margin-bottom: 6rem;
}

.vimeo {
	pointer-events: none;
}

.strike-through, .line-through {
	text-decoration: line-through
}

.bgElement {
	/*position: absolute;*/
	/*position: fixed;*/

	min-width: 100%;
	min-height: 100%;
	box-sizing: border-box;
	width: 177.77777778vh;
	height: 56.2vw;

	transform: translate(-50%, -50%);

	left: 50%;
	top: 50%;
	/*transform: scale3d(1.2, 1.2, 1.2);*/

	/*z-index: -100;*/
	/*object-fit: cover;*/
	/*object-position: center;*/
	margin: 0;
	padding: 0;
	pointer-events: none;

}


.videoFill {
	min-width: 100%;
	min-height: 100%;
	box-sizing: border-box;
	/*width: 177.77777778vh;*/
	/*height: 56.25vw;*/
	object-fit: cover;
	object-position: center;
	margin: 0;
	padding: 0;
	/*width: 100%;*/
	/*height: 100%;*/

	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute;
}

.flip {
	transform: scale(-1, 1);
}

.crop {
	overflow: hidden;
	position: relative;
}

.videoCrop {
	min-height: 50vh;
	overflow: hidden;
	position: relative;
	/*padding-bottom:56.25%;*/
}

.videoResponsive {
	overflow: hidden;
	padding-bottom:56.25%;
	position: relative;
	height:0;
	/*pointer-events: none;*/
}

.videoResponsive iframe {
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute;
/*	width: 177.77777778vh;
	height: 56.25vw;*/
}

/*.bgElement, iframe {
	box-sizing: border-box;
	min-height: 100%;
	min-width: 100%;
	position: fixed;
	width: 177.77777778vh;
	height: 56.25vw;
}
*/
.overlay {
	position: absolute;
	margin: 8% 16pt;
	bottom: 0;
}

.container {
	position:absolute;
	height:100%;
	width:100%;
	display: table;
}

.indexParallax {
	/*color: black;*/
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gutter {
	padding: 8%;
}

.bordernone {
	border: none !important;
}

.table-fixed-responsive {
	display: table;
	table-layout: fixed;
	border-spacing: 3rem 0;
	width: 100%;
}

.glide__arrows button {
	height: 100%;
	padding: 1rem;
	top: 0;
}

.glide__bullets {
	position: absolute;
}

.glide__bullet {
	padding: 0 4px;
}

.glide__bullet .dot {
	background: transparent;
	border: 1px solid black;
	opacity: .2;
	width: 10px;
	height: 10px;
	display: inline-block;
	padding: 0;
	transform: scale(.8, .8);
	border-radius: 100%;

    transition-property: background-color, color, border-color, transform;
	transition-timing-function: ease-out;
	transition-duration: .4s;
}

.glide__bullet:hover .dot, .glide__bullet--active .dot {
	background: black;
	opacity: 1;
	border-color: transparent;
	transform: scale(1, 1);
}

header {
	position: relative;
	/*min-height: 80vh;*/
	width: 100%;
	/*display: table;*/
}

.wrapper .section, .wrapper section {
	margin-left: -2rem;
	margin-right: -2rem;
}

section, .section {
	/*position: relative;*/
	margin-top: 4rem;
	margin-bottom: 4rem;
}

section:before, section:after, .section:before, .section:after {
	content:" ";
	display:table;
}

section:after, .section:after {
	clear:both;
}

.shadowSmall {
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.shadow {
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
}

.shadowLarge {
	box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
}

.shadowHuge {
  box-shadow: 0px 32px 64px rgba(0, 0, 0, 0.2);
}

.textShadowSmall {
	text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.textShadow {
	text-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
}

.textShadowLarge {
	text-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
}

.textShadowHuge {
	text-shadow: 0px 32px 64px rgba(0, 0, 0, 0.2);
}

img, video {
	width: 100%;
	margin-top: 1rem;
	margin-bottom: 1rem;
	/*max-height: 100vh;*/
	/*height: auto;*/
}

.auto-width {
	width: auto !important;
}

.wrapper {
	padding-left: 8vw;
	padding-right: 8vw;
/*	display: block;*/
	margin: 0 auto;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .sm-col-1, .sm-col-2, .sm-col-3, .sm-col-4, .sm-col-5, .sm-col-6, .sm-col-7, .sm-col-8, .sm-col-9, .sm-col-10, .sm-col-11, .sm-col-12, .md-col-1, .md-col-2, .md-col-3, .md-col-4, .md-col-5, .md-col-6, .md-col-7, .md-col-8, .md-col-9, .md-col-10, .md-col-11, .md-col-12, .lg-col-1, .lg-col-2, .lg-col-3, .lg-col-4, .lg-col-5, .lg-col-6, .lg-col-7, .lg-col-8, .lg-col-9, .lg-col-10, .lg-col-11, .lg-col-12 {
	float: left;
	box-sizing: border-box;
	padding-left: 2rem;
	padding-right: 2rem;
}


.sticky {
	position: sticky;
	top: 0;
}

#nav {
	width: 100%;
	z-index: 200;
	transform: translateZ(100px);
	position: fixed;
	transition: background ease .4s;
}

#nav li a {
	padding: 8pt 12pt;
	font-weight: normal;
}

#nav li:first-of-type {
	padding-left: 0px;
}



#page-subnav li {
	padding-bottom: 12px;
}

#page-subnav li:last-of-type {
	padding-bottom: 0px;
}

#subnav {
	overflow-y: auto;
}

.redline {
	opacity: 0;
	transition: opacity ease 1s;
}

.redline:hover {
	opacity: 1;
}

.pointer {
	cursor: pointer;
}

.hidden-hover {
	opacity: 0;
	transition: opacity ease .4s;
	cursor: pointer;
}

.hidden-hover:hover {
	opacity: 1;
}

.hover {
	opacity: 1;
	transition: opacity ease .4s;
	cursor: pointer;
}

.hover:hover {
	opacity: .6;
}

.exclusion, .difference {
	mix-blend-mode: exclusion;
}

.invert {
	filter: invert(1);
}

.top {
	top: 0;
}

.top-50 {
	top: 50%;
}

.centerX {
	transform: translateX(-50%);
	position: absolute;
	left: 50%;
}

.centerY {
	transform: translateY(-50%);
	position: absolute;
	top: 50%;
}

.centerAll {
	transform: translateX(-50%) translateY(-50%);
	position: absolute;
	left: 50%;
	top: 50%;
}

.spacerResponsive {
	margin-top: 96pt;
	margin-bottom: 96pt;
}

.spacerTopResponsive {
	margin-top: 96pt;
}

.spacerBottomResponsive {
	margin-bottom: 96pt;
}

.bounce {
	animation: bounce 4s infinite;
	transition-timing-function: cubic-bezier(.4,0,.2,1);
}

@keyframes bounce {
	0%, 100% {transform: translateY(0);}
	30% {transform: translateY(-24px);}

}

.clear {
	clear: both;
}

.dissolve {
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 1s;
	animation-name: dissolve;
	animation-fill-mode: forwards;
	opacity: 1;
}

@keyframes dissolve {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.breakdown {
	/*padding-top: 4vw;*/
	overflow-x: initial;
	-webkit-overflow-scrolling: touch;
}

.breakdown::-webkit-scrollbar { 
	display: none; 
	width: 0px;  /* remove scrollbar space */
	background: transparent;  /* optional: just make scrollbar invisible */

}

.breakdown section {
	margin: 0;
}

.breakdownVideo {
	/*mx-auto block */
	max-height: 224px;
	-webkit-filter: brightness(3);
	filter: brightness(1.01);
}

.preserve3d {
	transform-style: preserve-3d;
}

/* Found on nreal.html, copied from Spatial webapp */
.integrationrow {
	width: 100%;
	max-width: 1200px;
  display: grid;
  grid-template-columns: 37px auto 37px 1fr 37px auto 37px;
  grid-template-rows: 27px auto auto minmax(27px, auto);
  grid-template-areas:
    ". . . . . . ."
    ". icon . title . button ."
    ". icon . subtitle . button ."
    "alert alert alert alert alert alert alert";
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  overflow: hidden;
}

.integrationrow__image {
  grid-area: icon;
  padding: 5px;
}

.integrationrow__title {
  grid-area: title;
  font-size: 1.4em;
  display: flex;
	align-items: center;
	align-self: end;
}

.integrationrow__subtitle {
	grid-area: subtitle;
	align-self: start;
}

.integrationrow__button {
  grid-area: button;
  padding: 0;
	text-transform: uppercase;
}

@media (max-width: 52em) {
  .integrationrow {
    grid-template-columns: 37px auto 37px 1fr 37px;
    grid-template-rows: 27px auto auto 27px auto minmax(27px, auto);
    grid-template-areas:
      ". . . . ."
      ". icon . title ."
      ". icon . subtitle ."
      ". . . . ."
      ". button button button ."
      "alert alert alert alert alert";
  }

  .integrationrow__button {
    align-self: center;
    justify-self: center;
    max-width: 400px;
  }
}


/* xs */
@media (max-width:40em) {
	/*body { border: 4pt solid aqua; }*/
	.gutter {
		padding: 0;
	}

	.videoCrop {
		min-height: 32vh;
	}

	.breakdown {
		overflow-x: scroll;
		margin-left: -8vw;
		margin-right: -8vw;
	}

	.breakdown section {
		padding-left: 8vw;
		padding-right: 8vw;
		width: 192vw;
	}

	#deviceBreakdown section {
		padding-left: 8vw;
		padding-right: 8vw;
		width: 318vw;
	}

	#joinButton, #authDetectedButton {
		margin-left: .5rem;
	}

	#joinButton a, #authDetectedButton a {
		font-size: .9rem !important;
		padding: 6pt 10pt !important;
	}

	.navOverview, #navSpatial, #navFeatures {
		display: none !important;
	}

	.spacerResponsive {
		margin-top: 0;
		margin-bottom: 0;
	}

	.spacerTopResponsive {
		margin-top: 48pt;
	}

	.spacerBottomResponsive {
		margin-bottom: 24pt;
	}

	.table-fixed-responsive, .table-fixed-responsive .table-cell {
		display: block;
		max-width: 24rem;
	}

	#nav li a {
		padding: 8pt 4pt;
	}

	.wrapper .section, .wrapper section {
		margin-left: -1rem;
		margin-right: -1rem;
	}

	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .sm-col-1, .sm-col-2, .sm-col-3, .sm-col-4, .sm-col-5, .sm-col-6, .sm-col-7, .sm-col-8, .sm-col-9, .sm-col-10, .sm-col-11, .sm-col-12, .md-col-1, .md-col-2, .md-col-3, .md-col-4, .md-col-5, .md-col-6, .md-col-7, .md-col-8, .md-col-9, .md-col-10, .md-col-11, .md-col-12, .lg-col-1, .lg-col-2, .lg-col-3, .lg-col-4, .lg-col-5, .lg-col-6, .lg-col-7, .lg-col-8, .lg-col-9, .lg-col-10, .lg-col-11, .lg-col-12 {
		padding-left: 1rem;
		padding-right: 1rem;
	}

}

/* sm */
@media (min-width:40em) and (max-width:52em) {
	/*body { border: 4pt solid fuchsia; }*/

	.gutter {
		padding: 0;
	}

	.videoCrop {
		min-height: 40vh;
	}

	.navOverview, #navSpatial, #navFeatures {
		display: none !important;
	}

	.breakdown {
		overflow-x: scroll;
		margin-left: -8vw;
		margin-right: -8vw;
	}

	.breakdown section {
		padding-left: 8vw;
		padding-right: 8vw;
		width: 200vw;
	}

	#deviceBreakdown section {
		padding-left: 8vw;
		padding-right: 8vw;
		width: 240vw;
	}

	.spacerResponsive {
		margin-top: 32pt;
		margin-bottom: 32pt;
	}

	.spacerTopResponsive {
		margin-top: 80pt;
	}

	.spacerBottomResponsive {
		margin-bottom: 32pt;
	}

	.table-fixed-responsive, .table-fixed-responsive .table-cell {
		display: block;
		max-width: 24rem;
	}

	.wrapper .section, .wrapper section {
		margin-left: -1rem;
		margin-right: -1rem;
	}

	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .sm-col-1, .sm-col-2, .sm-col-3, .sm-col-4, .sm-col-5, .sm-col-6, .sm-col-7, .sm-col-8, .sm-col-9, .sm-col-10, .sm-col-11, .sm-col-12, .md-col-1, .md-col-2, .md-col-3, .md-col-4, .md-col-5, .md-col-6, .md-col-7, .md-col-8, .md-col-9, .md-col-10, .md-col-11, .md-col-12, .lg-col-1, .lg-col-2, .lg-col-3, .lg-col-4, .lg-col-5, .lg-col-6, .lg-col-7, .lg-col-8, .lg-col-9, .lg-col-10, .lg-col-11, .lg-col-12 {
		padding-left: 1rem;
		padding-right: 1rem;
	}

}



/* md where i'm breaking into mobile layout */
@media (min-width:52em) and (max-width:64em) {
	/*body { border: 4pt solid blue; }*/

	.videoCrop {
		min-height: 45vh;
	}

	.breakdown {
		overflow-x: scroll;
		margin-left: -8vw;
		margin-right: -8vw;
	}

	.breakdown section {
		padding-left: 8vw;
		padding-right: 8vw;
		width: 170vw;
	}

	#deviceBreakdown section {
		padding-left: 8vw;
		padding-right: 8vw;
		width: 178vw;
	}

	.gutter {
		padding: 8%;
	}

	.spacerResponsive {
		margin-top: 48pt;
		margin-bottom: 48pt;
	}

	.spacerTopResponsive {
		margin-top: 96pt;
	}

	.spacerBottomResponsive {
		margin-bottom: 64pt;
	}

	.table-fixed-responsive, .table-fixed-responsive .table-cell {
		display: block;
		max-width: 24rem;
		/*border-spacing: 0 0;*/
	}

	.wrapper .section, .wrapper section {
		margin-left: -1rem;
		margin-right: -1rem;
	}

	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .sm-col-1, .sm-col-2, .sm-col-3, .sm-col-4, .sm-col-5, .sm-col-6, .sm-col-7, .sm-col-8, .sm-col-9, .sm-col-10, .sm-col-11, .sm-col-12, .md-col-1, .md-col-2, .md-col-3, .md-col-4, .md-col-5, .md-col-6, .md-col-7, .md-col-8, .md-col-9, .md-col-10, .md-col-11, .md-col-12, .lg-col-1, .lg-col-2, .lg-col-3, .lg-col-4, .lg-col-5, .lg-col-6, .lg-col-7, .lg-col-8, .lg-col-9, .lg-col-10, .lg-col-11, .lg-col-12 {
		padding-left: 1rem;
		padding-right: 1rem;
	}

}

/* lg */
@media (min-width:64em) and (max-width:76em) {
	/*body { border: 4pt solid green; }*/
	.table-fixed-responsive {
		border-spacing: 1.5rem 0;
	}

	.gutter {
		padding: 8%;
	}

	.breakdown section {
		width: 100%;
	}

	.spacerResponsive {
		margin-top: 80pt;
		margin-bottom: 64pt;
	}

}

/* xl */
@media (min-width:76em) and (max-width:88em) {
	.max-width-responsive {
		max-width: 100vw;
	}
}

/* xxl*/
@media (min-width:88em) {
	.max-width-responsive {
		max-width: 88vw;
	}
}