#navigation {
  background: var(--thc-d1);
  margin: 0px;
  width: 100%;
  padding: 0.5rem 0;
}

#navigation ul {
  margin: 0;
}

#navigation  li{
  font-size: 13px;
  display: inline;
  margin: 0 1.2rem;
}

#navigation a:link {
  font-weight: bold; text-decoration: none; color: var(--thc-d2);}
#navigation a:visited {
  font-weight: bold; text-decoration: none; color: var(--thc-d2);}
#navigation a:hover {
  color: blue;}
#navigation a:active {
  font-weight: bold; text-decoration: none; color: blue;}

 
#mobhiwe {
    height: 0;
    margin-left:-200%;
  display: none;
}

#mobinav {
  background: var(--thc-d1);
  display: none;
  margin: 0px;
  width: 100%;
  height: 35px;
  position: static;
  top: 135px;
}

#mobinav  li{
  font-size: 13px;
  display: inline;
  margin: 20px;
}

#mobinav a:link {
  font-weight: bold; text-decoration: none; color: var(--thc-d2);}
#mobinav a:visited {
  font-weight: bold; text-decoration: none; color: var(--thc-d2);}
#mobinav a:hover {
  color: blue;}
#mobinav a:active {
  font-weight: bold; text-decoration: none; color: blue;}
  
@media screen and (max-width: 770px) {
    #navigation {
        top: 70px;
    }
}
@media screen and (max-width: 570px) {
    #navigation {
        display: none;
    }
    #mobinav {
        display: block;
        margin-top: -45px;
    }
    #mobhiwe {
        position: static;
    	display: none;
        height: 145px;
        margin-left: 0;
    }
}

@media screen and (max-height: 370px) {
    #navigation {
        top: 70px;
    }
}
@media screen and (max-height: 250px) {
    #navigation {
        top: 0px;
    }
}