firstHEADmaster

1 files changed, 845 insertions, 0 deletions

diff --git a/assets/style.css b/assets/style.css
new file mode 100644
index 0000000..2ca71b4
--- /dev/null
+++ b/assets/style.css
@@ -0,0 +1,845 @@
+@font-face {
+	font-family: 'BellGothic-Light';
+	src: url('fonts/BellGotLig.eot');
+}
+
+@font-face {
+	font-family: 'BellGothic-Light';
+	src: url('fonts/BellGotLig.woff') format('woff'),
+	url('fonts/BellGotLig.svg#BellGothic-Light') format('svg');
+}
+
+@font-face {
+	font-family: 'BellGothic-Bold';
+	src: url('fonts/BellGotBol.eot');
+}
+
+@font-face {
+	font-family: 'BellGothic-Bold';
+	src: url('fonts/BellGotBol.woff') format('woff'),
+	url('fonts/BellGotBol.svg#BellGothic-Bold') format('svg');
+}
+.loading * {
+	-webkit-transition: none !important;
+	-moz-transition: none !important;
+	-ms-transition: none !important;
+	-o-transition: none !important;
+}
+
+
+*, *:active{
+	outline:0;
+	box-sizing: border-box;
+}
+::selection {
+	background: #000;
+	color:white;
+}
+::-moz-selection {
+	background: #000; 
+	color:white;
+}
+html,body{
+	width:100%;
+	height:100%;
+	margin:0;
+	padding:0;
+	box-sizing: border-box;
+	text-rendering: optimizeLegibility;
+}
+body {
+	background: #eee;
+	font-family: 'BellGothic-Light';
+	font-size:16px;
+}
+/*! Flickity v1.0.0
+http://flickity.metafizzy.co
+---------------------------------------------- */
+
+.flickity-enabled {
+	position: relative;
+}
+
+.flickity-enabled:focus { outline: none; }
+
+.flickity-viewport {
+	overflow: hidden;
+	position: relative;
+	height: 100%;
+}
+
+.flickity-slider {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+
+/* draggable
+
+.flickity-enabled.is-draggable {
+-webkit-user-select: none;
+-moz-user-select: none;
+-ms-user-select: none;
+user-select: none;
+}
+
+.flickity-enabled.is-draggable .flickity-viewport {
+cursor: move;
+cursor: -webkit-grab;
+cursor: grab;
+}
+
+.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
+cursor: -webkit-grabbing;
+cursor: grabbing;
+}
+*/
+
+/* ---- previous/next buttons ---- */
+
+.flickity-prev-next-button {
+	position: absolute;
+	top: 50%;
+	width: 44px;
+	height: 44px;
+	border: none;
+	border-radius: 50%;
+	background: white;
+	background: hsla(0, 0%, 100%, 0.75);
+	cursor: pointer;
+	/* vertically center */
+	-webkit-transform: translateY(-50%);
+	-ms-transform: translateY(-50%);
+	transform: translateY(-50%);
+}
+
+.flickity-prev-next-button:hover { background: white; }
+
+.flickity-prev-next-button:focus {
+	outline: none;
+	box-shadow: 0 0 0 5px #09F;
+}
+
+.flickity-prev-next-button:active {
+	filter: alpha(opacity=60); /* IE8 */
+	opacity: 0.6;
+}
+
+.flickity-prev-next-button.previous { left: 10px; }
+.flickity-prev-next-button.next { right: 10px; }
+/* right to left */
+.flickity-rtl .flickity-prev-next-button.previous {
+	left: auto;
+	right: 10px;
+}
+.flickity-rtl .flickity-prev-next-button.next {
+	right: auto;
+	left: 10px;
+}
+
+.flickity-prev-next-button:disabled {
+	filter: alpha(opacity=30); /* IE8 */
+	opacity: 0.3;
+	cursor: auto;
+}
+
+.flickity-prev-next-button svg {
+	position: absolute;
+	left: 20%;
+	top: 20%;
+	width: 60%;
+	height: 60%;
+}
+
+.flickity-prev-next-button .arrow {
+	fill: #333;
+}
+
+/* color & size if no SVG - IE8 and Android 2.3 */
+.flickity-prev-next-button.no-svg {
+	color: #333;
+	font-size: 26px;
+}
+
+/* ---- page dots ---- */
+
+.flickity-page-dots {
+	position: absolute;
+	width: 100%;
+	bottom: -25px;
+	padding: 0;
+	margin: 0;
+	list-style: none;
+	text-align: center;
+	line-height: 1;
+}
+
+.flickity-rtl .flickity-page-dots { direction: rtl; }
+
+.flickity-page-dots .dot {
+	display: inline-block;
+	width: 10px;
+	height: 10px;
+	margin: 0 8px;
+	background: #333;
+	border-radius: 50%;
+	filter: alpha(opacity=25); /* IE8 */
+	opacity: 0.25;
+	cursor: pointer;
+}
+
+.flickity-page-dots .dot.is-selected {
+	filter: alpha(opacity=100); /* IE8 */
+	opacity: 1;
+}
+#scene {
+	position: absolute; 
+	transition: 0.2s margin-left, 0.2s opacity;
+	top: 0; 
+	left: 0;
+	width: 100%; 
+	height: 100%;
+	cursor: -webkit-grab; 
+	cursor: -moz-grab;
+	cursor: grab;
+}
+#scene:active {
+	cursor: -webkit-grabbing; 
+	cursor: -moz-grabbing;
+}
+
+nav {
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	z-index:6;
+	color:black;
+	font-size:0.8em;
+	text-transform: uppercase;
+	display: table;
+	background: white;
+	height:100vh;
+	position: fixed;
+	width: 160px;
+	left:0;
+	opacity:0.8;
+	-moz-transform: translateX(-160px) scale(0.7, 1) skewY(-5deg);
+	-webkit-transform: translateX(-160px) scale(0.7, 1) skewY(-5deg);
+	transform: translateX(-160px) scale(0.7, 1) skewY(-5deg);
+	-moz-transition: 0.2s -webkit-transform, 0.4s opacity;
+	-webkit-transition: 0.2s -webkit-transform, 0.4s opacity;
+	transition: 0.2s transform, 0.4s opacity;
+}
+.toplogo {
+	width:130px;
+	margin: 55px 7px 0px 7px;
+	opacity: 0.8;
+	margin-bottom: 0.6em;
+	border-top: 1px solid #222;
+	padding-top: 10px;
+}
+.toplogo:hover {
+	cursor:pointer;
+	opacity:1;
+}
+.menuActive nav {
+	opacity:1;
+	-moz-transform:translateX(0%)scale(1)skewY(0deg);
+	-webkit-transform:translateX(0%)scale(1)skewY(0deg);
+	transform:translateX(0%)scale(1)skewY(0deg);
+}
+
+nav .top, nav .middle, nav .bottom {
+	display: table-row;
+	width: 100%;
+	overflow:hidden;
+}
+
+nav .top {
+	background: ghostwhite;
+}
+
+nav .top .cat:first-child {
+	margin-top:30px;
+}
+nav .middle {
+	background: #ddd;
+}
+
+nav .bottom {
+	width: 100%;
+	background: #44D3D3;
+}
+nav a {
+	text-decoration:none;
+	display:inline-block;
+	width:100%;
+	color:black;
+}
+
+nav .cat:hover {
+	cursor:pointer;
+	background:#eee;
+}
+
+
+nav a.active:hover {
+	cursor:default;
+}
+nav .cat {
+	padding: 3px 0 3px 10px;
+}
+
+nav .cat.active {
+	cursor: default;
+	display: inline-block;
+	font-family: 'BellGothic-Bold';
+}
+nav .top .cat.active:hover {
+	background:transparent;
+}
+
+.middle .cat.active, .bottom .cat.active {
+	background:#eee;
+	width:100%;
+	font-family: 'BellGothic-Light';
+}
+
+nav .sub {
+	display:inline;
+	overflow:hidden;
+	max-height:0;
+	transition:0.7s max-height linear;
+	width:100%;
+}
+
+nav .sub.active {
+	display: inline-block;
+	max-height:180px;
+}
+
+nav .sub a {
+	height:0;
+	max-height:0;
+	position:absolute;
+	display:inline-block;
+	overflow:hidden;
+	width:0;
+	opacity:0;
+	cursor:pointer;
+	float: left;
+	-moz-transform:translateY(-5px)scale(0.7, 0.9)skew(30deg);
+	-webkit-transform:translateY(-5px)scale(0.7, 0.9)skew(30deg);
+	transform:translateY(-5px)scale(0.7, 0.9)skew(30deg);
+	-moz-transition:0.7s -moz-transform linear, 0.2s opacity ease-in, 0.4s max-height linear;
+	-webkit-transition:0.7s -webkit-transform linear, 0.2s opacity ease-in, 0.4s max-height linear;
+	transition:0.7s transform linear, 0.2s opacity ease-in, 0.4s max-height linear;
+}
+
+nav .sub a:nth-child(1) {
+	transition:0.2s transform linear, 0.2s opacity ease-in, 0.4s max-height linear;
+}
+
+nav .sub a:nth-child(2) {
+	transition:0.4s transform linear, 0.4s opacity ease-in, 0.4s max-height linear;
+}
+nav .sub a:nth-child(3) {
+	transition:0.6s transform linear, 0.6s opacity ease-in, 0.4s max-height linear;
+}
+
+nav .sub a:nth-child(4) {
+	transition:0.8s transform linear, 0.8s opacity ease-in, 0.4s max-height linear;
+}
+nav .sub a:nth-child(5) {
+	transition:1s transform linear, 1s opacity ease-in, 0.4s max-height linear;
+}
+
+nav .sub a:nth-child(6) {
+	transition:1.1s transform linear, 1.1s opacity ease-in, 0.4s max-height linear;
+}
+
+nav .sub a:nth-child(7) {
+	transition:1.2s transform linear, 1.2s opacity ease-in, 0.4s max-height linear;
+}
+
+nav .sub a:nth-child(8) {
+	transition:1.3s transform linear, 1.3s opacity ease-in, 0.4s max-height linear;
+}
+
+nav .sub a:nth-child(9) {
+	transition:1.4s transform linear, 1.4s opacity ease-in, 0.4s max-height linear;
+}
+
+nav .sub a:nth-child(10) {
+	transition:1.5s transform linear, 1.5s opacity ease-in, 0.4s max-height linear;
+}
+
+nav .sub a:nth-child(11) {
+	transition:1.6s transform linear, 1.6s opacity ease-in, 0.4s max-height linear;
+}
+
+
+nav .sub.active a {
+	height:auto;
+	position:relative;
+	width:100%;
+	max-height:40px;
+	padding: 3px 0 5px 20px;
+	opacity:1;
+	-webkit-transform:translateY(0)scale(1)skew(0deg);
+	-moz-transform:translateY(0)scale(1)skew(0deg);
+	transform:translateY(0)scale(1)skew(0deg);
+}
+
+nav a.active, nav .sub a:hover {
+	text-decoration:none;
+	background:#eee;
+	color:black;
+}
+
+.entry {
+	color: #333;
+	float: left;
+	padding: 40px 20px;
+	border-bottom: 0;
+	margin-bottom: 2em;
+	display: inline-block;
+	width: 80%;
+	width: calc(87% - 80px);
+	margin-left: 160px;	
+}
+.entry h1{
+	margin-bottom: 1.2em;
+	border-bottom: 1px solid;
+	font-size: 0.6em;
+	letter-spacing:0.1em;
+}
+.entry span{
+	float: left;
+	width: 100%;
+}
+
+.postname {
+	border-bottom: 1px solid #999;
+	padding: 20px 0px 0.6em 2px;
+	margin-bottom: 1em;
+	font-size: 1em;
+}
+
+
+.credit {
+	margin: 4em 0px 0px 0px;
+	padding: 11px 0px;
+	border-top: 1px solid;
+	float: left;
+	width: 100%;
+	color: #909090;
+}
+
+.credit a {
+	display:inline-block;
+	opacity:0.9;
+}
+.credit a:hover {
+	opacity:1;
+}
+
+.credit a img {
+	width:18px;
+}
+
+.mx-object3d .image{
+	box-shadow:5px -10px 20px rgba(0,0,0,0.1);
+}
+
+
+.entry h1 {
+	margin-bottom: 10px;
+	border-bottom: 0px solid;
+
+}
+
+.entry span div.content {
+	max-width:100%;
+	font-size: 0.8em;
+	line-height: 1.5em;
+	float:left;
+	padding-top:20px;
+	border-top:1px solid #999;
+	width:100%;
+	-webkit-column-count: 3;
+	-moz-column-count: 3;
+	column-count: 3;
+}
+.entry span div.content div {
+	width:50%;
+	-webkit-column-count: 3;
+	-moz-column-count: 3;
+	column-count: 3;
+}
+
+
+#scene_container {
+	position: absolute; 
+	top: 0; 
+	left: 0;
+	width: 100%; 
+	height: 100%;
+	overflow: hidden;
+}
+#entry_container {
+	position: absolute; 
+	top: 0; left: 0;
+	height: 100%;
+	overflow: auto;
+	transition: left 0.2s linear, opacity 0.2s;
+	width: 100%;
+}
+
+
+.entry.page img{
+	max-width:100%;
+	max-height: 420px;
+}
+
+.gallery {
+	width: 100%;
+	height: 60vh;
+	overflow: hidden;
+	float:left;
+	display:inline-block;
+	cursor: url(images/next.png), auto!important;
+	background: url(images/dither.gif);
+}
+.cell {
+	display:inline-block;
+	height:100%;
+	cursor: url(images/next.png), auto!important;
+}
+.cell.video {
+	width: 80%;
+	background-size: cover;
+	background-position: center center;
+}
+.cell.video.playing {
+	background: black !important;
+}
+.cell.video.playing .play {
+	display: none;
+}
+.cell.video .play {
+	background-image: url(images/play-button2.png);
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center center;
+	position: absolute;
+	cursor: pointer !important;
+	top: 50%;
+	left: 50%;
+	-webkit-transform: translateX(-50%) translateY(-50%);
+	transform: translateX(-50%) translateY(-50%);
+	width: 100px;
+	height: 100px;
+	opacity: 0.7;
+	z-index: 4;
+}
+.cell.video .play:hover {
+	opacity: 1.0;
+}
+.cell iframe {
+	width: 100%;
+	height: 100%;
+	opacity:0.2;
+	-webkit-transition:0.4s opacity ease-in;
+	transition:0.4s opacity ease-in;
+	pointer-events: none; 
+}
+.cell iframe {
+  height: 200%;
+  -webkit-transform: translateY(-25%);
+  transform: translateY(-25%);
+}
+.fullscreen {
+	text-align: right;
+}
+
+:-webkit-full-screen #okgallery {
+  width: 100%;
+  height: 100%;
+}
+
+.gallery:fullscreen,
+*:-webkit-full-screen .gallery,
+*:fullscreen .gallery {
+  width: 100%;
+  height: 100%;
+}
+
+:-webkit-full-screen #okgallery {
+  width: 100%;
+  height: 100%;
+}
+.full-screen #okgallery {
+  width: 100%;
+  height: 100%;
+}
+:-webkit-full-screen .cell.video,
+.full-screen .cell.video {
+  width: 100%;
+}
+
+.caption {
+	background: rgb(223, 223, 223);
+	text-transform: uppercase;
+	float: left;
+	clear: both;
+	width: 100%;
+  padding: 2px;
+  font-size: 0.67em;
+  margin-bottom: 10px;
+}
+.caption:after {
+	content:"VIEW IN FULLSCREEN";
+	text-align:right;
+	float: right;
+	opacity:0.5;
+	cursor:pointer;
+}
+.caption:hover {
+	background:#222;
+	color:#222;
+	cursor:pointer;
+}
+.caption:hover::after {
+	color:white;
+	opacity:1;
+}
+.cell img {
+	max-height:100%;
+	opacity:0.0;
+	transition:0.4s opacity ease-in;
+}
+.cell img.loaded {
+  opacity: 0.2;
+}
+.cell.is-selected img, .cell.is-selected iframe {
+	opacity:1;
+	pointer-events: auto; 
+}
+.cell .mask {
+	z-index: 2;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0; left: 0;
+}
+.cell.playing .mask {
+	pointer-events: none;
+}
+.logo {
+	position: fixed;
+	right: 10px;
+	bottom: 10px;
+	width: 6%;
+	max-width:120px;
+	min-width: 45px;
+} 
+.logo img {
+	width:100%;
+}
+.toggleRapper {
+	width: 50px;
+	position: fixed;
+	top: 0;
+	left: 0;
+	padding: 25px 4px;
+	z-index: 5555;
+	cursor: pointer;
+	height: 20px;
+}
+.menuToggle {
+	display:block;
+	height:3px;
+	width:30px;
+	background:black;
+	position:relative;
+	cursor: pointer;
+	transition:all 0.2s;
+}
+.menuToggle:before {
+	content:'';
+	position:absolute;
+	top:-10px;
+	width:30px;
+	height:3px;
+	background:#000;
+	transition:all 0.2s;
+}
+.menuToggle:after {
+	content:'';
+	position:absolute;
+	top:10px;
+	width:30px;
+	height:3px;
+	background:#000;
+	transition:all 0.2s;
+}
+.menuActive .menuToggle {
+	background:transparent;
+}
+
+.menuActive .menuToggle:before {
+	-webkit-transform:rotate(45deg);
+	-moz-transform:rotate(45deg);
+	transform:rotate(45deg);
+	top:0;
+}
+
+.menuActive .menuToggle:after {
+	-webkit-transform:rotate(-45deg);
+	-moz-transform:rotate(-45deg);
+	transform:rotate(-45deg);
+	top:0;
+}
+
+.project {
+  float: left;
+  width: 33.33333%;
+  height: 220px;
+  padding: 10px;
+  cursor: pointer;
+  opacity: 0.0;
+  font-size: 0.8em;
+  max-width: 300px;
+	transition: 0.1s opacity ease-in;
+	transition-delay:0.4s;
+}
+.ready .project:hover {
+	opacity: 1.0;
+}
+.project img {
+	width: 100%;
+}
+.ready .project {
+  opacity: 0.8;
+}
+.done.ready .project {
+  transition-delay: 0;
+}
+.project:nth-child(1) {
+	transition-delay:0.05s;
+}
+.project:nth-child(2) {
+	transition-delay:0.1s;
+}
+.project:nth-child(3) {
+	transition-delay:0.15s;
+}
+.project:nth-child(4) {
+	transition-delay:0.2s;
+}
+.project:nth-child(5) {
+	transition-delay:0.25s;
+}
+.project:nth-child(6) {
+	transition-delay:0.3s;
+}
+.project:nth-child(7) {
+	transition-delay:0.35s;
+}
+
+#entry_container.visible {
+	top: 0%;
+}
+
+.postname, .gallery, .mainimg, .caption, .content, .credit {
+	-webkit-transform-origin: 100% 10%;
+	transform-origin: 100% 10%;
+	-webkit-transform: rotateY(90deg) ;
+	transform: rotateY(90deg);
+}
+.ready .postname, .ready .gallery, .ready .mainimg, .ready .caption, .ready .content, .ready .credit {
+	-webkit-transform: rotateY(0deg);
+	transform: rotateY(0deg);
+}
+
+.postname {
+	-webkit-transition: -webkit-transform 0.2s;
+	transition: transform 0.2s;
+	-webkit-transition-delay: 0.0s;
+	transition-delay: 0.0s;
+}
+.gallery, .mainimg {
+	-webkit-transition: -webkit-transform 0.2s;
+	transition: transform 0.1s;
+	-webkit-transition-delay: 0.1s;
+	transition-delay: 0.1s;
+}
+.caption {
+	-webkit-transition: -webkit-transform 0.2s;
+	transition: transform 0.2s;
+	-webkit-transition-delay: 0.2s;
+	transition-delay: 0.2s;
+}
+.content {
+	-webkit-transition: -webkit-transform 0.2s;
+	transition: transform 0.2s;
+	-webkit-transition-delay: 0.3s;
+	transition-delay: 0.3s;
+}
+.credit {
+	-webkit-transition: -webkit-transform 0.2s;
+	transition: transform 0.2s;
+	-webkit-transition-delay: 0.4s;
+	transition-delay: 0.4s;
+}
+
+
+
+@media (max-width:1200px) {
+	.entry span div.content {
+		-webkit-column-count: 2;
+		-moz-column-count: 2;
+		column-count: 2;
+	}
+
+}
+
+@media (max-width:600px) {
+	.entry span div.content {
+		-webkit-column-count: 1;
+		-moz-column-count: 1;
+		column-count: 1;
+	}
+	#entry_container .entry {
+		width:100%;
+		margin-left:0;
+	}
+	.logo img {
+		width:50px;
+	}
+	.gallery{
+		height:37vh;
+	}
+	.caption:after {
+		content:"";
+	}
+	.project {
+	  width: 100%;
+	  padding: 0 0 0 25px;
+	  height: 260px;
+	}
+	.menuActive #entry_container {
+		left:160px;
+	}
+	body{
+		  font-size: 18px;
+	}
+}
+.mobile .cell iframe {
+	position: fixed; /* REALLY WEIRD, vimeo won't play without this! */
+	width: 80%;
+	opacity:0.2;
+	transition:0.4s opacity ease-in;
+	z-index: 2;
+}