@keyframes rotation-a {
	from {
		transform: rotate(0) scale(0.9375, 0.9375);
	}
	to {
		transform: rotate(360deg) scale(0.9375, 0.9375);
	}
}

@keyframes rotation-b {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(-360deg);
	}
}

@keyframes rotation {
	0% {
		opacity: 0;
		width: 240px;
		transform: rotate(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		width: 380px;
		transform: rotate(360deg);
	}
}

@media (max-width: 640px) {
	#extended {
		display: none;
	}
}

#headshot {
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: 1s opacity cubic-bezier(0, 1, 1, 1);
	background-size: cover;
	background-image: url(/public/images/press/ap-d-full.jpg);
	opacity: 0.125;
	filter: grayscale(1); /* background-image: none; */
}
#Info ol li span {
	font-size: 12px;
	text-rendering: geometricPrecision;
}
#Info svg {
	height: 9px;
}
#Info {
	opacity: 0;
	font-family: "Proxima Nova", "DIN";
	line-height: 1.5;
	text-align: right;
	max-width: 640px;
	width: auto;
	left: 0;
}
#Info > * {
	padding: 18px 12px; /* border-top: 1px solid rgba(255, 255, 255, .125); */
	border-left: 0;
	background: rgba(255, 255, 255, 0.125);
	transition: 1s all cubic-bezier(0, 1, 1, 1);
	will-change: background; /*float: left;*/
	margin: 6px auto;
	background-color: rgba(255, 255, 255, 0.0625);
	border-radius: 3px;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
#Info > *.Active {
	/* background: transparent; */
}
#Info > *:nth-child(even) {
	/*float: right;*/
}
#Info > * > * {
	opacity: 0;
	transition: 2s all cubic-bezier(0, 1, 1, 1);
	transform: translateY(-100%);
	filter: blur(8px);
	text-rendering: geometricPrecision;
	line-height: 1;
	padding: 2px; /*float: right;*/
}
#Info > * > *.Active {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}
#Info > div > aside > span {
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 300;
}
#Info > header > aside {
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 300;
	padding-top: 6px;
}
#Info > header > h1 {
	font-size: 32px;
	font-weight: 300;
	text-transform: uppercase; /* text-rendering: optimizeSpeed; */
}
#Logo svg.Active {
	fill-opacity: 0.75;
}
#Logo > article > div {
	display: table;
	vertical-align: middle;
}
#Spreads > :first-child aside {
	position: relative;
	top: auto;
	right: auto;
	left: auto;
	font-family: "Proxima Nova", "DIN";
	letter-spacing: 0;
	margin: 0 auto;
	width: auto;
}
#UI {
	height: 100vh;
	width: 100vw;
	display: table;
	top: 0;
	left: 0;
	position: absolute;
	text-align: center;
	transition: 0.5s all ease-in-out;
	table-layout: fixed;
	pointer-events: none; /*float: left;*/
}
.blur {
	position: absolute;
	color: transparent;
	text-shadow: 0 0 calc((4 * 128px)) #80ffff;
}
.blur > svg {
	fill: #80ffff;
	fill-opacity: 1;
}
.spin #aP {
	fill: #fff;
	stroke: #fff;
}
.spin {
	opacity: 1;
	transition: 1s all ease;
	border-radius: 50%;
	position: relative;
	width: 160px;
	height: 160px;
	text-align: center;
	cursor: pointer;
	will-change: transform;
}
.spin:hover {
	background-color: rgba(255, 255, 255, 0.06125);
	opacity: 1;
}
.spin > div {
	vertical-align: middle;
	display: table;
	position: absolute;
	border-radius: 50%;
	height: 100%;
	width: 100%;
}
.spin > div.after > div {
	border-top: 1px solid transparent;
	border-right: 0px;
	border-bottom: 0px;
	border-left: 1px solid;
	opacity: 0.25;
	animation: rotation-a 16s linear 0s infinite;
}
.spin > div.before > div {
	border-top: 1px solid;
	border-left: 1px solid transparent;
	border-bottom: 1px solid;
	border-right: 1px solid transparent;
	animation: rotation-b 16s linear 0s infinite;
}
.spin > div:hover {
	background-color: rgba(255, 255, 255, 0.0625);
}
.spin > div > div {
	color: #fff;
	border-radius: 50%;
	height: 100%;
}
@media (inverted-colors) {
	background,
	svg {
		filter: invert(100%);
	}
	/*.spin>div>div{color: #fff;}*/
	/*body .center>div.logo,#Info svg{filter:none;}*/
}
background {
	/* background: linear-gradient(to top left, rgba(255, 0, 255, .125), rgba(0, 128, 255, .375)); */ /* background: linear-gradient(45deg, rgba(42, 10, 169, .25) 0, rgba(124, 19, 157, .25) 100%); */ /* background: #000; */
	transition: 1s background ease-in-out;
}
background > #cell {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	width: 100%;
	height: 100%;
	transition: 0.5s all cubic-bezier(0, 1, 1, 1); /* filter: grayscale(1); */
	opacity: 0.25;
	-webkit-mask-image: radial-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 1) 100%);
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(/public/images/grid-1.png);
	background-repeat: repeat;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 1;
}
body .center > div {
	font-size: calc((2 * 128px) / 3);
	font-weight: 100;
	text-rendering: geometricPrecision;
	line-height: 1;
	white-space: pre;
	text-align: left;
	padding: calc((128px) / 3);
	transition: 2s all cubic-bezier(0, 1, 1, 1);
	opacity: 0;
}
body .center > div.logo {
	opacity: 1;
	height: 160px;
	width: 160px;
	position: absolute;
}
body.Active #Info ol a {
	user-select: none;
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	padding: 16px; /* padding-right: 0; */ /* padding-top: 0; */ /* padding-bottom: 0; */
}
body.Active #Info ol li {
	display: inline-block;
	height: 48px;
	text-align: center;
	display: inline-table;
	border-radius: 3px;
	height: auto;
	padding: 0;
}
body.Active #Info ol li:hover {
	background: rgba(255, 255, 255, 0.25);
	transition: none;
}
body.Active #Info {
	opacity: 1; /* background: radial-gradient(rgba(0, 0, 0, .66) 0, rgba(0, 0, 0, 0) 100%); */
}
body.Active #Logo {
	opacity: 0.5;
}
body.Active .center > div {
	opacity: 1;
}
body.Active .center > div.logo {
	opacity: 0.375;
}
body.Active .spin {
	transform: translateX(-24px) scale(0.9375, 0.9375); /* margin: 24px 0; */ /* filter: blur(2px); */
}
body.Active > background > #cell {
	opacity: 1; /* display: none; */ /* background: radial-gradient(rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0) 100%); */ /* filter: grayscale(1); */ /* -webkit-mask-image: none; */
}
foreground {
	/* opacity: .5; */ /* left: 0; */ /* width: 100vw; */ /* position: absolute; */
	height: 100vh;
}
foreground > span {
	font-weight: 100;
	text-rendering: optimizeSpeed;
	font-family: monospace;
	font-size: 12px;
	line-height: 1; /* word-break: break-all; */
	text-align: right;
	color: rgba(255, 255, 255, 0.125);
	white-space: pre; /* margin: 0; */ /* padding: 0; */
	opacity: 0;
	transition: 1s opacity ease-in-out;
	display: block;
	text-overflow: clip;
	height: 100vh;
	overflow: hidden; /* width: 100vw; */ /* margin-right: 0; */ /* right: 0; */ /* position: absolute; */
	font-family: DIN;
	-webkit-mask-image: linear-gradient(to top right, transparent 50%, black 100%);
}
h1,
aside {
	font-family: "Proxima Nova", "DIN";
}
h1 > span {
	opacity: 0;
	transition: 1s all ease-in-out;
	will-change: opacity, filter;
}
h1 > span.Active {
	opacity: 1;
}
li {
	font-family: "Proxima Nova", "DIN";
	text-transform: uppercase;
	display: inline-block;
}
ol {
	padding: 0;
	list-style: none;
}
section#Hero {
	position: absolute;
	top: 0;
	pointer-events: none;
}

