@font-face { 
	font-family: "BodyFont";
	src: url('fonts/fontmedium.ttf'), url('fonts/fontmedium.ttf');
}




@media screen and (min-width: 0px) and (max-width: 640px) {
  .NavMobile{ display: block; }  /* show it on smaller screen */
}
@media screen and (min-width: 641px) and (max-width: 6000px) {
  .NavMobile{ display: none; }   /* hide it larger screens */
}

@media screen and (min-width: 0px) and (max-width: 640px) {
  .NavMain{ display: none; }  /* show it on larger screen */
}
@media screen and (min-width: 641px) and (max-width: 6000px) {
  .NavMain{ display: block; }   /* hide it smaller screens */
}

body {

}

a:link, a:active, a:visited {
	font-family: "BodyFont";
	font-size: 18px;
	text-decoration: none;
}

.NavBackground {

 background-color: rgba(110,0,100, 0.8); 
backdrop-filter: blur(4px) !important;

}

.fade {
   opacity: 1;
   transition: opacity .2s ease-in-out;
   -moz-transition: opacity .2s ease-in-out;
   -webkit-transition: opacity .2s ease-in-out;
   }

.fade:hover {
   opacity: 0.5;
}

.MenuSpacer {

height: 18px;
width: 1%;

}


a {
  
  color: rgba(0,0,0, 1); 
  -o-transition:color .2s ease-out, background .2s ease-in;
  -ms-transition:color .2s ease-out, background .2s ease-in;
  -moz-transition:color .2s ease-out, background .2s ease-in;
  -webkit-transition:color .2s ease-out, background .2s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .25 s ease-out, background .2s ease-in;
}
a:hover { color: rgba(0,0,0, 0.5); }