@charset "UTF-8";
/* CSS Document */

/* ========= Set base 10 font size ========= */
html {
	font-size: 62.5%;
}

body {
	color: #555;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.5;
}
  .container {
	margin: 0 auto;
	max-width: 960px;	
}
/* ========== General Styles ========== */

/* Links and Anchors */
a,
a:link,
a:visited {
	color: #3e7fa6;
	text-decoration: none;
}

a:hover,
a:focus {
	color: #415c6c;
}

/* Lists */
ul {
	padding: 0;
	margin-left: 20px;
}

 
/* ========== Gallery Layout ========== */
 
.container {
	margin: 20px auto;
	max-width: 720px;
}

/* ========== Modules ========== */

/* This rule is read by Galleria to define the gallery height: */
#galleria {
	height: 480px;
}
/* ========== Layout ========== */

/* Apply a natural box layout model to all elements http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.container {
	margin: 0 auto;
	max-width: 960px;
}

/* Columns */
.sidebar,
.main,
.portfolio-item,
.feature.portfolio-item {
	float: left;
}

.main {
	width: 65%;
}

.sidebar,
.portfolio-item,
.feature.portfolio-item {
	width: 30%;
}

/* Gutters */
.gutter-right,
.feature.gutter-right {
	margin: 0 2.5% 0 0;
}

.gutter-left,
.feature.gutter-left {
	margin: 0 0 0 2.5%;
}

.gutter-left-right,
.feature.gutter-left-right {
	margin: 0 2.5%;
}

/* ========== Navigation ========== */

.top-nav {
	border-top: 2px solid #415c6c;
	border-bottom: 1px solid #d4d4d4;
	margin-bottom: 21px;
	margin-bottom: 2.1rem;
}

.top-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.top-nav li {
	float: left;
}

.top-nav a {
	display: block;
	padding: 10px 15px;
	text-transform: uppercase;
}

/* Mobile Navigation */
#menu-icon {
	display: none;
}
/* ========== Modules ========== */

/* Header */

page-header {
	margin-top: 42px;
	margin-top: 4.2rem;
}
 
.site-title a {
	background: url('../images/graphics/logo.png') no-repeat 0 0;
	display: block;
	height: 70px;
 
 /* hide text */
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
 
}

.tagline {
	font: normal 100 14px Baskerville, Georgia, serif;
	font-size: 1.4rem;
	letter-spacing: 5px;
	text-transform: uppercase;
	margin-bottom: 21px;
	margin-bottom: 2.1rem;
}
 
.amp {
	font-style: italic;
}


/* Portrait */
.portrait {
	float: left;
	margin-right: 20px;
	width: 200px;
}

.portrait .caption {
	color: #777;
	font-size: 12px;
	font-size: 1.2rem;
}

/* Contact Form */
input[type="text"],
input[type="email"],
textarea {
	color: #555;
	display: block;
	margin-bottom: 21px;
	margin-bottom: 2.1rem;
	width: 100%;
}

textarea {
	height: 150px;
}

label {
	font-weight: bold;
}

.form-button {
	background-color: #e4e4e4;
	border: 1px solid #c4c4c4;
	border-radius: 3px;
	color: #555;
	padding: 8px 15px;
}

.form-button:hover,
.form-button:focus {
	background-color: #d4d4d4;
}

.contact-form {
	margin-bottom: 21px;
	margin-bottom: 2.1rem;
}

/* Sidebar */
.sidebar {
	background-color: #f6f6f6;
	padding: 0 20px;
}

/* Flexible Media */
.flex {
	max-width: 100%;
	height: auto;
}