@font-face {
	font-family: DIN;
	src: url("/public/fonts/DIN/DINNextLTW04-Regular.eot");
	src: url("/public/fonts/DIN/DINNextLTW04-Regular.eot#iefix") format("embedded-opentype"), url("/public/fonts/DIN/DINNextLTW04-Regular.woff") format("woff"), url("/public/fonts/DIN/DINNextLTW04-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: DIN;
	src: url("/public/fonts/DIN/DINNextLTW04-Italic.eot");
	src: url("/public/fonts/DIN/DINNextLTW04-Italic.eot#iefix") format("embedded-opentype"), url("/public/fonts/DIN/DINNextLTW04-Italic.woff") format("woff"), url("/public/fonts/DIN/DINNextLTW04-Italic.ttf") format("truetype");
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: DIN;
	src: url("/public/fonts/DIN/DINNextLTW04-Medium.eot");
	src: url("/public/fonts/DIN/DINNextLTW04-Medium.eot#iefix") format("embedded-opentype"), url("/public/fonts/DIN/DINNextLTW04-Medium.woff") format("woff"), url("/public/fonts/DIN/DINNextLTW04-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
}

@font-face {
    font-family: 'DIN Next LT W04 Light';
    src: url('/public/fonts/DIN/DINNextLTW04-Light.eot');
    src: url('/public/fonts/DIN/DINNextLTW04-Light.eot?#iefix') format('embedded-opentype'),
         url('/public/fonts/DIN/DINNextLTW04-Light.woff') format('woff'),
         url('/public/fonts/DIN/DINNextLTW04-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DIN Next LT W04 Regular';
    src: url('/public/fonts/DIN/DINNextLTW04-Regular.eot');
    src: url('/public/fonts/DIN/DINNextLTW04-Regular.eot?#iefix') format('embedded-opentype'),
         url('/public/fonts/DIN/DINNextLTW04-Regular.woff') format('woff'),
         url('/public/fonts/DIN/DINNextLTW04-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body.Active div#headshot {
	opacity: 0.0625;
	/* background-image: url(/public/images/press/ap-d-full.jpg); */
}

#kta {
	width: calc(100vw / 3);
	text-align: right;
}
#kta > span {
	font-size: 3vw;
	color: rgba(255, 255, 255, 0.1875);
	/* text-align: right; */
	/* color: rgba(128, 255, 255, .25); */
	opacity: 0;
	transition: 4s opacity ease-in-out;
}

body.Active #kta > span {
	opacity: 1;
}
#Logo {
	width: calc(200vw / 3);
}
@media (orientation: portrait) {
	#headshot {
		background-size: 250%;
		background-position: 75% 50%;
	}
}
#kta span {
	writing-mode: vertical-rl;
	text-orientation: upright;
	/*letter-spacing: 6px;*/
	font-size: calc(100vh / 8);
	display: block;
	white-space: pre;
}

