/* Site Styles
================================================== */
body{
font-family: "vaud";
background-color: #fbf9f9;
}

body.about{
	background-color: #3b3b3b;
	color: white;
}




/* Header Styles
================================================== */
header{
	background-color: #fbf9f9;
	height: 60px;
	position: fixed;
	width: 100%;
	margin: auto;
	z-index: 9999;
}

header h1{
	float:left;
	margin-left: 20px;
	margin-top: 20px;
	font: 24px/22px "vaud", Helvetica, Arial, sans-serif;
}

header nav{
	float:right;
	margin-right: 20px;
	margin-top: 20px;
	font: 14px/16px "vaud-medium", Helvetica, Arial, sans-serif;}

header nav li{
	float: left;
	margin-left: 10px;
}

span.tagline{
	margin-left: 15px;
}


/* Section hero
================================================== */

section#hero{
	height: 100%;
	width: 100%;
	position: relative;
}

section#hero.issue02{
	background: url('../images/hero_02.jpg') 0 0 no-repeat;
	background-position: center top;
	background-size: cover;
	  -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
}

section#hero.issue03{
	background: url('../images/hero_03.jpg') 0 0 no-repeat;
	background-position: center top;
	background-size: cover;
		  -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
}

section#hero.issue04{
	background: url('../images/hero_04.jpg') 0 0 no-repeat;
	background-position: center top;
	background-size: cover;
		  -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
}

section#hero.issue05{
	background: url('../images/hero_05.jpg') 0 0 no-repeat;
	background-position: center bottom;
	background-size: cover;
		  -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
}

section#hero.issue06{
	background: url('../images/hero_06.jpg') 0 0 no-repeat;
	background-position: center top;
	background-size: cover;
		  -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
}

section#hero.issue07{
	background: url('../images/hero_07.jpg') 0 0 no-repeat;
	background-position: center top;
	background-size: cover;
		  -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
}

section#hero.issue08{
	background: url('../images/hero_08.jpg') 0 0 no-repeat;
	background-position:left bottom;
	background-size: cover;
		  -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
}

section#hero.issue09{
	background: url('../images/hero_09.jpg') 0 0 no-repeat;
	background-position:left bottom;
	background-size: cover;
		  -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
}

section#hero.issue10{
	background: url('../images/hero_10.jpg') 0 0 no-repeat;
	background-position: center top;
	background-size: cover;
		  -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
}

section#hero.issue11{
	background: url('../images/hero_11.jpg') 0 0 no-repeat;
	background-position: center top;
	background-size: cover;
		  -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
    
}

section#hero.issue12{
	background: url('../images/hero_12.png') 0 0 no-repeat;
	background-color: #EC1A3B;
	background-position: center top;
	background-size: cover;
		  -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
    
}

.issue11 h1#issuename{
	color: black;
}

section#hero.launch{
	background-color:#ed145b;
	background-position: center top;
	background-size: cover;
		  -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
}


section#hero.sl{
	background: url('../images/sl-01.jpg') 0 0 no-repeat;
	background-position: center top;
	background-size: cover;
		  -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
}


span.launch{
	font-size: 38px;
	color:red;
	display: none;
}


h1#issuename{
	position: absolute; 
	top: 40%;
	text-align: center;
	width: 100%;
	font: 48px/52px "vaud", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	color: white;
}

h1#issuename-bottom{
	position: absolute; 
	bottom: 10%;
	text-align: center;
	width: 100%;
	color: white;
	font: 48px/52px "vaud", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
}


p#credit{
	position: absolute;
	color: white;
	bottom: 0;
	left: 20px;
	font: 10px/22px;
}

p#credit a{
	color: white;
}

/* Section issueinfo
================================================== */
div#issuewrap{
	margin-left: auto ;
	margin-right: auto;
}

section#issueinfo{
	width: 960px;
	margin: 0 auto;
	padding-top: 40px;
	padding-bottom: 40px;
}

div.issueintro{
	font-size: 22px;
	line-height: 26px;
	margin-bottom: 90px;
	float: left;
	
}


section#issueinfo a{
	border-bottom: solid 1pt;
	padding-bottom: 1px;
}

section#issueinfo a:hover{
	padding-bottom: 2px;
}

section#issueinfo p#issuenumber{
	text-align: center;
	font: 36px/42px "vaud", Helvetica, Arial, sans-serif;
	margin-top: 50px;
	margin-bottom: 100px;
}

div.essay{
	font-size: 16px;
	line-height: 20px;
	display:inline-block;
	margin-bottom: 40px;
	}

div.essay p{
	float: left;
	width: 460px;
	margin-left: 40px;
}

p.essay-title{
	font-size: 16px;
	line-height: 20px;
	margin-bottom:20px;
	font-family: "vaud-medium"}

div.essay img{
	display: block;
	float: left;
	width: 350px;
	height: auto;
}

section#issueinfo p#buynow{
	text-align: center;
	font: 36px/42px "vaud", Helvetica, Arial, sans-serif;
	margin-top: 50px;
	margin-bottom: 50px;
}

/* past issues
================================================== */
section#pastissues{
	width: 960px;
	font: 14px/20px "vaud-medium", Helvetica, Arial, sans-serif;
	margin-left: auto;
	margin-right: auto;
}

p#past{
	text-align: center;
}

div#issue{
	margin-right: 135px;
	margin-bottom: 60px;
	float: left;
	position: relative;
	width: 230px;
}

div#issue img{
	width: 230px;
	height: auto;
}

div#issue:nth-of-type(3n+3){
	margin-right: 0px;
}

