html {
	height: 100%;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
	color: var(--color--foreground);
	background: var(--color--background);
	font-size: var(--font-size--body);
	font-family: var(--font-family--body);
}

h1, h2, h3 {
	-webkit-flex: 1 0 100%;
	flex: 1 0 100%;
	font-family: sans-serif;
	letter-spacing: -.03em;
	font-size: 2em;
	line-height: 1.25em;
	margin: 0;
	padding: 0;
	font-family: var(--font-family--heading);
}

h2 {
	font-weight: normal;
	font-size: 1.25em;
	margin: 2em 0 0.2em 0;
}

h3 {
	font-size: 1em;
	font-weight: 100;
	opacity: .5;
}

h1 strong {
	font-size: 2em;
	font-weight: 100;
	display: block;
	line-height: 1em;
	opacity: .7;
}

.wrap {
	position: relative;
	z-index: 4;
	display: -webkit-flex;
	-webkit-align-items: center;
	-webkit-justify-content: center;
	-webkit-flex-flow: row wrap;
	-webkit-align-content: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: row wrap;
	align-content: center;
	height: 100%;
	margin: 0 auto;
}

main {
	display: -webkit-flex;
	-webkit-align-items: center;
	-webkit-justify-content: center;
	-webkit-flex-flow: row wrap;
	-webkit-align-content: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: row wrap;
	align-content: center;
	font-size: 1rem;
	height: 100%;
	margin: 0 auto;
	padding: 0 1em;
	box-sizing: border-box;
}

.home main {
	align-items: center;
	align-content: center;
	/* height: 24em; */
	margin: 0 auto;
	padding: 0;
	width: 20em;
}

