/* CSS styles for nav menu*/

*, *:before, *:after { box-sizing: border-box; }

/*Menu itself */
.menu {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   max-width: 100%;
   margin: auto;
   padding: 2px;
   list-style: none;
   background: #99764F;
}
/*List items */
.menu li {
    /*Expand to use any available space
    /flex-grow: 1;
    /flex-basis: 100%;*/
    flex: 1 100%;
    margin: 1px;
    text-align: center;

    /*border-left-style: #74522d 1px dotted; 
    /*  @include forLargeScreens(320) {
         flex-basis: 30%;
      }
      @include forLargeScreens(426) {
         flex-basis: 0;
      }*/
}
.menu li a:hover, .menu li.active a {
    color: #99764F;
    background: #000000;
    border: #000000 1px;
    border-style: none solid;
}      
/*Links themselves */
.menu li a {
    display: block;
    padding: 0.5vw 0.8vw 0.5vw 0.8vw;
    color: #000000;
    font-size: 1.3vw;
    white-space: nowrap;
    text-decoration: none;
    background: #99764F;
    border: #74522d 1px;
    border-style: none dotted;
         /*
         @include forLargeScreens(426) {
            background: #eee;
         }
         */
}

.not-allowed {pointer-events: none; }
/*
.menu a:hover {
    color: #99764F;
    background: #000000;
    border: #000000 1px;
    border-style: none solid;
}

/* ############ _ M E D I A _ S C R E E N _ Q U E R Y _ ###################### */

@media only screen and (min-width: 320px) {  

  /* Small screen, non-retina */
  .menu li {flex-basis: 30%;}
  .menu li a { font-size: 3vw; background: #B18E67; border-style: none; padding: 0.7vw 0.8vw 0.7vw 0.8vw; }  
}

@media
only screen and (-webkit-min-device-pixel-ratio: 1.3)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 1.3)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2.6/2)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 1.3)      and (min-width: 320px),
only screen and (                min-resolution: 124.8dpi) and (min-width: 320px),
only screen and (                min-resolution: 1.3dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query - iphone SE */
  .menu li {flex-basis: 30%;}
  .menu li a { font-size: 3.2vw; background: #B18E67; border-style: none; padding: 0.7vw 0.8vw 0.7vw 0.8vw; }
}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */
  .menu li {flex-basis: 0;}
  .menu li a { font-size: 1.3vw; background: #99764F; border-style: none dotted; padding: 0.3vw 0.6vw 0.3vw 0.6vw; }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */
  .menu li a { font-size: 1.3vw; background: #99764F; border-style: none dotted; }
}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */
  .menu li a { font-size: 1.3vw; padding: 0.3vw 0.6vw 0.3vw 0.6vw; }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1930px) {

  /* Large screen, non-retina */
  .menu li a { font-size: 1.2vw; padding: 0.3vw 0.6vw 0.3vw 0.6vw; }
}

@media only screen and (min-width: 2300px) {

  /* Large screen, non-retina */
  .menu li a { font-size: 1vw; padding: 0.2vw 0.5vw 0.2vw 0.5vw; }
}

@media only screen and (min-width: 2880px) {

  /* Large screen, non-retina */
  .menu li a { font-size: 0.8vw; padding: 0.2vw 0.5vw 0.2vw 0.5vw; }
}

@media only screen and (min-width: 3500px) {

  /* Large screen, non-retina */
  .menu li a { font-size: 0.7vw; padding: 0.2vw 0.5vw 0.2vw 0.5vw; }
}
/* ########################################################################### */