/* 8. CUSTOM LAYOUT & TYPOGRAPHY (Daddy bear)
----------------------------------------------------------------------------------------*/
aside { position: absolute; top:10em; left:8em; }

#container { margin: 0px 0px 0px 35em; max-width: 30em;	}

header h2:before, header h2:after { width: 42%; }

h1 span {
  font-family: "proxima-nova-1","proxima-nova-2", arial, helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing:0.1em;
  font-size:0.382em;
  line-height:3.236em;
  display:block;
  }
  
h1 span:before, h1 span:after {
  content:"";
  border-top:1px solid #333;
  height: 0.1em;
  width: 19%;
  display: block;
  margin-top: .618em;
  }
  
h1 span:before { float: left; }  
h1 span:after { float: right; }
  
ul { list-style-type: disc; margin-left: 2.4em; }
ol { margin-left: 2.4em; }

footer p { max-width: 1000em; font-size:1em; }
top-menu p { font-size: 1em; max-width: 1000em; }

/* 9. CUSTOM LAYOUT & TYPOGRAPHY (Mummy bear)
----------------------------------------------------------------------------------------*/
@media screen and (min-width: 30em) and (max-width: 66.236em) {

aside { position: absolute; top:10em; left:10px; }
#container { max-width: 30em; margin: 0px 0px 0px 320px; }

header h2:before, header h2:after { width: 35%; }

h1 span { font-size:0.5em; }
h1 span:before, h1 span:after { width: 10%; }

ul { list-style-type: disc; margin-left: 2.4em; }
ol { margin-left: 2.4em; }

footer p { max-width: 1000em; font-size:1em; }
top-menu p { font-size: 1em; max-width: 1000em; }

}