body.Active foreground > span {
	opacity: 1;
	/* color: rgba(255, 255, 255, .25); */
}

body.Active background {
	background: linear-gradient(45deg, rgba(34, 24, 132, 0.75) 0, rgba(190, 54, 121, 0.125) 50%, rgba(255, 164, 88, 0.75) 100%);
	/*
  background: linear-gradient(
    45deg,
    rgba(42, 10, 169, .75) 0,
    rgba(83, 15, 163, 0) 50%,
  rgba(124, 19, 157, .75) 100%
  ); */
}

#Info > ol {
	/* border-bottom: 1px solid rgba(255, 255, 255, .125); */
	padding: 0;
	text-align: left;
}

#cell > canvas {
	/* -webkit-mask-image: radial-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,1) 100%); */
	/*filter: drop-shadow(24px 24px 0px rgba(255,255,255,1));*/
	/*transition: 1s filter cubic-bezier(0,1,1,1);*/
	/*animation: grid-dance 16s cubic-bezier(0,1,1,1) 0s infinite alternate;*/
	/*animation-direction: alternate;*/
}

body.Active #cell > canvas {
	/* -webkit-mask-image: none; */
}

body.Active div#Logo::before {
	opacity: 0;
	transition: 1s opacity ease-in-out 0s;
}
div#Logo::before {
	content: "Press to Continue";
	font-size: 12px;
	font-weight: 100;
	font-family: DIN;
	opacity: 1;
	transition: 1s opacity ease-in-out 5s;
	position: absolute;
	padding: 8px;
	/* text-align: right; */
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.875);
	/* right: 0; */
	transform: translateY(-100%);
	text-rendering: geometricPrecision;
}

@keyframes grid-dance {
	0% {
		filter: invert(1) drop-shadow(24px 24px 0px rgba(128, 255, 255, 0.75));
	}
	25% {
		filter: invert(1) drop-shadow(12px 12px 0px rgba(128, 255, 255, 0.75));
	}
	50% {
		filter: invert(1) drop-shadow(0px 0px 0px rgba(128, 255, 255, 0.75));
	}
	75% {
		filter: invert(1) drop-shadow(12px 12px 0px rgba(128, 255, 255, 0.75));
	}
	100% {
		filter: invert(1) drop-shadow(24px 24px 0px rgba(128, 255, 255, 0.75));
	}
}

/* CONFLUENCE */

body.confluence * {
}
body.confluence #kta,
body.confluence #Info > div,
body.confluence #Info > ol,
body.confluence #headshot {
	display: none;
}
body.confluence #cell {
	opacity: 1 !important;
}
body.confluence background {
	background: linear-gradient(45deg, rgba(34, 24, 132, 1) 0, rgba(190, 54, 121, 1) 50%, rgba(255, 164, 88, 1) 100%);
}
body.confluence #Logo {
	opacity: 0;
}
body.confluence #Info {
	background: transparent;
	border-bottom: 1px solid rgba(255, 255, 255, 0.125);
	border-top: 1px solid rgba(255, 255, 255, 0.125);
	padding: 32px 1in;
	max-width: 100vw;
	line-height: 1.25;
}
body.confluence #Info > * {
	border: none;
}
body.confluence #UI foreground > span {
	text-align: left;
	-webkit-mask-image: linear-gradient(to top left, transparent 50%, black 100%);
	color: rgba(255, 255, 255, 0.375);
	font-size: 16px;
	font-weight: 100;
	text-rendering: geometricPrecision;
}

body.confluence #Info > header > h1,
body.confluence #Info > header > aside {
	text-transform: none; /* font-size: 48px; */
}

body.confluence #Info > header > * > span {
	vertical-align: middle;
}

body.confluence #Info > header > h1 {
	font-size: 64px; /* font-weight: 100; */
	transition: none;
}
body.confluence #Info > header > aside {
	font-size: 32px;
	padding-top: 8px;
	line-height: 1.25;
	max-width: 75%;
	margin-right: 0;
}

body.confluence #Info > header {
	padding: 0;
}

body.Active section#Hero {
	pointer-events: all;
}

.active-ventures > span::after {
	content: " · ";
}

.active-ventures > span:last-child:after {
	content: initial;
}