.home h1 {
	padding: 0;
	height: 8em;
	width: 100%;
	background-size: contain;
	margin: 0rem 0;
	text-indent: -99em;
	position: relative;
	overflow: hidden;
	display: block;
	animation-name: bg_offset;
	animation-duration: 12s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.home h1:before,
.home h1:after {
	content: '';
	position: absolute;
	display: flex;
	align-items: center;
	align-content: center;
	top: 0em;
	left: 0em;
	width: 100%;
	height: 100%;
	background: url(/images/io_optics_stacked.svg) center center no-repeat;
	background-size: contain;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	animation-duration: 12s;
}

.home h1:before {
	z-index: 3;
	filter: contrast(.2) sepia(1) saturate(3) hue-rotate(150deg);
	animation-name: shift_b;
}
.home h1:after {
	z-index: 2;
	filter: contrast(.2) sepia(1) saturate(2) hue-rotate(-60deg);
	animation-name: shift_a;
/*	filter: contrast(1.1) sepia(0) saturate(1) hue-rotate(0deg);
	background-image: url(/images/io_optics_stacked_rev.svg);*/
}
.home .inner {
	background: rgba(255, 255, 255, 0.6);
	box-shadow: 0.025em 0.025em 0.1em 0em rgba(0, 0, 0, 0.6), 0em 0em 3em 1em rgba(255,255,255, 1) inset;
	width: 100%;
	display: block;
	align-items: center;
	justify-content: center;
	display: flex;
	flex-flow: row wrap;
	padding: 0;
	height: 20em;
	align-content: center;
	font-size: 1rem;
}
.inner li {
	text-transform: uppercase;
	margin: .5rem 0 1rem 0;
	line-height: 1em;
	padding: 0;
	letter-spacing: .5em;
	font-family: var(--font-family--heading);
	animation-duration: 6s;
	animation-iteration-count: 2;
	animation-name: blur_a;
	animation-direction: alternate;
	opacity: 0.8;
	width: 13.5rem;
}

.inner.dev li:nth-of-type(1) {
	font-size: 2em;
	font-weight: 300;
	animation-delay: 4s;
}

.inner.dev li:nth-of-type(2) {
	font-size: 1.65em;
	font-weight: 400;
	animation-delay: 0s;
}

.inner.dev li:nth-of-type(3) {
	font-size: 1.46em;
	font-weight: 600;
	animation-delay: 6s;
}

.inner.dev li:nth-of-type(4) {
	font-size: 1.24em;
	font-weight: 800;
	animation-delay: 2s;
}
.inner.data li:nth-of-type(1) {
	font-size: 1.015em;
	font-weight: 600;
	animation-delay: 0s;
}

.inner.data li:nth-of-type(2) {
	font-size: 1em;
	font-weight: 800;
	animation-delay: 2s;
}

.inner.data li:nth-of-type(1):first-line {
	font-size: 1.96em;
	line-height: 1em;
	font-weight: 300;
}
.bg {
	position: absolute;
	overflow: hidden;
	top: 0vh;
	left: 0vw;
	width: 120vw;
	height: 120vh;
	z-index: 2;
	transition: 2s;
}

.gr1, .gr2 {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0%;
	left: 0%;
	border-radius: 100%;
	overflow: hidden;
	box-shadow: 0 0 0.5em 0.5em #fff inset;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

.gr1 {
	background: #F44336;
	background: radial-gradient(circle, rgba(0,255,203,1) 6%, rgba(5,251,246,0.7105217086834734) 12%, rgba(41,255,0,0.458420868347339) 24%, rgba(0,209,255,0.27354691876750703) 48%, rgba(0,209,255,0) 96%);
	z-index: 8;
	animation-name: gr1a;
	animation-duration: 32s;
	animation-delay: 12s;
}

.gr2 {
	background: rgb(0,255,203);
	background: radial-gradient(circle, rgb(222 200 155) 6%, rgb(222 111 144 / 71%) 12%, rgb(255 155 55 / 46%) 24%, rgb(0 255 20 / 27%) 48%, rgb(239 0 255 / 0%) 96%);
	z-index: 5;
	opacity: 0;
	/* transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); */
	animation-name: gr2a;
	animation-duration: 16s;
	animation-delay: 8s;
}



.gr1:before,
.gr1:after ,
.gr2:before,
.gr2:after {
	content: '';
	position: absolute;
	font-size: 2rem;
	height: 4em;
	width: 4em;
	overflow: hidden;
	border-radius: 50%;
	background: rgb(255 255 255 / 10%);
	z-index: 11;
}
.gr1:before,
.gr2:after {
	top: 25%;
}
.gr1:after,
.gr2:before {
	bottom: 50%;
}
.gr2:before,
.gr1:after {
	left: 25%;
}
.gr2:after,
.gr1:before {
	right: 50%;
	font-size: 1.1rem;
}
.gr1:before,
.gr2:before {
	box-shadow: 0 0 1.6em 0.4em rgba(122,255,211,.8) inset;
	transform: translate3d(1em, -1em, 0px);
}
.gr1:after,
.gr2:after {
	box-shadow: 0 0 1.4em 0.2em rgba(255,122,211,.6) inset;
	transform: translate3d(-1em, 1em, 0px);
}
@keyframes blur_a {
	0%,80% {
		filter: blur(0rem);
	}

	90%,100% {
		filter: blur(.2rem);
	}
}

@keyframes bg_offset {
	0%,85% {
		opacity: .75;
	}

	100% {
		opacity: 1;
	}
}

@keyframes shift_b {
	0%, 20% {
		transform: translate3d(-.05em, 0em, 0);
		opacity: 0.5;
	}
	40% {
		transform: translate3d(-.1em, .05em, 0);
	}
	60% {
		transform: translate3d(.15em, -.1em, 0);
	}
	80% {
		transform: translate3d(0.05em, .1em, 0);
	}
	90% {
		transform: translate3d(0em, 0em, 0);
		opacity: 0.5;
	}
	100% {
		transform: translate3d(0em, 0em, 0);
		opacity: 0.5;
	}
}

@keyframes shift_a {
	0%, 10% {
		transform: translate3d(.05em, 0em, 0);
		opacity: .5;
	}
	30% {
		transform: translate3d(.1em, -.05em, 0);
	}
	50% {
		transform: translate3d(-.15em, .1em, 0);
	}
	70% {
		transform: translate3d(-.05em, -.1em, 0);
	}
	90% {
		transform: translate3d(0em, 0em, 0);
		opacity: .5;
	}
	100% {
		transform: translate3d(0em, 0em, 0);
		opacity: 1;
	}
}

@keyframes gr1a {
	0% {
		opacity: 0.2;
		transform: rotate(-65deg) scale(1.5) translate3d(-1.5em, 0em, 0);
	}
	20% {
		opacity: 0.2;
		transform: rotate(-35deg) scale(1.2) translate3d(-1em, 0em, 0);
	}
	40% {
		opacity: 0.05;
		transform: rotate(0deg) scale(1) translate3d(0em, 0em, 0);
	}
	60% {
		opacity: 0.05;
		transform: rotate(0deg) scale(1) translate3d(0em, 0em, 0);
	}
	80% {
		opacity: 0.2;
		transform: rotate(-40deg) scale(1.1) translate3d(-.5em, 0em, 0);
	}
	100% {
		opacity: 0.2;
		transform: rotate(-65deg) scale(1.5) translate3d(-1.5em, 0em, 0);
	}
}

@keyframes gr2a {

	0% {
		opacity: 0.05;
		transform: rotate(0deg) scale(1) translate3d(0em, 0em, 0);
	}
	20% {
		opacity: 0.05;
		transform: rotate(15deg) scale(1.2) translate3d(0em, -.5em, 0);
	}
	40% {
		opacity: 0.2;
		transform: rotate(30deg) scale(1.2) translate3d(-.5em, -1em, 0);
	}
	60% {
		opacity: 0.2;
		transform: rotate(40deg) scale(1.5) translate3d(-.5em, -1em, 0);
	}
	80% {
		opacity: 0.05;
		transform: rotate(20deg) scale(1.25) translate3d(0em, -.5em, 0);
	}
	100% {
		opacity: 0.05;
		transform: rotate(0deg) scale(1) translate3d(0em, 0em, 0);
	}
}