html, body {
	width: 100%;
	height: 100%;
}

header {
	background-color:#FBFBFB;
	min-height:50px;
	margin-bottom:40px;
	border-bottom: 1px solid white;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

header nav {
	text-align: center;
}

header nav ul {
	display:inline-block;
	margin: 0 auto;
	padding:0;
	position:relative;
	float:none;
	width:auto;
}


header nav ul li {
	display:inline-block;
	padding: 0px 15px 12px 15px;
}

header nav ul li a {
	display:block;
	color: #525558;
	font-weight:bold;
	font-size:1.1em;
}

header nav h1 {
	display:inline-block;
	font-weight: bold;
	padding:15px 40px 12px 0px;
	font-size: 1.4em;
}

header nav h1 a {
	color: #646464;	
} 

header nav .active {
	color:#777;
	text-decoration:underline;
}

/*Photo focus view*/

.blueimp-gallery {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.96);
}

/*Collection Page*/

#loader {
	width:100%;
	text-align:center;
}

#photos {
	margin-left:auto;
	margin-right:auto;
}
.photo {
	width:31em;;
	margin-bottom: 1em;
}

.photo img {
	width:100%;
	display: block;
}
.gutter-sizer {
	width: 1em;
}

/* About Page */

div.about {
	margin: 0 auto;
  	max-width: 850px;
}

div.about p {
	margin: 0 0 16px 0;
	font-size: 1.1em;
}

div.about-text-container {
	box-sizing: border-box;
	display: inline-block;
	padding-left: 25px;
	max-width: 420px;
}


img.avatar {
	float:left;
	display: inline;
	margin-bottom: 25px;
	max-width: 420px;
}

/* Contact Page */

div#contact {
	max-width: 850px;
	box-sizing: border-box;
	margin: 0 auto;
}

#contact_form {
	box-sizing: border-box;
	vertical-align: top;
	width: 600px;
	padding: 20px;
	display: inline-block;
}

#contact_form > label  {
	display: block;
	width: 100%;
}

#contact_form > input, #contact_form > textarea {
	box-sizing:border-box;
	display: block;
	width: 100%;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	background-color: #F2F2F2;
	border: none;
	margin-top: 5px;
	margin-bottom: 15px;
	padding: 5px;
	border: 1px solid #777;
}

#contact_form > input {
	height: 30px;
}

#contact_form > textarea {
	height: 140px;
}

#contact_form > input:focus, #contact_form > textarea:focus {
	border: solid 1px rgba(174, 175, 176, 0.8) !important;
}

#contact_form > button {
	margin-top: 15px;
	float: right;
	background-color: #34bf49;
	border-radius: 3px;
	width: 112px;
	height:36px;
	border: 1px solid #2fab41;
	border-top: 1px solid #52c964;
	color: #fff;
	font-size: 1.1em;
	font-weight: bold;
	text-shadow: 0px 1px 1px #308b39;
	box-shadow: 0px -1px 1px #2fab41;
	margin-top: 120px;
	display: block;
}

div#contact_error {
	color:red;
}

div#contact_success {
	color:green;
}

#social {
	margin-top:22px;
	display: inline-block;
	padding-left: 20px;
}

#social p {
	margin-bottom:4px;	
}

#social a {
	display:block;
	width: 30px;
	height: 30px;
	background-color: #b2b2b2;
	margin:0 1px 0 0;	
	float: left;
}

div#rc {
	width:300px;
	height: 125px;
	margin-top: 30px;
	float: left;
}

/*  limit the height of the gallery on short viewports */
@media only screen and (max-width: 850px) {
	.social-container {
	
	}
	div#rc {
		float: none;
		text-align:center;
		width:100%;
		margin:15px 0px;
	}
	div#rc > * {
		margin:15px auto;
	}
	
	#contact {
		max-width: 600px;
		margin: 0 auto;
	}

	#contact_form button {
		margin: 0 auto;
		width: 100%;
		float: none;
	}

	#contact_form {
		width: 100%;
		display: block;
	}
	
	div.about {
		max-width: 470px;
	}
	
	img.avatar {
		display:block;
		float:none;
		margin-left:auto;
		margin-right:auto;
		width:100%;
	}
	
	div.about-text-container {
		display:block;
		margin-left:auto;
		margin-right:auto;	
		width:100%;
		padding-left: 0px;
	}
	
}

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

	div.about-text-container {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.photo {
		width:100%;
	}

	header {
		margin-bottom:0px;
	}
	
	.gutter-sizer {
		width: 0px;
	}

	.about-container {
		margin: 0;
	}
	
	.portrait-container {
		height: auto;
		width: 100%;
		display: block;
	}

	.portrait-container  img{
		min-width: 100%;
	}
	
	.about-text-container {
		margin: 15px 0 0 15px;
		padding-left: 0;
		display: block;
	}

	.contact-container {
		margin-left: 15px;
		margin-top: 20px;
	}

	#send {
		float: none;
	}
	
	header nav {
		text-align: left;
		padding-left:15px;
	}


	header nav ul {
		position:absolute;
		display: none;
		top:50px;
		left:0px;
		right:0px;
		bottom: 0px;
 		float:none;
		margin: 0;
		text-align:left;
		z-index:99999;
		background-color:rgba(0, 0, 0, 0.7);
	}

	header nav ul li {
		display:block;
		border-top:1px solid #f6f6f6;
		width:100%;
		padding: 14px 20px;
		background-color:#FBFBFB;
	}
	
	header nav ul a {
		display:block;
	}
	
	
	#menu_toggle {
		box-sizing: border-box;
		position:absolute;
		border-radius:3px;
		right:14px;
		top:8px;
		display:block;
		border:1px solid #ccc;
		width:44px;
		height:34px;
		background-color:#fdfdfd;
		padding-top: 9px;
		padding-left: 10px;
	}
	
	#menu_toggle span {
		display:block;
		box-sizing: border-box;
		width:22px;
		height:2px;
		margin-bottom:4px;
		background-color: #ccc;
		border-left: 1px solid #d6d6d6;
		border-right: 1px solid #d6d6d6;
	}
}