div#issue p.title{
	text-align: center;
}

p.title{
	margin-top: 10px;
}

div.comingsoon{
	display: block;
}

div.date{
	background-color: black;
	width: 230px;
	height: 253px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

div.date p{
	position: absolute; 
	left: 50%; top: 50%;
	text-align: center;
	display: block;
	width: 230px;
	margin-left: -115px;
	font: 26px/22px "vaud", Helvetica, Arial, sans-serif;
	color: white;
	transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-webkit-transform:rotate(45deg); /* Opera, Chrome, and Safari */

}

div.date a{
	color: white;

}

/* about
================================================== */
section#hero.about p{
		position: absolute;
		bottom:60px;
		width: 100%;
		text-align: center;
		font: 36px/38px "vaud", Helvetica, Arial, sans-serif;
		z-index: +1;
	}
	
section#hero.about img{
		width: 660px;
		height: auto;
		position: absolute;
		top: 120px;
		left: 50%;
		margin-left: -330px;

	}
	
	
div#about, section#hero.about{
	width:960px;
	margin: 0px auto;
	font: 22px/26px "vaud", Helvetica, Arial, sans-serif;
	overflow: hidden;
	}
	
	
div#about a, section#hero.about a{
	color: white;
	border-bottom: solid 1pt;

	}
	
div#about a:hover, section#hero.about a:hover{
		padding-bottom: 2px;
	}

div#about article {
		margin-top: 40px;
		width: 460px;
		float: left;
	}
	
div#about article.first{
		margin-right:40px;
	}
	
div#about article h1{
		margin-top: 10px;
		font: 22px/26px "vaud-medium", Helvetica, Arial, sans-serif;
		margin-bottom: 20px;
	}
	
div#about article p, div#about article ul { 
	font: 16px/20px "vaud", Helvetica, Arial, sans-serif;	
	}
	
	span.launch{
		font-size: 22px;
	}
	
/* #Media Queries
================================================== */

/* Smaller than widescreen (devices and browsers) */
@media only screen and (min-width: 1000px) 
{

h1#issuename{
	font: 78px/82px "vaud", Helvetica, Arial, sans-serif;
	}
}

/* Smaller than widescreen (devices and browsers) */
@media only screen and (max-width: 960px) 
{

section#issueinfo, p#issuenumber{
	width: 100%;	
}

div.issueintro, div.essay{
	height: auto;
}

div#about, section#hero.about{
	width:800px;
}
	
div#issuewrap, div#about, section#hero.about, div#about, div#about h1, section#pastissues{
	width:800px;
	max-width: 800px;
}

section#hero.about img{
		width: 460px;
		margin-left: -230px;
	}

div.essay img{
	width: 300px;
}

div.essay p{
	width: 400px;

}

section#issueinfo p#buynow{
	font: 28px/16px "vaud", Helvetica, Arial, sans-serif;
}

div#issue{
	margin-right: 55px;
	margin-bottom: 60px;
}

div#about article.first{
		margin-right:20px;
}
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 800px) 
{

div#issuewrap, div#about, div#about h1, div#about, section#hero.about, section#pastissues{
	width:700px;
}

div#about, section#hero.about{
	width:700px;
}

div#about, section#hero.about{
	width:460px;
}
	
div#about article.first{
		margin-right:20px;
}
	
div.essay p{
	width: 380px;
	margin-left: 20px;
}
	
div#issue{
	margin-left: 60px;
	margin-right: 120px;
	margin-bottom: 60px;
}

div#issue:nth-of-type(3n+3){
	margin-right: 120px;
}

div#issue:nth-of-type(2n+2){
	margin-right: 0px;
	margin-left: 0px;
}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 570px) 
{

header h1{
	float:left;
	margin-left: 20px;
	margin-top: 20px;
	font: 24px/22px "vaud", Helvetica, Arial, sans-serif;
}

h1#issuename{
	position: absolute; top: 45%; left: 50%;
	margin-left: -135px;
	width: 270px;
	font: 46px/46px "vaud", Helvetica, Arial, sans-serif;
}

span.tagline{
	display: none;
}

section#hero.about p{
	bottom:35px;
}

section#hero.about img{
		width: 300px;
		margin-left: -150px;
}

section#issueinfo p#issuenumber{
	text-align: center;
	font: 22px/26px "vaud", Helvetica, Arial, sans-serif;
	margin-top: 30px;
	margin-bottom: 70px;
}

section#issueinfo p#buynow{
	font: 22px/26px "vaud", Helvetica, Arial, sans-serif;
}

div#issuewrap, div#about, div#about h1, div#about article, section#pastissues{
	width: 300px;
}

div.essay, div.issueintro{
	width: 300px;
	height: auto;
	margin-left:auto;
	margin-right: auto;
	margin-bottom: 40px;
}

div#about, section#hero.about{
	width:300px;
}


	
section#hero.about p{
		font: 28px/32px "vaud", Helvetica, Arial, sans-serif;

}
	
div#about article.first{
	margin-right:0px;
	}

div#issue img{
	width: 230px;
	height: auto;
}

div.essay p{
	width: 100%;
}

div.essay img{
	margin-left: auto;
	margin-right: auto;
}

div#issuewrap p{
	margin-top: 10px;
	margin-left: 0px;
}

div#issue{
	margin-left: 35px;
	margin-bottom: 20px;
}
	
div#aboutintro h1{
		top:30%;
	}
	
div#issue:nth-of-type(2n+2){
	margin-right: 0px;
	margin-left: 35px;
}
}