/* Flexnav Base Styles */
.flexnav {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    transition: none;
    -webkit-transform-style: preserve-3d;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    max-height: 0; 
    z-index: 9999999999 !important;
    position: relative;
  }

.flexnav.opacity {
    opacity: 0; 
}

.flexnav.flexnav-show {
    max-height: 2000px;
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out; 
  }

.flexnav.one-page {
    position: fixed;
    top: 50px;
    right: 5%;
    max-width: 200px; 
}

.flexnav li {
    font-size: 1.125em;
    position: relative;
    overflow: hidden; 
    margin:0;
    border-top: 1px solid rgba(255,255,255,0.3);
}

.flexnav li a {
    position: relative;
    display: block;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    line-height:1.2em;
    padding:0;
    margin: 10px 40px;
}

.flexnav li a:hover {
  font-weight:bold;
}

.flexnav li ul li {
    position: relative;
    overflow: hidden;
    font-size: 1em; 
    background:rgba(255,255,255,0.3);
    border-top: 1px solid rgba(255,255,255,0.3);
}

.flexnav li ul li:last-child {
  border-bottom: 1px solid rgba(255,255,255,0.3);
}

.flexnav li ul.flexnav-show li {
    overflow: visible; 
}

.flexnav li ul li a {
    display:inline-block;
    width:100%;
    font-size:1rem;
}

.flexnav .touch-button {
    position: absolute;
    z-index: 999;
    top: 6px;
    left: 5px;
    width: 30px;
    height: 30px;
    display:flex;
    justify-content:center;
    align-items:center;
    background: transparent;
}

.flexnav .touch-button:hover {
  cursor: pointer; 
  background:rgba(255,255,255,0.3);
}

.flexnav .touch-button .navicon {
  position: relative;
  font-size: 1.125em;
  line-height: 1.5em;
  color: #fff; 
}

.menu-button {
  position: relative;
  display: block;
  padding: 15px 0;
  margin-left:0.5em;
  font-size:1.125em;
  line-height: 1em;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
}

.menu-button.one-page {
    position: fixed;
    top: 0;
    right: 5%;
    padding-right: 45px; 
  }

.menu-button .touch-button {
    z-index: 999;
    margin-left:0.5em;
}

.menu-button .touch-button .navicon {
    font-size: 1.125em;
    position: relative;
    line-height:1em;
    color: #fff; 
}

@media all and (min-width: 1025px) {
  body.one-page {
    padding-top: 70px; 
  }

  .flexnav {
    overflow: visible; 
    padding:0 20px;
    display:flex;
    justify-content:space-between;
    max-width:768px;
    max-height:none;
    border-top:none;
  }

  .flexnav.opacity {
    opacity: 1; 
  }

  .flexnav.one-page {
      top: 0;
      right: auto;
      max-width: 1080px; 
  }

  .flexnav li {
      list-style: none;
      overflow: visible; 
      border:none !important;
      margin:0;
  }

  .flexnav li a {
      border-bottom: 2px solid transparent; 
      padding:5px 0;
      margin: 15px 0;
  }

  .flexnav li:hover a {
      border-bottom: 2px solid #fff;
      font-weight:200;
  }

  .flexnav li > ul {
      background:#9b9b9a;
      border-top:3px solid #fff;
      position: absolute;
      padding:10px 0;
      z-index:99999999 !important;
      top: auto;
      width:235px;
      left: 0; 
  }

  .flexnav li > ul li {
        width: 100%; 
  }

  .flexnav li ul li > ul {
      margin-left: 100%;
      top: 0; 
  }

.flexnav li ul li {
  background:transparent;
}

  .flexnav li ul li a {
      border-bottom: none;
      color:#fff;
      padding:10px 20px;
      margin:0;
      border-bottom: none !important; 
  }

  .flexnav li ul li:hover  a {
      /*border-bottom: none !important;*/
      font-weight:bold;
  }

  .flexnav li ul.open {
      display: block;
      opacity: 1;
      visibility: visible;
  }

  .flexnav li ul.open li {
        overflow: visible;
        max-height: 100px; 
  }

  .flexnav li ul.open ul.open {
        margin-left: 100%;
        top: 0; 
  }

  .menu-button,
  .flexnav .touch-button {
    display: none; 
  } 

}