/* base */
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f7f7f8;color:#1f2937}
img{border:0;display:block}
.container{width:92%;max-width:1050px;margin:0 auto}

/* header */
.site-header{background:#111827;color:#fff;padding:20px 0}
.site-title{margin:0;font-size:28px}
.tagline{margin:6px 0 0 0;color:#5f7287}

/* NAV BAR (floats + :hover) */
.topnav{background:#1f2937;position:relative;z-index:10}
.nav{list-style:none;margin:0;padding:0}
.nav:after{content:"";display:block;clear:both;height:0;visibility:hidden}
.nav>li.top{float:left;position:relative}
.nav>li.top>a{display:block;padding:10px 14px;color:#e5e7eb;text-decoration:none;line-height:1}
.nav>li.top>a:hover,.nav>li.top>a:focus{background:#374151}
.nav>li.top>a[aria-current="page"]{background:#0f766e;color:#fff}

/* dropdown */
.dropdown{display:none;position:absolute;left:0;top:100%;min-width:180px;background:#1f2937;border:thin solid #ccc;list-style:none;margin:0;padding:4px 0;z-index:1000}
.dropdown li{float:none}
.dropdown a{display:block;padding:8px 12px;color:#e5e7eb;text-decoration:none;white-space:nowrap}
.dropdown a:hover,.dropdown a:focus{background:#374151}
.has-sub:hover>.dropdown{display:block}

/* main / hero */
main{position:relative;z-index:1;padding:16px 0}
.hero{background:#fff;margin:24px 0;padding:16px;border:thin solid #ccc;overflow:hidden}
.hero-img{float:left;width:160px;height:160px;border:medium solid #ccc;margin-right:24px}
.hero-text h2{margin:0 0 8px 0}

/* footer */
.site-footer{background:#111827;color:#e5e7eb;text-align:center;padding:16px 0;margin-top:24px}

/* mobile */
@media screen and (max-width:700px){
  .nav>li.top{float:none}
  .dropdown{position:static;border:none;min-width:0}
  .hero{text-align:center}
  .hero-img{float:none;margin:0 auto 16px auto}
}