/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* #Common Styles */

	.bodygradient { 
		width: 100%;
		background: #399; /* Old browsers */
	}
	.bodymask {
		width: 100%;
		background-image: url(../images/grid.png);
	}
	.header {
		width: 100%;
		background: #fff;
		border-bottom: 4px solid #006B7A;
	}
		.logo {
			background: url(../images/glogo.png) no-repeat;
			width: 60px;
			height: 65px;
			margin: 4px 0px 3px 5px;
			float: left;	
		}
		
			/* RETINA DISPLAY IMAGE REPLACEMENT */
			@media only screen and (-webkit-min-device-pixel-ratio: 2) {
			.logo {
				background: url("../images/glogo_retina.png") no-repeat 0 0;
				background-size: 60px 65px;
			}
			}
		
		.navigation {
			display: block;
			float: right;
			margin: 28px 15px 0px 0px;	
		}
		
		.navigation li {
			float: left;
			font-weight: bold;
			font-size: 14px;
			margin: 0px 0px 0px 25px;
			text-shadow: 0 0 1px rgba(0,0,0,0.3);
		}
		
		.navigation li a {
			color: #006B7A;
			text-decoration:none;
		}
		
		.navigation li a:hover {
			color: #999;
		}
		.active {
			display: block;	
		}
		
		.menuicon {
			display: none;
			float: right;
			background: url(../images/menuicon.png) no-repeat;
			width: 18px;
			height: 18px;
			margin: 28px 15px 0px 0px;
		}	
			/* RETINA DISPLAY IMAGE REPLACEMENT */
			@media only screen and (-webkit-min-device-pixel-ratio: 2) {
			.menuicon {
				background: url("../images/menuicon_retina.png") no-repeat 0 0;
				background-size: 18px 18px;
			}
			}
		
	.bodycontent {
		margin-top: 15px;
		margin-bottom: 15px;	
	}
	
	.footer {
		width: 100%;
		min-height: 72px;
		border-top: 8px solid #000F14;
		background: #000; /* Old browsers */
	}
		.copyright {
			font-size:12px;
			color: #C8C8C8;
			float: left;
			margin: 25px 0px 0px 15px;	
		}
		
		.social {
			margin: 18px 15px 0px 0px;
			float: right;
		}
		
		.social a {
			font-size:14px;
			font-weight: bold;
			color: #fff;
			margin: 0px;
			background-image: url("../images/spr_social_50px.png");
			background-repeat: no-repeat;
			background-color: transparent;
			display: inline-block;
			height: 38px;
			vertical-align: middle;
			width: 50px;
			-webkit-transition: none;
			-moz-transition: none;
			-o-transition: none;
			transition: none;	
		}
		
		
		.social a.email {
			background-position: 0px 0px;
		}
		
		.social a.linkedin {
			background-position: 0px -43px;
		}
		
		.social a.twitter {
			background-position: 0px -84px;
			margin: 0px 15px;
		}
		
			/* RETINA DISPLAY IMAGE REPLACEMENT */
			@media only screen and (-webkit-min-device-pixel-ratio: 2) {
			.social a {
				background: url("../images/spr_social_retina.png") no-repeat 0 0;
				background-size: 40px 132px;
				width: 40px;
				
			}
			
				.social a.email {
					background-position: 0px 0px;
				}
				
				.social a.linkedin {
					background-position: 0px -50px;
				}
				
				.social a.twitter {
					background-position: 0px -100px;
				}
			
			}
		
		.social a span {
			display:none;
		}
	
	
	/* #Homepage Styles */
			
	.introduction h3 {
		font-family:Georgia, "Times New Roman", Times, serif;
		color: #999;
		font-size: 28px;
		line-height: 34px;
		margin: 40px 15px 40px 15px;
		text-shadow: 0 0 1px rgba(0,0,0,0.3);
	}
	
	.introduction hr {
		color: #141414;
		margin: 25px 0px;
	}
		
	.project {
		position: relative;
		margin: 10px 0px;
		border: 4px solid #fff;
		-webkit-box-shadow: 0px 0px 2px 0px rgba(1,46,37,0.75);
		-moz-box-shadow: 0px 0px 2px 0px rgba(1,46,37,0.75);
		box-shadow: 0px 0px 2px 0px rgba(1,46,37,0.75);
		text-align: center;
	}
		.overlay {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.7);
			width: 100%;
			height: 100%;
			z-index: 1000;	
		}
		
			.overlay-inner {
				padding: 30px 0px 0px 0px;
				width: 100%;
			}
			
				.overlay-inner h3, .overlay-inner p {
					color: #fff;
					margin: 0px;
					text-shadow: 0 0 1px rgba(255,255,255,0.3);
					position: relative;
				}
				
				.overlay-inner hr {
					color: #fff;
					margin: 5px 35% 20px 35%;
				}
				
				.overlay-inner h3 {
					text-transform: uppercase;
					font-size: 16px;
					font-weight: bold;
					line-height: 18px;
				}
				
				.overlay-inner a {
					color: #fff;
					text-decoration: none;
					text-transform: uppercase;
					font-size: 12px;
					border: 1px solid #fff;
					-webkit-border-radius: 3px;
					-moz-border-radius: 3px;
					border-radius: 3px;
					padding: 5px 10px;
					background: rgba(0,0,0,0.75);
					-webkit-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.75);
					-moz-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.75);
					box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.75);
				}
				
				.overlay-inner a:hover {
					color: #000;
					background: rgba(255,255,255,1);
				}
				
	.banner {
		width: 100%;
		background: #141414; /* Old browsers */
		background: -moz-linear-gradient(top, #141414 0%, #000 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#141414), color-stop(100%,#000)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #141414 0%,#000 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #141414 0%,#000 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #141414 0%,#000 100%); /* IE10+ */
		background: linear-gradient(to bottom, #141414 0%,#000 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#141414', endColorstr='#000',GradientType=0 ); /* IE6-9 */
	}
		.focus {
			text-align: center;
		}
			
			.focus hr {
				color: #fff;
				margin: 10px 40% 20px 40%;
			}
			
			.focus h3 {
				text-transform: uppercase;
				color: #fff;
				font-size: 26px;
				line-height: 30px;
				margin: 40px 30px 5px 30px;
				text-shadow: 0 0 1px rgba(255,255,255,0.7);
				font-weight: bold;
			}
			
			.focus p {
				color: #fff;
				font-size: 18px;
				line-height: 24px;
				margin: 10px 30px 40px 30px;
				text-shadow: 0 0 1px rgba(255,255,255,0.7);
				font-family: Georgia, "Times New Roman", Times, serif;
				font-style: italic;
			}
		
		/* #Subpage Styles */
			
			.projectheader {
				position: relative;
				margin: 10px 15px;
				padding: 20px 0px 40px 0px;
			}
			
				.projectheader a {
					color: #009EA6;
					text-decoration: none;
					text-transform: uppercase;
					font-size: 14px;
					font-weight:bold;
					float: left;
				}
				
				.projectheader h2 {
					clear:both;
					color: #005E70;
					font-size: 30px;
					font-weight:bold;
					line-height: 36px;
					margin: 30px 0px 0px 0px;
					text-shadow: 0 0 1px rgba(255,255,255,0.7);
				}
				
			.projectdetail {
				margin: 10px 15px;
			}
				
				.projectdetail h2 {
					clear:both;
					color: #fff;
					font-size: 18px;
					font-weight:bold;
					line-height: 20px;
					margin: 15px 0px 5px 0px;
					text-shadow: 0 0 1px rgba(255,255,255,0.7);
				}
				
				.projectdetail h3 {
					clear:both;
					color: #fff;
					font-size: 16px;
					font-weight:bold;
					line-height: 20px;
					margin: 15px 0px 5px 0px;
					text-shadow: 0 0 1px rgba(255,255,255,0.7);
				}
				
				.projectdetail p {
					clear:both;
					color: #fff;
					font-size: 14px;
					line-height: 20px;
					text-shadow: 0 0 1px rgba(255,255,255,0.7);
				}
				
			.projectimage {
				margin: 10px 15px;
			}
			
			.projectimage .imageshadow {
				-webkit-box-shadow: 0px 0px 8px 2px rgba(1,46,37,0.75);
				-moz-box-shadow: 0px 0px 8px 2px rgba(1,46,37,0.75);
				box-shadow: 0px 0px 8px 2px rgba(1,46,37,0.75);	
			}
			
			.clientimage {
				margin: 25px 15px;
				background-color: #fff;
				border: 4px solid #006B7A;
				-webkit-box-shadow: 0px 0px 8px 2px rgba(1,46,37,0.75);
				-moz-box-shadow: 0px 0px 8px 2px rgba(1,46,37,0.75);
				box-shadow: 0px 0px 8px 2px rgba(1,46,37,0.75);
			}
			
			.clientlogo {
				max-width: 182px !important;	
			}
			
	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		.overlay-inner {
			padding: 10px 0px 0px 0px;
		}
		.overlay-inner h3 {
			font-size: 14px;
			line-height: 16px;
		}	
		.navigation {
			display: block;		
		}
		
		.active {
			display: block;	
		}
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (max-width: 767px) {
		.menuicon {
			display: block;
		}
		.navigation {
			display: none;		
		}
		
		.active {
			display: block;	
		}
		
		.navigation {
			position: absolute;
			z-index: 2000;
			top: 44px;
			right: 0px;
			background: #fff;
			border: 1px solid #ccc;
			padding: 20px 20px 20px 0px;
			width: 368px;
		}
		
		.navigation li {
			float: none;
			font-weight: bold;
			font-size: 14px;
			margin: 0px 0px 0px 25px;
			padding: 10px 0px;
			text-shadow: 0 0 1px rgba(0,0,0,0.3);
		}
		
		.navigation li a {
			display: block;
			color: #006B7A;
			text-decoration:none;
		}
		
		.navigation li a:hover {
			color: #999;
		}
		.introduction h3 {
			font-size: 18px;
			line-height: 26px;
		}
		.project {
			margin: 10px 15px;
		}
		
			.projectdetail h2 {
				font-size: 22px;
				line-height: 24px;
			}
			
			.projectdetail h3 {
				font-size: 18px;
				line-height: 24px;
			}
			
			.projectdetail p {
				font-size: 16px;
				line-height: 24px;
			}
		
		.about {
			margin: 0px 15px;
		}
		.overlay-inner {
			padding: 30px 0px 0px 0px;
		}
		.overlay-inner h3 {
			font-size: 16px;
			line-height: 18px;
		}
		
		.clientimage {
				margin: 15px;
				padding: 60px 0px;}
	}
		
	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		
		.navigation {
			width: 248px;
		}
		
		.copyright {
			float: none;
			margin: 24px auto;
			text-align: center;	
		}
		
		.social {
			margin: 20px auto;
			float: none;
			text-align: center;
		}
		
		.clientimage {
				margin: 15px;
				padding: 30px 0px;}
		
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/