/* Pidä navbar (logo/toggle) päällimmäisenä */
  .navbar {
    position: relative;
/*    z-index: 10000;*/
  }

  .navbar-header {
    position: relative;
/*    z-index: 10001;*/
    padding-top: 10px;
  }
  
body.menu-open .navbar { 
    z-index: 10000; 
}

body.menu-open .navbar-header { 
    z-index: 10001; 
}

  /* Fullscreen overlay collapse */

.navbar-collapse {
  position: fixed !important;
  /*top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;*/

  top: calc(-1 * env(safe-area-inset-top));
  right: calc(-1 * env(safe-area-inset-right));
  bottom: calc(-1 * env(safe-area-inset-bottom));
  left: calc(-1 * env(safe-area-inset-left));

/*  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: none !important;*/
  
  width: auto !important;
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;

  z-index: 9999;


  background: #fff  url('../images/menu-tausta.jpg') center center / cover no-repeat !important;


/*  padding: 80px 20px 20px;*/

  padding-top: calc(80px + env(safe-area-inset-top));
  padding-right: calc(20px + env(safe-area-inset-right));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  padding-left: calc(20px + env(safe-area-inset-left));
  
  overflow-y: auto;
  box-sizing: border-box;
  
  -webkit-overflow-scrolling: touch;
}

.navbar-collapse.collapse,
.navbar-collapse.collapsing,
.navbar-collapse.collapse.in,
.navbar-collapse.in {
/*  height: 100vh !important;
  min-height: 100vh !important;
  max-height: none !important;*/
  
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
}

  /* Lukitse taustan scroll, kun menu auki */
  body.menu-open {
    overflow: hidden;
  }

  /* Valikon linkit nätimmäksi fullscreenissä (valinnainen) */
/*  .navbar-nav {
    float: none !important;
    margin: 0;
  }

  .navbar-nav > li {
    float: none;
    text-align: center;
  }

  .navbar-nav > li > a {
    font-size: 22px;
    padding: 15px 0;
  }*/
  
  ul.menu--main {
    width: 60%;
    margin: 0 auto;
/*    float: right;*/
  }

  /* Hamburger -> X */
  .navbar-toggle .icon-bar {
    transition: transform 0.1s ease, opacity 0.1s ease;
  }

  /* Käytetään nth-of-type, jotta sr-only ei sotke indeksejä */
  .navbar-toggle.is-open .icon-bar:nth-of-type(2) {
    transform: translateY(8px) rotate(45deg);
  }

  .navbar-toggle.is-open .icon-bar:nth-of-type(3) {
    opacity: 0;
  }

  .navbar-toggle.is-open .icon-bar:nth-of-type(4) {
    transform: translateY(-8px) rotate(-45deg);
  }


@media only screen and (max-width: 550px) {

  ul.menu--main {
    width: 90%;
    margin: 0 auto;
  }
  
}