Initial

styles/navbar.scss

@@ -0,0 +1,235 @@
+@import "../node_modules/bootstrap/scss/functions";
+@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/mixins";
+@import "./_variables.scss";
+
+/* Navbar */
+.navbar {
+  padding: 0;
+  min-height: 48px;
+  display: block;
+  z-index: 999;
+  background-color: $hp-nearly_black;
+
+  .mainnav-container {
+    width: 100%;
+
+    @include media-breakpoint-up(lg) {
+      padding-left: 15%;
+      min-height: 48px;
+    }
+
+    .navbar-collapse {
+      overflow: hidden;
+
+      @include media-breakpoint-up(lg) {
+        height: auto;
+      }
+
+      .navbar-nav {
+        justify-content: space-around;
+        width: 100%;
+        padding: 0 17px 17px;
+
+        @include media-breakpoint-up(lg) {
+          padding: 0;
+        }
+
+        .nav-item {
+          text-align: right;
+          padding: 10px 0;
+
+          a {
+            color: $white;
+          }
+
+          :hover {
+            color: $gray-700;
+          }
+        }
+      }
+    }
+  }
+
+  /* Navbar Brand */
+  .navbar-brand {
+    height: 30px;
+    width: auto;
+    position: fixed;
+    top: 10px;
+    z-index: 100;
+    left: 50%;
+    margin: 0;
+    padding: 0 0 0 17px;
+    transform: translateX(-50%);
+
+    svg {
+      height: 100%;
+      width: auto;
+
+      .logo-style-1 {
+        fill: transparent;
+      }
+
+      .logo-style-2 {
+        fill: $white;
+      }
+    }
+
+    @include media-breakpoint-up(lg) {
+      left: 10%;
+      top: 0;
+
+      svg {
+        height: 150px;
+        width: auto;
+
+        .logo-style-1 {
+          fill: $hp-blue;
+        }
+
+        .logo-style-2 {
+          fill: $white;
+        }
+      }
+    }
+
+    @include media-breakpoint-up(xl) {
+      left: 5%;
+    }
+  }
+
+  .subnav-container {
+    overflow-y: scroll;
+    height: 103px;
+    overflow-y: hidden;
+    text-align: center;
+
+    background-color: $hp-dark_grey;
+
+    @include media-breakpoint-up(lg) {
+      padding-left: 15%;
+      justify-content: space-around;
+    }
+
+    .nav-subitem {
+      color: $white;
+      padding-left: 20px;
+      padding-right: 20px;
+
+      @include media-breakpoint-up(lg) {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      a {
+        color: $white;
+      }
+
+      :hover {
+        color: $gray-500;
+      }
+
+      .cls-1 {
+        stroke: $white;
+      }
+
+      .cls-2 {
+        stroke: $white;
+      }
+
+      svg {
+        width: 50px;
+        height: 50px;
+      }
+    }
+  }
+}
+
+/* Animated navbar icon */
+.navbar-toggler {
+  border: none !important;
+  padding: 17px;
+  float: right;
+}
+
+.animated-icon {
+  width: 20px;
+  height: 15px;
+  position: relative;
+  margin: 0px;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  transform: rotate(0deg);
+  -webkit-transition: 0.5s ease-in-out;
+  -moz-transition: 0.5s ease-in-out;
+  -o-transition: 0.5s ease-in-out;
+  transition: 0.5s ease-in-out;
+  cursor: pointer;
+}
+
+.animated-icon span {
+  display: block;
+  position: absolute;
+  height: 1px;
+  width: 100%;
+  border-radius: 9px;
+  opacity: 1;
+  left: 0;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  transform: rotate(0deg);
+  -webkit-transition: 0.25s ease-in-out;
+  -moz-transition: 0.25s ease-in-out;
+  -o-transition: 0.25s ease-in-out;
+  transition: 0.25s ease-in-out;
+}
+
+.animated-icon span {
+  background: #e3f2fd;
+}
+
+.animated-icon span:nth-child(1) {
+  top: 0px;
+}
+
+.animated-icon span:nth-child(2),
+.animated-icon span:nth-child(3) {
+  top: 6px;
+}
+
+.animated-icon span:nth-child(4) {
+  top: 12px;
+}
+
+.animated-icon.open span:nth-child(1) {
+  top: 11px;
+  width: 0%;
+  left: 50%;
+}
+
+.animated-icon.open span:nth-child(2) {
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.animated-icon.open span:nth-child(3) {
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.animated-icon.open span:nth-child(4) {
+  top: 11px;
+  width: 0%;
+  left: 50%;
+}
+
+.navbar-spacing:first-of-type {
+  padding-top: 151px;
+}