/* 8. CUSTOM LAYOUT & TYPOGRAPHY (Daddy bear)
----------------------------------------------------------------------------------------*/
#container {
	padding: 1.618em;
	margin: 0 auto;
	max-width: 60em;
	}

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

h1 { font-size: 4.4em; line-height:1.618em; margin-bottom:0.1em; }

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: 1.618em;
  }

h1 span:before { float: left; }
h1 span:after { float: right; }

ul { margin-left: 0.4em; }
ol { margin-left: 0.4em; }

p.intro {
  font-size: 1.618em;
  line-height:1.4289em;
  max-width: 20em;
  margin-bottom: 1em;
  }

aside {
  float: right;
  clear: right;
  width: 25em;
  height: 20em;
  margin-top:-12.5em;
  }

footer p { max-width: 17.942em; }


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

#container { width: 30em; }

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

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

p.intro {
  font-size: 1.309em;
  margin-bottom: 1em;
  max-width: 33em;
  }

aside {
  float: none;
  width: 30em;
  height: 25em;
  margin: 0 0 2.2em;
  }

}