/* 8. CUSTOM LAYOUT & TYPOGRAPHY (Daddy bear)
----------------------------------------------------------------------------------------*/
#container {
	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 {
  text-transform: uppercase;
  letter-spacing:0.1em;
  font-size:1em;
  display:block;
  }
  
h1 span:before, h1 span:after {
  content:"";
  display: block;
  }
  
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;
  margin-top:-12.5em;
  height:auto;
  }
  
footer p { max-width: 17.942em; }

img {
	max-width: 100%;
	height: auto;
}
html, body {
    height: 100%;
}
/* 9. CUSTOM LAYOUT & TYPOGRAPHY (Mummy bear)
----------------------------------------------------------------------------------------*/
@media screen and (min-width: 30em) and (max-width: 63.236em) {

#container { width: 30em; }

.column {
	float: left;
	text-align: center;
	width: 30em;
	padding: 1em;
	margin-top: 14px;
	margin-bottom: 20px;
	margin-left: 0;
}
.embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
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: auto;
  height: auto;
  margin: 0 0 2.2em;
  }
}