@font-face {
    font-family: 'Montserrat Medium';
    src: url('https://vanillamint.org/fonts/Montserrat-Medium.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand Light';
    src: url('https://vanillamint.org/fonts/Quicksand-Light.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand Regular';
    src: url('https://vanillamint.org/fonts/Quicksand-Regular.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand Bold';
    src: url('https://vanillamint.org/fonts/Quicksand-Bold.woff') format('woff');
    font-display: swap;
}

.vmlogo, .vmlogo a {fill:#61c2a2;} 
.vmlogo:hover, .vmlogo:active {fill:#61EAa2;}

@media all and (max-width: 1110px) {
  .hide-vanilla {display: none;}
}

@media all and (max-width: 1108px) {
  .hide-studio {display: none;}
}

@media all and (max-width: 881px) {
  .hide-pr {display: none;}
  .hide-vmint {display: none;}
}

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

/**HB**/
@media all and (max-width: 459px) {
  .topnav a {display: block; width: 100%; padding: 8px 5px 8px 0px;}
  .header-logo {width: 20%; height: 20%;}
}

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

.topnav a {
    font-family:'Quicksand Light','Helvetica Neue',Helvetica,Arial,'Lucida Grande',sans-serif;
    color: black;
    text-align: center;
    display: block;
    text-decoration: none;
    font-size: 125%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;    
}

/* Add a transparent background to the top navigation */
.topnav {
    background-color: transparent;
    overflow: hidden;
    visibility: visible;
}

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

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

/* Add a color to the active/current link */
.topnav a:active {
    background-color: transparent;
    color:darkgrey; 
    text-decoration:none
}