/* the fifth elements */
body, figure, h1, h2, p, .menu{ margin: 0; padding: 0; }

body{
	background: #1F1D21 url(img/background.gif) repeat 0 0;
	font: normal normal 16px "Helvetica", "Arial", Sans-Serif;
}

figure, footer, nav{ display: block; }

a{ color: inherit; text-decoration: none; }

	a:hover{
		color: #A841F7;
		-moz-transition: color 1s;
		-webkit-transition: color 1s;
		transition: color 1s;
	}

/* the commons */
.left,
.right{ display: inline; float: left; }

	.right{ float: right; }

.clear:after{
	clear: both;
	content: '.';
	display: block;
	font-size: 0;
	visibility: hidden;
}

.snap{ margin: 0 auto; max-width: 940px; padding-left: 20px; padding-right: 20px; }

.menu{ list-style-type: none; }

	.menu li{ float: left; }

	.menu li.social a{
		background-color: #443f4a;
		font-family: 'Georgia', Serif;
		font-size: 12px;
		font-style: italic;
		padding: 3px 10px 2px;
	}

		.menu li.social a:hover{
			background-color: #382f42;
		}

.fancy-txt{ font-family: "Georgia", Serif; font-style: italic; }

.signature{ margin-bottom: 40px; }

/* overlay */
.overlay{
	background-color: rgba(0,0,0,0.8);
	bottom: 0;
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
}

/* navigation bar */
.nav-bar{
	background-color: #171717;
	border-bottom: 1px solid #000000;
	color: #B1B1B1;
}

	.nav-bar a{ position: relative; }

	.nav-bar nav,
	.footer-wrap footer{ padding-bottom: 20px; padding-top: 20px; }

		.footer-wrap footer{ padding-left: 0; padding-right: 0; }

		.nav-bar p,
		.footer-wrap p{ line-height: 1; }

			.nav-bar p i{ color: #5A5A5A; font-weight: 100; }

				.nav-bar .menu li{ margin-left: 15px; }

				.nav-bar .menu li.social{ margin-left: 5px; }

				.nav-bar .menu li.instagram{ margin-left: 15px; }

/* about */
.about{ position: relative; }

	.about div{
		background-color: #1F1D21;
		border: 1px solid #0C0A0D;
		border-radius: 5px;
		box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3);
		padding: 10px;
		position: absolute;
		right: 0;
		top: 25px;
		width: 245px;
		z-index: 3;
	}

	.about img{ display: block; float: left; margin-right: 10px; width: 75px; }

	.about h2{ font-size: 18px; font-weight: 100; margin-bottom: 10px; }

	.about p{ font-size: 12px; line-height: 1.3; margin-bottom: 10px; margin-left: 85px; }

		.about .last{ margin-bottom: 0; }

	.nav-bar .dismiss{ position: absolute; right: 10px; top: 5px; }

/* logo */
.logo img{ display: block; margin: 0 auto; max-width: 100%; }

