.display, #ui-view, #home-view, #about-view, #project-view, #loading-view, #timeline-view, #not-supported-view {
	opacity: 1;
	visibility: visible
}
.display.hide, .hide#ui-view, .hide#home-view, .hide#about-view, .hide#project-view, .hide#loading-view, .hide#timeline-view, .hide#not-supported-view {
	opacity: 0;
	visibility: hidden
}
.center_container, #home-view, #loading-view .content {
	text-align: center
}
.center_container:before, #home-view:before, #loading-view .content:before {
	content: "";
	display: inline-block;
	height: 100%;
	margin-left: -0.25em;
	vertical-align: middle
}
.center_container>div, #home-view>div, #loading-view .content>div {
	display: inline-block;
	vertical-align: middle
}
@font-face {
	font-family: 'GTCinetype';
	src: url("../fonts/GT-Cinetype-Light.eot");
	src: url("../fonts/GT-Cinetype-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/GT-Cinetype-Light.woff") format("woff"), url("../fonts/GT-Cinetype-Light.ttf") format("truetype"), url("../fonts/GT-Cinetype-Light.svg#GTCinetype-Light") format("svg");
	font-style: normal;
	font-weight: 200;
	text-rendering: optimizeLegibility
}
@font-face {
	font-family: 'GTCinetype';
	src: url("../fonts/GT-Cinetype-Mono.eot");
	src: url("../fonts/GT-Cinetype-Mono.eot?#iefix") format("embedded-opentype"), url("../fonts/GT-Cinetype-Mono.woff") format("woff"), url("../fonts/GT-Cinetype-Mono.ttf") format("truetype"), url("../fonts/GT-Cinetype-Mono.svg#GTCinetype-Mono") format("svg");
	font-style: normal;
	font-weight: 300;
	text-rendering: optimizeLegibility
}
.icn {
	display: inline-block
}
.icn.cursor {
	width: 1px;
	height: 100%;
	padding: 0 10px;
	margin-left: -10px;
	opacity: 0.8
}
.icn.cursor:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: #dd371f
}
.icn.close {
	position: relative;
	width: 15px;
	height: 15px
}
.icn.dot {
	width: 10px;
	height: 10px;
	vertical-align: middle;
	border-radius: 50%;
	background-color: red;
	-webkit-transform: matrix(0.4, 0, 0, 0.4, 0, 0);
	-moz-transform: matrix(0.4, 0, 0, 0.4, 0, 0);
	-ms-transform: matrix(0.4, 0, 0, 0.4, 0, 0);
	-o-transform: matrix(0.4, 0, 0, 0.4, 0, 0);
	transform: matrix(0.4, 0, 0, 0.4, 0, 0)
}
.icn.dot.big {
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
	-moz-transform: matrix(1, 0, 0, 1, 0, 0);
	-ms-transform: matrix(1, 0, 0, 1, 0, 0);
	-o-transform: matrix(1, 0, 0, 1, 0, 0);
	transform: matrix(1, 0, 0, 1, 0, 0)
}
.icn.play {
	width: 52px;
	height: 52px;
	position: relative;
	background-color: rgba(0,0,0,0.33);
	border: 1px rgba(255,255,255,0.33) solid;
	border-radius: 50%
}
.icn.play:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	border: 12.5px white solid;
	border-right: 0;
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-top-width: 7.5px;
	border-bottom-width: 7.5px;
	-webkit-transform: translateX(1.5625px);
	-moz-transform: translateX(1.5625px);
	-ms-transform: translateX(1.5625px);
	-o-transform: translateX(1.5625px);
	transform: translateX(1.5625px)
}
.icn.rotate_mobile {
	width: 45px;
	fill: white;
	-webkit-transform: translateX(4px);
	-moz-transform: translateX(4px);
	-ms-transform: translateX(4px);
	-o-transform: translateX(4px);
	transform: translateX(4px)
}
.icn.swipe {
	width: 80px;
	fill: white
}
.icn.spin {
	width: 80px;
	height: 80px
}
.icn.spin:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(../images/loader.png);
	background-size: contain;
	-webkit-animation: loop 1s infinite linear reverse;
	-moz-animation: loop 1s infinite linear reverse;
	animation: loop 1s infinite linear reverse;
	-webkit-animation-fill-mode: backwards;
	-moz-animation-fill-mode: backwards;
	animation-fill-mode: backwards;
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	animation-play-state: paused
}
@-webkit-keyframes pulse {
0.00% {
opacity:0
}
50.0% {
opacity:1
}
100.0% {
opacity:0
}
}
@-moz-keyframes pulse {
0.00% {
opacity:0
}
50.0% {
opacity:1
}
100.0% {
opacity:0
}
}
@keyframes pulse {
0.00% {
opacity:0
}
50.0% {
opacity:1
}
100.0% {
opacity:0
}
}
@-webkit-keyframes loop {
0% {
-webkit-transform:rotate(0);
-moz-transform:rotate(0);
-ms-transform:rotate(0);
-o-transform:rotate(0);
transform:rotate(0)
}
50% {
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg)
}
100% {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-moz-keyframes loop {
0% {
-webkit-transform:rotate(0);
-moz-transform:rotate(0);
-ms-transform:rotate(0);
-o-transform:rotate(0);
transform:rotate(0)
}
50% {
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg)
}
100% {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes loop {
0% {
-webkit-transform:rotate(0);
-moz-transform:rotate(0);
-ms-transform:rotate(0);
-o-transform:rotate(0);
transform:rotate(0)
}
50% {
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg)
}
100% {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-webkit-keyframes camera {
0% {
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);
transform:scale(1.2)
}
25% {
-webkit-transform:scale(0.97);
-moz-transform:scale(0.97);
-ms-transform:scale(0.97);
-o-transform:scale(0.97);
transform:scale(0.97)
}
30% {
-webkit-transform:scale(0.97);
-moz-transform:scale(0.97);
-ms-transform:scale(0.97);
-o-transform:scale(0.97);
transform:scale(0.97)
}
40% {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1)
}
100% {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1)
}
}
@-moz-keyframes camera {
0% {
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);
transform:scale(1.2)
}
25% {
-webkit-transform:scale(0.97);
-moz-transform:scale(0.97);
-ms-transform:scale(0.97);
-o-transform:scale(0.97);
transform:scale(0.97)
}
30% {
-webkit-transform:scale(0.97);
-moz-transform:scale(0.97);
-ms-transform:scale(0.97);
-o-transform:scale(0.97);
transform:scale(0.97)
}
40% {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1)
}
100% {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1)
}
}
@keyframes camera {
0% {
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);
transform:scale(1.2)
}
25% {
-webkit-transform:scale(0.97);
-moz-transform:scale(0.97);
-ms-transform:scale(0.97);
-o-transform:scale(0.97);
transform:scale(0.97)
}
30% {
-webkit-transform:scale(0.97);
-moz-transform:scale(0.97);
-ms-transform:scale(0.97);
-o-transform:scale(0.97);
transform:scale(0.97)
}
40% {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1)
}
100% {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1)
}
}
#ui-view {
	-webkit-transition: opacity 500ms, visibility 0s 0s;
	-moz-transition: opacity 500ms, visibility 0s 0s;
	transition: opacity 500ms, visibility 0s 0s
}
#ui-view.hide {
	-webkit-transition: opacity 500ms, visibility 0s 500ms;
	-moz-transition: opacity 500ms, visibility 0s 500ms;
	transition: opacity 500ms, visibility 0s 500ms
}
#ui-view .mobile-tuts {
	display: none;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	text-align: center
}
#ui-view .mobile-tuts:before {
	content: "";
	display: inline-block;
	height: 100%;
	margin-left: -0.25em;
	vertical-align: middle
}
#ui-view .mobile-tuts svg {
	vertical-align: middle
}
#home-view {
	-webkit-transition: opacity 500ms, visibility 0s 0s;
	-moz-transition: opacity 500ms, visibility 0s 0s;
	transition: opacity 500ms, visibility 0s 0s;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	cursor: pointer;
	z-index: 2
}
#home-view.hide {
	-webkit-transition: opacity 500ms, visibility 0s 500ms;
	-moz-transition: opacity 500ms, visibility 0s 500ms;
	transition: opacity 500ms, visibility 0s 500ms
}
#home-view h1, #home-view h2 {
	margin: 0;
	font-weight: 200
}
#home-view h1 {
	margin-bottom: 20px;
	font-size: 34px
}
#home-view h2 {
	font-size: 14px
}
#about-view {
	-webkit-transition: opacity 500ms, visibility 0s 0s;
	-moz-transition: opacity 500ms, visibility 0s 0s;
	transition: opacity 500ms, visibility 0s 0s;
	overflow: hidden;
	width: 100%;
	height: 100%;
	min-width: 1024px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	font-family: "GTCinetype";
	font-size: 12px;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: white
}
#about-view.hide {
	-webkit-transition: opacity 500ms, visibility 0s 500ms;
	-moz-transition: opacity 500ms, visibility 0s 500ms;
	transition: opacity 500ms, visibility 0s 500ms
}
#about-view a {
	color: white;
	text-decoration: none;
	-webkit-transition: color 250ms;
	-moz-transition: color 250ms;
	transition: color 250ms
}
#about-view a:hover {
	color: red
}
#about-view h1 {
	display: none;
	font-weight: 200;
	font-size: 24px
}
#about-view h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 300
}
#about-view h2:before {
	content: "."
}
#about-view nav {
	width: 200px
}
#about-view section {
	margin-bottom: 35px
}
#about-view .content {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	position: relative;
	padding: 112px 110px 0 110px;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 500ms 0s, visibility 0s 500ms;
	-moz-transition: opacity 500ms 0s, visibility 0s 500ms;
	transition: opacity 500ms 0s, visibility 0s 500ms
}
#about-view nav {
	margin-top: 100px
}
#about-view .bio-wrapper {
	width: 700px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto
}
#about-view .bio {
	font-size: 36px;
	font-weight: 100
}
#about-view .ui {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	padding: 110px;
	padding-bottom: 0
}
#about-view .ui .ui-wrapper {
	position: relative
}
#about-view .ui h1 {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0
}
#about-view .ui .clickable {
	display: inline-block;
	overflow: hidden;
	height: 25px;
	width: 100px;
	position: absolute;
	top: 0;
	right: 0;
	font-family: 'GTCinetype';
	font-weight: 200;
	font-size: 24px;
	color: white;
	text-decoration: none;
	text-align: right;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	cursor: pointer;
	color: #505050
}
#about-view .ui .clickable .dot {
	display: none;
	-webkit-animation: pulse 0.4s infinite;
	-moz-animation: pulse 0.4s infinite;
	animation: pulse 0.4s infinite;
	-webkit-animation-fill-mode: backwards;
	-moz-animation-fill-mode: backwards;
	animation-fill-mode: backwards;
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	animation-play-state: paused
}
#about-view .ui .clickable:hover {
	color: red
}
#about-view .ui .clickable:hover .dot {
	display: inline-block;
	-webkit-animation-play-state: running;
	-moz-animation-play-state: running;
	animation-play-state: running
}
#about-view .ui .clickable span {
	display: inline-block;
	height: 100%;
	position: absolute;
	top: 0;
	left: 20px
}
#about-view .ui .clickable .dot {
	position: absolute;
	top: 8px;
	left: 0;
	bottom: 0;
	margin: auto;
	-webkit-transition: all 250ms;
	-moz-transition: all 250ms;
	transition: all 250ms
}
#about-view .ui .clickable .open-about {
	opacity: 1;
	-webkit-transition: all 250ms;
	-moz-transition: all 250ms;
	transition: all 250ms;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px)
}
#about-view .ui .clickable .close-about {
	color: red;
	opacity: 0;
	-webkit-transition: all 250ms;
	-moz-transition: all 250ms;
	transition: all 250ms;
	-webkit-transform: translateY(25px);
	-moz-transform: translateY(25px);
	-ms-transform: translateY(25px);
	-o-transform: translateY(25px);
	transform: translateY(25px)
}
#about-view .mobile-message {
	display: none;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 12%;
	text-align: center;
	font-weight: 300
}
#about-view .mobile-message svg {
	margin-bottom: 18px
}
#about-view.playing .content {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 500ms 0s, visibility 0s 0s;
	-moz-transition: opacity 500ms 0s, visibility 0s 0s;
	transition: opacity 500ms 0s, visibility 0s 0s
}
#about-view.playing .clickable .dot {
	display: inline-block;
	-webkit-animation-play-state: running;
	-moz-animation-play-state: running;
	animation-play-state: running
}
#about-view.playing .clickable span.open-about {
	opacity: 0;
	-webkit-transform: translateY(-25px);
	-moz-transform: translateY(-25px);
	-ms-transform: translateY(-25px);
	-o-transform: translateY(-25px);
	transform: translateY(-25px)
}
#about-view.playing .clickable span.close-about {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px)
}
#square {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	padding: 35px;
	overflow: hidden
}
#square:before {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	perspective: 1000;
	content: "";
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border: 1px #2b2b2b solid;
	-webkit-transform: scale(1.2) translate3d(0, 0, 0);
	-moz-transform: scale(1.2) translate3d(0, 0, 0);
	-ms-transform: scale(1.2) translate3d(0, 0, 0);
	-o-transform: scale(1.2) translate3d(0, 0, 0);
	transform: scale(1.2) translate3d(0, 0, 0);
	-webkit-animation: camera 1.5s;
	-moz-animation: camera 1.5s;
	animation: camera 1.5s;
	-webkit-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-webkit-animation-play-state: running;
	-moz-animation-play-state: running;
	animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-direction: normal;
	-moz-animation-direction: normal;
	animation-direction: normal
}
#square.hide:before {
	-webkit-animation: none;
	-moz-animation: none;
	animation: none
}
#project-view {
	-webkit-transition: opacity 500ms, visibility 0s 0s;
	-moz-transition: opacity 500ms, visibility 0s 0s;
	transition: opacity 500ms, visibility 0s 0s;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	text-align: center;
	font-family: "GTCinetype";
	font-size: 12px;
	font-weight: 300;
	color: white;
	padding: 40px 120px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}
