CSS/JQuery menu not functioning properily in Firefox

Question

So, i created toggleable overlay menu, tested it in all major browsers (even in Internet Explorer), and its working fine everywhere except in Firefox (tested in version 46)!

The problem is, when you toggle overlay by pressing " MENU " button, the " CLOSE " button in overlay is not appearing and user is stuck with open menu.
This how it should look: This how it looks like So i am asking you for help, since i allready ran out of ideas.

https://jsfiddle.net/fpgkzd2x/5/ - Fiddle with working code.

HTML Code

<header class="main-nav flex-vhcenter-parent">
    <div class="button ">
        <p>MENU</p>
    </div>
</header>
<nav class="overlay">
<header class="main-nav flex-vhcenter-parent">
    <div class="button ">
        <p>CLOSE</p>
    </div>
</header>

</nav>

SASS Code

$menu-color: #3c948b;   


.flex-vhcenter-parent{
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}



/* Main Nav menu styles */


.button{
  transform: scale(1.3);
  transition: all 500ms;
}


.main-nav{
    display: flex;
    width: 100%;
    transition: all 500ms;
    z-index: 20;
    background-color: $menu-color;
    position: fixed;
    &.fixed{
      .button{
        transition: all 500ms;
        transform: scale(1);
      }
    }

}

header > div{
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-nav p{
    margin: 0;
  font-size: 1.5em;
}

/* Toggleable Overlay */
.overlay{
  z-index: 30;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.90;
  top: -100%;
  transition: top 100ms ease-out;
  .button{
    margin: 0;
    color: #fff;
  }
}

.opened{
  top: 0%;
  transition: top 100ms ease-out;
} 

JQuery code for toggling

overlay = $(".overlay");
$(".button").click(function(event){
    overlay.toggleClass("opened");
});

Answer 1

Display flex its not fully supported by Firefox Does it looks like You expect?

    $menu-color: #3c948b;   



    .flex-vhcenter-parent{
      display: block;
      justify-content: center;
      align-items: center;
    }



    /* Main Nav menu styles */


    .button{
      transform: scale(1.3);
      transition: all 500ms;
      margin: 0 auto;
    }


    .main-nav{
        display: inline-block;
        width: 100%;
        transition: all 500ms;
        z-index: 20;
        background-color: $menu-color;
        position: absolute;
        text-align: center;
        &.fixed{
          .button{
            margin: 0 auto;
            transition: all 500ms;
            transform: scale(1);
          }
        }

    }

    header > div{
      width: 20%;
      display: block;
      align-items: center;
        justify-content: center;
    }
    .main-nav p{
      margin: 0 auto;
      font-size: 1.5em;
    }

    /* Toggleable Overlay */
    .overlay{
      z-index: 30;
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: #000;
      opacity: 0.90;
      top: -100%;
      transition: top 100ms ease-out;
      .button{
        margin: 0 auto;
        color: #fff;
      }
    }

    .opened{
      top: 0%;
      transition: top 100ms ease-out;
    } 

http://jsfiddle.net/fpgkzd2x/8/