/**Normal**/
@media all and (min-width: 459px) {
  .topnav a {float: left; width: 33.33%;}
}

/**HB**/
@media all and (max-width: 557px) {
  .topnav a {display: block; width: 100%; padding: 0px 5px 2px 0px;}
  .nav-yinyang {display:none;}
}

.nav-container {
    padding-right: 1.25%;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
} 

.topnav a {
    font-family: 'Special Elite', 'courier', serif;
    color: white;
    text-align: center;
    display: block;
    text-decoration: none;
    font-size: 125%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;    
}

/* Add background transparency */
.topnav {
    background-color: transparent;
    overflow: hidden;
    visibility: visible;
}

.topnav a:link {
    color: white; 
    background-color:transparent; 
    text-decoration:none
}

/* Change the color of links on hover, Add a color to the active/current link */
.topnav a:hover, .topnav a:active {
    color: #61c2a2;
    background-color:transparent; 
    text-decoration:none;
}