header{
  background: $dark-grey;
  height: 50px;
  width: 100%;
  position: fixed;
  z-index: 100;

  &.red{
    background: $red;
  }

  .container{
    .row{
      height: 50px;
      
      .logo{
          height: 25px;
      }
      
      .menu{
        text-align: right;
        ul{
          list-style: none;
          margin: 0;
          right: 10px;
          li{
            display: inline-block;
            color: white;
            margin: 10px;
            padding: 7px 0 2px 0;
            font-size: $font-10;
            font-weight: bold;
            text-transform: uppercase;
            border-bottom: 4px solid $dark-grey;
            cursor: pointer;
            transition: .4s;
            
            a{
              .fa{
                font-size: $font-14;
              }
            }
            
            &.active,
            &:hover{
              border-bottom: 4px solid $red;
              a{
                &:hover{
                    color: white;
                }
              }
            }
          }
        }
      }
    }
  }
}