/* COLORS */

	/*card highlight*/
grey4 {
color: rgb(125,125,125);
}
	/*card*/
.grey3 {
color: rgb(114,114,114);
}
	/*body background*/
.grey2 {
color: rgb(101,101,101);
}
	/*bar, subtle text*/
.grey1 {
color: rgb(92,92,92);
}
	/*link text*/
.link {
color: rgb(224,224,224);
}
	/*ligh text*/
.light {
color: rgb(190,190,190);
}
	/*JOHNSON, text*/
.dark {
color: rgb(60,60,60);
}
	/*logo line*/
.logo_line {
color: rgb(71,71,71);
}
	/*BEN*/
.green {
color: rgb(90,186,71);
}


/* BASE STYLES */

body {
	background: rgb(101,101,101);
	font-family: 'Source Sans Pro';
	font-size: 1em;
	position: relative;
	}

a {
	font-weight: 400;
	color: rgb(224,224,224); 
	text-decoration: none;
	-webkit-transition: color,text-shadow 0.5s;
	-moz-transition: color 0.5s;
	-o-transition: color 0.5s;
	-ms-transition: color 0.5s;
	transition: color 0.5s;
	}
a:link { 
	color: rgb(224,224,224); 
	text-decoration: none; 
	}
a:visited {  
	color: rgb(224,224,224); 
	text-decoration: none; 
	}
a:hover { 
	color: rgb(255,255,255); 
	text-decoration: none;
	text-shadow: 0px 0px 6px rgba(224, 224, 224, 0.6);
	}

a:active { 
	color: rgb(255,255,255); 
	text-decoration: none;
	text-shadow: 0px 0px 6px rgba(224, 224, 224, 0.6);
	}

p { padding: 0; margin: 0; }

strong { font-weight: 700; }

.smallcaps { font-size: 80%; }

.nowrap { white-space: nowrap; }

.thumbnail {
	-webkit-border-radius: 5px;
	border-radius: 5px;
	}

.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	position: relative;
	width: 150px;
	padding: 10px;
	background-color: rgb(58,163,72);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(113,175,120)), color-stop(100%,rgb(58,163,72)));
	background: -moz-linear-gradient(top, rgb(113,175,120) 0%, rgb(58,163,72) 100%);
	background: -o-linear-gradient(top, rgb(113,175,120) 0%,rgb(58,163,72) 100%);
	background: -ms-linear-gradient(top, rgb(113,175,120) 0%,rgb(58,163,72) 100%);
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	color: rgb(220,220,220); 
	font-family: "Source Sans Pro";
	font-weight: 400;
	font-size: 1em;
	border: 1px solid rgb(55,161,81);
	-webkit-border-radius: 4px;
	border-radius: 4px; 
	}

.button:hover {
	text-decoration: none;	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(133,204,138)), color-stop(100%,rgb(51,171,70)));
	background: -moz-linear-gradient(top, rgb(133,204,138) 0%, rgb(51,171,70) 100%);
	background: -o-linear-gradient(top, rgb(133,204,138) 0%,rgb(51,171,70) 100%);
	background: -ms-linear-gradient(top, rgb(133,204,138) 0%,rgb(51,171,70) 100%);
	}

.button:active {
	position: relative;
	top: 1px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(51,171,70)), color-stop(100%,rgb(133,204,138)));
	background: -moz-linear-gradient(top, rgb(51,171,70) 0%, rgb(133,204,138) 100%);
	background: -o-linear-gradient(top, rgb(51,171,70) 0%,rgb(133,204,138) 100%);
	background: -ms-linear-gradient(top, rgb(51,171,70) 0%,rgb(133,204,138) 100%);
	text-shadow: 0 -1px 1px rgba(0, 0, 0, .3);
	box-shadow: 0 -1px 2px rgba(0,0,0,.2);
	}
	

/* BACK BAR */

.backbar {
	width: 100%;
	height: 2em;
	padding-top: 0.2em;
	background: rgb(92,92,92);
	opacity: 0.97;
	z-index: 99;
	}

.top {
	position: absolute;
	}

.bottom {
	bottom: 0;
	}

.backbar a {
	font-weight: 400;
	font-size: 1.5em;
	margin-left: 2em;
	}

@media all and (min-height: 560px){
	.top {
		position: fixed;
		}
	}

@media all and (min-width: 768px) and (min-height: 560px) {
	.bottom {
		visibility: hidden;
		}
	}


/* ROW */

.row {
	max-width: 1300px;
	padding: 6em 2em 0;
	}

.top-row {
	}

.bottom-row {
	padding-bottom: 6em;
	}

div.large-5 {
	padding: 6em 0 0;
	}

div.large-7 {
	padding: 0;
	}

@media all and (min-width: 525px) {
	.row {
		padding-left: 3em;
		padding-right: 3em;
		}
	}

@media only screen and (min-width: 768px) {
	.row {
		padding-left: 3em;
		padding-right: 3em;
		}
	.top-row {
		padding-top: 10em;
		}
	div.large-5 {
		padding-top: 0;
		padding-right: 2em;
		}
	div.large-7 {
		padding-left: 2em;
		}
	}


