.navbar
  background: $primaryAlt; 
  display: flex; 
  flex-direction: row; 
  align-items: center; 
  height: 55px; 
  
  .navbar-brand
    margin-left: 0.75em; 
    margin-right: auto;
    
    h3 
      margin-bottom: 0; 

  .navbar-burger
    display: none; 
    width: 32px;
    margin-right: 10px;  

    &.active div
      &:nth-child(1)
        transform-origin: center; 
        transform: translateY(8px) rotate(45deg); 
      &:nth-child(2)
        opacity: 0; 
      &:nth-child(3)
        transform-origin: left -6px; 
        transform: translateY(8px) rotate(-45deg); 

    div
      transition: all ease-in-out 150ms;  
      width: 100%;
      height: 2px; 
      margin: 5px 0; 
      border-radius: 1px; 
      background: $text; 


  .navbar-items
    display: inline-flex; 
    flex-direction: row; 
    
    .active .item, .item:hover
      background: $primary; 

    .item
      margin: 0; 
      cursor: pointer; 
      padding: 15px 20px;

  // .dropdown
  //   position: relative; 

  //   &:hover 
  //     .dropdown-items
  //       height: auto; 

  //   .dropdown-root:after
  //     content: ' \25BE'; 

  //   .dropdown-items
  //     height: 0;
  //     width: 125px; 
  //     overflow: hidden;
  //     top: 100%; 
  //     left: 0px; 
  //     z-index: 6;
  //     position: absolute; 
  //     background: $primaryAlt; 

  //     .item 
  //       padding: 0; 
  //       margin: 0 !important; 
  //       padding: 8px 10px;
  //       &.active, &:hover,
  //         background: none; 
  //         color: $linkAct;


@media screen and (max-width: 840px) 
  .navbar
    .navbar-burger
      display: inline-block; 

    .navbar-items
        display: block; 
        overflow: hidden;
        position: fixed; 
        top: 55px; 
        left: 0; 
        z-index: 5; 
        background: $primaryAlt; 
        width: 100%; 
        transform: scaleY(0); 
        transform-origin: top; 
        transition: all ease-in-out 125ms; 

        &.active
          transform: scaleY(1); 
          overflow: auto; 

        .item
          text-align: center; 
          width: 100%; 
          padding: 5px 0; 

    // .dropdown
    //   padding: 0 !important; 

    // .dropdown-root
    //   display: none; 

    // .dropdown-items
    //   position: relative !important; 
    //   overflow: hidden;
    //   padding: 0 !important; 
    //   height: auto !important;
    //   width: 100% !important; 

    //   .item
    //     width: 100% !important;
    //     padding: 5px 0 !important;
    //     text-align: center !important; 

    //     &:last-child
    //       padding: 5px 0 0 !important;