fix consul logo position in safari

website/source/assets/stylesheets/_header.scss

@@ -21,11 +21,13 @@ body.page-sub{
 #header {
   .navbar-brand {
     .logo{
-      padding-left: 50px;
+      width: $project-logo-width;
+      padding: 0;
+      line-height: $header-height;
+      background-position: 0 center;
       font-size: 0;
       text-transform: uppercase;
-      background: image-url('../images/consul-hero-logo.png') 0 0 no-repeat;
-      @include img-retina("../images/consul-hero-logo.png", "../images/consul-hero-logo@2x.png", $project-logo-width, $project-logo-height);
+      @include img-retina("../images/consul-header-lockup.png", "../images/consul-header-lockup@2x.png", $project-logo-width, $project-logo-height);
       background-position: 0 center;
 
       &:hover{
@@ -53,13 +55,8 @@ body.page-sub{
   #header {
     .navbar-brand {
       .logo{
-        padding-left: 37px;
-        @include img-retina("../images/consul-hero-logo.png", "../images/consul-hero-logo@2x.png", $project-logo-width * .75, $project-logo-height * .75);
-
-        img{
-          width: 72px;
-          height: 14px;
-        }
+        width: $project-logo-width * .75;
+        @include img-retina("../images/consul-header-lockup.png", "../images/consul-header-lockup@2x.png", $project-logo-width * .75, $project-logo-height * .75);
       }
     }
   }

website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss

@@ -92,7 +92,7 @@
     }
     li > a {
       @include hashi-a-style();
-      margin: 0 10px;
+      margin: 0 8px;
       padding-top: 1px;
       line-height: $header-height;
       @include project-a-style();

website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss

@@ -4,9 +4,10 @@
 // --------------------------------------------------
 
 // Variables
-$project-logo-width: 40px;
+$project-logo-width: 147px;
 $project-logo-height: 40px;
 $project-logo-pad-left: 0px;
+$header-height: 80px;
 
 // Mixins
 @mixin project-a-style{

website/source/layouts/_header.erb

@@ -31,7 +31,7 @@
     			<div class="col-xs-12">
     				<div class="navbar-header">
     					<div class="navbar-brand">
-    						<a class="logo" href="/"><img src="<%= image_path('wordtype@2x.png') %>" width="96px" height="18px">Consul</a>
+    						<a class="logo" href="/">Consul</a>
     						<a class="by-hashicorp white" href="https://hashicorp.com/"><span class="svg-wrap">by</span><%= partial "layouts/svg/svg-by-hashicorp" %><%= partial "layouts/svg/svg-hashicorp-logo" %>Hashicorp</a>
     					</div>
     					<button class="navbar-toggle white" type="button">