#project-view.hide {
	-webkit-transition: opacity 500ms, visibility 0s 500ms;
	-moz-transition: opacity 500ms, visibility 0s 500ms;
	transition: opacity 500ms, visibility 0s 500ms
}
#project-view h1, #project-view h2 {
	margin: 0;
	font-size: 12px;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}
#project-view h1 {
	opacity: 1;
	margin-bottom: 15px
}
#project-view h2 {
	opacity: 0.5
}
#project-view .project-wrapper {
	height: 100%;
	position: relative
}
#project-view header, #project-view footer {
	height: 0;
	width: 100%;
	position: relative;
	-webkit-transition: all 250ms;
	-moz-transition: all 250ms;
	transition: all 250ms
}
#project-view header .content, #project-view footer .content {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto
}
#project-view header .content {
	height: 45px
}
#project-view footer {
	position: absolute;
	bottom: 0
}
#project-view footer .content {
	height: 15px
}
#project-view svg.close {
	position: absolute;
	top: 110px;
	right: 120px;
	cursor: pointer;
	z-index: 10
}
#project-view svg.close.inner {
	top: 0;
	right: 0;
	display: none
}
#project-view h1, #project-view h2, #project-view footer .content {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 250ms, visibility 0s 250ms;
	-moz-transition: opacity 250ms, visibility 0s 250ms;
	transition: opacity 250ms, visibility 0s 250ms
}
#project-view.data-visible h1, #project-view.data-visible h2, #project-view.data-visible footer .content {
	visibility: visible;
	-webkit-transition: opacity 500ms 500ms, visibility 0s 0ms;
	-moz-transition: opacity 500ms 500ms, visibility 0s 0ms;
	transition: opacity 500ms 500ms, visibility 0s 0ms
}
#project-view.data-visible h1 {
	opacity: 1
}
#project-view.data-visible h2, #project-view.data-visible footer .content {
	opacity: 0.5
}
#loading-view {
	-webkit-transition: opacity 500ms, visibility 0s 0s;
	-moz-transition: opacity 500ms, visibility 0s 0s;
	transition: opacity 500ms, visibility 0s 0s;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	padding: 110px;
	background-color: black;
	text-align: right;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none
}
#loading-view.hide {
	-webkit-transition: opacity 500ms, visibility 0s 500ms;
	-moz-transition: opacity 500ms, visibility 0s 500ms;
	transition: opacity 500ms, visibility 0s 500ms
}
#loading-view .content {
	box-sizing: border-box;
	width: 50px;
	height: 50px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	border: 1px #222222 solid
}
#loading-view .dot {
	margin-right: -0.25em;
	-webkit-animation: pulse 0.4s infinite;
	-moz-animation: pulse 0.4s infinite;
	animation: pulse 0.4s infinite;
	-webkit-animation-fill-mode: backwards;
	-moz-animation-fill-mode: backwards;
	animation-fill-mode: backwards
}
#wrapper {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	perspective: 1000;
	height: 100%;
	min-width: 1024px;
	min-height: 670px;
	position: relative;
	cursor: initial;
	background-color: transparent;
	-webkit-transition: background-color 500ms;
	-moz-transition: background-color 500ms;
	transition: background-color 500ms
}
#wrapper:before {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	perspective: 1000;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	background-color: black;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 500ms 0s, visibility 0s 500ms;
	-moz-transition: opacity 500ms 0s, visibility 0s 500ms;
	transition: opacity 500ms 0s, visibility 0s 500ms
}
#timeline-view {
	-webkit-transition: opacity 500ms, visibility 0s 0s;
	-moz-transition: opacity 500ms, visibility 0s 0s;
	transition: opacity 500ms, visibility 0s 0s;
	overflow: hidden;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 0;
	background-color: transparent
}
#timeline-view.hide {
	-webkit-transition: opacity 500ms, visibility 0s 500ms;
	-moz-transition: opacity 500ms, visibility 0s 500ms;
	transition: opacity 500ms, visibility 0s 500ms
}
#timeline-view .spin {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 250ms 0ms, visibility 0ms 250ms;
	-moz-transition: opacity 250ms 0ms, visibility 0ms 250ms;
	transition: opacity 250ms 0ms, visibility 0ms 250ms
}
#timeline-view .content {
	height: 100%;
	width: 0;
	position: relative
}
#timeline-view .cursor {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	perspective: 1000;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1
}
#timeline-view .cursor.animate {
	-webkit-transition: -webkit-transform 500ms;
	-moz-transition: -moz-transform 500ms;
	transition: transform 500ms
}
#timeline-view .playlist {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	padding: 0;
	z-index: 0;
	margin: 0;
	margin-top: auto;
	margin-bottom: auto;
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 500ms, visibility 0s 0ms;
	-moz-transition: opacity 500ms, visibility 0s 0ms;
	transition: opacity 500ms, visibility 0s 0ms
}
#timeline-view .playlist:before {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	perspective: 1000;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	background-color: black;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 500ms 0s, visibility 0s 500ms;
	-moz-transition: opacity 500ms 0s, visibility 0s 500ms;
	transition: opacity 500ms 0s, visibility 0s 500ms
}
#timeline-view .movie {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	perspective: 1000;
	overflow: hidden;
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto 0;
	vertical-align: middle;
	font-size: 0;
	cursor: pointer;
	-webkit-transition: -webkit-transform 500ms;
	-moz-transition: -moz-transform 500ms;
	transition: transform 500ms;
	-webkit-transform-origin: 0% 50% 0;
	-moz-transform-origin: 0% 50% 0;
	-ms-transform-origin: 0% 50% 0;
	-o-transform-origin: 0% 50% 0;
	transform-origin: 0% 50% 0
}
#timeline-view .movie.hover .cover {
	opacity: 1
}
#timeline-view .movie:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	background-color: #000
}
#timeline-view .movie.active {
	z-index: 1
}
#timeline-view .cover {
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center
}
#timeline-view video {
	width: 100%;
	height: 100%;
	position: absolute;
	top: initial;
	left: initial;
	min-width: 100%;
	min-height: 100%;
	max-width: 950px
}
#timeline-view .movie video {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 500ms, visibility 0s 500ms;
	-moz-transition: all 500ms, visibility 0s 500ms;
	transition: all 500ms, visibility 0s 500ms
}
#timeline-view .movie .cover {
	opacity: 0.4;
	visibility: visible;
	-webkit-transition: all 500ms, visibility 0s 0ms;
	-moz-transition: all 500ms, visibility 0s 0ms;
	transition: all 500ms, visibility 0s 0ms
}
#timeline-view .movie.selected {
	z-index: 10
}
#timeline-view .movie.is-playing video {
	opacity: 1;
	visibility: visible;
	-webkit-transition: all 500ms, visibility 0s 0ms;
	-moz-transition: all 500ms, visibility 0s 0ms;
	transition: all 500ms, visibility 0s 0ms
}
#timeline-view .movie.is-playing .cover {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 500ms, visibility 0s 500ms;
	-moz-transition: all 500ms, visibility 0s 500ms;
	transition: all 500ms, visibility 0s 500ms
}
#timeline-view .movie.is-loading .cover {
	opacity: 0.4
}
#timeline-view .movie.is-loading .spin {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 500ms, visibility 0s 500ms;
	-moz-transition: opacity 500ms, visibility 0s 500ms;
	transition: opacity 500ms, visibility 0s 500ms
}
#timeline-view .movie.is-loading .spin:before {
	-webkit-animation-play-state: running;
	-moz-animation-play-state: running;
	animation-play-state: running
}
.navigation-enabled#wrapper .movie {
	-webkit-transition: none;
	-moz-transition: none;
	transition: none
}
#not-supported-view {
	-webkit-transition: opacity 500ms, visibility 0s 0s;
	-moz-transition: opacity 500ms, visibility 0s 0s;
	transition: opacity 500ms, visibility 0s 0s;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background-color: black;
	text-align: center
}
#not-supported-view.hide {
	-webkit-transition: opacity 500ms, visibility 0s 500ms;
	-moz-transition: opacity 500ms, visibility 0s 500ms;
	transition: opacity 500ms, visibility 0s 500ms
}
#not-supported-view:before {
	content: "";
	display: inline-block;
	height: 100%;
	margin-left: -0.25em;
	vertical-align: middle
}
#not-supported-view .content {
	display: inline-block;
	vertical-align: middle
}
#not-supported-view h1, #not-supported-view h2 {
	font-weight: 200
}
#not-supported-view h2 {
	font-size: 14px;
	margin-bottom: 30px
}
#not-supported-view p {
	line-height: 2.0em
}
html, body {
	height: 100%;
	min-width: 1024px;
	min-height: 670px;
	margin: 0;
	padding: 0;
	background-color: #141414;
	font-family: "GTCinetype";
	font-size: 12px;
	font-weight: 300;
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}
a {
	color: white
}
a:hover {
	color: red
}
.timeline-hover #timeline-view {
	z-index: 3
}
.timeline-hover #timeline-view .movie {
	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: grab
}
.timeline-hover.drag #timeline-view .movie {
	cursor: -webkit-grabbing;
	cursor: -moz-grabbing;
	cursor: grabbing
}
.home-view#wrapper:before {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 500ms 0s, visibility 0s 0ms;
	-moz-transition: opacity 500ms 0s, visibility 0s 0ms;
	transition: opacity 500ms 0s, visibility 0s 0ms
}
.home-view#wrapper #timeline-view .playlist:before {
	opacity: 0.4;
	visibility: visible;
	-webkit-transition: opacity 500ms 0s, visibility 0s 0s;
	-moz-transition: opacity 500ms 0s, visibility 0s 0s;
	transition: opacity 500ms 0s, visibility 0s 0s
}
.about-view#wrapper #timeline-view .playlist:before {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 500ms 0s, visibility 0s 0s;
	-moz-transition: opacity 500ms 0s, visibility 0s 0s;
	transition: opacity 500ms 0s, visibility 0s 0s
}
.project-view#wrapper #timeline-view.transition .movie.selected .cover {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 500ms 0s, visibility 0s 0ms;
	-moz-transition: opacity 500ms 0s, visibility 0s 0ms;
	transition: opacity 500ms 0s, visibility 0s 0ms
}
.project-view#wrapper #timeline-view.transition .movie.selected video {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 500ms 0s, visibility 0s 500ms;
	-moz-transition: opacity 500ms 0s, visibility 0s 500ms;
	transition: opacity 500ms 0s, visibility 0s 500ms
}
.project-view#wrapper #timeline-view .movie:hover .cover, .project-view#wrapper #timeline-view .movie.selected .cover {
	opacity: 1
}
.project-view#wrapper #timeline-view .movie {
	-webkit-transition: -webkit-transform 500ms;
	-moz-transition: -moz-transform 500ms;
	transition: transform 500ms
}
.project-view#wrapper #timeline-view .movie.selected .cover {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 500ms 0s, visibility 0s 500ms;
	-moz-transition: opacity 500ms 0s, visibility 0s 500ms;
	transition: opacity 500ms 0s, visibility 0s 500ms
}
.project-view#wrapper #timeline-view .movie.selected video {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 500ms 0s, visibility 0s 0ms;
	-moz-transition: opacity 500ms 0s, visibility 0s 0ms;
	transition: opacity 500ms 0s, visibility 0s 0ms
}
.project-view#wrapper #about-view {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 500ms 0s, visibility 0s 500ms;
	-moz-transition: opacity 500ms 0s, visibility 0s 500ms;
	transition: opacity 500ms 0s, visibility 0s 500ms
}
.content-is-dragged#wrapper #timeline-view .content, .content-is-dragged#wrapper #timeline-view .movie {
	-webkit-transition: none;
	-moz-transition: none;
	transition: none
}
@media (max-width: 1400px) {
#about-view .bio-wrapper {
	width: 500px
}
#about-view .bio {
	font-size: 30px
}
}
@media (max-width: 1200px) {
#about-view .bio-wrapper {
	width: 450px;
	left: 140px
}
#about-view .bio {
	font-size: 26px
}
}
@media (max-height: 1000px) {
#project-view svg.close {
	display: none
}
#project-view svg.close.inner {
	display: block
}
}
.mobile, .mobile body, .mobile #wrapper {
	overflow: hidden;
	min-width: 0px;
	min-height: 0px
}
.mobile.portrait #home-view, .mobile.portrait #project-view, .mobile.portrait #timeline-view, .mobile.portrait #ui-view, .mobile.my-portrait #home-view, .mobile.my-portrait #project-view, .mobile.my-portrait #timeline-view, .mobile.my-portrait #ui-view {
	display: none
}
.mobile.portrait #about-view, .mobile.my-portrait #about-view {
	display: block;
	visibility: visible;
	opacity: 1
}
.mobile.landscape #about-view, .mobile.landscape #home-view, .mobile.landscape #project-view, .mobile.my-landscape #about-view, .mobile.my-landscape #home-view, .mobile.my-landscape #project-view {
	display: none
}
.mobile.landscape #wrapper #timeline-view video, .mobile.my-landscape #wrapper #timeline-view video {
	min-width: 0;
	min-height: 0;
	width: 100%;
	top: 0
}
.mobile.landscape #wrapper #timeline-view .playlist, .mobile.my-landscape #wrapper #timeline-view .playlist {
	opacity: 1
}
.mobile #wrapper {
	width: 100%;
	height: 100%;
	min-height: initial
}
.mobile #timeline-view .cursor {
	display: none
}
.mobile #timeline-view .playlist {
	display: block;
	height: 100%;
	width: 100%
}
.mobile #timeline-view.hide .content {
	display: none
}
.mobile #timeline-view .content {
	-webkit-transition: all 500ms;
	-moz-transition: all 500ms;
	transition: all 500ms
}
.mobile #timeline-view .movie {
	background-color: black;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none
}
.mobile #timeline-view .movie .cover {
	opacity: 1
}
.mobile #timeline-view .movie video {
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto
}
.mobile #timeline-view .movie.is-playing .cover {
	opacity: 0
}
.mobile #timeline-view .movie.is-playing video {
	opacity: 1
}
.mobile #timeline-view .movie.is-loading .cover {
	opacity: 0.4
}
.mobile #timeline-view .movie.is-loading .play {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 500ms, visibility 0s 500ms;
	-moz-transition: opacity 500ms, visibility 0s 500ms;
	transition: opacity 500ms, visibility 0s 500ms
}
.mobile #timeline-view .movie.is-loading .spin {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 500ms, visibility 0s 0ms;
	-moz-transition: opacity 500ms, visibility 0s 0ms;
	transition: opacity 500ms, visibility 0s 0ms;
	-webkit-animation-play-state: running;
	-moz-animation-play-state: running;
	animation-play-state: running
}
.mobile #timeline-view .play {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto
}
.mobile #about-view {
	min-width: initial;
	min-height: 480px;
	text-align: center;
	background-color: black;
	font-weight: 200
}
.mobile #about-view .ui {
	display: none
}
.mobile #about-view h1 {
	display: block;
	margin-bottom: 65px
}
.mobile #about-view h2 {
	color: #3f3f3f
}
.mobile #about-view h2:before {
	content: ""
}
.mobile #about-view .content {
	padding: 12% 55px 12% 55px;
	opacity: 1;
	visibility: visible;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none
}
.mobile #about-view .mobile-message {
	display: inline
}
.mobile #about-view .bio-wrapper {
	display: none
}
.mobile #about-view nav {
	margin: 0;
	width: 100%
}
.mobile #about-view section div {
	margin-bottom: 10px
}
.mobile #about-view .services {
	display: none
}
.mobile #ui-view {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	perspective: 1000;
	height: 100%;
	padding: 0;
	opacity: 1;
	z-index: 20;
	visibility: visible;
	-webkit-transition: opacity 500ms, visibility 0s 0ms;
	-moz-transition: opacity 500ms, visibility 0s 0ms;
	transition: opacity 500ms, visibility 0s 0ms
}
.mobile #ui-view .about, .mobile #ui-view .project {
	display: none
}
.mobile #ui-view.hide {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 500ms, visibility 0s 500ms;
	-moz-transition: opacity 500ms, visibility 0s 500ms;
	transition: opacity 500ms, visibility 0s 500ms
}
.mobile #ui-view .mobile-tuts {
	display: block
}
@media screen and (max-height: 480px) {
.mobile #about-view nav h1 {
	margin-bottom: 25px
}
}
.tablet.portrait, .tablet.portrait body, .tablet.portrait #wrapper, .tablet.my-portrait, .tablet.my-portrait body, .tablet.my-portrait #wrapper {
	overflow: hidden;
	min-width: initial;
	min-height: initial
}
.tablet.portrait.is-playing #about-view, .tablet.my-portrait.is-playing #about-view {
	display: none
}
.tablet.portrait.is-playing #timeline-view, .tablet.portrait.is-playing #wrapper:before, .tablet.my-portrait.is-playing #timeline-view, .tablet.my-portrait.is-playing #wrapper:before {
	display: block
}
.tablet.portrait #home-view, .tablet.portrait #timeline-view, .tablet.portrait #wrapper:before, .tablet.my-portrait #home-view, .tablet.my-portrait #timeline-view, .tablet.my-portrait #wrapper:before {
	display: none
}
.tablet.portrait #about-view, .tablet.my-portrait #about-view {
	min-width: initial;
	min-height: 480px;
	height: 100% !important;
	text-align: center;
	background-color: black;
	font-weight: 200;
	opacity: 1;
	visibility: visible;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none
}
.tablet.portrait #about-view .ui, .tablet.my-portrait #about-view .ui {
	display: none
}
.tablet.portrait #about-view h1, .tablet.my-portrait #about-view h1 {
	display: block;
	margin-bottom: 65px
}
.tablet.portrait #about-view h2, .tablet.my-portrait #about-view h2 {
	color: #3f3f3f
}
.tablet.portrait #about-view h2:before, .tablet.my-portrait #about-view h2:before {
	content: ""
}
.tablet.portrait #about-view .content, .tablet.my-portrait #about-view .content {
	padding: 12% 55px 12% 55px;
	opacity: 1;
	visibility: visible;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none
}
.tablet.portrait #about-view .mobile-message, .tablet.my-portrait #about-view .mobile-message {
	display: inline
}
.tablet.portrait #about-view .bio-wrapper, .tablet.my-portrait #about-view .bio-wrapper {
	display: none
}
.tablet.portrait #about-view nav, .tablet.my-portrait #about-view nav {
	margin: 0;
	width: 100%
}
.tablet.portrait #about-view section div, .tablet.my-portrait #about-view section div {
	margin-bottom: 10px
}
.tablet.portrait #about-view .services, .tablet.my-portrait #about-view .services {
	display: none
}
.tablet.portrait #about-view .ui .clickable:hover, .tablet.my-portrait #about-view .ui .clickable:hover {
	color: #505050 !important
}
.tablet.portrait #about-view .ui .clickable:hover .dot, .tablet.my-portrait #about-view .ui .clickable:hover .dot {
	display: initial !important;
	-webkit-animation-play-state: paused !important;
	-moz-animation-play-state: paused !important;
	animation-play-state: paused !important
}
.tablet #timeline-view {
	overflow: scroll;
	-webkit-overflow-scrolling: touch
}
.tablet #timeline-view video {
	min-height: initial;
	min-width: initial;
	width: 100%;
	height: initial
}
.tablet #timeline-view .movie, .tablet #timeline-view video, .tablet #timeline-view .cover {
	-webkit-transition: none;
	-moz-transition: none;
	transition: none
}
.tablet #timeline-view .cursor {
	display: none
}
.tablet #timeline-view .movie .cover {
	opacity: 1
}
.tablet #home-view #timeline-view .movie {
	-webkit-transition: none;
	-moz-transition: none;
	transition: none
}
.tablet #square {
	position: fixed
}