Css

font -> system font-family

font: menu;
Значение 	Описание
caption 	Шрифт используемый для элементов управления с заголовками ( кнопки, загловки разделов выпадающего меню и т.д.).
icon 	Шрифт, используемый в названиях иконок.
menu 	Шрифт используемый в меню (списки меню, пункты выпадающего меню).
message-box 	Шрифт диалоговых окон.
small-caption 	Маленький шрифт для заголовков.
status-bar 	Шрифт строки состояния.

==

font-family:
  -apple-system, BlinkMacSystemFont,
  "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
  "Helvetica Neue", sans-serif;

Hover pic bugs -> Full code

<!--HTML-->
<div class='images' id='image1'>
	<div class='layer'></div>
	<img src='images/picture.jpg' alt="" width="200" height="200" border="0" />
</div>
<div class='images' id='image2'>
	<div class='layer'></div>
	<img src='images/picture.jpg' alt="" width="200" height="200" border="0" />
</div>
<div class='images' id='image3'>
	<div class='layer'></div>
	<img src='images/picture.jpg' alt="" width="200" height="200" border="0" />
</div>
<div class='images' id='image4'>
	<div class='layer'></div>
	<img src='images/picture.jpg' alt="" width="200" height="200" border="0" />
</div>
<!--HTML-->

<!--CSS-->
.images{
		float:left;
		margin: 20px;
		-webkit-transform:scale(1.0);
		-webkit-transition-duration: 0.5s;
		-moz-transform:scale(1.0);
		-moz-transition-duration: 0.5s;
		-o-transform:scale(1.0);
		-o-transition-duration: 0.5s;
		 
}
.images:hover{
		box-shadow:0px 0px 40px #ccc;
		-o-transform:scale(1.2);
		-o-box-shadow:0px 0px 40px #ccc;
		-moz-transform:scale(1.2);
		-moz-box-shadow:0px 0px 40px #ccc;
		-webkit-transform:scale(1.2);
		-webkit-box-shadow:0px 0px 40px #ccc;
}
.images .layer{
		width: 200px;
		height: 200px;
		background-color:#000;
		position: absolute;
		opacity:0.5;
		-o-transition-duration: 0.8s;
		-moz-transition-duration: 0.8s;
		-webkit-transition-duration: 0.8s;
}
#image1:hover .layer{
		width:0%;
}
#image2:hover .layer{
		height:0%;
}
#image3:hover .layer {
		height:0%;
		margin-top:100px;
}
#image4:hover .layer{
		margin-left:100px;
		margin-top:100px;
		height:0%;
		width:0%;
}
<!--CSS-->

Transform links -> Full code

<!--HTML-->
<div class="mainview">
	<a href="#">Здесь идет ваша ссылка</a>
	<a href="#">qwerty</a>
	<a href="#">qwerty</a>
	<a href="#">qwerty</a>
	<a href="#">qwerty</a>
	<a href="#">qwerty</a>
</div>
<!--HTML-->

<!--CSS-->
.mainview a     {
 display: inline-block;
 padding: 4px;
 outline: 0;
 color: #3a599d;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 -o-border-radius: 4px;
 border-radius: 4px;
 -webkit-transition-duration: 0.5s;
 -moz-transition-duration: 0.5s;
 -o-transition-duration: 0.5s;
 transition-duration: 0.5s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 -webkit-transform: scale(1) rotate(0);
 -moz-transform: scale(1) rotate(0);
 -o-transform: scale(1) rotate(0);
 transform: scale(1) rotate(0);
}
.mainview a:hover {
        background: #3a599d;
        text-decoration: none;
        color: #fff;
        -webkit-transform: scale(1.15) rotate(-5deg);
        -moz-transform: scale(1.15) rotate(-5deg);
        -o-transform: scale(1.15) rotate(-5deg);
        transform: scale(1.15) rotate(-5deg);
}
.mainview a:nth-child(2n):hover {
  -webkit-transform: scale(1.15) rotate(5deg);
  -moz-transform: scale(1.15) rotate(5deg);
  -o-transform: scale(1.15) rotate(5deg);
  transform: scale(1.15) rotate(5deg);
}
<!--CSS-->

Turn OFF Animate.css on Mobile Devices

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	.animated {
		/*CSS transitions*/
		-o-transition-property: none !important;
		-moz-transition-property: none !important;
		-ms-transition-property: none !important;
		-webkit-transition-property: none !important;
		transition-property: none !important;
		/*CSS transforms*/
		-o-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		-webkit-transform: none !important;
		transform: none !important;
		/*CSS animations*/
		-webkit-animation: none !important;
		-moz-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
	}
}