body { background-color: #fdfdfd; font-family: "helvetica neue", helvetica, arial, sans-serif; color: #222; text-align: center; padding-top: 36px; min-width: 920px; }
h1 { display: inline; background-color: #c00; color: #fff; font-size: 72px; line-height: 72px; margin: 0 auto; padding: 10px 20px; letter-spacing: -3px; text-shadow: 0 2px 1px #000; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; }
ul { list-style-type: none; width: 870px; margin: 36px auto; padding: 0; }
li { width: 250px; height: 250px; float: left; margin: 10px; border: 2px solid #444; padding: 8px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background-size: 100% 100%; background-repeat: no-repeat; position: relative; }
a:hover li { border: 2px solid #c00; box-shadow: 0 0 10px #c00; -webkit-box-shadow: 0 0 10px #c00; -moz-box-shadow: 0 0 10px #c00; }
.caption { position: absolute; bottom: 0; right: 0; width: 100%; text-align: center; font-weight: bold; font-size: 18px; line-height: 22px; color: #fff; text-shadow: 0 1px 1px #000; padding: 8px 0; background-color: rgba(34,34,34,0.8); }
br { clear: both; }
#logo { display: block; margin: 36px auto; width: 25px; height: 18px; }

@media only screen and (max-device-width: 480px) {
body { text-align: center; margin: 0; padding: 0; min-width: 300px; }
h1 { display: block; width: 90%; margin: 10px auto; font-size: 42px; line-height: 42px; letter-spacing: -2px; text-align: center; }
ul { width: 90%; margin: 0 auto; padding: 0; }
li { display: block; width: 100%; height: auto; padding: 10px 5px; margin: 0; border: none; border-top: 2px solid #444; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background-image: none !important; position: static; text-align: left; }
a:hover li { border: none; border-top: 2px solid #444; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.caption { position: static; color: #222; text-shadow: none; padding: 0; background-color: #fff; font-size: 24px; line-height: 28px; }
}