body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0;}
table{ border-collapse:collapse; border-spacing:0;}
fieldset,img{ border:0;}
address,caption,cite,code,dfn,var{ font-style:normal; font-weight:normal;}
ol,ul{ list-style:none;}
caption,th{ text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;}
q:before,q:after{ content:'';}
abbr,acronym{ border:0;}

html{ max-width:1960px; overflow-y:scroll; padding:80px 0;}
body{ color:#444; font:16px/1.5 'Open Sans',Arial,sans-serif; width:65%;}
a{ color:#dc322f;}
p{ margin:1em 0;}
ul{ list-style:inside disc;}
h1,h2,h3{ font-weight:bold; line-height:1;}
h1,nav h2{ color:#dc322f; font-size:1.5rem;}
h3{ font-size:.875rem; text-transform:uppercase;}

nav li{ display:block;}
nav a{ text-decoration:none;}
nav a:hover,aside a:hover{ color:#444;}

nav,article{ margin:0 auto; max-width:700px; padding:0 120px;}
time{ color:#93a1a1; display:block; font-size:.875rem; font-style:italic; margin:.5em 0 2em;}

aside{ left:65%; max-width:450px; position:absolute; top:80px; width:35%;}
aside,aside a{ color:#93a1a1;}
aside img{ display:block; float:left;}
section{ clear:left; padding-bottom:2rem;}
section:first-child h3{ color:#859900;}
section:nth-child(2) h3{ color:#b58900;}
section:nth-child(3) h3{ color:#268bd2;}
#h{ background:url(jt.png) no-repeat 0 0; height:25px; left:50px; overflow:hidden; position:fixed; text-indent:-290486px; top:40px; width:20px;}

@media screen and (max-width: 1040px) {
  h3{ font-size:.75rem;}
  nav,article{ padding:0 80px;}
  aside{ font-size:.875em;}
  aside img{ height:60px; width;100px;}
  #h{ left:35px; top:30px;}
}

@media screen and (max-width: 880px) {
  html{ padding-bottom:0;}
  body{ width:auto;}
  nav,article{ margin:0; max-width:none; padding:0 20px 20px 20px;}
  aside{ background:#fdf6e3; max-width:none; padding:20px; position:static; width:auto;}
  #h{ left:20px;}
}