merge

1 files changed, 477 insertions, 206 deletions

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