/*==========================================================================
  Fixed header
  ========================================================================== */

/**
  * Header appears when scrolling down the webpage
  *
  * 1. Initial display is none.
  * 2. Will always be sticky on top of the page
  *
  */

header.fixed-header
  display: none /* 1 */
  position: fixed /* 2 */
  background-color: $white
  padding-top: 20px
  width: 100%
  z-index: 999

  /**
    * White wave #1
    *
    * 1. Custom hacks for best viewing the white wave
    *
    */
  .wave
    width: 100%
    z-index: 998
    position: absolute
    pointer-events: none
    img
      width: 105%
      margin-left: -2% /* 1 */
      margin-top: -1px /* 1 */

  /**
    * Header
    *
    * 1. Center logo in middle of the page
    *
    */
  .logo
    display: block
    margin: 0 auto /* 1 */
    img
      max-height: 50px
      width: auto
      margin: 0 auto

  /**
    * Hamburger menu
    *"
    */

  .hamburger-icon, .hamburger-icon-fixed
    width: 40px
    cursor: pointer

  .cross-icon
    width: 40px
    cursor: pointer

  /**
    * Menu icons
    *
    */

  .menu-icons
    float: right
    +flex(flex-start, flex-start)

    .nav-icon
      margin-left: 35px
      width: 27.5px
      height: 27.5px