@import url(reset.css);

body {
	font-family: "futura-pt";
	font-weight: 300;
	font-size: 12pt;
	color: #000;
	background-image: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/debut_light.png);
	background-attachment: fixed;
}
/* =Clearfix (all browsers)--------------------------------*/.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* IE6 */ * html .clearfix {height: 1%;}/* IE7 */*:first-child+html .clearfix {min-height: 1px;}
#container {
	width: 100%;
	margin: 84px auto 0;
/* 	background-color: #fff; */
	float: left;
/* 	box-shadow: 0 0 1px rgba(0,0,0,0.25); */
}
#about {
	margin: 0 auto;
	width: 100%;
	background-color: #000;
	background-image: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/dark_embroidery.png);
	position: relative;
	padding: 3% 0;
}
#about h1 {
	font-weight: 500;
	line-height: 1.8;
	color: #fff;
	font-size: 21pt;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
	float: left;
}
#word-holder {
/* 	border-bottom: 6px solid #000; */
	width: 35%;
	text-align: center;
	height: 54px;
	background-color: #fff;
	position: relative;
	display: block;
	margin: 69px auto 0;
	clear: both;
}
#word-holder h6 {
	display: none;
	position: absolute;
	font-weight: 500;
	line-height: 1.8;
	font-size: 21pt;
	text-transform: uppercase;
	width: 100%;
}
header {
	width: 100%;
	margin: 0 auto;
	padding: 15px 0;
	position: fixed;
	height: auto;
	z-index: 999;
	background-color: rgba(255,255,255,0.95);
	box-shadow: 0 0 3px rgba(0,0,0,0.5);
	float: left;
}
header h1 {
/* 	font-family: "proxima-nova"; */
	font-family: "hypatia-sans-pro";
	letter-spacing: 1px;
	font-weight: 100;
/* 	font-style: italic; */
	font-size: 40pt;
	text-align: left;
	padding: 0 0 0 5%;
}
header #contact {
	position: absolute;
	top: 26%;
	right: 9%;
	text-align: right;
}
header #social {
	position: absolute;
	top: 33%;
	right: 0;
	text-align: left;
}
header #contact h2,
header #social h2 {
	line-height: 1.4;
}
header #contact h2 a,
header #social h2 a {
	font-size: 11pt;
	text-decoration: none;
	color: #000;
}
header a {
	color: #000;
	text-decoration: none;
}
section#work {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	float: left;
	width: 100%;
	clear: both;
	margin: 0 0 0;
}
aside.work {
	justify-content: center;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	width: 33.33333333%;
}
aside.work .work-container {
	background-repeat: no-repeat;
	background-position: top center;
	background-size: calc(300%);
	filter: blur(0);
	transition: 0.5s background-size;
}
	aside.work[data-work="haute-headquarters"] .work-container {
		background-image: url(https://s3-us-west-2.amazonaws.com/clevercouch/img/haute-headquarters.jpg?X-Amz-Expires=300);
	}
	aside.work[data-work="mcmtechnology"] .work-container {
		background-image: url(https://s3-us-west-2.amazonaws.com/clevercouch/img/mcmtechnology.jpg?X-Amz-Expires=300);
	}
	aside.work[data-work="romanstreet"] .work-container {
		background-image: url(https://s3-us-west-2.amazonaws.com/clevercouch/img/romanstreet.jpg?X-Amz-Expires=300);
	}
	aside.work[data-work="mem"] .work-container {
		background-image: url(https://s3-us-west-2.amazonaws.com/clevercouch/img/modern-ensemble-music.jpg?X-Amz-Expires=300);
	}
	aside.work[data-work="nxtlvl"] .work-container {
		background-image: url(https://s3-us-west-2.amazonaws.com/clevercouch/img/nxtlvlhoopsfest.jpg?X-Amz-Expires=300);
	}
	aside.work[data-work="statefinals"] .work-container {
		background-image: url(https://s3-us-west-2.amazonaws.com/clevercouch/img/statefinals-al.jpg?X-Amz-Expires=300);
	}
	aside.work[data-work="super7"] .work-container {
		background-image: url(https://s3-us-west-2.amazonaws.com/clevercouch/img/super7-al.jpg?X-Amz-Expires=300);
	}
	aside.work[data-work="elevate"] .work-container {
		background-image: url(https://s3-us-west-2.amazonaws.com/clevercouch/img/elevate-the-stage.jpg?X-Amz-Expires=300);
	}
	aside.work[data-work="panam"] .work-container {
		background-image: url(https://s3-us-west-2.amazonaws.com/clevercouch/img/panam-consultants.jpg?X-Amz-Expires=300);
	}
	aside.work[data-work="tara"] .work-container {
		background-image: url(https://s3-us-west-2.amazonaws.com/clevercouch/img/tara-murphy-therapy.jpg?X-Amz-Expires=300);
	}
	aside.work[data-work="terrax"] .work-container {
		background-image: url(https://s3-us-west-2.amazonaws.com/clevercouch/img/terraxplorations.jpg?X-Amz-Expires=300);
	}

div.meta {
	float: left;
	width: 100%;
/* 	background: rgba(255,255,255,0.6); */
	padding: 15px 0;
	background: rgba(255,255,255,1);
	transition: 0.5s background-color;
}
aside.work a.work-link {
	padding: 50% 6%;
	display: block;
	color: #000;
	text-decoration: none;
	transition: 0.5s border-radius,background-color;
}
	aside.work .work-container:hover {
		background-color: rgba(255,255,255,0.5);
		background-size: calc(275%);
		transition: 0.5s all;
/* 		filter: blur(2px); */
		box-shadow: 0 0 60px rgba(0,0,0,0.5);
	}
	aside.work .work-container:hover ~ .meta {
		background-color: #eee;
		transition: 0.5s all;
	}
aside.work h2 {
	color: #000;
	font-weight: 700;
	transition: 0.5s all;
}
aside.work h3 {
	padding: 3px 0 0;
	font-weight: 400;
	color: #333;
	font-size: 9pt;
	font-style: italic;
}
aside.work h4 {
	display: none;
	padding: 3px 0 0;
	font-weight: 400;
	font-size: 9pt;
}
aside.work h4 a {
	color: #000;
}
.hidden {
	display: none;
}
#work-view {
	float: left;
	padding: 2% 5% 5%;
	width: 90%;
}
#work-view #work-slideshow {
	float: right;
	width: 49%;
	max-height: 573px;
	min-height: 573px;
	overflow: hidden;
	margin: 0 0 0 1%;
	box-shadow: 0 0 6px rgba(0,0,0,0.25);
}
#work-view #work-slideshow img {
	width: 100%;
}
#work-view #work-slideshow img.scaled-up {
	transform: scale(1.15);
}
#work-output {
	float: left;
	width: 50%;
}
#work-view #work-output h1 {
	text-transform: uppercase;
	font-weight: bold;
	width: 100%;
	display: block;
	font-size: 27pt;
	margin: 0 0 15px;
}
#work-view #work-output h2 {
	text-transform: lowercase;
	font-weight: 400;
	margin: 30px 0 0;
	width: auto;
	text-align: center;
}
#work-view #work-output h2 a {
	padding: 15px 2%;
	font-size: 13pt;
	width: 50%;
	background-color: #333;
	color: #fff;
	display: block;
	text-decoration: none;
}
#work-view #work-output p {
	line-height: 1.8;
	font-size: 13pt;
	margin: 0 0 12px;
}
#work-view #work-output h5 {
	font-size: 15pt;
	margin: 15px 0;
	text-transform: uppercase;
	font-weight: 500;
}
#work-view #work-output ul {
	list-style: square inside;
}
#work-view #work-output ul li {
	padding: 0 0 12px 12px;
}

