/* FONT SQUIRREL */

@font-face {
    font-family:'robotocondensed';
    src: url('../fonts/roboto-condensed-webfont.eot');
    src: url('../fonts/roboto-condensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-condensed-webfont.woff') format('woff'),
         url('../fonts/roboto-condensed-webfont.ttf') format('truetype'),
         url('../fonts/roboto-condensed-webfont.svg#robotocondensed') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family:'robotoboldcondensed';
    src: url('../fonts/roboto-boldcondensed-webfont.eot');
    src: url('../fonts/roboto-boldcondensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-boldcondensed-webfont.woff') format('woff'),
         url('../fonts/roboto-boldcondensed-webfont.ttf') format('truetype'),
         url('../fonts/roboto-boldcondensed-webfont.svg#robotoboldcondensed') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:'robotocondenseditalic';
    src: url('../fonts/roboto-condenseditalic-webfont.eot');
    src: url('../fonts/roboto-condenseditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-condenseditalic-webfont.woff') format('woff'),
         url('../fonts/roboto-condenseditalic-webfont.ttf') format('truetype'),
         url('../fonts/roboto-condenseditalic-webfont.svg#robotocondenseditalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* RESET */

*	{
	padding:0;
	margin:0;
	}

a {
	color: #72bf44;
	text-decoration: none;
}

a:hover {
	color: #ffffff;
}

a img {
    border: 0;
}

a, img {
    border:none;
}

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

body, html { 
	font-size: 100%;
	padding: 0; 
	margin: 0;
	color:#ffffff;
}

body {
	max-width:600px;
	background: #000000 url(../images/header_v2.jpg) no-repeat top left; 		
    color: #72bf44;
	font-family:'robotocondensed', Arial, Helvetica, sans-serif;
}

a {
	color: #72bf44;
	text-decoration: none;
}

a:hover {
	color:#ffffff;
}

.container {
	width:100%;
	height:auto;
}

.main,
.container > header {
	padding:2.250em;	
	width: 100%;
	height:auto;
}

.container > header {
	text-transform:uppercase;		
	margin-bottom:4em;
}

.container > header h1 {
	font-family:'robotocondensed', Arial, Helvetica, sans-serif;
	color:#ffffff;
	margin-bottom:0;
	padding-bottom:0;
	font-size:4.500em;
	line-height:1em;
	letter-spacing:-0.025em;	 	
}

.container > header p.byline {
	font-family:'robotoboldcondensed', Arial, Helvetica, sans-serif;	
	text-align:left;
	color:#ffffff;
	font-size:150%;
	letter-spacing:0.135em;	 
	line-height:1.45em;
}

.intro {
	padding:2.250em;		
	border-top:5px #ffffff solid;
	border-bottom:5px #ffffff solid;
	margin:0;	
	color: #959595;
	font-size:1.125em;
	line-height: 1.5;
}

.intro p span {
	font-family: Helvetica, Arial, sans-serif;	
	font-weight:bold;	
	text-transform:uppercase;
	letter-spacing:0.35em;
	color:#ffffff;	
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (max-width : 480px) {

body {
	max-width:480px;
	webkit-background-size: 480px;
    -moz-background-size: 480px;
    -o-background-size: 480px;
    background-size: 480px; 	
}

.container > header h1 {
	font-size:3.750em;
}

.intro p span {
	letter-spacing:0.2em;
}


@media only screen 
and (max-width : 360px) {

body {
	max-width:360px;
	webkit-background-size: 360px;
    -moz-background-size: 360px;
    -o-background-size: 360px;
    background-size: 360px; 	
}

.container > header h1 {
	font-size:3.125em;
}

.container > header p.byline {
	font-size:100%;
}

.main,
.container > header,
.intro {
	padding:1.5em;	
}


}

@media only screen 
and (max-width : 320px) {

body {
	max-width:320px;
	webkit-background-size: 320px;
    -moz-background-size: 320px;
    -o-background-size: 320px;
    background-size: 320px; 	
}

.container > header h1 {
	font-size:2.25em;
}

.intro {
	font-size:1em;
}



}