.navbar {
  background-color: white !important; }

.navbar-border {
  border-bottom: thin solid #002856; }

.nav-flex {
  display: flex;
  justify-content: space-between; }

/* Desktop Styles */
@media (min-width: 767.98px) {
  #consumerdesktop {
    display: block;
    margin-left: auto;
    margin-right: 20px;
    color: #fff;
  }
  #consumermobile{
    display: none;   
  }
  .nav-link {
    padding: 0.5rem 0.6rem !important; }
  .nav-flex {
    flex-direction: row; }
  .nav-width {
    width: inherit; }
  .nav-items-group ul {
    list-style-type: none;
    overflow: hidden; }
    .nav-items-group ul li {
      float: right;
      margin-left: 1px;
      margin-right: 1px; }
      .nav-items-group ul li a {
        color: #002856;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 14px; }
      .nav-items-group ul li a:hover, .nav-items-group ul li .active {
        color: #002856;
        box-shadow: 10px -45px 19px -6px #e7eaee inset, 0px 45px 19px -6px #e7eaee inset;
        border-radius: 3px; } }

/* Mobile Styles */
@media (max-width: 768px) {
  #consumerdesktop {
    display: none;
  }
  #consumermobile{
    display: block;
    margin-left: auto;
    margin-right: 10px;
    margin-top: 30px;
    height: 40px;
  }
  .nav-width {
    width: 100%; }
  .transform-0 {
    transform: scaleY(0) !important; }
  .transform-1 {
    transform: scaleY(1) !important; }
  .nav-flex {
    flex-direction: column; }
  .nav-items-group {
    transform-origin: top;
    z-index: 1;
    position: absolute;
    top: 72px;
    background-color: #002856;
    width: 100%;
    transition: transform .2s linear !important; }
    .nav-items-group ul {
      display: flex;
      flex-direction: column; }
      .nav-items-group ul li {
        margin: 5px;
        float: left; }
        .nav-items-group ul li a {
          color: white;
          text-transform: uppercase;
          font-size: 12px;
          text-align: left; }
      .nav-items-group ul a:hover, .nav-items-group ul .active {
        color: white;
        box-shadow: 10px -45px 19px -6px #033f87 inset, 0px 45px 19px -6px #033f87 inset;
        border-radius: 3px; }
  .icon-container {
    width: 30px;
    height: 30px;
    cursor: pointer; }
    .icon-container .menu-line {
      width: 70%;
      height: 4%;
      background-color: #002856;
      margin: auto; }
    .icon-container .line1 {
      position: relative;
      top: 24%;
      transform: rotate(0deg);
      transition: transform 0.5s, top 0.5s; }
    .icon-container .line2 {
      position: relative;
      top: 48%;
      opacity: 1;
      transform: scaleX(1);
      transform-origin: left;
      transition: transform 0.2s ease-out, opacity 0.2s ease-out; }
    .icon-container .line3 {
      position: relative;
      top: 72%;
      transform: rotate(0deg);
      transition: transform 0.5s, top 0.5s; }
    .icon-container .line1.clicked {
      transform: rotate(45deg);
      top: 48%;
      background-color: red; }
    .icon-container .line2.clicked {
      transform: scaleX(-1);
      opacity: 0; }
    .icon-container .line3.clicked {
      transform: rotate(-45deg);
      top: 40%;
      background-color: red; } }