/*@import url('css/boilerplate.css');*/
@import url('css/reset.css');
@import url('css/grid.css');
@import url('fonts/LiebeErika/stylesheet.css');
@import url('css/typography.css');

@import url('css/components.css');
@import url('css/header-and-footer.css');
@import url('css/content.css');

body {
	background: url('img/bg.jpg');
}

#wrapper {
	width: 100%; height: 1189px;
	background-image: -webkit-gradient(radial, center center, 0, center center, 150, from(rgba(252,252,252, 0.4)), to(rgba(250,250,250, 0.0)));
	background-image: -webkit-radial-gradient(center center, contain, rgba(252,252,252, 0.4), rgba(250,250,250, 0.0));
	background-image: -moz-radial-gradient(center center, contain, rgba(252,252,252, 0.4), rgba(250,250,250, 0.0));
	background-image: -o-radial-gradient(center center, contain, rgba(252,252,252, 0.4), rgba(250,250,250, 0.0));
	background-image: -ms-radial-gradient(center center, contain, rgba(252,252,252, 0.4), rgba(250,250,250, 0.0));
	background-image: radial-gradient(center center, contain, rgba(252,252,252, 0.4), rgba(250,250,250, 0.0));
}

/* = MEDIA QUERIES
-------------------------------------------------------------- */
/* iPhone  */
@media only screen and (min-width: 320px) {
	/* =Grid
	-------------------------------------------------------------- */
	.grid-main {
		width: 92%;
	}

	.grid .col {
	  float: none;
	  width: 100%;
	  margin-right: 0;
	  padding-right: 0;
	}	
	
	/* =Header and Footer
	-------------------------------------------------------------- */
	header[role="banner"],
	footer[role="contentinfo"] {
		padding-top: 1.2875em;
		text-align: center;
	}
	footer[role="contentinfo"] {
		padding-top: 1.2875em;
	}
	
	
	/* =About
	-------------------------------------------------------------- */
	aside[role="complementary"] {
		position: relative;
	}
	
	aside[role="complementary"],
	section.about aside {
		margin-top: 0em;
	}
	
	article h1,
	article p {
		padding-right: 0em;
	}
	
	article blockquote {
		padding-top: 1em;
		padding-bottom: 1em;
	}
	
	aside.cast ul.vcard li.fn,
	aside.cast ul.vcard li.role {
		width: 70%;
	}
	
	aside.large-image blockquote {
		padding-left: 0em;
	}
	
}

/* Screens between iPad and Small desktops  */
@media only screen and (max-width: 959px) {
	
	body section.about aside {
		margin-top: 0em;
	}
}

/* Less than 420px, fixes for portrait iPhone */
@media only screen and (max-width: 419px) {
}



/* iPad desktops  */
@media only screen and (min-width: 768px) {
	
	/* =Grid
	-------------------------------------------------------------- */
	.grid-main {
		max-width: 768px;
	}

	.grid .col {
	  float: left;
	  width: 4.841149773071105%;
	  margin-right: 0.7564296520423601%;
	  padding-right: 0.7564296520423601%;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	  -moz-background-clip: padding-box !important;
	  -webkit-background-clip: padding-box !important;
	  background-clip: padding-box !important;
	}
	.grid .col2 {
	  width: 10.43872919818457%;
	}
	.grid .col3 {
	  width: 16.036308623298034%;
	}
	.grid .col4 {
	  width: 21.6338880484115%;
	}
	.grid .col5 {
	  width: 27.23146747352496%;
	}
	article.main section {
		margin-left: 27.23146747352496%;
	}
	.grid .col6 {
	  width: 32.829046898638424%;
	}
	.grid .col7 {
	  width: 38.42662632375189%;
	}
	.grid .col8 {
	  width: 44.024205748865356%;
	}
	.grid .col9 {
	  width: 49.62178517397882%;
	}
	.grid .col10 {
	  width: 55.21936459909228%;
	}
	.grid .col11 {
	  width: 60.816944024205746%;
	}
	.grid .col12 {
	  width: 66.41452344931922%;
	}
	.grid .col13 {
	  width: 72.01210287443268%;
	}
	.grid .col14 {
	  width: 77.60968229954615%;
	}
	.grid .col15 {
	  width: 83.2072617246596%;
	}
	.grid .col16 {
	  width: 88.80484114977307%;
	  float: none;
	}
	.grid .col17 {
	  width: 94.40242057488653%;
	  float: none;
	}
	.grid .col18 {
	  width: 100%;
	  float: none;
	}

	.grid .col:last-child,
	.grid .col18 {
		margin-right: 0;
		padding-right: 0;
	}
	
	/*	adjustments to grid */
	.grid .col8 {
	   width: 72.01210287443268%; /*go to 13 columns*/
	}
	.grid .col13 > .col12,
	.grid .col13 > .col6 {
		width: 100%;
	}
	
	
	/* =Header and Footer
	-------------------------------------------------------------- */
	header[role="banner"],
	footer[role="contentinfo"] {
		padding-top: 2.575em;
		text-align: center;
	}
	footer[role="contentinfo"] {
		padding-bottom: 2.575em;
	}
	
	
	/* =About
	-------------------------------------------------------------- */
	aside[role="complementary"] {
		position: absolute;
		top: 0.325em;
	}
	
	article h1,
	article p {
		padding-right: 1.5em;
	}
	
	article blockquote {
		padding-top: 0;
		padding-bottom: 0;
	}
	
	aside[role="complementary"],
	section.about aside {
		margin-top: 7.25em;
	}
	
	aside.cast ul.vcard li.fn,
	aside.cast ul.vcard li.role {
		font-size: 0.875em;
		width: 60%;
	}
	
	aside.large-image blockquote {
		padding-left: 2em;
	}
}


/* Small desktop screens  */
@media only screen and (min-width: 960px) {
	
	.grid-main {
		max-width: 960px;
		width: 100%;
	}
	
	/*	adjustments to grid */
	.grid .col8 {
	  width: 44.024205748865356%; /*back to 8 columns*/
	}
	.grid .col13 > .col12 {
		width: 66.41452344931922%;
	}
	.grid .col13 > .col6 {
		width: 32.829046898638424%;
	}
	
	
	/* =About
	-------------------------------------------------------------- */
	aside.cast ul.vcard li.fn,
	aside.cast ul.vcard li.role {
		clear: none;
		padding-left: 1em;
		width: 70%;
	}
	aside.cast ul.vcard li.fn {
		padding-top: 0;
	}
	
	section.about aside {
		margin-top: 7.25em;
	}
	
}



/* Large screens  */
@media only screen and (min-width: 1174px) {
	
	.grid-main {
		max-width: 1172px;
	}	
}
/*
@media only screen and (min-width: 960px) {

	#pageflip {
		width: 80% !important;
	}
}*/