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



.NavMobile {
position: fixed; 
right: 5px; 
top: 7px; 
z-index: 99999991;

}


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

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




.NavSubPages {

z-index: 9999; 
position: fixed; 
left: 0; 
top: 0; 
margin: 0; 
height: 50px !important; 
width: 100%; 
border: 0px;

}


.NavBackground {

z-index: 10000001; 

/* background: linear-gradient(180deg, rgba(84,6,72,1) 0%, rgba(84,6,72,0.75) 50%, rgba(84,6,72,0.75) 50%, rgba(94,6,85,75) 75%); */

background: rgba(84,6,72,0.8);
backdrop-filter: blur(8px) !important;

color: rgba(255,255,255, 1);
position: fixed; 
left: 0; 
top: 0; 
margin: 0; 
height: 50px; 
width: 100%; 
border: 0px;
text-align: center;
border-collapse: collapse;
text-decoration: none !important;
}

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

.NavFade:hover {
   opacity: 0.5;
}

#MenuSpacer {

height: 18px;
width: 2%;

}


a.Navigation {
  text-decoration: none !important;
  
  color: rgba(255,255,255, 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.Navigation:hover { color: rgba(255,255,255, 0.5); }

text-decoration: none !important;

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



.MouseOver {
text-decoration: none !important;
margin: 0px;
padding: 5px;
font-size: 18pt;
font-weight: 400;
color: rgba(255,255,255, 1); 
border-radius: 6px;

   transition: background .25s ease-in-out;
   -moz-transition: background .25s ease-in-out;
   -webkit-transition: background .25s ease-in-out;
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
.MouseOver {
font-size: 14pt;
}
}


.MouseOver:hover {

color: rgba(255,255,255, 1); 
background: rgba(255,255,255, 0.35);
border-radius: 6px;
text-decoration: none !important;

}



/* @keyframes FadeIn {
  from {background: rgba(200,200,200, 0);}
  to {background: rgba(200,200,200, 0.5);}

} */

		.fancybox-custom .fancybox-skin {
			box-shadow: 0 0 50px #222;
	}
	
	
.HomeIcon {
margin-bottom: 3px;
width: 22px;
height: 22px;
}	
	
.stb-logo {
height: 50px;
width: auto;
margin-left: 10px;
}

@media screen and (min-width: 641px) and (max-width: 1280px) {
.stb-logo {
height: 40px;
width: auto;
margin-left: 10px;
}
}

@media only screen and (max-width: 640px) {
.stb-logo {
height: 40px;
width: auto;
margin-left: 10px;
}
}