:root {
    --purp-color: #6d4867;
    --gray-bg: #c7c7c7;
    --max-container-w:66%;
  }

body {
  margin: 0;
  font-family: Serif, serif;
}
.topnav {
  width:97%;
  /*overflow: hidden;*/
  z-index:20000;
  /*background-color: #333;*/
}

.topnav a {
  float: left;
  display: block;
  /*width:43vw;*/
  color: #555555;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  text-align: left;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;	
  /*background-color:var(--gray-bg);*/
}

.topnav a:hover {
  background-color: #ddd;
  color: #555555;
  text-decoration:underline;
}

.topnav a.active {
  /*background-color: #4CAF50;*/
  color: black;
}

.hamburger {
    position: relative;
    display: inline-block;
    width: 1.4em;
    height: 0.66em;
    margin-right: 0.25em;
    border-top: 0.2em solid #333;
    border-bottom: 0.2em solid #333;
}

.hamburger:before {
    content: "";
    position: absolute;
    top: 0.25em;
    left: 0px;
    width: 100%;
    border-top: 0.2em solid #333;
}


.topnav .icon {
  position: absolute !important;
  right: 0.2em !important;
  top: 0.2em !important;
  border: solid 1px #ccc !important;
  width: 3vw !important;
  height: 3vw !important;
  display: block !important;
  color:#000000;
  background-color:#aaaaaa;
  z-index:20000;

}

.topnav a.icon {
  position: absolute !important;
  right: 0.2em !important;
  top: 0.2em !important;
  border: solid 1px #ccc !important;
  width: calc(1.6vw + 0.7em)  !important;
  height:  calc(1.6vw + 0.7em)  !important;
  display: block !important;
  color:#000000;
  background-color:#aaaaaa;
  z-index:20000;

}
div#myTopnav.topnav.responsive{position: absolute !important;top:calc(0.2vw + 0.2em) !important;width:97% !important;}

* {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  list-style: none;
}
div#myTopnav.topnav.responsive a#n0,
div#myTopnav.topnav.responsive a#n1,
div#myTopnav.topnav.responsive a#n234,
div#myTopnav.topnav.responsive a#n2,
div#myTopnav.topnav.responsive a#n3,
div#myTopnav.topnav.responsive a#n4,
div#myTopnav.topnav.responsive a#n5,
div#myTopnav.topnav.responsive a#n678,
div#myTopnav.topnav.responsive a#n6,
div#myTopnav.topnav.responsive a#n7,
div#myTopnav.topnav.responsive a#n8,
div#myTopnav.topnav.responsive a#n9,
div#myTopnav.topnav.responsive a#n10
{background-color:#c7c7c7;
width:calc(11vw + 11em);
text-align:left;
line-height:calc(5px + 0.5em) !important;
padding:6px 10px 4px 6px !important;
border:solid 1px var(--purp-color);
z-index:20000;
}

div#myTopnav.topnav.responsive a#n2,
div#myTopnav.topnav.responsive a#n3,
div#myTopnav.topnav.responsive a#n4,
div#myTopnav.topnav.responsive a#n6,
div#myTopnav.topnav.responsive a#n7,
div#myTopnav.topnav.responsive a#n8{
  padding:6px 0px 4px 16px !important;
}
div#myTopnav.topnav.responsive a#n234,
div#myTopnav.topnav.responsive a#n678{
  background-color: #ddd;
  color: #555555;
  text-decoration:none;
}

div#myTopnav.topnav div.cats{display:none;}
div#myTopnav.topnav.responsive div.cats{display:block;background-color:#c7c7c7;
width:calc(11vw + 11em);
text-align:left;
line-height:calc(5px + 0.5em) !important;
padding:6px 10px 4px 6px !important;
border:solid 1px var(--purp-color);
z-index:20000;
}

div#myTopnav.topnav.responsive div.cats a:first-child{display:block;padding-left:20px;background-color:#c7c7c7;
width:calc(11vw + 11em);
text-align:left;
line-height:calc(5px + 0.5em) !important;
padding:6px 10px 4px 6px !important;
border:solid 1px var(--purp-color);
z-index:20000;
}

@media all and (max-width:1024px){
#my-menu-normal{display:none;}
#myTopnav.responsive{display:block !important;width:97% !important;
  position:absolute;left:1em;top:calc(1vw + 1em) !important;}

    .topnav{display:block !important; position:absolute;
      left:1vw;top:1vw;width:97% !important;}

    .topnav a:not(:first-child) {display: none;}
    #myTopnav a{line-height:11px !important;text-align:left !important;
    padding:6px 10px 4px 6px !important;
    }
    .topnav.responsive {position: absolute !important;top:1vw;}

     html body#my-bdy-2a div#myTopnav.topnav.responsive a.icon i.fa.fa-bars{
      padding:5px;
     }
    .topnav.responsive .icon {
      float:right;
      top: 0;
      background-color:#aaa;

    }
    .topnav.responsive a {
      float: left;
      display: block;
      text-align: left;
      border:solid 1px var(--purp-color);
      padding:6px 10px 4px 6px !important;

    }
    .topnav.responsive a {clear:both !important;}


    .topnav{display:block;}


}
@media all and (max-width:768px){

  #myTopnav.responsive{display:block !important;width:97% !important;
    position:absolute;left:1em;top:calc(1vw + 1em) !important;}
      #my-menu-normal{display:none !important;}

      .topnav{display:block !important; position:absolute;
        left:1vw;top:1vw;width:97% !important;}

      .topnav a:not(:first-child) {display: none;}
      #myTopnav a{line-height:11px !important;text-align:left !important;
      padding:6px 10px 4px 6px !important;
      }
      .topnav.responsive {position: absolute !important;top:1vw;}

       html body#my-bdy-2a div#myTopnav.topnav.responsive a.icon i.fa.fa-bars{
        padding:5px;
       }
      .topnav.responsive .icon {
        float:right;
        top: 0;
        background-color:#aaa;

      }
      .topnav.responsive a {
        float: left;
        display: block;
        text-align: left;
        border:solid 1px var(--purp-color);
        padding:6px 10px 4px 6px !important;

      }
      .topnav.responsive a {clear:both !important;}


      .topnav{display:block;}


}
@media all and (max-width:600px){
#my-menu-normal{display:none !important;}
.topnav.responsive {position: absolute !important;}
.topnav.responsive .icon {
  float:right;

  background-color:black;
}
.topnav.responsive a {
  float: left;
  display: block;
  text-align: left;
  border:solid 1px var(--purp-color);
  background-color:var(--gray-bg) !important;
}
.topnav.responsive a {clear:both !important;}

}

@media all and (max-width:375px){
#my-menu-normal{display:none;}

.topnav{display:block !important; width:97% !important;
}




}

@media all and (max-width:360px){  #my-menu-normal{display:none !important;}
.topnav{display:block !important; width:97% !important;
position:absolute;left:1vw;}
#myTopnav a{line-height:4px !important;text-align:left !important;}
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
  float: right;
  display: block;color:#222222 !important; z-index:20000;
}
#myTopnav a{line-height:4px !important;text-align:left !important;}
.topnav.responsive {position: relative !important;top:-5px;}

.topnav.responsive{width:97% !important;}
.topnav.responsive a {
  float: left;
  display: block;
  text-align: left !important;
  border:solid 1px var(--purp-color);
  background-color:var(--gray-bg);

}

.topnav.responsive a {clear:both !important;}


.topnav{display:block;}
.topnav.responsive .icon {
 position: absolute !important;
 right: 4vw;
 width: 4vw !important;
 top: 0;
 background-color:var(--gray-bg);
 color:#222222 !important;
}
}