.userProfile { width: 273px; margin: 0 auto; float: left; padding-right: 9px; }
.userProfile h3 { color: #fff; text-align: center; padding-bottom: 10px; }
.userProfile ul { width: 100%; height: 400px; margin: 0 auto; padding: 0; display: inline-block; background: rgba(0, 0, 0, 0.6); text-align: center; }
.userProfile ul li { width: 100px; height: 100px; list-style-type: none; display: inline-block; text-align: center; padding: 5px; margin-right: 12.5px; margin-left: 12.5px; margin-top: 25px; }
.userProfile ul li a { width: 100px; height: 100px; color: #fff; text-decoration: none; text-align: center; font-size: 13px; }
.userProfile ul li a img { height: 64px; text-align: center; }
.userProfile ul li a:hover { color: #fff; text-decoration: underline; }

@media all and (max-height: 800px) { .userProfile { width: 312px; }
  .userProfile ul { height: 377px; }
  .userProfile ul li { padding: 5px; margin-right: 12.5px; margin-left: 12.5px; margin-top: 20px; } }
@media all and (max-height: 768px) { .userProfile ul { height: 338px; line-height: 1; }
  .userProfile ul li { margin-right: 12.5px; margin-left: 12.5px; margin-top: 10px; } }