Changed color of businesscard and added a bit more support for mobile view. Still broken

css/layout.css

@@ -901,19 +901,22 @@ call-to-action .button {
 }
 #contact .header-col { padding-top: 0px; }
 
-#contact  li { 
-   position: relative; 
-   font:22px/1.1em 'hackregular', monospace;
-   vertical-align: middle;
-   text-align: right;
-   display: inline-block;
-
-}
+#about .main-col { padding-right: 5%; }
 
 #contact  ul { 
     margin-top: 70px;
     margin-left: 20px;
     margin-bottom: 30px;
+    color: #B2B6BA;
+
+}
+
+#contact li { 
+   position: relative; 
+   font:20px/1.1em 'hackregular', monospace;
+   vertical-align: middle;
+   text-align: right;
+   display: inline-block;
 
 }
 
@@ -940,7 +943,7 @@ call-to-action .button {
 
 #contact .contact-right {
    border-radius: 0px 10px 10px 0px;
-   background-color: #0F0F0F;
+   background-color: #525252;
 }
 
 #contact .contact-left {
@@ -973,27 +976,14 @@ call-to-action .button {
   display: inline-block;
 }
 
-
-#contact-fa {
-   font-size: 28px;
+#contact .contact-fa {
+   font-size: 26px;
    vertical-align: top;
    float: left;
 }
 
-#contact-phone {
-   margin-top: 3px;
-   float: left;
-   margin-left: 12px;
-}
-
-#contact-email {
-   margin-top: 3px;
-   float: left;
-   margin-left: 12px;
-}
-
-#contact-riot {
-   margin-top: 3px;
+#contact .oneline {
+   margin-top: 1px;
    float: left;
    margin-left: 12px;
 }
@@ -1001,26 +991,27 @@ call-to-action .button {
 #contact-riot-logo {
    width: 30px;
    height: 30px;
-   background: #0F0F0F url(../images/riot.svg);
+   background: #525252 url(../images/riot.svg);
    vertical-align: top;
    margin-left: -5px;
+   margin-bottom: 5px;
    float: left;
 }
 
-#contact-pgp {
+#contact .pgp {
    float: left;
    margin-left: 12px;
 }
 
 /* Fixes for contact details really small screens */
 @media only screen and (max-width: 380px){
-  #contact-pgp {
+  #contact .pgp {
     font-size: 17px;
   }
 }
 
 @media only screen and (max-width: 332px){
-  #contact-pgp {
+  #contact .pgp {
     font-size: 15px;
   }
 }
@@ -1032,18 +1023,75 @@ call-to-action .button {
 }
 
 /* Fixes for contact details for medium sized screens */ 
-@media only screen and (min-width: 768px) and (max-width: 1020px){
-  #contact-phone, #contact-email, #contact-pgp{
-     font-size: 15px;
-  }
-
-  @media (max-width: 879px){
-    #contact-phone{
-      font-size: 13px;
+@media only screen and (min-width: 900px) and (max-width: 1020px){
+    #contact .pgp{
+        font-size: 18px;
+    }
+
+    #contact .oneline {
+        font-size: 18px;
+    }
+
+    #contact .contact-fa {
+       font-size: 25px;
+       vertical-align: top;
+       float: left;
+    }
+
+    #contact  ul { 
+        margin-left: 15px;
+    }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 899px){
+    #contact .pgp{
+        font-size: 15px;
+    }
+
+    #contact .oneline {
+        font-size: 15px;
+    }
+
+    #contact .contact-fa {
+       font-size: 22px;
+       vertical-align: top;
+       float: left;
+    }
+
+    #contact  ul { 
+        margin-left: 10px;
+    }
+}
+
+@media only screen and (max-width: 767px) {
+    #contact .contact-left {
+        display: none;
+    }
+
+    #contact li {
+        font: 13px/1.1em 'hackregular', monospace
+    }
+
+    #contact .pgp{
+        font-size: 13px;
+    }
+
+    #contact .oneline {
+        font-size: 13px;
+    }
+
+    #contact .contact-fa {
+       font-size: 18px;
+       vertical-align: top;
+       float: left;
+    }
+
+    #contact  ul { 
+        margin-left: 0px;
     }
-  }
 
 }
+
 / * Twitter Feed */
 #twitter {
    margin-top: 12px;