merge

49 files changed, 4786 insertions, 406 deletions

diff --git a/bower.json b/bower.json
index ee8f9ba..faffbfb 100644
--- a/bower.json
+++ b/bower.json
@@ -7,6 +7,7 @@
     "momentjs": "~2.5.1",
     "lodash": "",
     "fiber": "",
-    "jquery-jsonview": "1.2.0"
+    "jquery-jsonview": "1.2.0",
+    "prefixfree": ""
   }
 }
diff --git a/public/assets/img/delete-cursor.png b/public/assets/img/delete-cursor.png
new file mode 100644
index 0000000..d7822c8
--- /dev/null
+++ b/public/assets/img/delete-cursor.png
diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js
index 1dd8a5e..a6b6088 100644
--- a/public/assets/javascripts/app.js
+++ b/public/assets/javascripts/app.js
@@ -15,6 +15,8 @@ else {
  $("html").addClass("desktop");
 }
 
+new WOW().init();
+
 var scene, cam, map;
 
 var app = new function(){}
diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index 669a7f4..c02c285 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -99,7 +99,20 @@ MX.Movements = function (cam) {
 						break
 
 					case 27:  // esc
-						map.toggle()
+					  if (Scenery.nextMedia) {
+					    Scenery.nextMedia = null
+              app.tube('cancel-scenery')
+					  }
+					  else if (Scenery.nextWallpaper) {
+					    Scenery.nextWallpaper = null
+              app.tube('cancel-wallpaper')
+					  }
+						else if (app.controller && app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) {
+						  app.controller.mediaViewer.hide()
+						}
+						else {
+              map && map.toggle && map.toggle()
+						}
 						break
 				}
 			})
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
index 82ccb87..f0cd558 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
@@ -46,6 +46,10 @@
 		  }
 		}
 		
