header{
}

/* banner image */
.banner-image-container{
  background-color:#333333;
  position:Relative;
  z-index:103;
}
#banner-image{
  width:100%;
  max-width:200px;
  height:50px;
}

.nav-container{
  position:relative;
}
/* mobile nav icon (hidden on desktop) */
.hamburger-menu-icon{
  display:none;
  width: 25px;
  height: 25px;
}

/* main nav */
nav{
  font-family: 'Rubik', sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5em;
  position:relative;
  user-select: none;
}
nav .nav-item-container{
  padding:20px;
  position:relative;
  transition:.35s;
  user-select: none;
}
.nav-item-container:after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:4px;
  border-radius:1px;
  /* background-color:dodgerblue; */
  background-color:#0A8C61;
  transition:.35s width, .25s opacity;
}
/* selected */
.selected.nav-item-container:after{
  opacity:.25;
  width:100%;
}

/* hover/select bar */
/* #nav-select-bar, */
.nav-select-bar{
  background-color:#0A8C61;
  height:4px;
  border-radius:1px;
  position:absolute;
  bottom:0;
  /* left:0; */
  /* width:100px; */
  transition:.35s;
}


/* secondary pages, showing the back button */
.back-button-container{
  margin-left:10px;
}
.back-button-icon{
  width: 15px;
  height: 15px;
  margin-right: 15px;
  position:relative;
  left:0;
  transition:left .25s, color .25s;
}
@media (hover: hover) and (pointer: fine) {
  .back-button-container:hover{
    /* color:#0A8C61; */
  }
  .back-button-container:hover .back-button-icon{
    left:-9px;
    /* color:#0A8C61; */
  }
}

/* responsive styles */
@media only screen and (max-width:650px){
  header > .flex-container,
  header > [data-au~="flex-container"]{
    flex-wrap:wrap;
  }
}

@media only screen and (max-width:600px){
  header > .flex-container,
  header > [data-au~="flex-container"]{
    flex-wrap:nowrap;
  }
  nav{
    display: block!important;;
    background-color:#333333;
    padding:20px 20px;
    flex-wrap:wrap;
    opacity:0;
    pointer-events: none;
    position:absolute;
    top:-150px;
    right:-20px;
    transition:opacity .25s, top .65s;
    width:calc(100vw);
    height:90vh;
    z-index:102;
    box-shadow:0px 95px 60px 50px #333333;
  }
  .hamburger-menu-icon{
    display:block;
  }
  .show + nav{
    top:100%;
    opacity:1;
    pointer-events:all;
    transition:opacity .65s, top .25s;
  }
  .nav-item-container{
    width:100%;
  }
  .selected.nav-item-container:after{
    opacity:1;
  }
}