a img {border:none}.clr{clear:both}hr {border:none;height:1px;border-top:1px solid #eee;margin:24px 0;}.right{float:right}.left{float:left}.capitalize{text-transform:capitalize;}
a {text-decoration:none; color:#555;}
a:hover {color:#999}
h1,h2,h3,h4 {line-height:1.5em;margin:0 0 .2em;}
.capitalize {
	text-transform:capitalize;	
}

.font,
.frame {
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
}

body {
	margin:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:1.6em;
	background:#fff;
}
.container {
	max-width:1000px;
	padding:0 5%;
	margin:0 auto;
}


/* Logo
---------------------*/
header {
	margin:30px 0 0px;	
}

#logo {
	font-size:30px;	
	float:left;
	display:block;
	margin:0px;
	
}
#logo h1 {
	margin:0;
}
#tagline,
.tagline {
	text-align:left;
	float:left;
	color:#aaa;
	font-size:13px;
	line-height:1.5em;
}

#logo img {
	max-width:80%;	
}

/* for screens smaller than pixel width */
@media(max-width:700px){
	header {
		margin-bottom:0px;
	}
	#logo {
		
	margin-left:0;	
	}
}
	
/* sidebar
------------------------------------*/
#sidebar {
	width:22%;	
	float:left;
	clear:left;
	padding:0 0 80px;
}
.list {
	margin:0 0 30px;
	padding:0;	
	overflow:auto;
}
.list li {
	list-style:none;
	display:block;
	margin:0px 0;
	float:none;
}
.list a {
	padding:0;
	background:none!important;
	-webkit-transition: background-color 100ms, color 100ms, width 200ms;
	-moz-transition:  background-color 100ms, color 100ms, width 200ms;
	-o-transition:  background-color 100ms, color 100ms, width 200ms;
	transition:  background-color 100ms, color 100ms, width 200ms;
	color:#888!important;
	font-size:11px;
	display:inline-block;
}
.list a:hover {
	background:#ddd;
}
#sidebar .frame {
	margin:40px 0 10px 0;
	height:300px;	
}
#sidebar h1 {
	margin:20px 0 0px;	
	font-size:30px;
}
#sidebar h2 {
	margin:30px 0 10px;	
}

/* nav
------------------------------------*/
nav {
	clear:both;	
	margin-bottom:40px;
}
nav li {
	list-style:none;	
}
nav a {
	-webkit-transition: background-color 100ms, color 100ms, width 200ms;
	-moz-transition:  background-color 100ms, color 100ms, width 200ms;
	-o-transition:  background-color 100ms, color 100ms, width 200ms;
	transition:  background-color 100ms, color 100ms, width 200ms;
	color:#888;
	display:block;
	width:90%;
	padding:4px 8px;
	margin-left:-8px;
	white-space:nowrap;
	overflow:hidden;
}
nav a:hover {
	background:#f3f3f3;
	width:110%;
	color:#222;
}
nav li.cur a {
	background:#f3f3f3;	
	width:100%;
	color:#222;
}

/* Main (project list or banner) 
------------------------------------*/
#main {
	width:66%;
	float:right;
	padding-top:20px;	
}
/* IF screen is larger than #. Do this 
@media(max-width:700px){
	#sidebar {
		display:none;
	}
	#main {
		display:block;
		width:100%;
		float:none;
	}
	#logo {
		text-align:Center;
		width:100%;
		display:block;
		float:none;
		font-size:14px;
	}
}*/
.show {
	display:block!important;
}
.mobile-only {
	display:none;
}
.desktop-only {
	display:block;
}
@media(max-width:700px){
	.mobile-only {
		display:block;
	}
	.desktop-only {
		display:none;
	}
	.homepage {
		display:none;	
	}
	#sidebar {
		width:100%;	
		float:none;
		clear:left;
		padding:0 0 40px;	
		text-align:center;
			text-align:left;
	}

	#sidebar .about {
		text-align:left;
		max-width:300px;
		margin:0 auto;
	}
	.tagline {
		text-align:center;	
	}
	#logo img {
		width:50%;	
	}
	nav a {
		-webkit-transition: background-color 100ms, color 100ms, width 200ms;
		-moz-transition:  background-color 100ms, color 100ms, width 200ms;
		-o-transition:  background-color 100ms, color 100ms, width 200ms;
		transition:  background-color 100ms, color 100ms, width 200ms;
		color:#888;
		display:block;
		width:100%;
		padding:4px 0;
		margin-left:0;
		white-space:nowrap;
		overflow:hidden;
	}
	nav a:hover {
		background:#f3f3f3;
		width:100%;
		color:#222;
	}
	#main {
		width:100%;	
	}
	
}

/* Project Pages */
#main .project-info {
	margin:50px 0 80px;
}
#main .project-info h1 {	
	font-size:2.4em;
}
#main .project-info p {	
	margin:0 0 .5em;
}

#main .project-info a {	
	color:#666;
	text-decoration:none;
	font-size:11px;
	float:left;
}

#main .project-info a span {
	background:#ccc url(../../images/arrow-right.png) 3px 3px no-repeat;
	background-size:10px 10px;
	display:inline-block;
	border-radius:10px;
	height:16px;
	width:16px;
	margin:1px 6px;
	float:right;
	opacity:.8;
	-webkit-transition: opacity 100ms, margin 210ms;
	-moz-transition:  opacity 100ms, margin 210ms;
	-o-transition:  opacity 100ms, margin 210ms;
	transition:  opacity 100ms, margin 210ms;/*
	-webkit-transition: margin 100ms cubic-bezier(0.035, 0.665, 0.425, 0.975); 
	-moz-transition: margin 100ms cubic-bezier(0.035, 0.665, 0.425, 0.975); 
	-o-transition: margin 100ms cubic-bezier(0.035, 0.665, 0.425, 0.975); 
	transition: margin 100ms cubic-bezier(0.035, 0.665, 0.425, 0.975);  custom */
}
#main .project-info a:hover span {	
	margin-left:8px;
	opacity:1;
}




/* Frame */
.frame {
	margin:0 0 2%;
	cursor:pointer;
}


/* Homepage Projects */
.homepage {
	margin-top:5%;	
}
.homepage .frame {
	margin:0 0 6%;
}
.homepage .info {
	padding:8px 11px;
	background:rgba(40,40,40,.8);	
}
.homepage .info h2 {
	font-size:14px;	
	margin:0;
}

.homepage .frame .info p {
	position:static;
	top:300px;
	display:none;
}
.homepage .frame {
	width:100%;
	height:300px;
	
}

.mobile .frame {
	height:300px;
	margin-top:80px;	
	width:80%;
}
.mobile {
	height:300px;	
}



.mobile nav a {
	float:left;
	width:auto;
}