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

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

a:link, a:active, a:visited {
	text-decoration: none;
}

box { 
  width: 200px;
  height:200px;
  background-color: red;
  
}

.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;
}

a {
  color:white; 
  -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:#B5B5B5; }