1 files changed, 396 insertions, 74 deletions

diff --git a/site/public/assets/style.css b/site/public/assets/style.css
index 2ca71b4..2cd2d29 100644
--- a/site/public/assets/style.css
+++ b/site/public/assets/style.css
@@ -113,7 +113,7 @@ cursor: grabbing;
 	transform: translateY(-50%);
 }
 
-.flickity-prev-next-button:hover { background: white; }
+.desktop .flickity-prev-next-button:hover { background: white; }
 
 .flickity-prev-next-button:focus {
 	outline: none;
@@ -208,6 +208,24 @@ cursor: grabbing;
 	cursor: -moz-grabbing;
 }
 
+#loader_rapper {
+  -webkit-transition: 0.3s opacity !important;
+  transition: 0.3s opacity !important;
+  opacity: 1.0;
+}
+#loader_rapper.hidden {
+  opacity: 0;
+}
+#loader_svg {
+  position: absolute;
+  left: 2.5%;
+  top: 30%;
+  height: 40%;
+  width: 95%;
+}
+#loader_svg svg {
+  width: 100%; height: 100%;
+}
 nav {
 	-moz-user-select: none;
 	-webkit-user-select: none;
@@ -238,7 +256,7 @@ nav {
 	border-top: 1px solid #222;
 	padding-top: 10px;
 }
-.toplogo:hover {
+.desktop .toplogo:hover {
 	cursor:pointer;
 	opacity:1;
 }
@@ -267,8 +285,9 @@ nav .middle {
 }
 
 nav .bottom {
+  height: 22%;
 	width: 100%;
-	background: #44D3D3;
+	background: #ddd;
 }
 nav a {
 	text-decoration:none;
@@ -276,14 +295,33 @@ nav a {
 	width:100%;
 	color:black;
 }
+.contact {
+  line-height: 14px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 10px;
+  margin-top: 10px;
+  vertical-align: bottom;
+}
+.contact a {
+  display: inline;
+}
 
-nav .cat:hover {
+
+
+.desktop nav .cat.about,
+.desktop nav .cat.hover,
+.desktop nav .cat:hover {
 	cursor:pointer;
 	background:#eee;
 }
-
-
-nav a.active:hover {
+nav .cat.no-hover {
+  opacity: 0.3;
+}
+.nav .cat.about {
+	  background: #E5E5E7;
+}
+.desktop nav a.active:hover {
 	cursor:default;
 }
 nav .cat {
@@ -295,7 +333,7 @@ nav .cat.active {
 	display: inline-block;
 	font-family: 'BellGothic-Bold';
 }
-nav .top .cat.active:hover {
+.desktop nav .top .cat.active:hover {
 	background:transparent;
 }
 
@@ -315,7 +353,7 @@ nav .sub {
 
 nav .sub.active {
 	display: inline-block;
-	max-height:180px;
+	max-height: 450px;
 }
 
 nav .sub a {
@@ -383,7 +421,7 @@ nav .sub.active a {
 	height:auto;
 	position:relative;
 	width:100%;
-	max-height:40px;
+	max-height:70px;
 	padding: 3px 0 5px 20px;
 	opacity:1;
 	-webkit-transform:translateY(0)scale(1)skew(0deg);
@@ -391,7 +429,7 @@ nav .sub.active a {
 	transform:translateY(0)scale(1)skew(0deg);
 }
 
-nav a.active, nav .sub a:hover {
+.desktop nav a.active, nav .sub a:hover {
 	text-decoration:none;
 	background:#eee;
 	color:black;
@@ -406,7 +444,12 @@ nav a.active, nav .sub a:hover {
 	display: inline-block;
 	width: 80%;
 	width: calc(87% - 80px);
-	margin-left: 160px;	
+	margin-left: 180px;	
+}
+.entry.all {
+/* 
+	width: 90%;
+ */
 }
 .entry h1{
 	margin-bottom: 1.2em;
@@ -422,13 +465,39 @@ nav a.active, nav .sub a:hover {
 .postname {
 	border-bottom: 1px solid #999;
 	padding: 20px 0px 0.6em 2px;
-	margin-bottom: 1em;
+	margin-bottom: 0.7em;
 	font-size: 1em;
+	text-transform: uppercase;
+}
+
+
+.galnav {
+	display: inline-block;
+  width: 100%;
+  float: left;
+  clear: both;
 }
 
+.galnav span{
+  width: 50%;
+  background: #999;
+  color: white;
+  padding: 2px;
+  font-size: 11px;
+	transition:0.2s background;
+}
+.galnav .nextbutton{
+	text-align: right;
+  background: #888;
+	cursor:pointer;
+}
+.desktop .galnav span:hover {
+	background:black;
+}
+.singleton .galnav { display: none }
 
 .credit {
-	margin: 4em 0px 0px 0px;
+	margin: 1em 0px 0px 0px;
 	padding: 11px 0px;
 	border-top: 1px solid;
 	float: left;
@@ -436,18 +505,16 @@ nav a.active, nav .sub a:hover {
 	color: #909090;
 }
 
-.credit a {
+.credit img {
 	display:inline-block;
 	opacity:0.9;
+	cursor: pointer;
+	width: 18px;
 }
-.credit a:hover {
+.desktop .credit img:hover {
 	opacity:1;
 }
 
-.credit a img {
-	width:18px;
-}
-
 .mx-object3d .image{
 	box-shadow:5px -10px 20px rgba(0,0,0,0.1);
 }
@@ -467,15 +534,27 @@ nav a.active, nav .sub a:hover {
 	padding-top:20px;
 	border-top:1px solid #999;
 	width:100%;
+/* 
 	-webkit-column-count: 3;
 	-moz-column-count: 3;
 	column-count: 3;
+  min-height: 130px;
+ */
+}
+.entry span div.content.noline {
+	border-top: 0;
+	padding-top: 0;
 }
 .entry span div.content div {
+/* 
+  min-height: 130px;
+ */
 	width:50%;
+/* 
 	-webkit-column-count: 3;
 	-moz-column-count: 3;
 	column-count: 3;
+ */
 }
 
 
@@ -504,23 +583,34 @@ nav a.active, nav .sub a:hover {
 
 .gallery {
 	width: 100%;
-	height: 60vh;
+	height: 70vh;
 	overflow: hidden;
 	float:left;
 	display:inline-block;
 	cursor: url(images/next.png), auto!important;
-	background: url(images/dither.gif);
+	background: white;
+}
+.singleton .gallery,
+.singleton .cell {
+	cursor: pointer !important;
 }
 .cell {
 	display:inline-block;
 	height:100%;
 	cursor: url(images/next.png), auto!important;
 }
+.gallery.prev,
+.gallery.prev .cell {
+	cursor: url(images/prev.png), auto!important;
+}
 .cell.video {
 	width: 80%;
 	background-size: cover;
 	background-position: center center;
 }
+.singleton .cell.video {
+  width: 100%;
+}
 .cell.video.playing {
 	background: black !important;
 }
@@ -542,8 +632,12 @@ nav a.active, nav .sub a:hover {
 	height: 100px;
 	opacity: 0.7;
 	z-index: 4;
+  pointer-events: none;
 }
-.cell.video .play:hover {
+.desktop .cell.video.is-selected .play {
+  pointer-events: auto;
+}
+.desktop .cell.video .play:hover {
 	opacity: 1.0;
 }
 .cell iframe {
@@ -553,12 +647,26 @@ nav a.active, nav .sub a:hover {
 	-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%);
+ */
 }
+.cell .underlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+	width: 100%;
+	height:100%;
+	opacity:0.2;
+	-webkit-transition:0.4s opacity ease-in;
+	transition:0.4s opacity ease-in;
+	pointer-events: none; 
+  background-size: cover;
+  background-position: center center;
+}
+
 .fullscreen {
 	text-align: right;
 }
@@ -595,50 +703,63 @@ nav a.active, nav .sub a:hover {
 	clear: both;
 	width: 100%;
   padding: 2px;
-  font-size: 0.67em;
+  font-size: 0.77em;
   margin-bottom: 10px;
 }
 .caption:after {
 	content:"VIEW IN FULLSCREEN";
-	text-align:right;
-	float: right;
-	opacity:0.5;
+	text-align: left;
+	float: left;
+	opacity: 1.0;
 	cursor:pointer;
 }
-.caption:hover {
+.msie .entry .caption {
+  display: none;
+}
+.desktop .caption:hover {
 	background:#222;
 	color:#222;
 	cursor:pointer;
 }
-.caption:hover::after {
+.desktop .caption:hover::after {
 	color:white;
 	opacity:1;
 }
 .cell img {
-	max-height:100%;
+	height:100%;
 	opacity:0.0;
 	transition:0.4s opacity ease-in;
 }
+
+.cell img.loading {
+  opacity: 0.0 !important;
+}
 .cell img.loaded {
   opacity: 0.2;
 }
-.cell.is-selected img, .cell.is-selected iframe {
+.cell.is-selected .underlay,
+.cell.is-selected img.loaded,
+.cell.is-selected iframe {
 	opacity:1;
 	pointer-events: auto; 
 }
-.cell .mask {
+.cell .underlay {
 	z-index: 2;
 	width: 100%;
 	height: 100%;
 	position: absolute;
 	top: 0; left: 0;
 }
-.cell.playing .mask {
+.cell.loaded .underlay {
+  background-image: none !important;
+}
+.cell.playing .underlay {
 	pointer-events: none;
+	opacity: 0;
 }
 .logo {
 	position: fixed;
-	right: 10px;
+  right: 2%;
 	bottom: 10px;
 	width: 6%;
 	max-width:120px;
@@ -647,6 +768,10 @@ nav a.active, nav .sub a:hover {
 .logo img {
 	width:100%;
 }
+.loading .logo,
+.loading .toggleRapper {
+  display: none;
+}
 .toggleRapper {
 	width: 50px;
 	position: fixed;
@@ -702,51 +827,161 @@ nav a.active, nav .sub a:hover {
 	top:0;
 }
 
+.entry .brady {
+  width: 72vw;
+}
+.brady {
+  display: block;
+}
+.brady > a {
+  width: 18vw; height: 18vw;
+  background-size: cover;
+  background-position: center center;
+  position: relative;
+  display: block;
+  float: left;
+}
+.brady div {
+  width: 100%;
+  position: relative;
+  display: block;
+  float: left;
+  padding: 1em 0.5em 1em 0vw;
+  font-size: 0.8em;
+  line-height: 1.5em;
+  border-bottom: 1px solid black;
+  margin: 1em 0;
+  font-family: 'BellGothic-Bold';
+}
+.brady div.aboutcontent { border: 0; }
+.aboutcontenttext { display: none }
+.brady div.collabscontent {
+  border-top: 1px solid black;
+}
+.brady div.contactcontent {
+  margin-top: 0;
+  padding-top: 0;
+}
+.all .contactcontent {
+  width: 100%;
+  clear: both;
+  position: relative;
+  top: 1em;
+  margin-left: 10px;
+  padding: 1em 0;
+  font-size: 0.8em;
+  line-height: 1.5em;
+  border-bottom: 1px solid black;
+  border-top: 1px solid black;
+}
+.desktop .brady > a:hover:after {
+  content: 'SAY HELLO!';
+  position: absolute;
+  top: 40%;
+  left: 0;
+  text-decoration: underline;
+  text-align: center;
+  font-size: 22px;
+  width: 100%;
+}
+.brady span {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background: white;
+  opacity: 0;
+  color: black;
+  margin-top: -4px;
+  font-size: 0.8em;
+  line-height: 1.5em;
+  padding: 2px 0 1px 2px;
+  
+	transition: 0.1s opacity ease-in;
+  display: block;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+}
+.desktop .brady > a:hover span {
+  opacity: 1;
+}
+
 .project {
   float: left;
-  width: 33.33333%;
-  height: 220px;
-  padding: 10px;
+  width: 25%;
+  width: 19vw;
+	height: 200px;
+  height: 12.3vw;
+  padding: 10px 0px 0 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 {
+.desktop .ready .project:hover {
 	opacity: 1.0;
 }
+.msie .project {
+  opacity: 1.0 !important;
+}
+.entry.hover .project { opacity: 0.5 }
+.entry.hover .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;
+.ready .project {
+  -webkit-transition-delay: 0s !important;
+  transition-delay: 0s !important;
 }
-.project:nth-child(6) {
-	transition-delay:0.3s;
+.project span {
+  position: relative;
+  top: -19px;
+  background: white;
+  opacity: 0;
+	transition: 0.1s opacity ease-in;
+  display: block;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
 }
-.project:nth-child(7) {
-	transition-delay:0.35s;
+.mobile .project span,
+.desktop .project:hover span,
+.msie .project span {
+  opacity: 1;
 }
+.undone .project:nth-child(1) { transition-delay:0.05s; }
+.undone .project:nth-child(2) { transition-delay:0.1s; }
+.undone .project:nth-child(3) { transition-delay:0.15s; }
+.undone .project:nth-child(4) { transition-delay:0.2s; }
+.undone .project:nth-child(5) { transition-delay:0.25s; }
+.undone .project:nth-child(6) { transition-delay:0.3s; }
+.undone .project:nth-child(7) { transition-delay:0.35s; }
+.undone .project:nth-child(8)  { transition-delay:0.4s; }
+.undone .project:nth-child(9)  { transition-delay:0.45s; }
+.undone .project:nth-child(10) { transition-delay:0.5s; }
+.undone .project:nth-child(11) { transition-delay:0.55s; }
+.undone .project:nth-child(12) { transition-delay:0.6s; }
+.undone .project:nth-child(13) { transition-delay:0.65s; }
+.undone .project:nth-child(14) { transition-delay:0.7s; }
+.undone .project:nth-child(15) { transition-delay:0.75s; }
+.undone .project:nth-child(16) { transition-delay:0.8s; }
+.undone .project:nth-child(17) { transition-delay:0.85s; }
+.undone .project:nth-child(18) { transition-delay:0.9s; }
+.undone .project:nth-child(19) { transition-delay:0.95s; }
+.undone .project:nth-child(20) { transition-delay:1.00s; }
+.undone .project:nth-child(21) { transition-delay:1.05s; }
+.undone .project:nth-child(22) { transition-delay:1.1s; }
+.undone .project:nth-child(23) { transition-delay:1.15s; }
+.undone .project:nth-child(24) { transition-delay:1.2s; }
+.undone .project:nth-child(25) { transition-delay:1.25s; }
+.undone .project:nth-child(26) { transition-delay:1.3s; }
+.undone .project:nth-child(27) { transition-delay:1.35s; }
+.undone .project:nth-child(28) { transition-delay:1.4s; }
+.undone .project:nth-child(29) { transition-delay:1.45s; }
+.undone .project:nth-child(30) { transition-delay:1.50s; }
 
 #entry_container.visible {
 	top: 0%;
@@ -795,26 +1030,42 @@ nav a.active, nav .sub a:hover {
 }
 
 
-
 @media (max-width:1200px) {
-	.entry span div.content {
-		-webkit-column-count: 2;
-		-moz-column-count: 2;
-		column-count: 2;
+	.project {
+		width:33.3333%;
+    height: 16.6vw;
+	}
+  .brady > a {
+    width: 24vw; height: 24vw;
+  }
+  .brady > a:nth-child(3) {
+    margin-right: 0vw;
+  }
+}
+
+@media (max-width:900px) {
+	.project {
+		width:50%;
+    height: 23vw;
 	}
 
 }
 
 @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;
 	}
+	.flickity-viewport {
+	  height: 37vh;
+	}
 	.logo img {
 		width:50px;
 	}
@@ -827,19 +1078,90 @@ nav a.active, nav .sub a:hover {
 	.project {
 	  width: 100%;
 	  padding: 0 0 0 25px;
-	  height: 260px;
+	  height: 55vw;
 	}
 	.menuActive #entry_container {
+		left:120px;
+	}
+  #scene {
+    -webkit-transition: left 0.2s;
+    transition: left 0.2s;
+  }
+	.menuActive #scene {
 		left:160px;
 	}
-	body{
-		  font-size: 18px;
+	body {
+		font-size: 18px;
+	}
+	nav {
+	  font-size: 0.6em;
+	  width: 120px;
+	}
+	nav .bottom {
+    height: 27%;
+  }
+  nav .sub.active a {
+    padding: 2px 0 4px 20px;
+  }
+  nav .cat {
+    padding: 2px 0 2px 10px;
+  }
+  .contact {
+    margin-top: 6px;
+  }
+	.menuActive #entry_container .entry.all {
+    width:65%;
+	}
+	.menuActive .project {
+    height: 36vw;
+    text-transform: uppercase;
+    font-size:0.6em;
 	}
+	.menuActive .project span {
+    top: -18px;
+	}
+  .brady > a {
+    display: none;
+    width: 35vw; height: 35vw;
+  }
+  .brady {
+    width: 100%;
+  }
+  .brady span {
+    font-size: 13px !important;
+  }
+  .brady div {
+    width: 100%;
+    border: 0;
+    margin: 0.5em;
+    margin-left: 2em;
+    padding: 0;
+    font-size: 13px !important;
+  }
+  .brady > a:nth-child(3) {
+    margin-right: 0vw;
+  }
+  .brady span.aboutcontenttext {
+    position: static;  bottom: auto;  left: auto;
+    opacity: 1;
+    background: transparent;
+  }
+  .aboutcontent { display: block }
+  .aboutcontenttext { display: inline }
+  .aboutcontent img { display: none }
 }
+
+
 .mobile .cell iframe {
-	position: fixed; /* REALLY WEIRD, vimeo won't play without this! */
-	width: 80%;
-	opacity:0.2;
+	width: 100%;
+	opacity: 0.0!important;
 	transition:0.4s opacity ease-in;
-	z-index: 2;
+	z-index: 100;
+	height: 100%;
+	-webkit-transform: translateZ(0);
+	transform: translateZ(0);
+}
+.mobile .play {
+  pointer-events: none;
+  opacity: 1;
 }