+		base.find = function(id){
+		  return base.lookup[id]
+		}
+		
 		base.assign = function(list){
 		  base.list = list
 		  base.lookup = {}
diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js
index 7195fcc..5c7b4af 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/mover.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js
@@ -65,9 +65,7 @@ Rooms.mover = new function(){
 		// did we actually enter a room?
 		if (intersects.length) {
 			base.room = intersects[0]
-			base.room.mx_floor.forEach(function(w){ $(w.el).addClass("active") })
- 			base.room.mx_ceiling.forEach(function(w){ $(w.el).addClass("active") })
-			base.room.mx_walls.forEach(function(w){ $(w.el).addClass("active") })
+      app.tube("change-room", { room: base.room })
 		}
 
 	}
diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js
index 93bccb0..55d6ef1 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/move.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/move.js
@@ -142,7 +142,7 @@ Scenery.move = function(base){
 
 		if (editor.permissions.resize) {
 			Scenery.resize.rotate_dots()
-// 			Scenery.resize.move_dots()
+ 			Scenery.resize.move_dots()
 		}
 
 		cursor.x.a = cursor.x.b
diff --git a/public/assets/javascripts/rectangles/engine/scenery/randomize.js b/public/assets/javascripts/rectangles/engine/scenery/randomize.js
new file mode 100644
index 0000000..4f1144a
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/scenery/randomize.js
@@ -0,0 +1,77 @@
+/*
+  // get the list of media we want to place
+  var media_data = $(".mediaContainer").toArray().map(function(el){
+    return $(el).data("media")
+  })
+  Scenery.randomize( media_data )
+*/
+
+Scenery.randomize = function (media_data) {
+  var media_list = media_data.map(function(media){
+    var width, height
+    if (media.width > media.height) {
+      width = Math.min(300, media.width)
+      height = media.height/media.width * width
+    }
+    else {
+      height = Math.min(300, media.height)
+      width = media.width/media.height * height
+    }
+    return {
+      dimensions: new vec2( width, height ),
+      media: media,
+    }
+  })
+
+  // get a list of all walls
+  var walls = {}
+  Walls.forEach(function(wall){
+    walls[wall.id] = wall
+  })
+
+  // remove the walls that already have stuff on them
+  Scenery.forEach(function(scenery){
+    delete walls[scenery.wall.id] 
+  })
+
+  var wall_ids = _.keys(walls)
+  if (! wall_ids.length) {
+    return
+  }
+
+  // randomize walls
+  shuffle(wall_ids)
+
+  // assign each of the media to the walls, until we run out of either
+  media_list.some(function(media){
+    if (wall_ids.length == 0) {
+      return true
+    }
+  
+    var i, fits = -1
+
+    for (i = 0; i < wall_ids.length; i++) {
+      if (walls[wall_ids[i]].surface.fits(media.dimensions)) {
+        // walls[wall_ids[i]]
+        fits = i
+        break
+      }
+    }
+
+    if (fits != -1) {
+      var wall = walls[wall_ids[fits]]
+      wall_ids.splice(fits, 1)
+    
+      Scenery.add({
+        media: media.media,
+        wall: wall,
+        index: 0,
+      })
+    }
+    else {
+      // artwork won't fit anywhere??
+    }
+  
+    return false
+  })
+}
\ No newline at end of file
diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js
index e26c0a7..2ba84a1 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/resize.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js
@@ -31,7 +31,8 @@ Scenery.resize = new function(){
 	// generate a dot element
 	base.build_dot = function(side) {
 		var dot = new MX.Object3D('.dot')
-		dot.width = dot.height = dot_side
+		dot.width = dot.height = dot_side * 2
+		dot.scale = 0.5
 		dot.side = side
 		$(dot.el).on({
 			mouseenter: function(){ base.hovering = true },
@@ -121,11 +122,11 @@ Scenery.resize = new function(){
 			Scenery.mouse.bind_el(dot.el)
 			$(dot.el).bind({
 				mouseenter: function(e){
-					Scenery.resize.hovering = true 
+// 					Scenery.resize.hovering = true 
 				},
 				mouseleave: function(e){
-					Scenery.resize.hovering = false
-					base.defer_hide()
+// 					Scenery.resize.hovering = false
+// 					base.defer_hide()
 				}
 			})
 		})
@@ -146,7 +147,7 @@ Scenery.resize = new function(){
 	function down (e, cursor){
 		var selection = dots.filter(function(dot){return e.target == dot.el})
 		if (! selection.length) return
-		
+
 		selected_dot = selection[0]
 		dragging = true
 
@@ -195,6 +196,7 @@ Scenery.resize = new function(){
 	}
 
 	function up (e, cursor){
+    if (! dragging) return
 		dragging = false
 		selected_dot = null
 		if (! editor.permissions.resize) { return }
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
index 2dbae48..5eed53e 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
@@ -70,17 +70,17 @@ Scenery.types.base = Fiber.extend(function(base){
 		},
 
 		enter: function(e){
-			if (editor.permissions.resize) {
-				Scenery.resize.show(this)
-				Scenery.hovering = true
-			}
+// 			if (editor.permissions.resize) {
+// 				Scenery.resize.show(this)
+// 				Scenery.hovering = true
+// 			}
 		},
 	
 		leave: function(e){
-			if (editor.permissions.resize) {
-				Scenery.resize.defer_hide(this)
-				Scenery.hovering = false
-			}
+// 			if (editor.permissions.resize) {
+// 				Scenery.resize.defer_hide(this)
+// 				Scenery.hovering = false
+// 			}
 		},
 
 		serialize: function(){
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
index ef25d8d..76f32ac 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
@@ -4,8 +4,8 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
 	var exports = {
 	
 		init: function(opt){
-			opt.scale = opt.scale || 300 / max(300, opt.media.width)
-			
+			opt.scale = opt.scale || (opt.data && opt.data.scale) || 300 / max(300, opt.media.width)
+
 			base.init.call(this, opt)
 
 			this.build()
@@ -106,6 +106,8 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
 	
 		deserialize: function(data){
 			this.mx.move(data.position)
+			this.mx.ops.width = data.dimensions.a
+			this.mx.ops.height = data.dimensions.b
 		},
 	}
 	
diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js
index e5624a0..57a0886 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/undo.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js
@@ -10,6 +10,7 @@
       },
       redo: function(state){
         Scenery.deserialize([ state ])
+        Scenery.resize.show( scenery )
 
         // TODO: watch individual scenery object here
         Minotaur.watch( app.router.editorView.settings )
@@ -19,6 +20,7 @@
       type: "update-scenery",
       undo: function(state){
         var scenery = Scenery.find(state.id)
+        
         scenery.deserialize(state)
         scenery.set_wall(Walls.find( state.wall_id ))
         
@@ -48,6 +50,7 @@
       type: "destroy-scenery",
       undo: function(state){
         Scenery.deserialize([ state ])
+        Scenery.resize.show( scenery )
 
         // TODO: watch individual scenery object here
         Minotaur.watch( app.router.editorView.settings )
diff --git a/public/assets/javascripts/rectangles/models/surface.js b/public/assets/javascripts/rectangles/models/surface.js
index 53977c8..c85682a 100644
--- a/public/assets/javascripts/rectangles/models/surface.js
+++ b/public/assets/javascripts/rectangles/models/surface.js
@@ -36,7 +36,7 @@
 	Surface.prototype.fits = function(v){
 		var faces = this.faces
 		var scratch
-		if (this.bounds.x.b < v.a || this.bounds.y.b < v.b) {
+		if (this.bounds.width() < v.a || this.bounds.height() < v.b) {
 			return null
 		}
 		for (var i = 0; i < faces.length; i++) {
@@ -46,7 +46,7 @@
 		}
 		scratch = new Rect (0,0,0,0)
 		for (var i = 0; i < faces.length; i++) {
-			if (faces[i].y.length() < v.b) {
+			if (faces[i].height() < v.b) {
 				continue
 			}
 			scratch.x.a = faces[i].x.a
diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index 1a3ef7c..1b37aa0 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -64,7 +64,11 @@
             	e.stopPropagation()
             	return
             }
-					  
+
+            app.controller.toolbar.resetPermissions()
+            Scenery.resize.show(scenery)
+            Scenery.hovering = true 
+
   					UndoStack.push({
   					  type: 'create-scenery',
   					  undo: { id: scenery.id },
diff --git a/public/assets/javascripts/rectangles/util/minotaur.js b/public/assets/javascripts/rectangles/util/minotaur.js
index 0fcc766..4d9a795 100644
--- a/public/assets/javascripts/rectangles/util/minotaur.js
+++ b/public/assets/javascripts/rectangles/util/minotaur.js
@@ -4,7 +4,7 @@
     var base = this
     base.$el = $("#minotaur")
     base.timeout = null
-    base.delay = 1000
+    base.delay = 5000
     base.objects = {}
     
     base.init = function () {
diff --git a/public/assets/javascripts/rectangles/util/permissions.js b/public/assets/javascripts/rectangles/util/permissions.js
index 1b5a1b5..9e3ef4d 100644
--- a/public/assets/javascripts/rectangles/util/permissions.js
+++ b/public/assets/javascripts/rectangles/util/permissions.js
@@ -31,7 +31,7 @@ Permissions.prototype.add = function (key) {
 
 Permissions.prototype.remove = function (key) {	
 	var base = this
-	base[key] = true
+	base[key] = false
 }
 
 Permissions.prototype.clear = function () {	
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index 8a88f7a..eb0d044 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -65,6 +65,10 @@ var EditorSettings = FormView.extend({
 			
 			data.media && Scenery.deserialize(data.media)
 		}
+
+    app.on("rooms-built", function(){
+		  Walls.paint()
+		})
 	},
 	
 	showCollaborators: function(e){
@@ -109,7 +113,8 @@ var EditorSettings = FormView.extend({
 	toggle: function(state){
 	  var state = typeof state == 'boolean' ? state : ! this.$el.hasClass("active")
 		this.$el.toggleClass("active", state)
-
+		
+ 	  $(".inuse").removeClass("inuse")
 		$("[data-role='toggle-project-settings']").toggleClass("inuse", state)
 	},
 
diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index e91da0f..513306d 100644
--- a/public/assets/javascripts/ui/editor/EditorToolbar.js
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -6,11 +6,11 @@ var EditorToolbar = View.extend({
 		"click [data-role='toggle-map-view']": 'toggleMap',
 		"click [data-role='toggle-project-settings']": 'toggleSettings',
 		"click [data-role='open-media-viewer']": 'openMediaViewer',
-		"click [data-role='resize-media']": 'resizeMedia',
+// 		"click [data-role='resize-media']": 'resizeMedia',
 		"click [data-role='destroy-media']": 'destroyMedia',
 		"click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper',
 		"click [data-role='toggle-light-control']": 'toggleLightControl',
-		"click [data-role='edit-wall-text']": 'editWallText',
+		"click [data-role='toggle-text-editor']": 'toggleTextEditor',
 	},
 	
 	initialize: function(opt){
@@ -23,8 +23,8 @@ var EditorToolbar = View.extend({
 	},
 	
 	toggleSettings: function(){
-	  this.resetMode()
-	  $(".inuse").removeClass("inuse")
+// 	  this.resetMode()
+    this.parent.textEditor.hide()
 		this.parent.lightControl.hide()
 		this.parent.wallpaperPicker.hide()
 		this.parent.mediaEditor.hide()
@@ -37,38 +37,51 @@ var EditorToolbar = View.extend({
 		this.resetMode()
 		this.resetControls()
 	},
-	
+
 	resetMode: function(){
-		this.resizeMedia(false)
-		this.destroyMedia(false)
+		// this.resizeMedia(true)
+		// this.destroyMedia(false)
+ 	  $(".inuse").removeClass("inuse")
+		this.parent.hideExtras()
+		this.resetPermissions()
 	},
 	
 	resetControls: function(){
+	  $(".inuse").removeClass("inuse")
+    this.parent.textEditor.hide()
 		this.parent.wallpaperPicker.hide()
 		this.parent.lightControl.hide()
+		this.parent.settings.hide()
 	},
 	
-	resizeMedia: function(e, state){
-		this.resetControls()
-		if (! state && typeof e == "boolean") {
-			state = e
-			editor.permissions.assign("resize", state)
-		}
-		else {
-			state = editor.permissions.toggle("resize")
-		}
-		! state && editor.permissions.assign("move", true)
-		$(".inuse").removeClass("inuse")
-		$("[data-role='resize-media']").toggleClass("inuse", state)
-		if (state) {
-			if (this.parent.mediaEditor.scenery) {
-        Scenery.resize.show( this.parent.mediaEditor.scenery )
-      }
-		}
-		else {
-			Scenery.resize.hide()
-		}
+	resetPermissions: function(){
+    editor.permissions.add("pick")
+    editor.permissions.add("move")
+    editor.permissions.add("resize")
+    editor.permissions.remove("destroy")
 	},
+
+// 	resizeMedia: function(e, state){
+// 		this.resetControls()
+// 		if (! state && typeof e == "boolean") {
+// 			state = e
+// 			editor.permissions.assign("resize", state)
+// 		}
+// 		else {
+// 			state = editor.permissions.toggle("resize")
+// 		}
+// 		! state && editor.permissions.assign("move", true)
+// 		$(".inuse").removeClass("inuse")
+// 		$("[data-role='resize-media']").toggleClass("inuse", state)
+// 		if (state) {
+// 			if (this.parent.mediaEditor.scenery) {
+//         Scenery.resize.show( this.parent.mediaEditor.scenery )
+//       }
+// 		}
+// 		else {
+// 			Scenery.resize.hide()
+// 		}
+// 	},
 	
 	destroyMedia: function(e, state){
 		this.resetControls()
@@ -79,7 +92,12 @@ var EditorToolbar = View.extend({
 		else {
 			state = editor.permissions.toggle("destroy")
 		}
-		! state && editor.permissions.assign("move", true)
+		if (! state) {
+      this.resetPermissions()
+    }
+    else {
+      app.controller.hideExtras()
+		}
 		$(".inuse").removeClass("inuse")
 		$("[data-role='destroy-media']").toggleClass("inuse", state)
 		$("body").toggleClass("destroyActive", state)
@@ -91,6 +109,7 @@ var EditorToolbar = View.extend({
 		$("[data-role='toggle-wallpaper-panel']").toggleClass("inuse", state)
 		this.parent.mediaEditor.hide()
 		this.parent.lightControl.hide()
+    this.parent.textEditor.hide()
 		this.parent.settings.hide()
 		this.parent.wallpaperPicker.toggle(state)
 	},
@@ -101,12 +120,20 @@ var EditorToolbar = View.extend({
 		$("[data-role='toggle-light-control']").toggleClass("inuse", state)
 		this.parent.mediaEditor.hide()
 		this.parent.wallpaperPicker.hide()
+    this.parent.textEditor.hide()
 		this.parent.settings.hide()
 		this.parent.lightControl.toggle(state)
 	},
 	
-	editWallText: function(){
-	},
+	toggleTextEditor: function(){
+		var state = ! $("[data-role='toggle-text-editor']").hasClass("inuse")
+		this.resetMode()
+		$("[data-role='toggle-text-editor']").toggleClass("inuse", state)
+		this.parent.mediaEditor.hide()
+		this.parent.wallpaperPicker.hide()
+		this.parent.settings.hide()
+		this.parent.textEditor.toggle(state)
+  },
 
 })
 
@@ -114,7 +141,7 @@ var editor = new function(){
 	this.permissions = new Permissions({
 	  'pick': true,
 		'move': true,
-		'resize': false,
+		'resize': true,
 		'destroy': false,
 	})
 }
\ No newline at end of file
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index e11f189..83db532 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -16,6 +16,7 @@ var EditorView = View.extend({
 		this.mediaEditor = new MediaEditor ({ parent: this })
 		this.wallpaperPicker = new WallpaperPicker ({ parent: this })
 		this.lightControl = new LightControl ({ parent: this })
+		this.textEditor = new TextEditor ({ parent: this })
 		this.collaborators = new Collaborators ({ parent: this })
 	},
 
@@ -31,7 +32,7 @@ var EditorView = View.extend({
 	
 	ready: function(data){
 		$("#map").hide()
-		
+
 		this.settings.load(data)
 	},
 	
@@ -46,6 +47,8 @@ var EditorView = View.extend({
 	
 	hideExtras: function(){
 		this.mediaEditor.hide()
-	}
+    Scenery.resize.hide()
+		Scenery.hovering = false
+  }
 
 })
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index 9b20a43..e4f93df 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -3,7 +3,7 @@ var MediaEditor = FormView.extend({
 	el: "#mediaEditor",
 		
 	events: {
-		"keydown": 'stopPropagation',
+		"keydown": 'taint',
 		"focus [name]": "clearMinotaur",
 		"click [data-role=play-media]": "togglePaused",
 		"mousedown [name=keyframe]": "stopPropagation",
@@ -58,9 +58,16 @@ var MediaEditor = FormView.extend({
 		this.bind(scenery)
 		this.$el.addClass("active")
 		
+//     app.controller.toolbar.resetMode()
+    app.controller.toolbar.resetControls()
+		Scenery.resize.show(scenery)
+		Scenery.hovering = true
+		
 		var media = scenery.media
 		
-		this.$name.val(media.title)
+		console.log(media)
+		
+		this.$name.val(media.title || filenameFromUrl(media.url) )
 		this.$description.val(media.description)
 		this.setDimensions()
 		this.$units.val( "ft" )
@@ -98,12 +105,14 @@ var MediaEditor = FormView.extend({
 	seek: function(){
 		var n = parseFloat( this.$keyframe.val() )
 		this.scenery.seek(n)
+		this.tainted = true
 		
 		this.scenery.media.keyframe = n
 	},
 	setAutoplay: function(){
 		var checked = this.$autoplay.prop('checked')
 		this.scenery.media.autoplay = checked
+		this.tainted = true
 		if (checked && this.scenery.paused()) {
 			this.togglePaused()
 		}
@@ -111,17 +120,20 @@ var MediaEditor = FormView.extend({
 	setLoop: function(){
 		var checked = this.$loop.prop('checked')
 		this.scenery.setLoop(checked)
+		this.tainted = true
 	},
 	setMute: function(){
 		var checked = this.$mute.prop('checked')
 		this.scenery.media.mute = checked
 		this.scenery.mute(checked)
+		this.tainted = true
 	},
 
 	setDimensions: function(){
 	  if (! this.scenery) return
 		this.$width.unitVal( Number(this.scenery.naturalDimensions.a * this.scenery.scale) || "" )
 		this.$height.unitVal( Number(this.scenery.naturalDimensions.b * this.scenery.scale) || "" )
+		this.tainted = true
 	},
 	changeWidth: function(e){
 		e.stopPropagation()
@@ -137,6 +149,11 @@ var MediaEditor = FormView.extend({
 		app.units = this.$units.val()
 		this.$('.units').resetUnitVal()
 	},
+	
+	taint: function(e){
+	  e.stopPropagation()
+		this.tainted = true
+	},
 
 	bind: function(scenery){
 		this.scenery = scenery
@@ -145,7 +162,7 @@ var MediaEditor = FormView.extend({
 	},
 	
 	unbind: function(){
-	  if (this.scenery) {
+	  if (this.scenery && this.tainted) {
       this.scenery.media.title = this.$name.val()
       this.scenery.media.description = this.$description.val()
       Minotaur.watch( app.router.editorView.settings )
@@ -155,15 +172,17 @@ var MediaEditor = FormView.extend({
         this.scenery.mx.el.classList.remove("picked")
       }
     }
+    this.tainted = false
     this.scenery = null
 	},
 	
 	destroy: function(){
-		ConfirmModal.confirm("Are you sure you want delete to this media?", function(){
-			var scenery = this.scenery
-			this.hide()
-			Scenery.remove(scenery.id)
-		}.bind(this))
+// 		ConfirmModal.confirm("Are you sure you want delete this object?", function(){
+// 		}.bind(this))
+    var scenery = this.scenery
+    this.hide()
+    Scenery.remove(scenery.id)
+    Scenery.resize.hide()
 	},
 
 })
diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js
index 92cf2bd..971fb15 100644
--- a/public/assets/javascripts/ui/editor/MediaUpload.js
+++ b/public/assets/javascripts/ui/editor/MediaUpload.js
@@ -56,6 +56,7 @@ var MediaUpload = UploadView.extend({
 	add: function(media){
 		console.log(media)
 		this.parent.mediaViewer.add(media)
+    this.parent.mediaViewer.$deleteMedia.show()
 	},
 	
 	beforeUpload: function(){
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index 436c0cb..b51d8f2 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -3,6 +3,7 @@ var MediaViewer = ModalView.extend({
 	el: ".mediaDrawer.mediaViewer",
 	destroyAction: "/api/media/destroy",
 	usesFileUpload: true,
+	loaded: false,
 	
 	events: {
 		'click .foundToggle': "foundToggle",
@@ -14,30 +15,31 @@ var MediaViewer = ModalView.extend({
 	initialize: function(opt){
 		this.__super__.initialize.call(this)
 		this.parent = opt.parent
-		this.$foundMedia = this.$(".foundMedia")
 		this.$myMedia = this.$(".myMedia")
-		this.$foundToggle = this.$(".foundToggle")
 		this.$userToggle = this.$(".userToggle")
+		this.$foundMedia = this.$(".foundMedia")
+		this.$foundToggle = this.$(".foundToggle")
 		this.$deleteMedia = this.$("#deleteMedia")
-	},
+  },
 
 	foundToggle: function(){
-    this.foundMedia.addClass("active");
-    this.myMedia.addClass("inactive");
+    this.$foundMedia.addClass("active");
+    this.$myMedia.addClass("inactive");
     this.$("a").removeClass("active");
-    this.foundToggle.addClass("active");
+    this.$foundToggle.addClass("active");
 	},
 	
 	userToggle: function(){
-    this.foundMedia.removeClass("active");
-    this.myMedia.removeClass("inactive");
+    this.$foundMedia.removeClass("active");
+    this.$myMedia.removeClass("inactive");
     this.$("a").removeClass("active");
-    this.userToggle.addClass("active");
+    this.$userToggle.addClass("active");
 	},
 
 	show: function(){
 		if (! this.loaded) {
 			this.load()
+			this.loadTrending()
 		}
 		else {
 			this.__super__.show.call(this)
@@ -53,11 +55,55 @@ var MediaViewer = ModalView.extend({
 	load: function(){
 		$.get("/api/media/user", this.populate.bind(this))
 	},
+	
+	loadTrending: function(){
+    var trending_imagery = [
+      'https://d1ycxz9plii3tb.cloudfront.net/post_images/52ec0e20c9dc24f1d8000067/large.jpg',
+      'https://d1ycxz9plii3tb.cloudfront.net/additional_images/4e6bf67bc23f490001004579/1/tall.jpg',
+      'https://d1ycxz9plii3tb.cloudfront.net/additional_images/52dcca28139b2135030002a8/tall.jpg',
+      'https://d1ycxz9plii3tb.cloudfront.net/additional_images/52927bb2b202a3669d000704/larger.jpg',
+      'https://d1ycxz9plii3tb.cloudfront.net/additional_images/4f9f3a3ce262e60001000fb3/large.jpg',
+      'http://2.bp.blogspot.com/-GD6IxUvsdOo/UdrcMFLVYNI/AAAAAAAAF2E/kbRfxMxiUlQ/s1600/okeeffe.jpg',
+      'http://www.bobkessel.com/wordpress/wp-content/uploads/2009/10/moma-bob-kessel-410.jpg',
+      'http://static1.artsy.net/partner_show_images/52f28f348b3b81f2fc000364/large.jpg',
+      'http://static3.artsy.net/partner_show_images/52e83674c9dc24397f0000d8/large.jpg',
+      'http://static0.artsy.net/partner_show_images/52d96d484b84801ef0000273/large.jpg',
+      'http://static1.artsy.net/partner_show_images/52778616275b24f95c00011d/1/large.jpg',
+      'http://static1.artsy.net/partner_show_images/52dc65311a1e86be6b000205/large.jpg',
+    ]
+		trending_imagery.forEach(function(url){
+		  var loaded = false
+		  var img = new Image ()
+		  img.onload = function(){
+		    if (loaded) return
+		    loaded = true
+        var media = {
+          type: 'image',
+          url: url,
+          width: img.naturalWidth,
+          height: img.naturalHeight,
+        }
+        this.add(media, this.$foundMedia)
+		  }.bind(this)
+		  img.src = url
+		  if (img.complete && ! loaded) { img.onload() }
+		}.bind(this))
+	},
+	
+	randomize: function(){
+    var media_data = $(".mediaContainer").toArray().map(function(el){
+      return $(el).data("media")
+    })
+    Scenery.randomize( media_data )
+  },
 
 	populate: function(data){
 		this.loaded = true
 		if (data && data.length) {
-		  data.forEach(this.add.bind(this))
+		  data.forEach(function(media){
+		    this.add(media, this.$myMedia)
+		  }.bind(this))
+      this.$deleteMedia.show()
 		}
 		else {
 		  this.$deleteMedia.hide()
@@ -65,7 +111,7 @@ var MediaViewer = ModalView.extend({
 		this.__super__.show.call(this)
 	},
 	
-	add: function(media){
+	add: function(media, $container){
 		var image = new Image ()
 		var $span = $("<span>")
 		$span.addClass("mediaContainer")
@@ -92,8 +138,7 @@ var MediaViewer = ModalView.extend({
 		$span.data("media", media)
 		$span.append(image)
 
-		this.$(".myMedia").prepend($span)		
-    this.$deleteMedia.show()
+		$container.prepend($span)
 	},
 
 	deleteIsArmed: false,
@@ -136,19 +181,6 @@ var MediaViewer = ModalView.extend({
 			return
 		}
 
-// 		else {
-// 			this.picked = {}
-// 			this.picked.media = media
-// 			this.picked.image = image
-// 		}
-// 	},
-// 	
-// 	drag: function(e){
-// 		if (! this.pickedMedia) return
-// 		var media = this.picked.media
-// 		var image = this.picked.image
-// 		this.picked = null
-
 		this.hide()
 		
 		var $ants = $('.ants');
@@ -156,8 +188,6 @@ var MediaViewer = ModalView.extend({
 		
 		Scenery.nextMedia = media
 
-// 		console.log(media.type)
-
 		switch (media.type) {
 			case "video":
 				$floatingImg.attr('src', '/assets/img/playbutton.png')
@@ -185,12 +215,13 @@ var MediaViewer = ModalView.extend({
 			$floatingImg.attr('src', '')
 			$(window).off('mousemove', _followCursor)
 			$(window).off('mousedown', _hideCursor)
+      app.off('cancel-scenery', _hideCursor)
 			$floatingImg.parent().removeClass('edit')
 		}
 		$(window).on('mousemove', _followCursor)
 		$(window).on('mousedown', _hideCursor)
+		app.on('cancel-scenery', _hideCursor)
 		$ants.addClass('edit')
 		_followCursor(e)
 	},
-
 })
diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js
new file mode 100644
index 0000000..0319a31
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/TextEditor.js
@@ -0,0 +1,41 @@
+
+var TextEditor = FormView.extend({
+	el: "#textEditor",
+		
+	events: {
+		"keydown": 'taint',
+		"focus [name]": "clearMinotaur",
+		"mousedown": "stopPropagation",
+		"change [name=font-family]": 'changeFontFamily',
+		"change [name=font-size]": 'changeFontSize',
+		"input [name=text-body]": 'changeText',
+		"click [data-role=destroy-media]": "destroy",
+	},
+	
+	initialize: function(opt){
+		this.parent = opt.parent
+		this.__super__.initialize.call(this)
+    
+    this.$fontFamily = this.$("[name=font-family]")
+    this.$fontSize = this.$("[name=font-size]")
+    this.$textBody = this.$("[name=text-body]")
+	},
+
+  toggle: function(state){
+    this.$el.toggleClass("active", state);
+  },
+  
+  taint: function(e){
+    e.stopPropagation()
+  },
+  
+  changeFontFamily: function(){
+  },
+  
+  changeFontSize: function(){
+  },
+  
+  changeText: function(){
+  },
+
+})
diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index 0dd2921..7f9b8f7 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -39,6 +39,10 @@ var WallpaperPicker = UploadView.extend({
 		this.loaded = true
 		if (data && data.length) {
 		  data.forEach(this.add.bind(this))
+		  this.$(".txt").hide()
+		}
+		else {
+		  this.$(".txt").show()
 		}
     this.toggle(true)
 	},
@@ -50,6 +54,7 @@ var WallpaperPicker = UploadView.extend({
 	  swatch.style.backgroundImage = "url(" + media.url + ")"
 	  this.$swatches.append(swatch)
     this.$swatches.show()
+    this.$(".txt").hide()
 	},
 
 	toggle: function (state) {
@@ -71,14 +76,21 @@ var WallpaperPicker = UploadView.extend({
 	},
 	
 	pick: function(e){
+	  app.tube('cancel-wallpaper')
     var $swatch = $(e.currentTarget)
     this.follow( e, $swatch.css('background-image') )
     this.$remove.show()
   },
   
 	remove: function(e){
-	  this.follow( e, "none" )
-	  $(".floatingSwatch").addClass("scissors")
+	  if (Scenery.nextWallpaper) {
+      Scenery.nextWallpaper = null
+      app.tube('cancel-wallpaper')
+	  }
+	  else {
+      this.follow( e, "none" )
+      $(".floatingSwatch").addClass("scissors")
+	  }
 	},
 
   follow: function(e, wallpaper, icon){
@@ -97,11 +109,15 @@ var WallpaperPicker = UploadView.extend({
 					left: (e.pageX + 10) + 'px',
 				});
 			}
-			$(window).on('mousemove', _followCursor)
-			$(window).one('click', function () {
+			function _hideCursor (e) {
 				$(window).off('mousemove', _followCursor)
+				$(window).off('click', _hideCursor)
+				app.off('cancel-wallpaper', _hideCursor)
 				$floatingSwatch.removeClass("scissors").hide()
-			});
+			}
+			$(window).on('mousemove', _followCursor)
+			$(window).one('click', _hideCursor);
+      app.on('cancel-wallpaper', _hideCursor)
 			$floatingSwatch.show()
 			_followCursor(e);
 		})
diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js
index d80f225..82db048 100644
--- a/public/assets/javascripts/ui/reader/ReaderView.js
+++ b/public/assets/javascripts/ui/reader/ReaderView.js
@@ -15,6 +15,9 @@ var ReaderView = View.extend({
 		if (window.location.search.indexOf("noui") !== -1) {
 			$(".logo,.topLinks,#editorView").hide()
 		}
+		else {
+		  this.tracker = new Tracker ()
+		}
 		if (window.location.search.indexOf("mute") !== -1) {
 			app.muted = true
 		}
@@ -72,10 +75,12 @@ var ReaderView = View.extend({
 
 	pick: function(scenery){
 		this.mediaPlayer.pick(scenery)
+    app.tube("pick-scenery", { scenery: scenery })
 	},
 
 	hideExtras: function(){
 		this.mediaPlayer.hide()
+    app.tube("close-scenery")
 	}
 
 })
diff --git a/public/assets/javascripts/ui/reader/Tracker.js b/public/assets/javascripts/ui/reader/Tracker.js
new file mode 100644
index 0000000..beef071
--- /dev/null
+++ b/public/assets/javascripts/ui/reader/Tracker.js
@@ -0,0 +1,123 @@
+var Tracker = Fiber.extend(function(base){
+
+	var exports = {
+		init: function(opt){
+		  this.wall_id = null
+		  this.scenery_id = null
+		  this.clicks = 0
+		  
+		  this.wallTimer = new Timer ()
+		  this.roomTimer = new Timer ()
+		  this.sceneryTimer = new Timer ()
+
+		  this.events = []
+		  
+		  this.bind()
+		  this.trackPageview()
+		},
+		
+		bind: function () {
+		  window.addEventListener("click", this.trackClick.bind(this), true)
+		  app.on("change-wall", this.changeWall.bind(this))
+		  app.on("pick-scenery", this.pickScenery.bind(this))
+		  app.on("close-scenery", this.trackScenery.bind(this))
+		  app.on("change-room", this.changeRoom.bind(this))
+		},
+
+		pushEvent: function(event){
+		  this.events.push(event)
+		},
+		
+		trackPageview: function(opt){
+      this.pushEvent([ "view" ])
+		},
+
+    //
+    // how long they spend in front of each wall
+
+		changeWall: function(opt){
+		  var duration = this.wallTimer.currentTime()
+		  if (this.wall_id && duration > 5000) {
+        this.pushEvent([ "wall", this.wall_id, duration ])
+		  }
+      this.wall_id = opt.wall.id
+      this.wallTimer.start()
+		},
+		
+    //
+    // how long the user spends on each item they click
+    
+		pickScenery: function(opt){
+		  if (this.scenery_id && opt.scenery.id !== this.scenery_id) {
+		    this.trackScenery()
+		  }
+		  else {
+        this.sceneryTimer.start()
+		  }
+		  this.scenery_id = opt.scenery.id
+		},
+		
+		trackScenery: function(){
+		  var duration = this.sceneryTimer.currentTime()
+		  if (this.scenery_id && duration > 5000) {
+        this.pushEvent([ "scenery", this.scenery_id, duration ])
+		  }
+      this.scenery_id = null
+      this.sceneryTimer.reset()
+		},
+
+		//
+    // how long they spend in the room
+
+		changeRoom: function(opt){
+		  var duration = this.roomTimer.currentTime()
+		  if (this.room_id !== opt.room.id) {
+		    if (this.room_id && duration > 5000) {
+          this.pushEvent([ "room", this.room_id, duration ])
+        }
+        this.roomTimer.start()
+        this.room_id = opt.room.id
+		  }
+		},
+		
+    //
+    // how many clicks per room
+
+		trackClick: function(opt){
+      this.clicks += 1
+		},
+		
+		save: function () {
+		  // possibly just push to google analytics
+		},
+		
+  }
+  
+  return exports
+})
+
+
+var Timer = Fiber.extend(function(base){
+  var exports = {
+
+    init: function(opt){
+      this.time = 0
+    },
+    
+    reset: function(){
+      this.time = 0
+    },
+    
+    start: function(){
+      this.time = Date.now()
+    },
+
+    currentTime: function(){
+      return this.time ? Date.now() - this.time : 0
+    },
+  }
+  
+  return exports
+})
+
+
diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js
index 2449465..1bfc6cb 100644
--- a/public/assets/javascripts/ui/site/LayoutsModal.js
+++ b/public/assets/javascripts/ui/site/LayoutsModal.js
@@ -29,7 +29,6 @@ var LayoutsIndex = View.extend({
 			
 			this.$templates.append($span)
 		}.bind(this))
-		console.log(this.$templates.html())
 		this.show()
 	}
 
diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js
index 7812a4d..76c5c7b 100644
--- a/public/assets/javascripts/util.js
+++ b/public/assets/javascripts/util.js
@@ -92,9 +92,10 @@ function smoothstep(min,max,n){
 }
 
 function shuffle(a){
+  var r, swap
   for (var i = a.length; i > 0; i--){
-    var r = randint(i)
-    var swap = a[i-1]
+    r = randint(i)
+    swap = a[i-1]
     a[i-1] = a[r]
     a[r] = swap
   }
@@ -173,6 +174,10 @@ function invert_hash (h) {
 	for (var i in h) { if (h.hasOwnProperty(i)) k[h[i]] = i }
 	return k
 }
+function filenameFromUrl (url) {
+  var partz = url.split( "/" )
+  return partz[partz.length-1].split(".")[0]
+}
 
 function bitcount(v) {
   v = v - ((v >>> 1) & 0x55555555);
diff --git a/public/assets/javascripts/vendor/wow.js b/public/assets/javascripts/vendor/wow.js
new file mode 100644
index 0000000..83ca71b
--- /dev/null
+++ b/public/assets/javascripts/vendor/wow.js
@@ -0,0 +1,452 @@
+(function() {
+  var MutationObserver, Util, WeakMap, getComputedStyle, getComputedStyleRX,
+    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
+    __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
+
+  Util = (function() {
+    function Util() {}
+
+    Util.prototype.extend = function(custom, defaults) {
+      var key, value;
+      for (key in defaults) {
+        value = defaults[key];
+        if (custom[key] == null) {
+          custom[key] = value;
+        }
+      }
+      return custom;
+    };
+
+    Util.prototype.isMobile = function(agent) {
+      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent);
+    };
+
+    Util.prototype.addEvent = function(elem, event, fn) {
+      if (elem.addEventListener != null) {
+        return elem.addEventListener(event, fn, false);
+      } else if (elem.attachEvent != null) {
+        return elem.attachEvent("on" + event, fn);
+      } else {
+        return elem[event] = fn;
+      }
+    };
+
+    Util.prototype.removeEvent = function(elem, event, fn) {
+      if (elem.removeEventListener != null) {
+        return elem.removeEventListener(event, fn, false);
+      } else if (elem.detachEvent != null) {
+        return elem.detachEvent("on" + event, fn);
+      } else {
+        return delete elem[event];
+      }
+    };
+
+    Util.prototype.innerHeight = function() {
+      if ('innerHeight' in window) {
+        return window.innerHeight;
+      } else {
+        return document.documentElement.clientHeight;
+      }
+    };
+
+    return Util;
+
+  })();
+
+  WeakMap = this.WeakMap || this.MozWeakMap || (WeakMap = (function() {
+    function WeakMap() {
+      this.keys = [];
+      this.values = [];
+    }
+
+    WeakMap.prototype.get = function(key) {
+      var i, item, _i, _len, _ref;
+      _ref = this.keys;
+      for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
+        item = _ref[i];
+        if (item === key) {
+          return this.values[i];
+        }
+      }
+    };
+
+    WeakMap.prototype.set = function(key, value) {
+      var i, item, _i, _len, _ref;
+      _ref = this.keys;
+      for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
+        item = _ref[i];
+        if (item === key) {
+          this.values[i] = value;
+          return;
+        }
+      }
+      this.keys.push(key);
+      return this.values.push(value);
+    };
+
+    return WeakMap;
+
+  })());
+
+  MutationObserver = this.MutationObserver || this.WebkitMutationObserver || this.MozMutationObserver || (MutationObserver = (function() {
+    function MutationObserver() {
+      if (typeof console !== "undefined" && console !== null) {
+        console.warn('MutationObserver is not supported by your browser.');
+      }
+      if (typeof console !== "undefined" && console !== null) {
+        console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.');
+      }
+    }
+
+    MutationObserver.notSupported = true;
+
+    MutationObserver.prototype.observe = function() {};
+
+    return MutationObserver;
+
+  })());
+
+  getComputedStyle = this.getComputedStyle || function(el, pseudo) {
+    this.getPropertyValue = function(prop) {
+      var _ref;
+      if (prop === 'float') {
+        prop = 'styleFloat';
+      }
+      if (getComputedStyleRX.test(prop)) {
+        prop.replace(getComputedStyleRX, function(_, char) {
+          return char.toUpperCase();
+        });
+      }
+      return ((_ref = el.currentStyle) != null ? _ref[prop] : void 0) || null;
+    };
+    return this;
+  };
+
+  getComputedStyleRX = /(\-([a-z]){1})/g;
+
+  this.WOW = (function() {
+    WOW.prototype.defaults = {
+      boxClass: 'wow',
+      animateClass: 'animated',
+      offset: 0,
+      mobile: true,
+      live: true
+    };
+
+    function WOW(options) {
+      if (options == null) {
+        options = {};
+      }
+      this.scrollCallback = __bind(this.scrollCallback, this);
+      this.scrollHandler = __bind(this.scrollHandler, this);
+      this.start = __bind(this.start, this);
+      this.scrolled = true;
+      this.config = this.util().extend(options, this.defaults);
+      this.animationNameCache = new WeakMap();
+    }
+
+    WOW.prototype.init = function() {
+      var _ref;
+      this.element = window.document.documentElement;
+      if ((_ref = document.readyState) === "interactive" || _ref === "complete") {
+        this.start();
+      } else {
+        this.util().addEvent(document, 'DOMContentLoaded', this.start);
+      }
+      return this.finished = [];
+    };
+
+    WOW.prototype.start = function() {
+      var box, _i, _len, _ref;
+      this.stopped = false;
+      this.boxes = (function() {
+        var _i, _len, _ref, _results;
+        _ref = this.element.querySelectorAll("." + this.config.boxClass);
+        _results = [];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          box = _ref[_i];
+          _results.push(box);
+        }
+        return _results;
+      }).call(this);
+      this.all = (function() {
+        var _i, _len, _ref, _results;
+        _ref = this.boxes;
+        _results = [];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          box = _ref[_i];
+          _results.push(box);
+        }
+        return _results;
+      }).call(this);
+      if (this.boxes.length) {
+        if (this.disabled()) {
+          this.resetStyle();
+        } else {
+          _ref = this.boxes;
+          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+            box = _ref[_i];
+            this.applyStyle(box, true);
+          }
+          this.util().addEvent(window, 'scroll', this.scrollHandler);
+          this.util().addEvent(window, 'resize', this.scrollHandler);
+          this.interval = setInterval(this.scrollCallback, 50);
+        }
+      }
+      if (this.config.live) {
+        return new MutationObserver((function(_this) {
+          return function(records) {
+            var node, record, _j, _len1, _results;
+            _results = [];
+            for (_j = 0, _len1 = records.length; _j < _len1; _j++) {
+              record = records[_j];
+              _results.push((function() {
+                var _k, _len2, _ref1, _results1;
+                _ref1 = record.addedNodes || [];
+                _results1 = [];
+                for (_k = 0, _len2 = _ref1.length; _k < _len2; _k++) {
+                  node = _ref1[_k];
+                  _results1.push(this.doSync(node));
+                }
+                return _results1;
+              }).call(_this));
+            }
+            return _results;
+          };
+        })(this)).observe(document.body, {
+          childList: true,
+          subtree: true
+        });
+      }
+    };
+
+    WOW.prototype.stop = function() {
+      this.stopped = true;
+      this.util().removeEvent(window, 'scroll', this.scrollHandler);
+      this.util().removeEvent(window, 'resize', this.scrollHandler);
+      if (this.interval != null) {
+        return clearInterval(this.interval);
+      }
+    };
+
+    WOW.prototype.sync = function(element) {
+      if (MutationObserver.notSupported) {
+        return this.doSync(this.element);
+      }
+    };
+
+    WOW.prototype.doSync = function(element) {
+      var box, _i, _len, _ref, _results;
+      if (!this.stopped) {
+        if (element == null) {
+          element = this.element;
+        }
+        if (element.nodeType !== 1) {
+          return;
+        }
+        element = element.parentNode || element;
+        _ref = element.querySelectorAll("." + this.config.boxClass);
+        _results = [];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          box = _ref[_i];
+          if (__indexOf.call(this.all, box) < 0) {
+            this.applyStyle(box, true);
+            this.boxes.push(box);
+            this.all.push(box);
+            _results.push(this.scrolled = true);
+          } else {
+            _results.push(void 0);
+          }
+        }
+        return _results;
+      }
+    };
+
+    WOW.prototype.show = function(box) {
+      this.applyStyle(box);
+      return box.className = "" + box.className + " " + this.config.animateClass;
+    };
+
+    WOW.prototype.applyStyle = function(box, hidden) {
+      var delay, duration, iteration;
+      duration = box.getAttribute('data-wow-duration');
+      delay = box.getAttribute('data-wow-delay');
+      iteration = box.getAttribute('data-wow-iteration');
+      return this.animate((function(_this) {
+        return function() {
+          return _this.customStyle(box, hidden, duration, delay, iteration);
+        };
+      })(this));
+    };
+
+    WOW.prototype.animate = (function() {
+      if ('requestAnimationFrame' in window) {
+        return function(callback) {
+          return window.requestAnimationFrame(callback);
+        };
+      } else {
+        return function(callback) {
+          return callback();
+        };
+      }
+    })();
+
+    WOW.prototype.resetStyle = function() {
+      var box, _i, _len, _ref, _results;
+      _ref = this.boxes;
+      _results = [];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        box = _ref[_i];
+        _results.push(box.setAttribute('style', 'visibility: visible;'));
+      }
+      return _results;
+    };
+
+    WOW.prototype.customStyle = function(box, hidden, duration, delay, iteration) {
+      if (hidden) {
+        this.cacheAnimationName(box);
+      }
+      box.style.visibility = hidden ? 'hidden' : 'visible';
+      if (duration) {
+        this.vendorSet(box.style, {
+          animationDuration: duration
+        });
+      }
+      if (delay) {
+        this.vendorSet(box.style, {
+          animationDelay: delay
+        });
+      }
+      if (iteration) {
+        this.vendorSet(box.style, {
+          animationIterationCount: iteration
+        });
+      }
+      this.vendorSet(box.style, {
+        animationName: hidden ? 'none' : this.cachedAnimationName(box)
+      });
+      return box;
+    };
+
+    WOW.prototype.vendors = ["moz", "webkit"];
+
+    WOW.prototype.vendorSet = function(elem, properties) {
+      var name, value, vendor, _results;
+      _results = [];
+      for (name in properties) {
+        value = properties[name];
+        elem["" + name] = value;
+        _results.push((function() {
+          var _i, _len, _ref, _results1;
+          _ref = this.vendors;
+          _results1 = [];
+          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+            vendor = _ref[_i];
+            _results1.push(elem["" + vendor + (name.charAt(0).toUpperCase()) + (name.substr(1))] = value);
+          }
+          return _results1;
+        }).call(this));
+      }
+      return _results;
+    };
+
+    WOW.prototype.vendorCSS = function(elem, property) {
+      var result, style, vendor, _i, _len, _ref;
+      style = getComputedStyle(elem);
+      result = style.getPropertyCSSValue(property);
+      _ref = this.vendors;
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        vendor = _ref[_i];
+        result = result || style.getPropertyCSSValue("-" + vendor + "-" + property);
+      }
+      return result;
+    };
+
+    WOW.prototype.animationName = function(box) {
+      var animationName;
+      try {
+        animationName = this.vendorCSS(box, 'animation-name').cssText;
+      } catch (_error) {
+        animationName = getComputedStyle(box).getPropertyValue('animation-name');
+      }
+      if (animationName === 'none') {
+        return '';
+      } else {
+        return animationName;
+      }
+    };
+
+    WOW.prototype.cacheAnimationName = function(box) {
+      return this.animationNameCache.set(box, this.animationName(box));
+    };
+
+    WOW.prototype.cachedAnimationName = function(box) {
+      return this.animationNameCache.get(box);
+    };
+
+    WOW.prototype.scrollHandler = function() {
+      return this.scrolled = true;
+    };
+
+    WOW.prototype.scrollCallback = function() {
+      var box;
+      if (this.scrolled) {
+        this.scrolled = false;
+        this.boxes = (function() {
+          var _i, _len, _ref, _results;
+          _ref = this.boxes;
+          _results = [];
+          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+            box = _ref[_i];
+            if (!(box)) {
+              continue;
+            }
+            if (this.isVisible(box)) {
+              this.show(box);
+              continue;
+            }
+            _results.push(box);
+          }
+          return _results;
+        }).call(this);
+        if (!(this.boxes.length || this.config.live)) {
+          return this.stop();
+        }
+      }
+    };
+
+    WOW.prototype.offsetTop = function(element) {
+      var top;
+      while (element.offsetTop === void 0) {
+        element = element.parentNode;
+      }
+      top = element.offsetTop;
+      while (element = element.offsetParent) {
+        top += element.offsetTop;
+      }
+      return top;
+    };
+
+    WOW.prototype.isVisible = function(box) {
+      var bottom, offset, top, viewBottom, viewTop;
+      offset = box.getAttribute('data-wow-offset') || this.config.offset;
+      viewTop = window.pageYOffset;
+      viewBottom = viewTop + Math.min(this.element.clientHeight, this.util().innerHeight()) - offset;
+      top = this.offsetTop(box);
+      bottom = top + box.clientHeight;
+      return top <= viewBottom && bottom >= viewTop;
+    };
+
+    WOW.prototype.util = function() {
+      return this._util != null ? this._util : this._util = new Util();
+    };
+
+    WOW.prototype.disabled = function() {
+      return !this.config.mobile && this.util().isMobile(navigator.userAgent);
+    };
+
+    return WOW;
+
+  })();
+
+}).call(this);
diff --git a/public/assets/stylesheets/animate.css b/public/assets/stylesheets/animate.css
new file mode 100644
index 0000000..f784ce8
--- /dev/null
+++ b/public/assets/stylesheets/animate.css
@@ -0,0 +1,3158 @@
+@charset "UTF-8";
+/*!
+Animate.css - http://daneden.me/animate
+Licensed under the MIT license - http://opensource.org/licenses/MIT
+
+Copyright (c) 2014 Daniel Eden
+*/
+
+.animated {
+  -webkit-animation-duration: 1s;
+          animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+}
+
+.animated.infinite {
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+  -webkit-animation-duration: 2s;
+          animation-duration: 2s;
+}
+
+@-webkit-keyframes bounce {
+  0%, 20%, 53%, 80%, 100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    -webkit-transform: translate3d(0,0,0);
+            transform: translate3d(0,0,0);
+  }
+
+  40%, 43% {
+    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transform: translate3d(0, -30px, 0);
+            transform: translate3d(0, -30px, 0);
+  }
+
+  70% {
+    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transform: translate3d(0, -15px, 0);
+            transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0,-4px,0);
+            transform: translate3d(0,-4px,0);
+  }
+}
+
+@keyframes bounce {
+  0%, 20%, 53%, 80%, 100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    -webkit-transform: translate3d(0,0,0);
+            transform: translate3d(0,0,0);
+  }
+
+  40%, 43% {
+    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transform: translate3d(0, -30px, 0);
+            transform: translate3d(0, -30px, 0);
+  }
+
+  70% {
+    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transform: translate3d(0, -15px, 0);
+            transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0,-4px,0);
+            transform: translate3d(0,-4px,0);
+  }
+}
+
+.bounce {
+  -webkit-animation-name: bounce;
+          animation-name: bounce;
+  -webkit-transform-origin: center bottom;
+      -ms-transform-origin: center bottom;
+          transform-origin: center bottom;
+}
+
+@-webkit-keyframes flash {
+  0%, 50%, 100% {
+    opacity: 1;
+  }
+
+  25%, 75% {
+    opacity: 0;
+  }
+}
+
+@keyframes flash {
+  0%, 50%, 100% {
+    opacity: 1;
+  }
+
+  25%, 75% {
+    opacity: 0;
+  }
+}
+
+.flash {
+  -webkit-animation-name: flash;
+          animation-name: flash;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes pulse {
+  0% {
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.05, 1.05, 1.05);
+            transform: scale3d(1.05, 1.05, 1.05);
+  }
+
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.05, 1.05, 1.05);
+            transform: scale3d(1.05, 1.05, 1.05);
+  }
+
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+}
+
+.pulse {
+  -webkit-animation-name: pulse;
+          animation-name: pulse;
+}
+
+@-webkit-keyframes rubberBand {
+  0% {
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+
+  30% {
+    -webkit-transform: scale3d(1.25, 0.75, 1);
+            transform: scale3d(1.25, 0.75, 1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(0.75, 1.25, 1);
+            transform: scale3d(0.75, 1.25, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.15, 0.85, 1);
+            transform: scale3d(1.15, 0.85, 1);
+  }
+
+  65% {
+    -webkit-transform: scale3d(.95, 1.05, 1);
+            transform: scale3d(.95, 1.05, 1);
+  }
+
+  75% {
+    -webkit-transform: scale3d(1.05, .95, 1);
+            transform: scale3d(1.05, .95, 1);
+  }
+
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes rubberBand {
+  0% {
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+
+  30% {
+    -webkit-transform: scale3d(1.25, 0.75, 1);
+            transform: scale3d(1.25, 0.75, 1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(0.75, 1.25, 1);
+            transform: scale3d(0.75, 1.25, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.15, 0.85, 1);
+            transform: scale3d(1.15, 0.85, 1);
+  }
+
+  65% {
+    -webkit-transform: scale3d(.95, 1.05, 1);
+            transform: scale3d(.95, 1.05, 1);
+  }
+
+  75% {
+    -webkit-transform: scale3d(1.05, .95, 1);
+            transform: scale3d(1.05, .95, 1);
+  }
+
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+}
+
+.rubberBand {
+  -webkit-animation-name: rubberBand;
+          animation-name: rubberBand;
+}
+
+@-webkit-keyframes shake {
+  0%, 100% {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+            transform: translate3d(-10px, 0, 0);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translate3d(10px, 0, 0);
+            transform: translate3d(10px, 0, 0);
+  }
+}
+
+@keyframes shake {
+  0%, 100% {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+            transform: translate3d(-10px, 0, 0);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translate3d(10px, 0, 0);
+            transform: translate3d(10px, 0, 0);
+  }
+}
+
+.shake {
+  -webkit-animation-name: shake;
+          animation-name: shake;
+}
+
+@-webkit-keyframes swing {
+  20% {
+    -webkit-transform: rotate3d(0, 0, 1, 15deg);
+            transform: rotate3d(0, 0, 1, 15deg);
+  }
+
+  40% {
+    -webkit-transform: rotate3d(0, 0, 1, -10deg);
+            transform: rotate3d(0, 0, 1, -10deg);
+  }
+
+  60% {
+    -webkit-transform: rotate3d(0, 0, 1, 5deg);
+            transform: rotate3d(0, 0, 1, 5deg);
+  }
+
+  80% {
+    -webkit-transform: rotate3d(0, 0, 1, -5deg);
+            transform: rotate3d(0, 0, 1, -5deg);
+  }
+
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+            transform: rotate3d(0, 0, 1, 0deg);
+  }
+}
+
+@keyframes swing {
+  20% {
+    -webkit-transform: rotate3d(0, 0, 1, 15deg);
+            transform: rotate3d(0, 0, 1, 15deg);
+  }
+
+  40% {
+    -webkit-transform: rotate3d(0, 0, 1, -10deg);
+            transform: rotate3d(0, 0, 1, -10deg);
+  }
+
+  60% {
+    -webkit-transform: rotate3d(0, 0, 1, 5deg);
+            transform: rotate3d(0, 0, 1, 5deg);
+  }
+
+  80% {
+    -webkit-transform: rotate3d(0, 0, 1, -5deg);
+            transform: rotate3d(0, 0, 1, -5deg);
+  }
+
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+            transform: rotate3d(0, 0, 1, 0deg);
+  }
+}
+
+.swing {
+  -webkit-transform-origin: top center;
+      -ms-transform-origin: top center;
+          transform-origin: top center;
+  -webkit-animation-name: swing;
+          animation-name: swing;
+}
+
+@-webkit-keyframes tada {
+  0% {
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+
+  10%, 20% {
+    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+            transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+  }
+
+  40%, 60%, 80% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+  }
+
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes tada {
+  0% {
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+
+  10%, 20% {
+    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+            transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+  }
+
+  40%, 60%, 80% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+  }
+
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+}
+
+.tada {
+  -webkit-animation-name: tada;
+          animation-name: tada;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes wobble {
+  0% {
+    -webkit-transform: none;
+            transform: none;
+  }
+
+  15% {
+    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+
+  30% {
+    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+
+  45% {
+    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+
+  60% {
+    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+
+  75% {
+    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes wobble {
+  0% {
+    -webkit-transform: none;
+            transform: none;
+  }
+
+  15% {
+    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+
+  30% {
+    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+
+  45% {
+    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+
+  60% {
+    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+
+  75% {
+    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.wobble {
+  -webkit-animation-name: wobble;
+          animation-name: wobble;
+}
+
+@-webkit-keyframes bounceIn {
+  0%, 20%, 40%, 60%, 80%, 100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+            transform: scale3d(.3, .3, .3);
+  }
+
+  20% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+            transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(.9, .9, .9);
+            transform: scale3d(.9, .9, .9);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+            transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    -webkit-transform: scale3d(.97, .97, .97);
+            transform: scale3d(.97, .97, .97);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes bounceIn {
+  0%, 20%, 40%, 60%, 80%, 100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+            transform: scale3d(.3, .3, .3);
+  }
+
+  20% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+            transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(.9, .9, .9);
+            transform: scale3d(.9, .9, .9);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+            transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    -webkit-transform: scale3d(.97, .97, .97);
+            transform: scale3d(.97, .97, .97);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+}
+
+.bounceIn {
+  -webkit-animation-name: bounceIn;
+          animation-name: bounceIn;
+  -webkit-animation-duration: .75s;
+          animation-duration: .75s;
+}
+
+@-webkit-keyframes bounceInDown {
+  0%, 60%, 75%, 90%, 100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -3000px, 0);
+            transform: translate3d(0, -3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 25px, 0);
+            transform: translate3d(0, 25px, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(0, -10px, 0);
+            transform: translate3d(0, -10px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, 5px, 0);
+            transform: translate3d(0, 5px, 0);
+  }
+
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes bounceInDown {
+  0%, 60%, 75%, 90%, 100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -3000px, 0);
+            transform: translate3d(0, -3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 25px, 0);
+            transform: translate3d(0, 25px, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(0, -10px, 0);
+            transform: translate3d(0, -10px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, 5px, 0);
+            transform: translate3d(0, 5px, 0);
+  }
+
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.bounceInDown {
+  -webkit-animation-name: bounceInDown;
+          animation-name: bounceInDown;
+}
+
+@-webkit-keyframes bounceInLeft {
+  0%, 60%, 75%, 90%, 100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-3000px, 0, 0);
+            transform: translate3d(-3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(25px, 0, 0);
+            transform: translate3d(25px, 0, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+            transform: translate3d(-10px, 0, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(5px, 0, 0);
+            transform: translate3d(5px, 0, 0);
+  }
+
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes bounceInLeft {
+  0%, 60%, 75%, 90%, 100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-3000px, 0, 0);
+            transform: translate3d(-3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(25px, 0, 0);
+            transform: translate3d(25px, 0, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+            transform: translate3d(-10px, 0, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(5px, 0, 0);
+            transform: translate3d(5px, 0, 0);
+  }
+
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.bounceInLeft {
+  -webkit-animation-name: bounceInLeft;
+          animation-name: bounceInLeft;
+}
+
+@-webkit-keyframes bounceInRight {
+  0%, 60%, 75%, 90%, 100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(3000px, 0, 0);
+            transform: translate3d(3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(-25px, 0, 0);
+            transform: translate3d(-25px, 0, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(10px, 0, 0);
+            transform: translate3d(10px, 0, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(-5px, 0, 0);
+            transform: translate3d(-5px, 0, 0);
+  }
+
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes bounceInRight {
+  0%, 60%, 75%, 90%, 100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(3000px, 0, 0);
+            transform: translate3d(3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(-25px, 0, 0);
+            transform: translate3d(-25px, 0, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(10px, 0, 0);
+            transform: translate3d(10px, 0, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(-5px, 0, 0);
+            transform: translate3d(-5px, 0, 0);
+  }
+
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.bounceInRight {
+  -webkit-animation-name: bounceInRight;
+          animation-name: bounceInRight;
+}
+
+@-webkit-keyframes bounceInUp {
+  0%, 60%, 75%, 90%, 100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 3000px, 0);
+            transform: translate3d(0, 3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+            transform: translate3d(0, -20px, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(0, 10px, 0);
+            transform: translate3d(0, 10px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, -5px, 0);
+            transform: translate3d(0, -5px, 0);
+  }
+
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes bounceInUp {
+  0%, 60%, 75%, 90%, 100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 3000px, 0);
+            transform: translate3d(0, 3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+            transform: translate3d(0, -20px, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(0, 10px, 0);
+            transform: translate3d(0, 10px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, -5px, 0);
+            transform: translate3d(0, -5px, 0);
+  }
+
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}
+
+.bounceInUp {
+  -webkit-animation-name: bounceInUp;
+          animation-name: bounceInUp;
+}
+
+@-webkit-keyframes bounceOut {
+  20% {
+    -webkit-transform: scale3d(.9, .9, .9);
+            transform: scale3d(.9, .9, .9);
+  }
+
+  50%, 55% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+            transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+            transform: scale3d(.3, .3, .3);
+  }
+}
+
+@keyframes bounceOut {
+  20% {
+    -webkit-transform: scale3d(.9, .9, .9);
+            transform: scale3d(.9, .9, .9);
+  }
+
+  50%, 55% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+            transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+            transform: scale3d(.3, .3, .3);
+  }
+}
+
+.bounceOut {
+  -webkit-animation-name: bounceOut;
+          animation-name: bounceOut;
+  -webkit-animation-duration: .75s;
+          animation-duration: .75s;
+}
+
+@-webkit-keyframes bounceOutDown {
+  20% {
+    -webkit-transform: translate3d(0, 10px, 0);
+            transform: translate3d(0, 10px, 0);
+  }
+
+  40%, 45% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+            transform: translate3d(0, -20px, 0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+            transform: translate3d(0, 2000px, 0);
+  }
+}
+
+@keyframes bounceOutDown {
+  20% {
+    -webkit-transform: translate3d(0, 10px, 0);
+            transform: translate3d(0, 10px, 0);
+  }
+
+  40%, 45% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+            transform: translate3d(0, -20px, 0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+            transform: translate3d(0, 2000px, 0);
+  }
+}
+
+.bounceOutDown {
+  -webkit-animation-name: bounceOutDown;
+          animation-name: bounceOutDown;
+}
+
+@-webkit-keyframes bounceOutLeft {
+  20% {
+    opacity: 1;
+    -webkit-transform: translate3d(20px, 0, 0);
+            transform: translate3d(20px, 0, 0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+            transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+@keyframes bounceOutLeft {
+  20% {
+    opacity: 1;
+    -webkit-transform: translate3d(20px, 0, 0);
+            transform: translate3d(20px, 0, 0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+            transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+.bounceOutLeft {
+  -webkit-animation-name: bounceOutLeft;
+          animation-name: bounceOutLeft;
+}
+
+@-webkit-keyframes bounceOutRight {
+  20% {
+    opacity: 1;
+    -webkit-transform: translate3d(-20px, 0, 0);
+            transform: translate3d(-20px, 0, 0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+            transform: translate3d(2000px, 0, 0);
+  }
+}
+
+@keyframes bounceOutRight {
+  20% {
+    opacity: 1;
+    -webkit-transform: translate3d(-20px, 0, 0);
+            transform: translate3d(-20px, 0, 0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+            transform: translate3d(2000px, 0, 0);
+  }
+}
+
+.bounceOutRight {
+  -webkit-animation-name: bounceOutRight;
+          animation-name: bounceOutRight;
+}
+
+@-webkit-keyframes bounceOutUp {
+  20% {
+    -webkit-transform: translate3d(0, -10px, 0);
+            transform: translate3d(0, -10px, 0);
+  }
+
+  40%, 45% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 20px, 0);
+            transform: translate3d(0, 20px, 0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+            transform: translate3d(0, -2000px, 0);
+  }
+}
+
+@keyframes bounceOutUp {
+  20% {
+    -webkit-transform: translate3d(0, -10px, 0);
+            transform: translate3d(0, -10px, 0);
+  }
+
+  40%, 45% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 20px, 0);
+            transform: translate3d(0, 20px, 0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+            transform: translate3d(0, -2000px, 0);
+  }
+}
+
+.bounceOutUp {
+  -webkit-animation-name: bounceOutUp;
+          animation-name: bounceOutUp;
+}
+
+@-webkit-keyframes fadeIn {
+  0% {opacity: 0;}
+  100% {opacity: 1;}
+}
+
+@keyframes fadeIn {
+  0% {opacity: 0;}
+  100% {opacity: 1;}
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+          animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+            transform: translate3d(0, -100%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+            transform: translate3d(0, -100%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.fadeInDown {
+  -webkit-animation-name: fadeInDown;
+          animation-name: fadeInDown;
+}
+
+@-webkit-keyframes fadeInDownBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+            transform: translate3d(0, -2000px, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes fadeInDownBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+            transform: translate3d(0, -2000px, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.fadeInDownBig {
+  -webkit-animation-name: fadeInDownBig;
+          animation-name: fadeInDownBig;
+}
+
+@-webkit-keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.fadeInLeft {
+  -webkit-animation-name: fadeInLeft;
+          animation-name: fadeInLeft;
+}
+
+@-webkit-keyframes fadeInLeftBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+            transform: translate3d(-2000px, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes fadeInLeftBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+            transform: translate3d(-2000px, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.fadeInLeftBig {
+  -webkit-animation-name: fadeInLeftBig;
+          animation-name: fadeInLeftBig;
+}
+
+@-webkit-keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+            transform: translate3d(100%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+            transform: translate3d(100%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.fadeInRight {
+  -webkit-animation-name: fadeInRight;
+          animation-name: fadeInRight;
+}
+
+@-webkit-keyframes fadeInRightBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+            transform: translate3d(2000px, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes fadeInRightBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+            transform: translate3d(2000px, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.fadeInRightBig {
+  -webkit-animation-name: fadeInRightBig;
+          animation-name: fadeInRightBig;
+}
+
+@-webkit-keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.fadeInUp {
+  -webkit-animation-name: fadeInUp;
+          animation-name: fadeInUp;
+}
+
+@-webkit-keyframes fadeInUpBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+            transform: translate3d(0, 2000px, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes fadeInUpBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+            transform: translate3d(0, 2000px, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.fadeInUpBig {
+  -webkit-animation-name: fadeInUpBig;
+          animation-name: fadeInUpBig;
+}
+
+@-webkit-keyframes fadeOut {
+  0% {opacity: 1;}
+  100% {opacity: 0;}
+}
+
+@keyframes fadeOut {
+  0% {opacity: 1;}
+  100% {opacity: 0;}
+}
+
+.fadeOut {
+  -webkit-animation-name: fadeOut;
+          animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOutDown {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes fadeOutDown {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+  }
+}
+
+.fadeOutDown {
+  -webkit-animation-name: fadeOutDown;
+          animation-name: fadeOutDown;
+}
+
+@-webkit-keyframes fadeOutDownBig {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+            transform: translate3d(0, 2000px, 0);
+  }
+}
+
+@keyframes fadeOutDownBig {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+            transform: translate3d(0, 2000px, 0);
+  }
+}
+
+.fadeOutDownBig {
+  -webkit-animation-name: fadeOutDownBig;
+          animation-name: fadeOutDownBig;
+}
+
+@-webkit-keyframes fadeOutLeft {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes fadeOutLeft {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+  }
+}
+
+.fadeOutLeft {
+  -webkit-animation-name: fadeOutLeft;
+          animation-name: fadeOutLeft;
+}
+
+@-webkit-keyframes fadeOutLeftBig {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+            transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+@keyframes fadeOutLeftBig {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+            transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+.fadeOutLeftBig {
+  -webkit-animation-name: fadeOutLeftBig;
+          animation-name: fadeOutLeftBig;
+}
+
+@-webkit-keyframes fadeOutRight {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+            transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes fadeOutRight {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+            transform: translate3d(100%, 0, 0);
+  }
+}
+
+.fadeOutRight {
+  -webkit-animation-name: fadeOutRight;
+          animation-name: fadeOutRight;
+}
+
+@-webkit-keyframes fadeOutRightBig {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+            transform: translate3d(2000px, 0, 0);
+  }
+}
+
+@keyframes fadeOutRightBig {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+            transform: translate3d(2000px, 0, 0);
+  }
+}
+
+.fadeOutRightBig {
+  -webkit-animation-name: fadeOutRightBig;
+          animation-name: fadeOutRightBig;
+}
+
+@-webkit-keyframes fadeOutUp {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+            transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes fadeOutUp {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+            transform: translate3d(0, -100%, 0);
+  }
+}
+
+.fadeOutUp {
+  -webkit-animation-name: fadeOutUp;
+          animation-name: fadeOutUp;
+}
+
+@-webkit-keyframes fadeOutUpBig {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+            transform: translate3d(0, -2000px, 0);
+  }
+}
+
+@keyframes fadeOutUpBig {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+            transform: translate3d(0, -2000px, 0);
+  }
+}
+
+.fadeOutUpBig {
+  -webkit-animation-name: fadeOutUpBig;
+          animation-name: fadeOutUpBig;
+}
+
+@-webkit-keyframes flip {
+  0% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+            transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+
+  50% {
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
+            transform: perspective(400px) scale3d(.95, .95, .95);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px);
+            transform: perspective(400px);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+}
+
+@keyframes flip {
+  0% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+            transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+
+  50% {
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
+            transform: perspective(400px) scale3d(.95, .95, .95);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px);
+            transform: perspective(400px);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+}
+
+.animated.flip {
+  -webkit-backface-visibility: visible;
+          backface-visibility: visible;
+  -webkit-animation-name: flip;
+          animation-name: flip;
+}
+
+@-webkit-keyframes flipInX {
+  0% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    -webkit-transition-timing-function: ease-in;
+            transition-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    -webkit-transition-timing-function: ease-in;
+            transition-timing-function: ease-in;
+  }
+
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+            transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+            transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px);
+            transform: perspective(400px);
+  }
+}
+
+@keyframes flipInX {
+  0% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    -webkit-transition-timing-function: ease-in;
+            transition-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    -webkit-transition-timing-function: ease-in;
+            transition-timing-function: ease-in;
+  }
+
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+            transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+            transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px);
+            transform: perspective(400px);
+  }
+}
+
+.flipInX {
+  -webkit-backface-visibility: visible !important;
+          backface-visibility: visible !important;
+  -webkit-animation-name: flipInX;
+          animation-name: flipInX;
+}
+
+@-webkit-keyframes flipInY {
+  0% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    -webkit-transition-timing-function: ease-in;
+            transition-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+            transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    -webkit-transition-timing-function: ease-in;
+            transition-timing-function: ease-in;
+  }
+
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+            transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+            transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px);
+            transform: perspective(400px);
+  }
+}
+
+@keyframes flipInY {
+  0% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    -webkit-transition-timing-function: ease-in;
+            transition-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+            transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    -webkit-transition-timing-function: ease-in;
+            transition-timing-function: ease-in;
+  }
+
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+            transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+            transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px);
+            transform: perspective(400px);
+  }
+}
+
+.flipInY {
+  -webkit-backface-visibility: visible !important;
+          backface-visibility: visible !important;
+  -webkit-animation-name: flipInY;
+          animation-name: flipInY;
+}
+
+@-webkit-keyframes flipOutX {
+  0% {
+    -webkit-transform: perspective(400px);
+            transform: perspective(400px);
+  }
+
+  30% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipOutX {
+  0% {
+    -webkit-transform: perspective(400px);
+            transform: perspective(400px);
+  }
+
+  30% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutX {
+  -webkit-animation-name: flipOutX;
+          animation-name: flipOutX;
+  -webkit-animation-duration: .75s;
+          animation-duration: .75s;
+  -webkit-backface-visibility: visible !important;
+          backface-visibility: visible !important;
+}
+
+@-webkit-keyframes flipOutY {
+  0% {
+    -webkit-transform: perspective(400px);
+            transform: perspective(400px);
+  }
+
+  30% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+            transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipOutY {
+  0% {
+    -webkit-transform: perspective(400px);
+            transform: perspective(400px);
+  }
+
+  30% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+            transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutY {
+  -webkit-backface-visibility: visible !important;
+          backface-visibility: visible !important;
+  -webkit-animation-name: flipOutY;
+          animation-name: flipOutY;
+  -webkit-animation-duration: .75s;
+          animation-duration: .75s;
+}
+
+@-webkit-keyframes lightSpeedIn {
+  0% {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+            transform: translate3d(100%, 0, 0) skewX(-30deg);
+    opacity: 0;
+  }
+
+  60% {
+    -webkit-transform: skewX(20deg);
+            transform: skewX(20deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: skewX(-5deg);
+            transform: skewX(-5deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: none;
+            transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes lightSpeedIn {
+  0% {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+            transform: translate3d(100%, 0, 0) skewX(-30deg);
+    opacity: 0;
+  }
+
+  60% {
+    -webkit-transform: skewX(20deg);
+            transform: skewX(20deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: skewX(-5deg);
+            transform: skewX(-5deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: none;
+            transform: none;
+    opacity: 1;
+  }
+}
+
+.lightSpeedIn {
+  -webkit-animation-name: lightSpeedIn;
+          animation-name: lightSpeedIn;
+  -webkit-animation-timing-function: ease-out;
+          animation-timing-function: ease-out;
+}
+
+@-webkit-keyframes lightSpeedOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+            transform: translate3d(100%, 0, 0) skewX(30deg);
+    opacity: 0;
+  }
+}
+
+@keyframes lightSpeedOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+            transform: translate3d(100%, 0, 0) skewX(30deg);
+    opacity: 0;
+  }
+}
+
+.lightSpeedOut {
+  -webkit-animation-name: lightSpeedOut;
+          animation-name: lightSpeedOut;
+  -webkit-animation-timing-function: ease-in;
+          animation-timing-function: ease-in;
+}
+
+@-webkit-keyframes rotateIn {
+  0% {
+    -webkit-transform-origin: center;
+            transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, -200deg);
+            transform: rotate3d(0, 0, 1, -200deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: center;
+            transform-origin: center;
+    -webkit-transform: none;
+            transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes rotateIn {
+  0% {
+    -webkit-transform-origin: center;
+            transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, -200deg);
+            transform: rotate3d(0, 0, 1, -200deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: center;
+            transform-origin: center;
+    -webkit-transform: none;
+            transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateIn {
+  -webkit-animation-name: rotateIn;
+          animation-name: rotateIn;
+}
+
+@-webkit-keyframes rotateInDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+            transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+            transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+            transform-origin: left bottom;
+    -webkit-transform: none;
+            transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+            transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+            transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+            transform-origin: left bottom;
+    -webkit-transform: none;
+            transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateInDownLeft {
+  -webkit-animation-name: rotateInDownLeft;
+          animation-name: rotateInDownLeft;
+}
+
+@-webkit-keyframes rotateInDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+            transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+            transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+            transform-origin: right bottom;
+    -webkit-transform: none;
+            transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+            transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+            transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+            transform-origin: right bottom;
+    -webkit-transform: none;
+            transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateInDownRight {
+  -webkit-animation-name: rotateInDownRight;
+          animation-name: rotateInDownRight;
+}
+
+@-webkit-keyframes rotateInUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+            transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+            transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+            transform-origin: left bottom;
+    -webkit-transform: none;
+            transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+            transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+            transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+            transform-origin: left bottom;
+    -webkit-transform: none;
+            transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateInUpLeft {
+  -webkit-animation-name: rotateInUpLeft;
+          animation-name: rotateInUpLeft;
+}
+
+@-webkit-keyframes rotateInUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+            transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -90deg);
+            transform: rotate3d(0, 0, 1, -90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+            transform-origin: right bottom;
+    -webkit-transform: none;
+            transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+            transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -90deg);
+            transform: rotate3d(0, 0, 1, -90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+            transform-origin: right bottom;
+    -webkit-transform: none;
+            transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateInUpRight {
+  -webkit-animation-name: rotateInUpRight;
+          animation-name: rotateInUpRight;
+}
+
+@-webkit-keyframes rotateOut {
+  0% {
+    -webkit-transform-origin: center;
+            transform-origin: center;
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: center;
+            transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, 200deg);
+            transform: rotate3d(0, 0, 1, 200deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOut {
+  0% {
+    -webkit-transform-origin: center;
+            transform-origin: center;
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: center;
+            transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, 200deg);
+            transform: rotate3d(0, 0, 1, 200deg);
+    opacity: 0;
+  }
+}
+
+.rotateOut {
+  -webkit-animation-name: rotateOut;
+          animation-name: rotateOut;
+}
+
+@-webkit-keyframes rotateOutDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+            transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+            transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+            transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+            transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+            transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+            transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownLeft {
+  -webkit-animation-name: rotateOutDownLeft;
+          animation-name: rotateOutDownLeft;
+}
+
+@-webkit-keyframes rotateOutDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+            transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+            transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+            transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+            transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+            transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+            transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownRight {
+  -webkit-animation-name: rotateOutDownRight;
+          animation-name: rotateOutDownRight;
+}
+
+@-webkit-keyframes rotateOutUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+            transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+            transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+            transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+            transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+            transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+            transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpLeft {
+  -webkit-animation-name: rotateOutUpLeft;
+          animation-name: rotateOutUpLeft;
+}
+
+@-webkit-keyframes rotateOutUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+            transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+            transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 90deg);
+            transform: rotate3d(0, 0, 1, 90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+            transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+            transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 90deg);
+            transform: rotate3d(0, 0, 1, 90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpRight {
+  -webkit-animation-name: rotateOutUpRight;
+          animation-name: rotateOutUpRight;
+}
+
+@-webkit-keyframes hinge {
+  0% {
+    -webkit-transform-origin: top left;
+            transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+            animation-timing-function: ease-in-out;
+  }
+
+  20%, 60% {
+    -webkit-transform: rotate3d(0, 0, 1, 80deg);
+            transform: rotate3d(0, 0, 1, 80deg);
+    -webkit-transform-origin: top left;
+            transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+            animation-timing-function: ease-in-out;
+  }
+
+  40%, 80% {
+    -webkit-transform: rotate3d(0, 0, 1, 60deg);
+            transform: rotate3d(0, 0, 1, 60deg);
+    -webkit-transform-origin: top left;
+            transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+            animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translate3d(0, 700px, 0);
+            transform: translate3d(0, 700px, 0);
+    opacity: 0;
+  }
+}
+
+@keyframes hinge {
+  0% {
+    -webkit-transform-origin: top left;
+            transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+            animation-timing-function: ease-in-out;
+  }
+
+  20%, 60% {
+    -webkit-transform: rotate3d(0, 0, 1, 80deg);
+            transform: rotate3d(0, 0, 1, 80deg);
+    -webkit-transform-origin: top left;
+            transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+            animation-timing-function: ease-in-out;
+  }
+
+  40%, 80% {
+    -webkit-transform: rotate3d(0, 0, 1, 60deg);
+            transform: rotate3d(0, 0, 1, 60deg);
+    -webkit-transform-origin: top left;
+            transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+            animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translate3d(0, 700px, 0);
+            transform: translate3d(0, 700px, 0);
+    opacity: 0;
+  }
+}
+
+.hinge {
+  -webkit-animation-name: hinge;
+          animation-name: hinge;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+            transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes rollIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+            transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.rollIn {
+  -webkit-animation-name: rollIn;
+          animation-name: rollIn;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+            transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+  }
+}
+
+@keyframes rollOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+            transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+  }
+}
+
+.rollOut {
+  -webkit-animation-name: rollOut;
+          animation-name: rollOut;
+}
+
+@-webkit-keyframes zoomIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+            transform: scale3d(.3, .3, .3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes zoomIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+            transform: scale3d(.3, .3, .3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+.zoomIn {
+  -webkit-animation-name: zoomIn;
+          animation-name: zoomIn;
+}
+
+@-webkit-keyframes zoomInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+            transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+@keyframes zoomInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+            transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomInDown {
+  -webkit-animation-name: zoomInDown;
+          animation-name: zoomInDown;
+}
+
+@-webkit-keyframes zoomInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+            transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+            transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+@keyframes zoomInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+            transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+            transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomInLeft {
+  -webkit-animation-name: zoomInLeft;
+          animation-name: zoomInLeft;
+}
+
+@-webkit-keyframes zoomInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+            transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+            transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+@keyframes zoomInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+            transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+            transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomInRight {
+  -webkit-animation-name: zoomInRight;
+          animation-name: zoomInRight;
+}
+
+@-webkit-keyframes zoomInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+            transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+@keyframes zoomInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+            transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomInUp {
+  -webkit-animation-name: zoomInUp;
+          animation-name: zoomInUp;
+}
+
+@-webkit-keyframes zoomOut {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+            transform: scale3d(.3, .3, .3);
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes zoomOut {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+            transform: scale3d(.3, .3, .3);
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.zoomOut {
+  -webkit-animation-name: zoomOut;
+          animation-name: zoomOut;
+}
+
+@-webkit-keyframes zoomOutDown {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+            transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+    -webkit-transform-origin: center bottom;
+            transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+@keyframes zoomOutDown {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+            transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+    -webkit-transform-origin: center bottom;
+            transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomOutDown {
+  -webkit-animation-name: zoomOutDown;
+          animation-name: zoomOutDown;
+}
+
+@-webkit-keyframes zoomOutLeft {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+            transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
+            transform: scale(.1) translate3d(-2000px, 0, 0);
+    -webkit-transform-origin: left center;
+            transform-origin: left center;
+  }
+}
+
+@keyframes zoomOutLeft {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+            transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
+            transform: scale(.1) translate3d(-2000px, 0, 0);
+    -webkit-transform-origin: left center;
+            transform-origin: left center;
+  }
+}
+
+.zoomOutLeft {
+  -webkit-animation-name: zoomOutLeft;
+          animation-name: zoomOutLeft;
+}
+
+@-webkit-keyframes zoomOutRight {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+            transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
+            transform: scale(.1) translate3d(2000px, 0, 0);
+    -webkit-transform-origin: right center;
+            transform-origin: right center;
+  }
+}
+
+@keyframes zoomOutRight {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+            transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
+            transform: scale(.1) translate3d(2000px, 0, 0);
+    -webkit-transform-origin: right center;
+            transform-origin: right center;
+  }
+}
+
+.zoomOutRight {
+  -webkit-animation-name: zoomOutRight;
+          animation-name: zoomOutRight;
+}
+
+@-webkit-keyframes zoomOutUp {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+            transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+    -webkit-transform-origin: center bottom;
+            transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+@keyframes zoomOutUp {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+            transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+    -webkit-transform-origin: center bottom;
+            transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomOutUp {
+  -webkit-animation-name: zoomOutUp;
+          animation-name: zoomOutUp;
+}
+
+@-webkit-keyframes slideInDown {
+  0% {
+    -webkit-transform: translateY(-100%);
+            transform: translateY(-100%);
+    visibility: visible;
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+}
+
+@keyframes slideInDown {
+  0% {
+    -webkit-transform: translateY(-100%);
+            transform: translateY(-100%);
+    visibility: visible;
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+}
+
+.slideInDown {
+  -webkit-animation-name: slideInDown;
+          animation-name: slideInDown;
+}
+
+@-webkit-keyframes slideInLeft {
+  0% {
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+    visibility: visible;
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+}
+
+@keyframes slideInLeft {
+  0% {
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+    visibility: visible;
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+}
+
+.slideInLeft {
+  -webkit-animation-name: slideInLeft;
+          animation-name: slideInLeft;
+}
+
+@-webkit-keyframes slideInRight {
+  0% {
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
+    visibility: visible;
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight {
+  0% {
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
+    visibility: visible;
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+}
+
+.slideInRight {
+  -webkit-animation-name: slideInRight;
+          animation-name: slideInRight;
+}
+
+@-webkit-keyframes slideInUp {
+  0% {
+    -webkit-transform: translateY(100%);
+            transform: translateY(100%);
+    visibility: visible;
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+}
+
+@keyframes slideInUp {
+  0% {
+    -webkit-transform: translateY(100%);
+            transform: translateY(100%);
+    visibility: visible;
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+}
+
+.slideInUp {
+  -webkit-animation-name: slideInUp;
+          animation-name: slideInUp;
+}
+
+@-webkit-keyframes slideOutDown {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+
+  100% {
+    visibility: hidden;
+    -webkit-transform: translateY(100%);
+            transform: translateY(100%);
+  }
+}
+
+@keyframes slideOutDown {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+
+  100% {
+    visibility: hidden;
+    -webkit-transform: translateY(100%);
+            transform: translateY(100%);
+  }
+}
+
+.slideOutDown {
+  -webkit-animation-name: slideOutDown;
+          animation-name: slideOutDown;
+}
+
+@-webkit-keyframes slideOutLeft {
+  0% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+
+  100% {
+    visibility: hidden;
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+}
+
+@keyframes slideOutLeft {
+  0% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+
+  100% {
+    visibility: hidden;
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+}
+
+.slideOutLeft {
+  -webkit-animation-name: slideOutLeft;
+          animation-name: slideOutLeft;
+}
+
+@-webkit-keyframes slideOutRight {
+  0% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+
+  100% {
+    visibility: hidden;
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
+  }
+}
+
+@keyframes slideOutRight {
+  0% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+
+  100% {
+    visibility: hidden;
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
+  }
+}
+
+.slideOutRight {
+  -webkit-animation-name: slideOutRight;
+          animation-name: slideOutRight;
+}
+
+@-webkit-keyframes slideOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+
+  100% {
+    visibility: hidden;
+    -webkit-transform: translateY(-100%);
+            transform: translateY(-100%);
+  }
+}
+
+@keyframes slideOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+
+  100% {
+    visibility: hidden;
+    -webkit-transform: translateY(-100%);
+            transform: translateY(-100%);
+  }
+}
+
+.slideOutUp {
+  -webkit-animation-name: slideOutUp;
+          animation-name: slideOutUp;
+}
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index ebc21a8..fbe9140 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -6,17 +6,32 @@
 	outline:0;
 	font-family: 'Lato', sans-serif;
 	-webkit-font-smoothing: subpixel-antialiased;
-	-webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
 }
+
 *, *:before, *:after {
   moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
 body{
   overflow-x:hidden;
 }
+.loading .wow {
+	display:none!important;
+}
+::-moz-selection { 
+    color: white;
+    background: black;
+}
 
+::selection {
+  color: white;
+  background: black;
+}
+
+body.editing *{
+	-webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
 body.noOverflow{
   overflow:hidden;
 }
@@ -42,6 +57,33 @@ body.pastePaper .wallpaper.active span:hover{
 
 a{
   color:black;
+	text-decoration: none;
+}
+
+#header {
+	position: fixed;
+	width: 100%;
+	top: 0;
+	left: 0;
+	z-index: 6;
+}
+#help-button {
+  display: none;
+}
+.editing #help-button {
+  display: inline;
+}
+.topLinks a.icon-help-circled {
+	font-size: 24px;
+	padding: 21px 27px 0 8px;
+}
+.topLinks a.icon-help-circled:hover  {
+	background:transparent;
+	color:red;
+}
+.page #header {
+	background: white;
+	border-bottom: 1px solid;
 }
 
 /*page*/
@@ -57,9 +99,6 @@ a{
   cursor: -moz-grabbing;
 }
 
-.floatimgImg.edit {
-
-}
 
 .floatingSwatch {
 	width: 50px;
@@ -167,13 +206,79 @@ h5 {
 .page.profile {
   color:white;
 }
-
+.profilepage {
+	margin-top:63px;
+}
 .page .profilepage,
 .page .projectList {
-  width: 100%;
-  margin: 40px 0 0 0;
-  border-spacing: 0;
-  clear: both;
+	width: 100%;
+	clear: both;
+	float:left;
+	display: inline-block;
+}
+
+.projectList.about {
+	text-align: left;
+	border-top: 1px solid;
+	padding:10% 0;
+}
+
+.projectList.about .item{
+	float: left;
+	width: 100%;
+	clear: both;
+}
+
+.projectList.about .item .rap {
+	max-width: 1250px;
+	margin: 0 auto;
+	padding: 0 10%;
+}
+
+.projectList.about .item span{
+	display: inline-block;
+	float: left;
+}
+
+.projectList.about .item span words {
+	max-width: 90%;
+	display: inline-block;
+	line-height: 28px;
+	font-size: 17px;
+	font-weight: 300;
+}
+
+.projectList.about .item span:nth-child(1){
+	width: 300px;
+	height: 300px;
+	display: inline-block;
+	float: left;
+	border-radius: 300px;
+	background-size:cover;
+	background-position:center;
+}
+
+.projectList.about .item span h3{
+	font-weight: 500;
+	font-size: 30px;
+	margin-bottom: 8px;
+}
+
+.projectList.about .item span:nth-child(2){
+	width: calc(100% - 300px);
+	padding: 70px 50px;
+}
+
+
+.projectList.about .item:nth-child(2) span:nth-child(2) {
+	padding: 70px 0 70px 100px;
+}
+.projectList.about .item:nth-child(2) {
+	padding: 5% 0;
+}
+
+.projectList.about .item:nth-child(2) span:nth-child(1){
+	float: right;
 }
 
 .page .showcase {
@@ -195,17 +300,48 @@ iframe.embed {
 	float: left;
 	width: 100%;
 }
+
 .projectList .room {
-  width: 33.3333%;
+  width: 50%;
 	height:40vh;
 	display:table;
 	position: relative;
 	float:left;
-	border-top:1px solid black;
+	border-top:1px solid;
 }
-.projectList .room:nth-child(4n+1){
-	width:100%;
+
+.projectList .room:nth-child(3n+2) {
+	border-right:1px solid black;
+}
+
+.projectList .room:nth-child(3n+1) {
+	width: 100%;
+	height: 50vh;
+}
+.projectList .room:hover .holder{
+	background: rgba(255,255,255,0);
 }
+.projectList .holder{
+	background: rgba(255,255,255,0.7);
+	-webkit-transition:2s background;
+	-moz-transition:2s background;
+	transition:2s background;
+}
+
+.room .images {
+  position: absolute;
+  top: 0; left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  overflow: hidden;
+}
+.room .images img {
+  max-height: 100%;
+  max-width: 100%;
+}
+
 .page .btn {
 	clear: both;
 	padding: 30px 0;
@@ -248,61 +384,6 @@ iframe.embed {
   color:white;
 }
 
-.projectList .editBtn {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-}
-
-/*
-.room1 {
-  position: relative;
-  overflow: hidden;
-  background-image:url(https://s3.amazonaws.com/luckyplop/7eb159e99924e6e371046d6fa12e566fd77901c9.jpg);
-}
-.room2 {
-  background-image:url(https://s3.amazonaws.com/luckyplop/fd4ebe8a7a4246c8273fc999fb1ef0d6a8260b8c.png);
-}
-
-.room1 form textarea {
-  width: 226px;
-}
-
-.room1 .radio-group {
-  width: 226px;
-}
-
-.room1 .radio-group__label {
-  width: 106px;
-  font-size: 13px;
-}
-
-.room1 .formHolder {
-  top: 0;
-  padding-top: 10px;
-  display: table;
-  width: 100%;
-  height: 100%;
-  background: rgba(255,255,255,0.9);
-  -webkit-transform:translateY(-100%);
-  transform:translateY(-100%);
-}
-
-.room1 form {
-  padding: 0 10px;
-  max-width: 440px;
-}
-
-.room1 .formInner {
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.room1.editing .formHolder {
-	-webkit-transform:translateY(0);
-	transform:translateY(0);
-}
-*/
 
 .page .questions {
   background: #55efcb;
@@ -334,11 +415,12 @@ iframe.embed {
 }
 
 .page h1 {
-  font-size: 80px;
-  font-weight: 100;
-  padding-top: 25px;
+	font-size: 80px;
+	font-weight: 100;
+	padding: 20px 0 25px 0;
 	float: left;
 	width: 100%;
+	border-top: 1px solid;
 }
 
 /* DOCUMENTATION / ABOUT SECTION / FAQ PAGES */
@@ -380,21 +462,15 @@ iframe.embed {
 
 
 /* PROFILE PAGE */
-.profilepage .profilePic {
-  font-size: 148px;
-  background-size: cover;
-  background-position: center;
-}
-.editProfile {
-  margin-right: 10px;
-  color: black;
-  font-weight: 100;
-  text-decoration: none;
-	padding: 50px 0 100px 0;
-}
-.editProfile span {
-  vertical-align: middle;
+.profilePic {
+	font-size: 148px;
+	background-size: cover;
+	background-position: center;
+	width: 40%;
+	height: 50vh;
+	float: left;
 }
+
 .topLinks {
   float: right;
 	z-index: 3;
@@ -408,22 +484,34 @@ iframe.embed {
   padding: 20px 8px;
   color: black;
   font-weight: 300;
-	float:right;
+	float:left;
   text-decoration: none;
-  border-bottom:1px solid transparent;
+}
+.page .topLinks a {
+	border-right:1px solid;
+}
+
+.topLinks a:last-child {
+	border-right:0px solid;
 }
 .topLinks a:hover {
 	background: black;
 	color: white;
 }
 .profilepage .bio {
-  text-align: left;
-  padding: 0 5%;
-  width: 66.5%;
-  background-image:url(../img/pattern.png);
-  background-size:100%;
-  background-color: lightyellow;
-  box-shadow: -4px 6px 7px rgba(0,0,0,0.1) inset;
+	text-align: left;
+	padding: 0 5%;
+	width: 60%;
+	background-image: url(../img/pattern.png);
+	background-size: 100%;
+	background-color: lightyellow;
+	display: table;
+	height: 50vh;
+	float: left;
+}
+
+.profilepage .bio a:hover {
+	text-decoration:underline;
 }
 
 .profilepage .bio.one {
@@ -475,8 +563,10 @@ iframe.embed {
 .profilepage .bio span {
 	font-size: 16px;
 	font-weight: 300;
+	float: left;
+	clear: both;
 }
-.profilepage .bio span:after { content: ' \00b7 ' }
+
 .profilepage .bio span:last-of-type:after { display: none; }
 
 .templates {
@@ -493,31 +583,35 @@ iframe.embed {
   background-size: contain;
   background-repeat: no-repeat;
   background-color: #fff;
-  background-image: url(http://upload.wikimedia.org/wikipedia/commons/d/d9/Graceland_Memphis_TN_Floorplan_Basement.jpg);
   width: 20vw;
   height: 20vh;
   display: inline-block;
   margin: 4vw;
-  border:1px solid white;
+  border:1px solid black;
   position: relative;
 }
 
 .templates span:after {
-  content: attr(data-name);
-  position: absolute;
-  top: 100%;
-  width: 100%;
-  left: 0;
-  background: #fff;
-  padding: 5px;
-  border-top: 1px solid black;
+	content: attr(data-name);
+	position: absolute;
+	top: 100%;
+	width: 100%;
+	left: 0;
+	background: #fff;
+	padding: 5px;
+	border-top: 1px solid black;
+	font-weight: 300;
 }
 
 .templates span:hover {
-  border:1px dashed black;
+  border:1px solid blue;
   cursor:pointer;
 }
 
+.templates span:hover:after {
+	border-top: 1px solid blue;
+}
+
 .templates h1 {
   font-weight: 300;
   font-size: 21px;
@@ -574,6 +668,10 @@ iframe.embed {
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
 }
+.destroyActive .mx-scene, .destroyActive .mx-object3d.image, .menu span.inuse[data-role="destroy-media"] {
+	cursor:url(/assets/img/delete-cursor.png), auto;
+}
+
 .mx-scenery:active {
   cursor: pointer;
 }
@@ -651,8 +749,8 @@ iframe.embed {
 
 .dot {
 	background:white;
-	border-radius:20px;
-	border: 1px solid black;
+	border-radius: 50%;
+	border: 2px solid black;
 }
 
 .image {
@@ -663,10 +761,10 @@ iframe.embed {
 /* AUTOSAVE MONITOR */
 
 #minotaur {
-  position: absolute;
-  top: 25px;
-  right: 260px;
-  opacity: 0;
+	position: absolute;
+	top: 0;
+	right: 230px;
+	opacity: 0;
 }
 #minotaur .label:after {
   padding: 6px;
@@ -674,11 +772,13 @@ iframe.embed {
   font-weight: 300;
 }
 #minotaur.saving {
-  background: white;
-  opacity: 1;
-  z-index: 20;
-  font-size: 13px;
-  border: 1px solid;
+	padding: 20px 8px;
+	color: white;
+	background: black;
+	font-weight: 300;
+	float: right;
+	text-decoration: none;
+	z-index: 33;
 }
 #minotaur.saving .label:after {
   content: 'SAVING';
@@ -690,15 +790,14 @@ iframe.embed {
 }
 .logo {
   float:left;
-  padding:7px 0 0 10px;
-  z-index:4;
-  position:relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
+  padding:6px 8px 9px 8px;
 }
+
 .logo:hover {
-  -webkit-filter:invert(30%);
+  background:black;
+}
+.logo:hover svg {
+	fill:white;
 }
 .profile{
   padding:8px;
@@ -734,8 +833,8 @@ iframe.embed {
 }
 
 .menu {
-  right: 10px;
-  top: 70px;
+	right: 9px;
+	top: 63px;
   z-index:3;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -789,6 +888,11 @@ iframe.embed {
   font-size: 13px;
 }
 
+.menu span.icon-ios7-sunny-outline:hover:after {
+	width: 130px;
+}
+
+
 .menu span.inuse:hover:after{
   content:"";
   opacity:0;
@@ -802,7 +906,7 @@ iframe.embed {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 3;
+  z-index: 6;
   overflow-y: scroll;
 }
 
@@ -873,8 +977,22 @@ iframe.embed {
   background-image:url(https://s3.amazonaws.com/luckyplop/735c46b0268cd511a22c37bc0c11e9f60c4459b2.png)!important;
   cursor:move;
 }
-.deleteActive .mx-object3d.image {
-  cursor:pointer;
+#deleteMedia:after {
+	content:"delete media?";
+}
+.deleteArmed #deleteMedia:after {
+	content:"click media you want to delete";
+}
+.deleteArmed #deleteMedia:before {
+	content: "X";
+	background: black;
+	width: 23px;
+	height: 23px;
+	position: absolute;
+	margin-left: -25px;
+	margin-top: -4px;
+	font-size: 19px;
+	
 }
 .deleteActive .mx-object3d.image:after {
   content: "\e68f";
@@ -913,8 +1031,8 @@ iframe.embed {
   left: 50%;
   padding: 26px 20px;
   margin-left: -200px;
-  background: white;
-  z-index: 4;
+  background: rgba(255,255,255,0.9);
+  z-index: 7;
   -webkit-transform: translateY(-1000%);
   -webkit-transition: -webkit-transform 0.6s ease-in-out;
   transform: translateY(-1000%);
@@ -996,31 +1114,40 @@ iframe.embed {
 }
 
 .mediaDrawer h2{
-  font-size: 18px;
+  font-size: 24px;
   display: inline-block;
-  margin-top: 20px;
   position:relative;
   z-index:4;
+	font-weight: 300;
+}
+
+.mediaDrawer.mediaViewer h2 {
+	margin-top:28px;
+	font-size:18px;
 }
 
 .mediaDrawer h3{
-  margin-top: 28px;
+  margin-top: 18px;
   position: relative;
   z-index: 4;
 }
 
 .editBtn{
-  color: #FF3B30;
+  color: red;
   padding: 3px;
   font-size: 12px;
   display: inline-block;
   cursor:pointer;
   font-weight:600;
   text-decoration:none;
+  position: absolute;
+  right: 10px;
+  top: 10px;
 }
 
 .editBtn:hover {
- background:black;
+	background:red;
+	color:white;
 }
 
 .deleteArmed .mediaDrawer h3 {
@@ -1062,21 +1189,23 @@ iframe.embed {
   color: #555;
   text-decoration:none;
   padding:5px;
-  border:3px solid white;
+  border:2px solid white;
+	font-weight: 400;
+	font-size: 15px;
 }
 
 .mediaDrawer h2 a.active{
   cursor:default;
-  border:3px solid black;
+  border:2px solid black;
   color:black;
 }
 
 .mediaDrawer h2 a:hover {
-  border:3px solid #ccc;
+  border:2px solid #ccc;
 }
 
 .mediaDrawer h2 a.active{
-  border:3px solid black;
+  border:2px solid black;
 }
 
 
@@ -1096,7 +1225,19 @@ iframe.embed {
 .mediaContainer img, .mediaContainer video {
   max-width:100%;
 }
-
+#reset {
+	position: fixed;
+	bottom: 160px;
+	left: 20px;
+	border-bottom: 1px solid black;
+	padding-bottom: 3px;
+	z-index:3;
+}
+#reset:hover {
+	cursor:pointer;
+	background:black;
+	color:white;
+}
 #minimap {
 	position: fixed;
 	bottom: 20px;
@@ -1132,11 +1273,11 @@ iframe.embed {
   right: 80px;
   margin-top: 77px;
   width: 162px;
-  z-index: 1;
   -webkit-transition: -webkit-transform 0.1s ease-in-out;
   -webkit-transform: translateX(400px);
   transition: transform 0.1s ease-in-out;
   transform: translateX(400px);
+	padding: 5px 5px 9px 5px;
 }
 .wallpaper.active {
   display:inline-block;
@@ -1160,21 +1301,37 @@ iframe.embed {
   transform: translateX(3px) translateY(-3px);
 }
 .wallpaper .swatches {
-  width: 100%;
-  border-bottom: 1px solid black;
-  min-height: 30px;
+	width: 100%;
+	min-height: 30px;
+	border-bottom: 1px solid #ddd;
+	display: inline-block;
+	padding-bottom: 6px;
 }
-.wallpaper {
-  font-size: 14px;
-  font-weight: 300;
+
+.wallpaperUpload, .wallpaperRemove {
+	border: 1px solid;
+	display: inline-block;
+	width: 100%;
+	margin-top: 5px;
+	font-size: 14px;
+	font-weight: 300;
 }
+
 .wallpaper label {
   position: relative;
   top: -6px;
   float: none;
 }
 .wallpaper form {
+  position: relative;
   padding: 2px 0 0 0;
+  font-size: 14px;
+  font-weight: 300;
+}
+.wallpaper form:hover, .wallpaperRemove:hover {
+	background:black;
+	color:white;
+	cursor:pointer;
 }
 .wallpaper .icon-ios7-upload-outline {
   font-size: 26px;
@@ -1188,6 +1345,9 @@ iframe.embed {
   width: 18px;
   margin: 0 4px;
 }
+.wallpaper .wallpaperRemove:hover img {
+  -webkit-filter:invert(100%);
+}
 .wallpaperUpload .upload-icon.uploading {
 }
 .wallpaperUpload .upload-icon.uploading:before {
@@ -1209,34 +1369,29 @@ iframe.embed {
   border: 1px solid #000;
 }
 .wallpaperUpload input[type="file"]{
-  position: absolute;
-  margin-left: -134px;
-  background: blue;
-  height: 28px;
-  width: 100%;
-  margin-top: 0px;
-  opacity: 0;
-  cursor:pointer;
+	position: absolute;
+  top: 0;
+  left: 0;
+	background: blue;
+	height: 28px;
+	width: 100%;
+	opacity: 0;
+	cursor: pointer;
 }
 
 
 /* COLOR PICKER */
 
 .lightcontrol {
-  margin-top: 13%;
+  margin-top: 8%;
   right: 80px;
-  padding: 20px;
+  padding: 13px 20px 20px 20px;
   -webkit-transform: translateX(400px);
   -webkit-transition: -webkit-transform 0.2s ease-in-out;
   transform: translateX(400px);
   transition: -webkit-transform 0.2s ease-in-out;
 }
-.lightcontrol h4 {
-	font-weight: 600;
-	font-size: 12px;
-	line-height: 0;
-	margin-top: 15px;
-}
+
 .lightcontrol.active {
   -webkit-transform: translateX(0px);
   transform: translateX(0px);
@@ -1256,12 +1411,14 @@ input[type=range] {
 }
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
-  background-color: #000;
-  width: 10px;
-  height: 10px;
+  background-color: white;
+  width: 15px;
+  height: 15px;
   border-radius:10px;
   cursor:pointer;
+	border:3px solid #000;
 }
+
 #color-picker {
   position: relative;
 }
@@ -1286,26 +1443,44 @@ input[type="range"]::-webkit-slider-thumb {
   cursor: pointer;
 	float:left;
 }
-span:hover .swatch {
-	border: 1px solid red;
-}
-.active .swatch {
+
+.color-swatches .active .swatch {
   border: 1px solid #000;
 }
 .color-swatches {
   margin-top: 10px;
 }
+.color-swatches.defaults {
+	margin-top: 10px;
+}
+
+.color-swatches.defaults span{
+	font-size:12px;
+	font-weight:500;
+}
 .color-swatches span {
 	display: inline-block;
 	width: 50%;
 	float:left;
 	cursor:pointer;
+	font-size: 14px;
+	font-weight: 300;
+}
+.vvbox .color-swatches ~ h4 {
+	margin-bottom: -4px;
+	border-bottom: 1px solid #ddd;
+	padding-bottom: 4px;
+	padding-top: 11px;
+	display: inline-block;
+	width: 100%;
+	color: #555;
 }
+
 .color-swatches span:nth-child(1),.color-swatches span:nth-child(2){
 	margin-bottom:5px;
 }
-.color-swatches span.active{
-	background:red;
+.color-swatches span.active, .color-swatches span.active:hover{
+	background:#000;
 	color:white;
 }
 .color-swatches span:nth-child(3){
@@ -1315,20 +1490,11 @@ span:hover .swatch {
 	background:#eee;
 }
 
-.color-swatches span.active:hover {
-	background:red;
-}
 .color-swatches label {
-	font-size: 14px;
-	font-weight: 300;
 	position: relative;
 	padding-left: 5px;
 	display: inline-block;
 	cursor: pointer;
-	top: -2px;
-}
-.color-swatches span.active label {
-  font-weight: 600;
 }
 
 
@@ -1337,14 +1503,21 @@ span:hover .swatch {
   left: 10px;
 }
 
+.vvbox h4 {
+	font-weight: 600;
+	margin-bottom: 10px;
+	border-bottom: 1px solid #999;
+	padding-bottom: 6px;
+}
+
 .settings {
-  padding: 20px;
+  padding: 10px 12px 12px 12px;
   bottom: 20px;
   right: 10px;
   font-size: 12px;
-  -webkit-transform: translateY(400px);
+  -webkit-transform: translateY(450px);
   -webkit-transition: -webkit-transform 0.2s ease-in-out;
-  transform: translateY(400px);
+  transform: translateY(450px);
   transition: -webkit-transform 0.2s ease-in-out;
 }
 
@@ -1529,7 +1702,8 @@ span:hover .swatch {
   color:white;
 }
 .btn.marg {
-	margin-top:10px;
+	margin-top:5px;
+	width: 100%;
 }
 .warn {
 	background:red;
@@ -1549,10 +1723,11 @@ button {
 }
 
 #builder-units {
-	width:100%;
+	width:75%;
 }
 #mediaEditor .warn {
 	width:100%;
+	padding:5px 0;
 }
 
 .radio-group {  
@@ -1719,12 +1894,14 @@ form li textarea {
 }
 
 .hero {
-	float:left;
-	width:100%;
-	clear:both;
-	height:70vh;
-	display:table;
-	background-size:cover;
+	float: left;
+	width: 100%;
+	clear: both;
+	height: 80vh;
+	display: table;
+	background-size: cover;
+	background-position: center;
+	margin-top: 63px;
 }
 .hero .circle {
 	font-size: 20px;
@@ -1733,9 +1910,12 @@ form li textarea {
 	display: inline-block;
 	padding: 60px 20px;
 	border-radius: 230px;
+	-webkit-transition:0.2s all;
+	-moz-transition:0.2s all;
+	transition:0.2s all;
 }
 
-.hero .circle:hover {
+.desktop .hero .circle:hover {
 	background:black;
 	color:white;
 	cursor:pointer;
@@ -1771,7 +1951,7 @@ form li textarea {
 	line-height: 75px;
 }
 
-.close:hover {
+.desktop .close:hover {
   background:black;
 	color:white;
 }
@@ -1823,9 +2003,9 @@ a[data-role="forgot-password"] {
 }
 
 .aboutRoom {
-  width: 250px;
+  width: 190px;
   background: rgba(255,255,255,0.95);
-  padding: 20px;
+  padding: 2px 8px 8px 8px;
   position: fixed;
   bottom: 10px;
   left: 10px;
@@ -1840,12 +2020,25 @@ a[data-role="forgot-password"] {
 	padding:5px 0;
 	display: inline-block;
 }
+
+.vvbox .txt {
+	padding:5px;
+}
+
+.vvbox.wallpaper .txt{
+	padding:0;
+}
+
+.aboutRoom.vvbox .txt {
+	padding: 5px 0 3px 0;
+}
+
 .aboutRoom h1 a{
   text-decoration: none;
   font-style: italic;
 }
 
-.aboutRoom h1 a:hover {
+.desktop .aboutRoom h1 a:hover {
   text-decoration:underline;
 }
 
@@ -1857,7 +2050,9 @@ a[data-role="forgot-password"] {
 	width: 100%;
 	text-align: center;
 }
-
+.mobile .aboutRoom .editlink {
+	display:none;
+}
 .aboutRoom .editlink:hover {
 	background:black;
 	color:white;
@@ -1872,25 +2067,25 @@ a[data-role="forgot-password"] {
   position: fixed;
   right: 0px;
   bottom: 10px;
-  padding-right:10px;
-  background:rgba(255,255,255,0.95);
+  padding: 3px 10px 3px 4px;
+  background:rgba(255,255,255,0.1);
   z-index: 2;
 }
 
 .share h2 {
   font-weight: 300;
   font-size: 18px;
-  text-align: right;
 }
 
 .share a{
   color: #017cfe;
   text-decoration: none;
-  margin-left: 6px;
   font-size: 13px;
   font-weight: 600;
 }
-
+.share a:nth-child(3){
+	margin-left:4px;
+}
 .share a:hover{
   text-decoration:underline;
 }
@@ -1991,3 +2186,79 @@ a[data-role="forgot-password"] {
   0%{height:250px;}
   100%{height:500px;top:2px;}
 }
+
+
+/* MOBILE */
+
+
+@media (max-width: 680px) {
+	.logo {
+		padding: 0px 4px 0px 8px;
+	}
+	.logo svg {
+		width: 70px;
+		height: 37px;
+	}
+	
+	.topLinks a {
+	padding: 12px 8px;
+	color: black;
+	font-weight: 400;
+	float: left;
+	text-decoration: none;
+	font-size: 14px;
+	}
+
+	.page h1 {
+	font-size: 26px;
+	padding: 10px 0 15px 0;
+	font-weight: 300;
+	border-top: 1px solid;
+	}
+	.hero {
+	height: 450px;
+	margin-top: 41px;
+	}
+	.page .profilepage {
+		margin-top: 41px;
+	}
+	.profilepage .bio {
+	height: 180px;
+	width: 50%;
+	}
+	.profilepage .bio h2 {
+		font-weight: 300;
+		font-size: 30px;
+	}
+	.profilePic {
+	width: 50%;
+	height: 180px;
+	}
+	.projectList.about {
+	text-align: center;
+	padding: 0;
+	}
+	.projectList.about .item .rap {
+	padding: 0;
+	}
+	.projectList.about .item span:nth-child(1) {
+	width: 100%;
+	border-radius: 0;
+	height: 150px;
+	}
+	.projectList.about .item span:nth-child(2) {
+	width: 100%;
+	padding: 10px 0;
+	}
+	.projectList.about .item:nth-child(2) {
+	padding: 50px 0;
+	}
+	.page .viewMore.btn {
+	text-decoration: none;
+	font-size: 20px;
+	padding: 20px 0;
+}
+.footer a, .footer span {
+margin: 9px;
+}
+}
\ No newline at end of file
diff --git a/server/lib/views/index.js b/server/lib/views/index.js
index 29b84d8..ca48159 100644
--- a/server/lib/views/index.js
+++ b/server/lib/views/index.js
@@ -27,6 +27,7 @@ views.editor_new = function (req, res) {
 		res.redirect('/')
 	}
 	else {
+	  res.locals.opt.editing = true
 		res.render('editor')
 	}
 }
@@ -36,6 +37,7 @@ views.editor = function (req, res) {
 		res.redirect('/')
 	}
 	else if (req.isOwner || req.isCollaborator || req.isStaff) {
+	  res.locals.opt.editing = true
 		res.render('editor')
 	}
 	else {
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs
index 8b133a5..fdf95a7 100644
--- a/views/controls/editor/light-control.ejs
+++ b/views/controls/editor/light-control.ejs
@@ -1,40 +1,40 @@
 <div class="vvbox lightcontrol">
+	<h4>Edit Room Colors</h4>
   <div id="color-picker">
   </div>
   
 	<div class="slider">
-		<h4>Brightness Control</h4>
 		<input type="range" min="0" max="110" value="0" id="brightness-control" />
 	</div>
 
   <div class="color-swatches">
-	<span>
-    <div class="swatch" id="wall-color" data-mode="wall"></div><label>wall</label>
-	</span>
-	<span class="active">
-    <div class="swatch" id="floor-color" data-mode="floor"></div><label>floor</label>
-	</span>
-	<span>
-    <div class="swatch" id="ceiling-color" data-mode="ceiling"></div><label>ceiling</label>
-	</span>
-	<span>
-    <div class="swatch" id="outline-color" data-mode="outline"></div><label>outlines</label>
-	</span>
-	<span>
+    <span>
+      <div class="swatch" id="wall-color" data-mode="wall"></div><label>wall</label>
+    </span>
+    <span class="active">
+      <div class="swatch" id="floor-color" data-mode="floor"></div><label>floor</label>
+    </span>
+    <span>
+      <div class="swatch" id="ceiling-color" data-mode="ceiling"></div><label>ceiling</label>
+    </span>
+    <span>
+      <div class="swatch" id="outline-color" data-mode="outline"></div><label>outlines</label>
+    </span>
   </div>
 
-<!--
-	<div class="slider">
-		<input type="range" min="0" max="100" value="100" id="wall-hue" />
-		<h4>Wall Hue</h4>
-	</div>
-	<div class="slider">
-		<input type="range" min="0" max="100" value="0" id="brightness-control" />
-		<h4>Brightness</h4>
-	</div>
-	<div class="slider">
-		<input type="range" min="0" max="100" value="0" id="shadow-control" />
-		<h4>Shadow</h4>
-	</div>
--->
+  <h4>Preset Styles</h4>
+  <div class="color-swatches defaults">
+    <span>
+      Wireframe
+    </span>
+    <span>
+      Shaded
+    </span>
+    <span>
+      P.Funk
+    </span>
+    <span>
+      SeaPunk
+    </span>
+  </div>
 </div>
diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs
index d73a3ef..3d95fb9 100644
--- a/views/controls/editor/media-drawer.ejs
+++ b/views/controls/editor/media-drawer.ejs
@@ -17,46 +17,11 @@
 <div class="mediaDrawer fixed animate mediaViewer">
 	<span class="close">X</span>
 	<h2><a href="#" class="userToggle active">Your Media</a> – <a href="#" class="foundToggle">Found Media</a></h2><br>
-	<h3 class="editBtn warn" id="deleteMedia">delete media?</h3>
+	<h3 class="editBtn warn" id="deleteMedia"></h3>
+
 	<div class="myMedia">
 	</div>
 	
 	<div class="foundMedia">
-		<span class="mediaContainer">
-			<img src="https://d1ycxz9plii3tb.cloudfront.net/post_images/52ec0e20c9dc24f1d8000067/large.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="https://d1ycxz9plii3tb.cloudfront.net/additional_images/4e6bf67bc23f490001004579/1/tall.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="https://d1ycxz9plii3tb.cloudfront.net/additional_images/52dcca28139b2135030002a8/tall.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="https://d1ycxz9plii3tb.cloudfront.net/additional_images/52927bb2b202a3669d000704/larger.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="https://d1ycxz9plii3tb.cloudfront.net/additional_images/4f9f3a3ce262e60001000fb3/large.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="http://2.bp.blogspot.com/-GD6IxUvsdOo/UdrcMFLVYNI/AAAAAAAAF2E/kbRfxMxiUlQ/s1600/okeeffe.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="http://www.bobkessel.com/wordpress/wp-content/uploads/2009/10/moma-bob-kessel-410.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="http://static1.artsy.net/partner_show_images/52f28f348b3b81f2fc000364/large.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="http://static3.artsy.net/partner_show_images/52e83674c9dc24397f0000d8/large.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="http://static0.artsy.net/partner_show_images/52d96d484b84801ef0000273/large.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="http://static1.artsy.net/partner_show_images/52778616275b24f95c00011d/1/large.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="http://static1.artsy.net/partner_show_images/52dc65311a1e86be6b000205/large.jpg">
-		</span>
 	</div>
 </div>
\ No newline at end of file
diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs
index 000e8db..305a602 100644
--- a/views/controls/editor/media-editor.ejs
+++ b/views/controls/editor/media-editor.ejs
@@ -1,4 +1,5 @@
 <div class="vvbox settings" id="mediaEditor">
+	<h4>Media Settings</h4>
 	<input type="hidden" name="_csrf" value="[[- token ]]">
 	<input type="hidden" name="_id" value="new">
 
@@ -42,6 +43,7 @@
 		<label for="scenery-height">height</label>
 		<input type="text" class="units" name="height" id="scenery-height">
 	</div>
+	<!--
 	<div class="setting number">
 		<select id="builder-units" name="units">
 			<option value="px">pixels</option>
@@ -49,8 +51,8 @@
 			<option value="m">meter</option>
 		</select>
 	</div>
-
+	-->
 	<div class="setting">
-		<a href="#" class="warn btn" data-role="destroy-media">delete this media</a>
+		<a href="#" class="warn btn" data-role="destroy-media">remove from wall</a>
 	</div>
 </div>
diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs
index ed587fa..ad62b55 100644
--- a/views/controls/editor/settings.ejs
+++ b/views/controls/editor/settings.ejs
@@ -1,4 +1,5 @@
 <div class="vvbox settings" id="editorSettings">
+	<h4>Room Settings</h4>
 	<input type="hidden" name="_csrf" value="[[- token ]]">
 	<input type="hidden" name="_id" value="new">
 
diff --git a/views/controls/editor/signed-out.ejs b/views/controls/editor/signed-out.ejs
index 20e3715..118fb7c 100644
--- a/views/controls/editor/signed-out.ejs
+++ b/views/controls/editor/signed-out.ejs
@@ -8,7 +8,7 @@
 </div>
 
 <div class="share">
-	<h2>Share this on–</h2>
+	<h2>Share on–</h2>
 	<a href="#">Facebook</a>
 	<a href="#">Twitter</a>
 </div>
diff --git a/views/controls/editor/text-editor.ejs b/views/controls/editor/text-editor.ejs
new file mode 100644
index 0000000..205fbdf
--- /dev/null
+++ b/views/controls/editor/text-editor.ejs
@@ -0,0 +1,32 @@
+<div class="vvbox settings" id="textEditor">
+	<h4>Edit Text</h4>
+  
+	<div class="setting">
+    <select name="font-family">
+      <option>Helvetica</option>
+      <option>Times New Roman</option>
+      <option>Lato</option>
+      <option></option>
+    </select>
+    <select name="font-size">
+      <option value="9">9pt</option>
+      <option value="10">10pt</option>
+      <option value="12">12pt</option>
+      <option value="16">16pt</option>
+      <option value="24">24pt</option>
+      <option value="36">36pt</option>
+      <option value="72">72pt</option>
+    </select>
+  </div>
+  
+	<div class="setting">
+	  <textarea name="text-body"></textarea>
+  </div>
+  
+	<div class="setting">
+		<a href="#" class="warn btn" data-role="destroy-text">remove from wall</a>
+	</div>
+</div>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs
index 4abf780..92807e1 100644
--- a/views/controls/editor/toolbar.ejs
+++ b/views/controls/editor/toolbar.ejs
@@ -3,6 +3,7 @@
 		data-role='open-media-viewer'
 		data-info="add media"
 		class="icon-ios7-photos-outline"></span>
+<!-- 
 	<span
 		data-role='resize-media'
 		data-info="resize media"
@@ -12,6 +13,11 @@
 		data-info="delete media"
 		class="icon-ios7-trash-outline"></span>
 	<span
+		data-role='toggle-text-editor'
+		data-info="edit wall text"
+		class="icon-ios7-compose-outline"></span>
+ -->
+	<span
 		data-role='toggle-wallpaper-panel'
 		data-info="add wallpaper"
 		class="icon-ios7-keypad-outline"></span>
@@ -19,10 +25,14 @@
 		data-role='toggle-light-control'
 		data-info="edit room colors"
 		class="icon-ios7-sunny-outline"></span>
+
+[[ if (user.username == "test12343") { ]]
 	<span
-		data-role='edit-wall-text'
+		data-role='toggle-text-editor'
 		data-info="edit wall text"
 		class="icon-ios7-compose-outline"></span>
+[[ } ]]
+		
 	<span
 		data-role='toggle-project-settings'
 		data-info="room settings"
diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs
index 208dfff..95cf827 100644
--- a/views/controls/editor/wallpaper.ejs
+++ b/views/controls/editor/wallpaper.ejs
@@ -1,5 +1,5 @@
 <div class="vvbox wallpaper">
-	
+	<h4>Add Wallpaper</h4>
 	<!-- IF NO WALL PAPER -->
 	<span class="txt">Add custom wallpaper to walls. Begin by uploading a pattern. Or try this one -> </span>
 	
diff --git a/views/controls/reader/about-room.ejs b/views/controls/reader/about-room.ejs
index e13f363..ab8fee6 100644
--- a/views/controls/reader/about-room.ejs
+++ b/views/controls/reader/about-room.ejs
@@ -4,18 +4,18 @@
 		<a href="[[- authorlink ]]">[[- author ]]</a>
 	</h1>
 	[[ if (description) { ]]
-	<span class="txt">[[- description ]]</span>
+	<span class="txt">[[- description ]]</span><br>
 	[[ } ]]
-	<h2>
-	  Last modified [[- date ]]
+	
+	<span class="txt">Last modified [[- date ]]</span>
+
 	  [[ if (canEdit) { ]]
-	    <a href="[[- editlink ]]" class="btn warn marg">Edit Room</a>
+	   <br> <a href="[[- editlink ]]" class="btn warn marg">Edit Room</a>
 	  [[ } ]]
-	</h2>
 </div>
 
 <div class="share">
-	<h2>Share this on–</h2>
+	<h2>Share on–</h2>
 	<a href="#">Facebook</a>
 	<a href="#">Twitter</a>
 </div>
diff --git a/views/editor.ejs b/views/editor.ejs
index 9950878..e029225 100755
--- a/views/editor.ejs
+++ b/views/editor.ejs
@@ -17,6 +17,7 @@
 			[[ include controls/editor/media-editor ]]
 			[[ include controls/editor/wallpaper ]]
 			[[ include controls/editor/light-control ]]
+			[[ include controls/editor/text-editor ]]
 			[[ include controls/editor/collaborators ]]
 			[[ include controls/editor/settings ]]
 		</div>
diff --git a/views/home.ejs b/views/home.ejs
index e49dc4a..76b6cea 100755
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -15,7 +15,7 @@
 
 	<div class="hero" style="background-image:url(https://s3.amazonaws.com/luckyplop/6450f5b88c5c043a4551eff8902b1728f813bd66.jpg)">
 			<div class="holder">
-				<span class="circle">
+				<span class="circle wow bounceInDown">
 				<span class="videoTitle">Create 3D Rooms</span><br>
 				<span class="icon-ios7-play"></span><br>
 				<span class="videoTitle">Watch video.</span>
@@ -23,9 +23,47 @@
 			</div>
 	</div>
 	
+	<h1>Whats VValls For?</h1>
+	
+	<div class="projectList about">
+		<div class="item wow bounceInLeft">
+			<div class="rap">
+			<span style="background-image:url(http://www.articlesweb.org/blog/wp-content/gallery/artist-painting-techniques-you-must-know/artist-painting-techniques-you-must-know-15.jpg)">
+			</span>
+			<span>
+				<h3>Plan Your Art Show</h3>
+				<words>Whether you're and artist or curator, VValls makes visualizing art within a physical space much easier. With VValls you can build 3D rooms and put your add art to the walls. Map out how your next gallery show will look without having to drill into sheetrock.</words>
+			</span>
+		</div>
+	</div>
+		
+		<div class="item wow bounceInRight">
+			<div class="rap">
+			<span style="background-image:url(http://dump.fm/images/20100904/1283618382861-dumpfm-timb-paperrad.paranoia.gif)">
+			</span>
+			<span>
+				<h3>Defy The Status Quo</h3>
+				<words>There is no platform on the internet quite like VValls. Built using advanced HTML5 techniques, VValls opens up the possibilities of expression online. Go crazy, make other worldly rooms.</words>
+			</span>
+		</div>
+		</div>
+		
+		<div class="item wow bounceInLeft">
+			<div class="rap">
+			<span style="background-image:url(http://33.media.tumblr.com/tumblr_m0an31XPpF1qbhp9xo1_1280.jpg)">
+			</span>
+			<span>
+				<h3>Cutting Edge Presentations</h3>
+				<words>There's no cooler way than VValls for displaying your images online. Take your pix out of that drab Tumblr theme and present them in the freshest way online!</words>
+			</span>
+		</div>
+		</div>
+		
+	</div>
+	
 	<h1>Room Showcase</h1>
 	
-	[[ include projects/list-projects ]]
+
 	
 	<a href="#loadmore" class="viewMore btn">View More</a>
 
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index a48c5e1..065385d 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -1,4 +1,51 @@
-<a href="/" class="logo"><img src="/assets/img/logo4.svg"></a>
+<div id="header">
+<a href="/" class="logo">
+	<svg version="1.1"
+		 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+		 x="0px" y="0px" width="117px" height="44px" viewBox="-0.896 -0.441 117 44"
+		 overflow="visible" enable-background="new -0.896 -0.441 117 44" xml:space="preserve">
+	<defs>
+	</defs>
+	<path d="M0.54,38.759c0-1.44,0.66-3.72,1.56-6.18c1.38-3.84,3.42-8.22,4.5-11.16c0.48-1.32,0.78-2.34,0.78-2.88
+		c0-0.72-0.24-1.02-0.72-1.02c-1.38,0-4.74,5.16-5.4,6.24c-0.36,0.6-0.48,0.78-0.78,0.78c-0.3,0-0.48-0.06-0.48-0.36
+		c0-0.18,0.18-0.84,0.66-1.62c0.9-1.44,2.22-3.6,3.9-5.28c1.44-1.5,3.12-2.64,4.74-2.64c1.38,0,1.92,1.32,1.92,2.7
+		c0,1.02-0.42,2.58-1.02,4.32c-1.26,3.72-3.359,8.521-4.68,12.18c-0.66,1.92-1.14,3.54-1.14,4.62c0,1.38,0.48,2.459,1.979,2.459
+		c6.48,0,13.56-14.639,13.56-17.759c0-1.2-0.3-1.92-0.6-2.58c-0.42-0.9-0.9-1.62-0.9-3.18c0-1.86,0.84-2.76,1.8-2.76
+		c0.9,0,1.98,1.08,1.98,3.66c0,9.179-9.6,24.66-17.58,24.66c-2.82,0-4.08-1.561-4.08-4.141V38.759z"/>
+	<path d="M23.879,38.759c0-1.44,0.66-3.72,1.56-6.18c1.38-3.84,3.42-8.22,4.5-11.16c0.48-1.32,0.78-2.34,0.78-2.88
+		c0-0.72-0.24-1.02-0.72-1.02c-1.38,0-4.74,5.16-5.4,6.24c-0.36,0.6-0.48,0.78-0.78,0.78c-0.3,0-0.48-0.06-0.48-0.36
+		c0-0.18,0.18-0.84,0.66-1.62c0.9-1.44,2.22-3.6,3.9-5.28c1.44-1.5,3.12-2.64,4.74-2.64c1.38,0,1.92,1.32,1.92,2.7
+		c0,1.02-0.42,2.58-1.02,4.32c-1.26,3.72-3.36,8.521-4.68,12.18c-0.66,1.92-1.14,3.54-1.14,4.62c0,1.38,0.48,2.459,1.98,2.459
+		c6.479,0,13.559-14.639,13.559-17.759c0-1.2-0.3-1.92-0.6-2.58c-0.42-0.9-0.9-1.62-0.9-3.18c0-1.86,0.84-2.76,1.8-2.76
+		c0.9,0,1.979,1.08,1.979,3.66c0,9.179-9.6,24.66-17.579,24.66c-2.82,0-4.08-1.561-4.08-4.141V38.759z"/>
+	<path d="M44.339,37.799c0-5.22,2.76-10.92,6.36-15.299c3.66-4.44,8.159-7.5,11.759-7.5c2.7,0,3.78,1.44,3.9,1.44
+		s0.48-0.96,0.66-1.44c0.18-0.48,0.3-0.6,1.02-0.6h1.74c0.359,0,0.6,0.06,0.6,0.42c0,0.18-0.119,0.6-0.24,0.9
+		c-1.919,5.82-3.839,11.64-5.819,17.519c-1.14,3.48-1.26,4.381-1.26,5.041c0,0.659,0.3,0.84,0.66,0.84c0.54,0,1.68-1.141,3.72-4.26
+		c1.5-2.28,1.26-2.94,1.86-2.94c0.3,0,0.42,0.181,0.42,0.479c0,0.84-1.38,3.541-3.24,6c-1.8,2.52-4.14,4.8-6.12,4.8
+		c-1.38,0-1.62-0.96-1.62-2.159c0-0.961,0.24-2.101,0.72-3.66c0.54-1.98,1.5-4.62,2.82-8.52l-0.12-0.12
+		c-2.16,3.3-9.36,14.459-14.1,14.459c-2.76,0-3.72-2.159-3.72-5.339V37.799z M65.338,18.839c0-1.8-1.08-2.76-2.76-2.76
+		c-3,0-6.6,3.72-9.48,8.22c-2.82,4.5-4.919,9.839-4.919,13.019c0,1.561,0.54,2.641,1.86,2.641c2.22,0,6.06-4.26,9.3-9
+		c3.3-4.74,6-10.02,6-12.06V18.839z"/>
+	<path d="M72.178,39.839c0-1.08,0.479-3.479,1.2-6.479c1.74-7.02,4.979-17.52,6.6-23.64c0.66-2.46,1.08-4.2,1.08-4.8
+		c0-0.78-0.24-1.32-1.62-1.44c-1.14-0.12-1.38-0.3-1.38-0.78c0.061-0.42,0.779-0.66,1.8-0.66c2.58,0,4.2-0.78,5.16-1.38
+		c0.6-0.36,0.96-0.66,1.14-0.66c0.3,0,0.42,0.12,0.42,0.48c0,0.3-0.6,1.56-1.14,3.479c-5.04,17.759-7.38,25.799-8.46,29.698
+		c-0.84,3.061-0.96,3.84-0.96,4.681c0,0.6,0.3,1.02,0.78,1.02c0.84,0,1.619-0.659,3.479-3.72c1.08-1.74,1.92-4.199,2.46-4.199
+		c0.301,0,0.42,0.239,0.42,0.539c0,0.42-0.84,2.521-2.16,4.74c-1.739,3-4.319,6.24-6.719,6.24c-1.681,0-2.101-1.32-2.101-3.061
+		V39.839z"/>
+	<path d="M85.497,39.839c0-1.08,0.48-3.479,1.2-6.479c1.739-7.02,4.979-17.52,6.6-23.64c0.66-2.46,1.08-4.2,1.08-4.8
+		c0-0.78-0.24-1.32-1.62-1.44c-1.14-0.12-1.38-0.3-1.38-0.78c0.06-0.42,0.78-0.66,1.8-0.66c2.58,0,4.2-0.78,5.16-1.38
+		c0.6-0.36,0.96-0.66,1.14-0.66c0.3,0,0.42,0.12,0.42,0.48c0,0.3-0.6,1.56-1.14,3.479c-5.04,17.759-7.38,25.799-8.46,29.698
+		c-0.84,3.061-0.96,3.84-0.96,4.681c0,0.6,0.301,1.02,0.78,1.02c0.84,0,1.62-0.659,3.479-3.72c1.08-1.74,1.92-4.199,2.46-4.199
+		c0.3,0,0.42,0.239,0.42,0.539c0,0.42-0.84,2.521-2.159,4.74c-1.74,3-4.32,6.24-6.721,6.24c-1.68,0-2.1-1.32-2.1-3.061V39.839z"/>
+	<path d="M111.416,34.619c0,2.34-0.96,4.439-2.46,5.939c-1.68,1.68-4.02,2.64-6.479,2.64c-1.86,0-3.84-0.78-5.04-1.56
+		c-0.6-0.42-1.02-0.84-1.02-1.2c0-0.96,0.359-3.12,0.959-5.819c0.42-1.98,0.48-2.34,1.08-2.34c0.541,0,0.601,0.359,0.601,2.16
+		c0,3.84,1.2,7.319,4.92,7.319c2.34,0,4.2-2.46,4.2-4.74c0-2.819-1.561-4.979-3.24-6.96c-1.68-1.979-3.24-4.08-3.24-6.899
+		c0-4.38,3.24-8.76,7.859-8.76c3,0,5.82,1.38,5.82,2.1c0,1.14-0.301,2.4-0.66,3.9c-0.72,2.76-0.779,3.06-1.38,3.06
+		c-0.899,0-0.78-1.92-1.08-3.84c-0.3-1.86-1.08-3.78-3.6-3.78c-2.34,0-4.08,2.04-4.08,4.439s1.62,4.44,3.24,6.6
+		c1.8,2.34,3.6,4.68,3.6,7.68V34.619z"/>
+	</svg>
+	
+</a>
 
 <div id="minotaur">
   <span class="label"></span>
@@ -6,21 +53,28 @@
 
 <span class="topLinks">
 [[ if (logged_in) { ]]
-
 	[[ if (user.isStaff) { ]]
 		<a href="/layout" data-role="show-layouts-modal" class="topLink">Layouts</a>
 	[[ } ]]
 
-	<a href="/project" data-role="show-projects-modal" class="topLink">Projects</a>
+	<!--<a href="/project" data-role="show-projects-modal" class="topLink">Projects</a>-->
+	
+	<a href="#"  data-role="new-project-modal">New Project</a>
+	
 
 	[[ if (profile && String(user._id) == String(profile._id)) { ]]
 	<a href="/profile" data-role="edit-profile-modal" class="topLink editProfile">Settings</a>
 	[[ } else if (! profile) { ]]
 	<a href="/profile" class="topLink">Profile</a>
 	[[ } ]]
-
+	
+	[[ if (opt.editing) { ]]
+	<a href="#" class="icon-help-circled" id="help-button"></a>
+	[[ } ]]
+	
 [[ } else { ]]
 	<a href="/signup" data-role="show-signup-modal" class="signUp topLink">Sign Up</a>
 	<a href="/login" data-role="show-signin-modal" class="signIn topLink">Sign In</a>
 [[ } ]]
 </span>
+</div>
\ No newline at end of file
diff --git a/views/partials/meta.ejs b/views/partials/meta.ejs
index 9916b34..4e94a5e 100644
--- a/views/partials/meta.ejs
+++ b/views/partials/meta.ejs
@@ -32,6 +32,7 @@
 	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
 	<link href='/assets/stylesheets/ionicons.css' rel='stylesheet' type='text/css'>
 	<link href='/assets/stylesheets/app.css' rel='stylesheet' type='text/css'>
+	<link href='/assets/stylesheets/animate.css' rel='stylesheet' type='text/css'>
 	<!--[if lt IE 9]>
 	<style>
 
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 7d56b2e..1ce180a 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -2,9 +2,11 @@
 <script type="text/javascript" src="/assets/javascripts/vendor/bower_components/lodash/dist/lodash.min.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/bower_components/momentjs/min/moment.min.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/bower_components/fiber/src/fiber.min.js"></script>
+<script type="text/javascript" src="/assets/javascripts/vendor/bower_components/prefixfree/prefixfree.min.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/tube.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/loader.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/polyfill.js"></script>
+<script type="text/javascript" src="/assets/javascripts/vendor/wow.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/sha1.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/dataUriToBlob.js"></script>
 <script type="text/javascript" src="/assets/javascripts/util.js"></script>
@@ -50,6 +52,7 @@
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/_scenery.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/move.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/resize.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/randomize.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/undo.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/_object.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/image.js"></script>
@@ -97,10 +100,12 @@
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaEditor.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaUpload.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaViewer.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/editor/TextEditor.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/WallpaperPicker.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/reader/ReaderView.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/reader/MediaPlayer.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/reader/Tracker.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/_router.js"></script>
 
diff --git a/views/profile.ejs b/views/profile.ejs
index ada3d52..9cfb40d 100644
--- a/views/profile.ejs
+++ b/views/profile.ejs
@@ -8,17 +8,17 @@
 <div class="rapper page">
 	[[- include partials/header ]]
 	
-	<table class="profilepage">
-		<tr>
+	<div class="profilepage">
 			[[ if (profile.photo && profile.photo.length) { ]]
-			<td class="border profilePic" style="background-image:url([[- profile.photo ]])">
-			</td>
+			<div class="profilePic" style="background-image:url([[- profile.photo ]])">
+			</div>
 			[[ } else { ]]
-			<td class="border profilePic">
+			<div class="profilePic">
 				<span class="icon-ios7-person-outline"></span>
-			</td>
+			</div>
 			[[ } ]]
-			<td class="bio">
+			<div class="bio">
+				<div class="holder">
 				<h2>[[- profile.displayName ]]</h2>
 				[[ if (profile.location) { ]]
 				<span>
@@ -35,9 +35,9 @@
 					<a href="https://twitter.com/[[- profile.twitterName ]]">@[[- profile.twitterName ]]</a>
 				</span>
 				[[ } ]]
-			</td>
-		</tr>
-	</table>
+			</div>
+			</div>
+	</div>
 
 	[[ if (projects.length) { ]]
 		<h1>[[- profile.username ]] has [[- projects.length ]] project[[- projects.length != 1 ? "s" : "" ]]</h1>
@@ -45,7 +45,7 @@
 	
 	[[ include projects/list-projects ]]
 
-	<a href="#" data-role="new-project-modal" class="viewMore btn">create project</a>
+	<a href="#" class="viewMore btn">view more</a>
 	
 	[[ include partials/edit-profile ]]
 	[[ include projects/layouts-modal ]]	
diff --git a/views/projects/layouts-modal.ejs b/views/projects/layouts-modal.ejs
index 34dc9af..24a83b7 100644
--- a/views/projects/layouts-modal.ejs
+++ b/views/projects/layouts-modal.ejs
@@ -33,7 +33,7 @@
 	<span class="close">X</span>
 	<div class="box">
 		
-    <h1>Choose Room Template</h1>
+    <h2>Choose Room Template</h2>
 		<div class="templates">
 		</div>
 		<div class="no-templates">
diff --git a/views/projects/list-projects.ejs b/views/projects/list-projects.ejs
index 537d409..a9f9523 100644
--- a/views/projects/list-projects.ejs
+++ b/views/projects/list-projects.ejs
@@ -5,7 +5,14 @@
 		[[ projects.forEach(function(project, i) { ]]
 
 			<span class="room">
-				<iframe src="/project/[[- project.slug ]]/view?noui=1&mute=1" class="embed"></iframe>
+        <span class="images">
+          [[ mediaCount = 0 ]]
+          [[ project.media.some(function(media){ ]]
+            [[ if (media.media.type != "image") { return false } ]]
+            [[ if (++mediaCount > 3) { return true } ]]
+            <img src="[[- media.media.url ]]">
+          [[ }) ]]
+			  </span>
 				[[ if (String(user._id) == String(project.user_id)) { ]]
 				<a href="/project/[[- project.slug ]]/edit"><div class="editBtn">edit</div></a>
 				[[ } ]]