/* footer */
.footer-wrap{ color: #636263; font-size: 14px; padding: 0 20px 40px; position: relative; }

	.footer-wrap footer{ border-top: 3px double #303030; }

	.footer-wrap .left,
	.footer-wrap .right{ display: block; float: none; }

		.footer-wrap .right{ margin-top: 10px; }

	.footer-wrap .menu li{ margin-right: 5px; }

		.footer-wrap .menu li:after{ content: ' /'; }

			.footer-wrap .menu li.last:after{ content: ''; }

/* content */
.content{ color: #F9F9F9; padding-bottom: 40px; padding-top: 40px; }

	.home .content{ padding-top: 20px; }

	.content time{
		background-color: #131114;
		color: #C6C6C6;
		font-size: 12px;
		padding: 5px 8px;
	}

	.content h1{ font-weight: 100; margin-bottom: 40px; }

	.content p{ color: #B1B1B1; line-height: 1.6; margin: 20px 0; }

.content a,
.about div a{ color: #A841F7; }

	.content a:hover,
	.about div a:hover{ color: #7A9F1D; text-decoration: underline; }

/* pagination */
.pagination{ position: relative; }
.pagination a{
	border: 1px solid #303030;
	border-radius: 5px;
	padding: 10px;
	position: relative;
	z-index: 1;
}

	.pagination a.left{ padding-left: 8px; }
	.pagination a.right{ padding-right: 8px; }

	.pagination a:hover{
		background-color: rgba(255,255,255,0.04);
		text-decoration: none;
		-moz-transition: background-color 1s,color 1s;
		-webkit-transition: background-color 1s,color 1s;
		transition: background-color 1s,color 1s;
	}

.pagination b{
	color: #303030;
	font-family: "Lucida Grande", Sans-Serif;
	font-size: 30px;
	line-height: 0;
	position: relative;
	top: 3px;
}

	.pagination a:hover b{
		color: #7A9F1D;
		-moz-transition: color 1s;
		-webkit-transition: color 1s;
		transition: color 1s;
	}

.pagination p{
	background-color: rgba(255,255,255,0.02);
	border-radius: 5px;
	font-size: 12px;
	left: 0;
	line-height: 1;
	margin: 0 auto;
	padding: 13px 0;
	position: absolute;
	right: 0;
	text-align: center;
	white-space: nowrap;
}

.pagination .fancy-txt{ color: #636263; }

/* photos */
.photo-list li{ margin: 0 20px 20px 0; }

.photo-list img{
	border: 4px solid #000000;
	box-shadow: 0 5px 3px 0 rgba(0,0,0,0.3);
	display: block;
}

.photo-list a{ display: block; position: relative; }

	.photo-list a .info-wrap{
		background-color: rgba(59,5,103,0.9);
		bottom: 4px;
		left: 4px;
		padding: 10px;
		position: absolute;
		right: 4px;
		top: 4px;
		z-index: -1;
	}

		.photo-list a:hover .info-wrap{ display: block; z-index: 1; }

		.photo-list a .info-wrap span h2{
			color: #FFFFFF;
			font-size: 18px;
			font-weight: 400;
		}

		.photo-list a .info-wrap span time{
			background-color: transparent;
			color: #9A82AF;
			font-size: 14px;
			padding: 0;
		}

		.photo-list a .info-wrap span p{
			background: rgba(255,255,255,0.2) url(img/expand.png) no-repeat 94% 11px;
			border: 2px solid #280B42;
			border-radius: 5px;
			bottom: 0;
			color: #FFFFFF;
			height: 16px;
			left: 0;
			line-height: 1;
			margin: -16px auto 0;
			padding: 8px 27px 8px 8px;
			position: absolute;
			right: 0;
			text-transform: uppercase;
			top: 50%;
			width: 117px;
		}

			.photo-list a .info-wrap span p:hover{ background-color: rgba(255,239,150,0.3); }

			.photo-list a .info-wrap span p i{ font-family: "Georgia", Serif; text-transform: capitalize; }

/* figure images */
figure img{
	border: 8px solid #000000;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	margin: 0 auto 10px;
	max-width: 100%;
}

.portfolio-meta{ margin-bottom: 30px; }

.portfolio-meta h1{ font-size: 18px; margin: 10px 0 5px; }

.portfolio-meta time{ background-color: transparent; color: #636263; font-size: 14px; padding: 0; }

.portfolio-meta p{ float: left; font-size: 14px; margin: 10px 0; }

/* responsibility */
@media screen and (min-width: 700px){
	.logo img{
		left: 0;
		position: absolute;
		right: 0;
		top: -15px;
	}

	.about div{ width: 300px; }

	.about img{ width: 100px; }

	.about p{ margin-left: 110px; }

	.portfolio-meta p{ margin-top: 5px; }

	.title-date, .desc{ float: left; width: 25%; }

		.desc{ width: 75%; }

	.footer-wrap{ padding-bottom: 140px; padding-top: 40px; }

	.footer-wrap .left,
	.footer-wrap .right{ display: inline; float: left; }

		.footer-wrap .right{ float: right; margin-top: 0; }

	.footer-wrap .menu li{ margin-left: 5px; margin-right: 0; }
}
@media screen and (min-width: 1000px){ .photo-list li.row-end{ margin-right: 0; } }