/* =Global 
-----------------------------------------------------------*/
article, aside, details, figcaption,
figure, footer, header, hgroup, menu,
nav, section { display: block; }

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
	height: 100%;
	margin: 0;
}

html,
button,
input,
select,
textarea { font-family: 'Gentium Basic', serif; }

body {
	margin: 0;
	padding: 0;
	background: #F3EFE0;
	color: #5B5B5A;
	height: 100%;
}

ol, ul { list-style: none; }

a { color: #9A3334; text-decoration: none; }
a:focus { outline: thin dotted; }
a:active,
a:hover { outline: 0; }

.content {
	margin: 0 auto;
	width: 60em;
	padding: 0;
	transition:all .25s linear; 
	-o-transition:all .25s linear; 
	-moz-transition:all .25s linear; 
	-webkit-transition:all .25s linear;
}

hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}

.smoothScroll {
	clear: both;
	float: none;
}

.clearfix {
	clear: both;
}

/* =Typography 
-----------------------------------------------------------*/
p {
	text-decoration: none;
	font: normal 1em/1.5 'Gentium Basic', serif;
}

blockquote,
q {
	quotes: none;
	background: #c9c9c9;
	padding: .5em;
	line-height: 1.5;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

h1 {
	float: left;
	font-size: 1.5em;
	line-height: 1;
	font-variant: small-caps;
	text-decoration: none;
	text-align: left;
	white-space: normal;
	font-family: 'Open Sans', sans-serif;
}

h2 {
	text-align: center;
	text-decoration: none;
	font-size: 1.5em;
	line-height: 1.5em;
	font-weight: bold;
	font-variant: small-caps;
	text-transform: none;
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
}

h3 {
	font: normal 1em/1.5em 'Open Sans', sans-serif;
	font-variant: small-caps;
}

/* =Header 
-----------------------------------------------------------*/
header {
	position: fixed;
	z-index: 100;
	color: white;
	width: 100%;
	margin: 0;
	left: 0;
	right: 0;
	top: 0;
	background-color: #9A3334;

	border-bottom: .5em solid #2B2B2B;
	-moz-transition: width .25s;
}
header img {
	margin-top: 10px;
	float: left;
}
header a {
	color: white;
}

nav ul {
   	list-style: none;
   	list-style-image: none;
   	margin: 0;
   	padding: 0;
   	float: right;
}
	
nav li {
	float: left;
	clear: none;
}

nav a {
	display: block;
	padding: 1.5em 1em;
	height: 1em;
	text-align: center;
	font-size: 1em;
	font-family: 'Open Sans', sans-serif;
}

nav a:hover,
nav a:focus,
nav a:active {
	color: #F1F1D4;
}

/* =Content 
-----------------------------------------------------------*/
#hero {
	background: #1B1B1B url('https://www.wildfiregames.com/img/hero.png') repeat center center;
	left: 0;
	right: 0;
	position: relative;
	height: 31em;
	border-bottom: .5em solid #282828;
	margin: 4.5em auto 0;
	padding: 1em 0;
}

#featured img { display: none; }
#featured.orbit { background: none; }
#featured.orbit img { display: block; }

#intro { margin: 2em 0; }

#about { padding: .5em; }

#contact { padding: .5em; }

/* =Projects 
-----------------------------------------------------------*/
#zero { margin-left: 0; }

.panel {
	clear: none;
	float: left;
	height: 14em;
	margin: 1.5em 0 1.5em 1.5em;
	padding: 0.5em;
	position: relative;
	width: 18em;
	border-radius: .5em;
	-moz-border-radius: .5em;
	-webkit-border-radius: .5em;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
	-moz-transition: background 0.25s linear;	
}

.panel:hover {
	background-color: #B3B3B3;
}

.panel img {
	width: 18em;
	height: 12em;
	padding: 0;
	margin: 0;
	border: none;
	position: absolute;
}

.title {
	background: none;
	bottom: 0.5em;
	color: #111111;
	font: 1em/1 "Open Sans",sans-serif;
	left: 0.5em;
	padding: 0.25em;
	position: absolute;
}

.caption {
	width: 17em;
	height: auto;
	font: normal 1em/2 "Gentium Basic", serif;
	margin: 0;
	position: absolute;
	padding: 0 .5em;
	background: rgba(0, 0, 0, 0.5);
	bottom: 2.5em;
	color: #e6e6e6;
}

.button {
 	display: block;
 	background: #299329;
 	width: auto;
 	padding: .25em;
 	color: #fff;
 	font: normal 1em/1 "Open Sans", sans-serif;
 	text-decoration: none;
 	text-align: right;
 	position: absolute;
 	bottom: .5em;
 	right: .5em;
 	transition: background 0.25s linear;
 	-webkit-transition: background 0.25s linear;
 	-moz-transition: background 0.25s linear;
 	border-radius: .25em;
 	-moz-border-radius: .25em;
 	-webkit-border-radius: .25em;
 }

.button:hover {
	background-color: #185718;
	color: #fff;
}


/* =Responsive Layouts 
-----------------------------------------------------------*/
/* For screen widths less than 60em */
@media screen and (max-width: 60em){
	body {
		margin-top: 10em;
	}
	.content {
		width: 50em;
	}
	
	#hero{
		height: 25em;
	}
	
	.panel {
		margin: 1em 0 1em 1em;
		width: 15em;
		height: 12em;
	}
	
	.panel img {
		width: 15em;
		height: 10em;
	}
	
	.caption {
		width: 14em;
	}
}

/* For screen widths less than 50em */
@media screen and (max-width: 50em){
	.content { width: 40em; }
	
	#hero{ display: none; }
	
	#intro { margin-top: 4.5em; }
	
	#zero { margin: 1em auto; }
	
	.panel {
		margin: 1em auto;
		width: 27em;
		height: 18em;
		float: none;
		clear: both;
	}
	
	.panel img {
		width: 27em;
		height: 16em;
	}
	
	.caption { width: 26em; }
}

/* For screen widths less than 40em */
@media screen and (max-width: 40em){
	.content {
		width: 30em;
	}
}