/* source: http://alistapart.com/article/creating-intrinsic-ratios-for-video */
.video-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 ratio => 9/16 = 56.25% */
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.video-container iframe {
	border: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.hero-wrapper {
	border-bottom: 1px solid #d4d4d4;
	padding-bottom: 21px;
	padding-bottom: 2.1rem;
}

/* Footer */
.page-footer {
	border-top: 1px solid #415c6c;
	margin-top: 21px;
	margin-top: 2.1rem;
}

.credit {
	float: left;
	width: 50%;
}

.connect {
	list-style: none;
	margin: 7px 0;
	text-align: right;
}

.connect li {
	display: inline;
	padding: 0 5px;
}

.connect li:last-child {
	padding-right: 0;
}

.connect a {
	font-size: 20px;
	font-size: 2rem;
}

/* ========== Assistive Text ========== */

/* Hide visually but readable by screen readers.
source: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
.screen-reader {
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}

/* ========== Media Queries ========== */

/* Below 992px: 992px/16px = 62em */
@media only screen and (max-width: 62em) {

	/* ========== Layout ========== */

	.container {
		padding: 20px;
		padding: 2rem;
	}

	/* ========== Modules ========== */

	/* Header */
.page-header {
		margin-top: 0;
	}
}

/* Below 700px: 700px/16px = 43.75em */
@media only screen and (max-width: 43.75em) {

	/* ========== Typography ========== */

	body {
		font-size: 12px;
		font-size: 1.2rem;
	}

	/* ========== Layout ========== */

	.container {
		overflow: hidden;
	}

	/* Columns */
	.main,
	.sidebar{
		float: none;
		width: 100%;
	}

	.portfolio-item {
		width: 47.5%;
	}

	/* Gutters */
	.gutter-left,
	.gutter-right,
	.gutter-left-right {
		margin: 0;
	}

	.med-gutter-left {
		clear: right;
		margin: 0 0 0 2.5%;
	}

	.med-gutter-right {
		clear: left;
		margin: 0 2.5% 0 0;
	}

	/* ========== Modules ========== */

	/* Header */
	.site-title a {
		background-position: 50% 0;
	}

	.tagline {
		text-align: center;
	}

	/* Navigation */
	.top-nav a {
		padding: 7px;
	}

	/* Sidebar */
	.sidebar {
		padding: 1px 20px;
	}

	/* Footer */
	.connect li {
		padding: 0 10px;
	}

	.connect a {
		font-size: 18px;
		font-size: 1.8rem;
	}

}

/* Below 480px: 480px/16px = 30em */
@media only screen and (max-width: 30em) {

	/* ========== Layout ========== */

	/* Columns */
	.portfolio-item,
	.feature.portfolio-item {
		float: none;
		width: 100%;
	}

	.med-gutter-left,
	.med-gutter-right,
	.feature.portfolio-item {
		margin: 0;
	}

	/* ========== Modules ========== */

	/* Header */
	.page-header {
		border-bottom: 1px solid #415c6c;
		margin: 42px 0 0;
		margin: 4.2rem 0 0;
	}

	/* Footer */
	.credit,
	.connect {
		float: none;
		width: 100%;
		text-align: center;
	}

	/* ========== Navigation ========== */

	/* Mobile Navigation */
	#menu-icon {
		background: #f2f2f2;
		box-shadow: 1px 0 5px #999;
		display: block;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 100;
	}

	#menu-icon a {
		color: #415c6c;
		font-size: 12px;
		font-size: 1.2rem;
		font-weight: bold;
		text-transform: uppercase;
		display: block;
		padding: 12px 0 12px 20px;
		padding: 1.2rem 0 1.2rem 20px;
	}
	
	#top-nav-wrap {
		border: none;
		position: fixed;
		top: 20px;
		top: 2rem;
		left: 0;
		z-index: 100;
		width: 100%;
	}
 
	.top-nav ul {
		background: #415c6c;
		display: none;
		margin: 21px 0 0 0;
		margin: 2.2rem 0 0 0;
		width: inherit;
		z-index: 100;
	}
	.top-nav li {
		float: none;
	}
 
	.top-nav a {
		border-bottom: 1px solid #e4e4e4;
		color: #fff;
		padding: 15px 20px;
		padding: 1.5rem 20px;
	}
	
	.top-nav a[href="contact.html"] {
		border-bottom: none;
	}
 
	.top-nav a:hover,
	.top-nav a:focus {
		background-color: #576e7d;
	}
 
}

/* ==================================================
Micro clearfix hack to address parent containers that collapse
height with floated child elements. To use, simply add the
class "cf" to any container with floated child elements.
http://nicolasgallagher.com/micro-clearfix-hack/
================================================== */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}