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

html {
	background-color: black;
}

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

.top {
	top: 0;
}

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

.full-width {
	width: 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;
}

.vimeo {
	pointer-events: none;
}

.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;
}

.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;
}

.pageTitle {
}

.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;
}

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;
}

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

.hover:hover {
	opacity: .6;
}

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

.invert {
	filter: invert(1);
}


.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: 160pt;
}

.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;
}

/* 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;
	}

	.joinButton {
		margin-left: .5rem;
	}

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

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

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

	.spacerTopResponsive {
		margin-top: 64pt;
	}

	.spacerBottomResponsive {
		margin-bottom: 24pt;
	}

	#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 {
		display: none !important;
	}

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

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

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

	.spacerTopResponsive {
		margin-top: 80pt;
	}

	.spacerBottomResponsive {
		margin-bottom: 32pt;
	}

	.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;
	}

	.gutter {
		padding: 8%;
	}

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

	.spacerTopResponsive {
		margin-top: 96pt;
	}

	.spacerBottomResponsive {
		margin-bottom: 64pt;
	}

	.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; }*/

	.gutter {
		padding: 8%;
	}

	.breakdown section {
		width: 100%;
	}

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

}