#breadcrumbs {
	float: right;
	width: 100%;
	text-align: left;
	margin: 0 0 15px;
	font-size: 10pt;
	color: #777;
}
#breadcrumbs a {
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
	font-style: italic;
}


a {
	outline: none;
}
#work-details a {
	color: #000;
	border-bottom: 1px double #000;
	text-decoration: none;
	transition: 0.5s color,background-color;
	text-transform: uppercase;
	font-weight: 500;
}
#work-output a:hover {
	color: #fff;
	background-color: #000;
	transition: 0.5s ease-out color,background-color;
}
@media screen and (min-width:1050px) {
	aside.work {
		width: 25%;
	}
}
@media screen and (max-width:900px) {
	aside.work {
		width: 50%;
	}
	header #contact  {
		right: 15%;
	}
	#work-output {
		width: 100%;
		float: none;
	}
	#work-view #work-output h2 a {
		width: 96%;
	}
	#work-view #work-slideshow {
		box-shadow: 0 0 0 #000;
		height: 500px;
		width: 100%;
		margin: 30px auto 0;
	}
}
@media screen and (max-width:480px) {
	#breadcrumbs {
		display: none;
	}
	#about {
		display: none;
	}
	aside.work {
		width: 50%;
	}
	header #contact {
		float: left;
		width: 100%;
		position: relative;
		text-align: center;
	}
	#container {
		margin-top: 135px;
	}
	header #social {
		display: none;
	}
	header #contact  {
		right: 0;
		position: relative;
	}
	header #contact h2 a {
		font-size: 7pt;
	}
	header h1 {
		margin: 0 0 1%;
		text-align: center;
		padding: 0;
	}