/* IMAGE */

div.main a, div.related a {text-shadow: none;}

div.main ul, div.main ul li {
	margin: 0;
	padding: 0;
	position: relative;
	}


div.main img { margin: 0 0 5em; }
div.main img.last { margin: 0; }

.overlay {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 4.95em;
	padding: 0;
	opacity: 0;
	background: rgba(200,200,200,0.2);
	color: rgb(190,190,190);
	text-align: center;
	z-index: 90;
	border: 1px solid rgb(60,60,60);
	border-radius: 5px;
	transition: opacity 0.5s;
	-webkit-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
	-ms-transition: opacity 0.5s;
	}

a.last .overlay { bottom: 0; }

.overlay:hover {
	opacity: 1;
	}

.overlay p {
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(70,70,70,1);
	color: rgb(190,190,190);
	font-family: 'Source Sans Pro';
	font-weight: 700;
	font-size: 2em;
	line-height: 0.5em;
	padding: 0.5em;
	border-right: 1px solid rgb(60,60,60);
	border-bottom: 1px solid rgb(60,60,60);
	border-radius: 0;
	border-bottom-right-radius: 5px;
	}

.touch .overlay {
	opacity: 1;
	background: none;
	}

.touch .overlay p {
	opacity: 0.65;
	font-size: 1em;
	}

.square, .overlay p.square { 
	border-radius: 0;
	}

/* DETAILS */

.client {
	font-size: 2em;
	font-weight: 400;
	line-height: 100%;
	margin: 0;
	}

.client span.progress { 
	background: rgb(125,125,125);
	color: rgb(70,70,70); 
	font-size: .5em; 
	font-weight: 400;
	padding: .1em 1em; 
	line-height: 1em;
	border: 1px solid rgb(92,92,92);
	border-radius: .75em;
	}

.spec {
	font-size: 0.9em;
	font-weight: 200;
	margin: 0 1em 0;
	}

.spec span.progress {
	background: rgb(125,125,125);
	color: rgb(70,70,70); 
	font-size: .75em; 
	font-weight: 400;
	padding: .1em 1em; 
	line-height: 1em;
	border: 1px solid rgb(92,92,92);
	border-radius: .75em;
}

.date {
	font-size: 0.9em;
	font-weight: 200;
	margin: 0 1em 1.5em;
	margin-bottom: 1.5em;
	}

.info {
	font-size: 1.25em;
	margin: 0;
	font-weight: 200;
	margin-bottom: 1em;
	}

.website {
	font-size: 0.9em;
	line-height: 1em;
	float: left;
	margin-right: .75em;
	}

@media all and (min-width: 768px) and (max-width: 1000px) {
	.info { font-size: 1em; }
	}


/* RELATED */

.header {
	font-size: 3em;
	line-height: 1em;
	text-align: center;
	font-weight: 700;
	margin-bottom: 1em;
	}

ul.small-block-grid-1 { position: relative; }

ul.small-block-grid-1 li {
	padding: 0 1em 2em;
	position: relative;
	}

ul.small-block-grid-1 li.last {
	padding-bottom: 0;
	}

ul.small-block-grid-1 li .overlay {
	left: 1em;
	right: 1em;
	bottom: 2em;
	}

		
li.col1 .overlay p, li.col2 .overlay p {
	}
		

@media only screen and (min-width: 525px) {
	ul.small-block-grid-1 li {
		padding: 0 1.5em 3em;
		}		
	.header {
		font-size: 4em;
		}
	ul.small-block-grid-1 li .overlay {
		left: 1.5em;
		right: 1.5em;
		bottom: 3em;
		}
	}
	



@media only screen and (min-width: 768px) and (max-width: 1000px) {
	ul.small-block-grid-1 {
	text-align: center;
	max-width: 660px;
	margin-left: auto;
	margin-right: auto;
	}
	ul.small-block-grid-1 li {
	padding: 0 1em 3em;
	}
	ul.small-block-grid-1 li .overlay {
		left: 1em;
		right: 1em;
		bottom: 3em;
		}
	ul.small-block-grid-1 > li {
		width: 100%;
		position: relative;
		}
	ul.small-block-grid-1 > li:nth-of-type(n) {
	    clear: none;
	    }
	ul.small-block-grid-1 > li:nth-of-type(1n+1) {
		clear: both;
		}
	}
	
	
@media only screen and (min-width: 1001px) {
	ul.small-block-grid-1 {}
	ul.small-block-grid-1 li {}	
	ul.small-block-grid-1 li.col1 {
	padding: 0 1em 3em;
	}
	ul.small-block-grid-1 li.col2 {
	padding: 0 1em 3em;
	}	
	ul.small-block-grid-1 li.col1 .overlay {
		left: 1em;
		right: 1em;
		bottom: 3em;
		}
	ul.small-block-grid-1 li.col2 .overlay {
		left: 1em;
		right: 1em;
		bottom: 3em;
		}
	}