* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0; color: #444; background: #fff;
  font: 16px/1.55 "Arial", "Helvetica Neue", sans-serif;
}
.site-header { border-bottom: 3px solid #269bc3; }
.header-inner { max-width: 1010px; margin: 0 auto; }
.header-inner img { display: block; width: 100%; height: auto; }
nav { background: #222; }
.nav-inner { max-width: 1010px; margin: 0 auto; display: flex; flex-wrap: wrap; }
nav a {
  display: block; padding: 10px 12px; color: #fff; text-decoration: none;
  text-transform: uppercase; font-size: 12px; font-weight: bold;
}
nav a:hover, nav a.active { background: #269bc3; }
main { width: min(710px, calc(100% - 32px)); margin: 26px auto 34px; min-height: 205px; }
h1 { margin: 0 0 12px; color: #333; font-size: 30px; line-height: 1.25; font-weight: 400; }
h2 { margin: 14px 0 10px; color: #333; font-size: 27px; line-height: 1.3; font-weight: 400; }
h3 { margin: 18px 0 10px; color: #333; font-size: 21px; font-weight: 400; }
p { margin: 0 0 13px; }
a { color: #269bc3; }
ul { padding-left: 26px; list-style-type: square; }
.profile { float: right; width: 300px; max-width: 45%; height: auto; margin: 2px 0 18px 28px; }
footer { background: #30333f; color: #aeb0b8; min-height: 105px; padding: 17px 16px; font-size: 13px; }
.footer-inner { max-width: 1010px; margin: 0 auto; }
footer p { margin: 0 0 2px; }
footer a { color: #b9bdc8; }
@media (max-width: 700px) {
  .header-inner { width: 100%; }
  .nav-inner { width: 100%; }
  nav a { padding: 10px 9px; font-size: 11px; }
  main { margin-top: 24px; }
  .profile { width: 42%; margin-left: 16px; }
  h1 { font-size: 27px; }
}
@media (max-width: 460px) {
  .profile { float: none; display: block; max-width: 100%; width: 230px; margin: 18px auto; }
}