@charset "UTF-8";
/* CSS Document */

	*{
		font-family: 'Roboto Condensed', sans-serif;
	}
	a {
		color:#888;
		}
	body {
		background:url(../img/cream_pixels.png);
	}
	.project.fullsize * img, .project.fullsize > img {
		width:100%;
		max-width:800px;
	}
   .desktop, .phone, .samplePublication {
	   width:100%;
	 }
	 .logos {
		 width:80%;
	}
	.phone {
		max-width:320px;
	}
	.desktop, .samplePublication, .logos {
		max-width:800px;
	}
	.shadow {
		box-shadow: 1px 1px 5px rgba(136, 136, 136, 5);
	}
	.desktop {
		display:none;
	}
	.projectTitle.desktop,
	.detailText.desktop {
		max-width:100%;
	}
	.contentWrapper,
	header {
		width:95%;
		max-width:1280px;
		margin:0 auto;
		text-align:center;
	}
	a:hover {
		opacity:.7;
	}
	#logo {
		width:40px;
		}
	.projectTitle {
		font-size:1.5em;
		margin-bottom:0;
	}
	.detailText {
		margin-bottom:30px;
	}
	.project {
		margin-bottom:100px;
		clear:both;
	}
	.project.home {
		margin-bottom:0;
	}
	.title, #logo {
	}
	.title {
		margin-top:7px;
		font-size:1.5em;
		margin-bottom:30px;
	}
	#logo {
		margin-bottom:-5px;
	}
	header {
		margin-top:20px;
		}
	#liveSafe.merge.mobile {
		width:100%;
		max-width:800px;
		;}
	#liveSafe.merge.desktop {display:none;}
	.desktop.wireframes {margin-top:60px;}
	.analysis {
		text-align:left;
	}
	nav {
		margin-bottom:40px;
	}
	nav ul {
		padding-left:0;
	}
	nav ul li {
		outline:1px solid #ccc;
		list-style:none;
		display:inline-block;
	}
	nav ul li.active {
		outline:0;
	}
	nav ul li a {
		padding:5px 30px 5px;
		text-decoration:none;
		display:block;
	}
	nav ul li a.active {
		background:#ccc;
		color:#fff;
	}
	nav ul li:first-child a {
		padding:5px 39px 5px;
		text-decoration:none;
	}
	nav ul li a.active {
		padding:8px 30px 8px;
	}
	nav ul li:first-child a.active  {
		padding:8px 39px 8px;
	}
	footer {
		text-align:center;
		border-top:1px solid #ccc;
		padding:10px 10px 10px 1px;
		font-size:.9em;
		background:#fff;
		position:fixed;
		width:100%;
		bottom:0;
		left:0;
		right:0;
		opacity:.9;
	}
	.vDivider {
		display:none;
		}
	#goldenEyes {
		display:none;
	}
	.linkedin {
		float:right;
		margin-right:20px;
	}
	#fluxWireFrame.desktop {
		max-width:1100px;
	}
	.wireframeContainer.active {
		width:100%;
		height:400px;
		overflow:auto;
	}
	.panel {
		outline: 1px solid #CCC;
		padding: 0.5px 20px 10px;
		text-align: left;
		width: 80%;
		margin: 0 auto 50px;
	}
	.panel:last-child {
		margin-bottom:100px;
		}
	#designAnalysisHeader {
		text-align:left;
	}
	.imageNotesContainer {
		position:relative;
		width:100%;
		max-width:800px;
		margin:0 auto;
		
	}
	.num {
		position:absolute;
		width:10%;
		height:9%;
		padding-top:1%;
		background:#E53376;
		border:#fff;
		border:2px solid #fff;
		text-align:center;
		color:#fff;
		font-weight:bold;
	}
	#one.num {
		top:13%;
		left:5%;
	}
	#two.num {
		top:30%;
		left:55%;
	}
	#three.num {
		top:40%;
		left:5%;
	}
	#one.num.llwire {
		top:13%;
		left:10%;
	}
	#two.num.llwire {
		top:30%;
		left:30%;
	}
	#three.num.llwire {
		top:40%;
		left:10%;
	}
	.subNav {
		clear:both;
		border-bottom:.5px solid #ddd;
		text-align:center;
		margin-bottom:40px;
		position:relative;
		z-index:2;
		background:#ffffff;
	}
	.subNav .item {
		position:relative;
		display:block;
		padding:10px;
		min-width:134px;
		text-align:center;
		border-top:1px solid #ddd;
		border-left:1px solid #ddd;
		border-right:1px solid #ddd;
	}
	.subNav .item a {
		border-top-left-radius:2px;
		border-top-right-radius:2px;
		position:absolute;
		left:0;
		right:0;
		top:0;
		bottom:0;
		background:#ddd;
		opacity:.4;
		}
	.subNav .item a:hover {
		background:#fff;
		opacity:.5;
		border:1px solid #ddd;
		}
	.filter {
		padding:20px;
		background:#ddd;
		opacity:.4;
		clear:both;
		display:none;
	}
	.social {
		width:100%;
		max-width:800px;
		}
	.greybg {background:#ddd;
		opacity:.4;
		}
@media (min-width:480px) {
	.num {
		height:8%;
		padding-top:2%;
	}
	.subNav {
		border-bottom:0;
		background:none;	
	}
	.subNav .item {
		min-width:44%;
		display:inline-block;
	}
	.subNav .item:last-child, .subNav .item:nth-child(7) {
		border-bottom:1px solid #ddd;
	}
}
@media (min-width:640px) {
	.title {
		float:left;
		margin-top:6px;
	}
	#logo {
		float:left;
		margin-right:5px;
	}
	nav {
		float:right;
	}
	.detailText,
	.projectTitle,
	 {
		text-align:left;
	}
	.projectTitle {
		margin-bottom:2px;
	}
	.break {
		display:none;
	}
	.vDivider {
		display:inline-block;
	}
	.num {
		height:7%;
		padding-top:3%;
	}
}

@media(min-width:768px) {
	.desktop {
		display:inline-block;
	}
	header {
		text-align:left;
	}
	#goldenEyes {
		display:block;
	}
	.panel {
		height: 266px;
	}
	.subNav .item {
		border:1px solid #ddd;
		min-width:21.5%;
		margin-bottom:2.5px;
	}
}
@media(min-width:980px) {
	.panel {
		float: left;
		height: 245px;
		width: 45.5%;
		margin:0;
	}
	.subNav .item {
		border:1px solid #ddd;
		min-width:21.5%;
	}
	
}
@media (min-width:1070px) {
.subNav {
		border-bottom:1px solid #ddd;
	}
	.subNav .item {
		min-width:97px;
		margin-right:5px;
		margin-bottom:0;
		border:0 !important;
	}
	.subNav .item:last-child {
		margin-right:0;
	}
}
@media(min-width:1144px) {
	h1,
	.detailText
	{
		text-align:left;
	}
	.wireframeContainer {
		display:block;
	}
	.subNav .item {
		min-width:105px;
	}
}
@media(min-width:1244px) {
	#liveSafe.merge.mobile {
		display:none;
     }
	#liveSafe.merge.desktop {display:inline-block;}
	.subNav .item {
		min-width:115px;
	}
	
}
@media (min-width:1341px) {
	.subNav {
		display:block;
	}
	.subNav .item {
		display:inline-block;
	}
	header {
		border-bottom:0;
	}
	.subNav .item {
		min-width:127px;
	}
	}
@media(min-width:1360px) {
	.panel {
		margin-right:15px;
		margin-bottom:15px;
	}
	.subNav .item {
		min-width:128px;
	}
	}