div.main {margin:40px auto; max-width:700px; line-height:1.7; font-size:20px; color:#444; padding:0 10px}
h1,h2,h3 {line-height:1.2}
h2,h3,h4 {text-align:center}
img {width:100%; height:auto;}
div.img:hover {opacity:0.85}
/*div.img img {width:100%; height:auto;}*/
div.desc {padding: 15px; padding-bottom: 50px; text-align:center}
* {box-sizing:border-box}
.tile4 {padding:5px; padding-bottom:15px; float:left; width:24.99999%; height:100%}
.tile3 {padding:5px; padding-bottom:15px; float:left; width:32.99999%; height:100%}
.tile2 {padding:5px; padding-bottom:15px; float:left; width:49.99999%; height:100%}
.tile1 {padding:5px; padding-bottom:15px; float:left; width:99.99999%; height:100%}
header li {float:left}
@media only screen and (max-width:700px) {.tile4 {width:100%} .tile3 {width:100%} .tile2 {width:100%} .tile1 {width:100%} header li {float:initial; text-align:center}}
.clearfix:after {content:""; display:table; clear:both}
header ul {list-style-type:none; padding:0px}
header li a {display:inline-block; color:gray; text-align:center; padding:18px 16px; text-decoration:none}
header li a.logo {padding:0px 16px; font-size:36px; font-weight:bold; color:black}
header li a:hover {color:black}
header li a.selected {color:black}
p.center {text-align:center}