@import url(https://fast.fonts.com/cssapi/db2b34cc-c119-4165-be86-1317a1b6e142.css);

/* =============================================================================
   Resets (Do not edit unless necessary)
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }

html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

a:focus { outline: none; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
h1, h2, h3, h4, h5, h6 { font-weight: normal !important; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { border: 0; *margin-left: -7px; padding: 0; }
label { cursor: pointer; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }

/* =============================================================================
   Default styles
   ========================================================================== */

/* Default Body Styles */
body {
	background: #8ED4D8;
	overflow: hidden;
	margin: 0;
	min-width: 1100px;
}

/* Link Styles */
a { color: #3E4E5F; text-decoration: none; }

/* Selection Color */
::-moz-selection { background: #8bc5e8; color: #fff; text-shadow: none; }
::selection { background: #8bc5e8; color: #fff; text-shadow: none; }


/* =============================================================================
   Primary styles
   =============================================================================
*/


/* Typography */

h1, h2, h3 {
	font-family: "Steelfish";
}

h1, h2, h3, h4, h5 {
	letter-spacing: 1px;
	text-transform: uppercase;
}


/* Content Sections */

section {
	margin: 0 auto;
	overflow: hidden;
	padding: 0 50px;
	
	/* Width of the Content */
	width: 1000px;
}


/* Header */

header {
	background: #8ED4D8 url(../images/header/header.png) no-repeat center top;
	min-height: 300px; min-width: 1000px;
}
	header section {
		overflow: auto;
		padding-top: 180px;
	}
	
		header section a.logo {
			background: url(../images/header/logo.png);
			float: left;
			width: 285px; height: 100px;
		}
		
			header section a.logo:hover { background-position: 0 -100px; }
		
		header section nav {
			text-align: right;
			margin-top: 5px;
		}
		
			header section nav h3.home {
				position: relative;
				text-align: center;
				width: 40px; height: 40px;
			}
			
				header section nav h3.home .circle {
					position: absolute;
					width: 100%; height: 100%;
					z-index: -999;
				}
					header section nav h3.home .circle div {
						background: #286F7E;
						border-radius: 12em;
						margin: auto;
						position: relative;
						top: 50%;
						width: 1px; height: 1px;
					}
				
				header section nav .home img {
					margin: auto;
					position: relative;
					top: 3px;
				}
		
			header section nav h3 {
				float: right;
				font-size: 2em;
				margin-left: 30px;
			}
			
				header section nav h3 a {
					color: #FFF;
				}
				
					header section nav h3 a:hover {
						color: #3B828F;
					}
					
					header section nav h3 a.selected {
						border-bottom: 4px #FCD211 solid;
					}


	/* Content */

	.section {
		overflow: hidden;
		position: relative;
		z-index: 500;
	}
	
		.section h1 {
			border-bottom: 8px #FCD211 solid;
			color: #FFF;
			margin: 0 0 25px;
			font-size: 5em;
			width: 40%;
		}
		
		.section section {
			padding: 50px;
		}
		
		.section p {
			letter-spacing: 0.1em;
			line-height: 1.7em;
		}
		
	/* Main */
	
	.section#main { 
		background: #FCD211;
		padding: 0;
		position: relative;
		height: 530px;
	}
		
		.section#main .bars {
			background: url(../images/main/main-bars-bg.png) repeat-x;
			position: absolute;
			top: 0; left: 50%;
			width: 50%; height: 530px;
			z-index: 0;
		}
		
		.section#main section {
			overflow: visible;
			padding: 0;
			position: relative;
			z-index: 1;
		}
		
		.section#main .image {
			float: left;
			margin-left: -20%;
		}
		
		.section#main .text {
			float: right;
			text-align: right;
			width: 35%;
		}
		
			.section#main .text div {
				position: relative;
			}
			
			/* Headline */
			
			.section#main .text .headline {
				height: 300px;
			}
		
				.section#main .text .headline h1 {
					border: none;
					color: #286F7E;
					font-size: 5.3em;
					line-height: 0.9em;
					margin: 0;
					padding: 70px 0 0;
					width: 100%;
				}
					.section#main .text .headline h1 small { display: block; font-size: 86%; }
				
					.section#main .text .headline .bar {
						background: #8ED4D8;
						float: right;
						margin-top: 10px;
						width: 74px; height: 8px;
					}
			
			/* Tagline */
			
			.section#main .text .tagline {
				background: #8ED4D8 url(../images/core/line-right.png) no-repeat right center;
				height: 230px;
			}
				
				.section#main .text .tagline h5 {
					background: url(../images/main/c-overlay.png) no-repeat 100% center;
					color: #286F7E;
					font-size: 0.9em;
					line-height: 1.8em;
					margin: 0 9% 0 0;
					padding: 67px 0;
				}
	
	
	/* About */
	
	.section#about {
		background: #286F7E;
		color: #FFF;
	}
	
		.section#about a { color: #8ED4D8; }
		.section#about a:hover { color: #FFF; }
	
		.section#about section {
			background: url(../images/about/c-background.png) no-repeat 10px center;
		}
		
		.section#about section > p {
			font-size: 1.1em;
			margin-top: 20px;
		}
	
		.section#about section > div {
			color: #FCD211;
			font-size: 0.8em;
			overflow: hidden;
		}
		
			.section#about section > div > div {
				background: url(../images/about/computer.png) no-repeat left center;
				float: left;
				padding: 0 0 0 13%;
				width: 32%;
			}
			
			.section#about section > div > div:first-child {
				margin-right: 5%;
				background: url(../images/about/clock.png) no-repeat left center;
			}
	
	/* Services */
	
	.section#services {
		background: #8ED4D8 url(../images/services/c-background.png) no-repeat center center; 
		color: #286F7E; 
	}
		
		.section#services section {
			overflow: visible;
		}
		
		.section#services h1 {
			float: right;
			margin-bottom: 0;
			text-align: right;
		}
		
		.section#services .tabs {
			clear: both;
			padding: 0 0 10px;
			position: relative;
		}
		
			.section#services .tabs h3 {
				float: left;
				font-size: 1.6em;
				margin-left: 30px;
				position: relative;
			}
			
				.section#services .tabs h3:first-child { margin-left: 2px; }
				
				.section#services .tabs h3 a { color: #286F7E; }
				.section#services .tabs h3 a:hover { color: #FFF; }
				
			.section#services .tabs .line {
				background: url(../images/services/arrow.png) no-repeat 62px 0;
				border-top: 5px #FCD211 solid;
				clear: both;
				margin-top: 20px;
				width: 100%; height: 10px;
			}

		.section#services .descriptions {
			height: 200px;
			overflow: hidden;
			position: relative;
		}
		
			.section#services .descriptions .image {
				background: url(../images/services/icons.png) no-repeat 0 20px;
				display: block;
				position: absolute;
				top: 0; left: 0;
				width: 160px; height: 200px;
			}
		
			.section#services .descriptions .container {
				width: 6000px;
			}
		
				.section#services .descriptions .container div {
					float: left;
					padding-left: 200px;
					width: 800px;
				}
				
					.section#services .descriptions .container div p {
						font-size: 1.1em;
						letter-spacing: 0.05em;
						margin: 35px 0 0;
					}
			
		/* CMS Editing */
		
		.surreal-cms .section#services .descriptions {
			height: auto;
		}
		
			.surreal-cms .section#services .descriptions .container {
				width: auto;
			}
			
				.surreal-cms .section#services .descriptions .container div {
					float: none;
				}
		
	/* Contact */
	
	.section#contact { background: #FCD211; }
	
		.section#contact section {
			background: url(../images/contact/c-background.png) no-repeat 80% center;
		}
		
		.section#contact h1 {
			border-color: #286F7E;
		}
		
		.section#contact .phone {
			color: #FFF;
			float: right;
			font-size: 2.5em;
			margin: 62px 0 0 0;
			padding: 0;
		}
		
			.section#contact .phone span {
				color: #286F7E;
			}
			
			.section#contact .phone img {
				display: block;
				margin: -51px 0 0 10px;
				float: right;
			}
		
		.section#contact p {
			color: #286F7E;
			font-size: 1.1em;
			letter-spacing: 0;
			margin: 30px 0;
		}
		
		.section#contact form {
			
		}
		
			.section#contact form .response {
				border-bottom: 2px #286F7E solid;
				border-top: 2px #286F7E solid;
				color: #286F7E;
				display: none;
				margin-bottom: 30px;
				padding: 15px 0;
			}
				.section#contact form .response h2 {
					color: #FFF;
					margin: 0;
					font-size: 2.5em;
				}
		
			.section#contact form div {
				overflow: hidden;
				margin-bottom: 10px;
			}
		
			.section#contact form label {
				background: #8ED4D8;
				display: block;
				float: left;
				padding: 10px 2% 9px;
				text-transform: uppercase;
				width: 16%; height: 100%;
			}
		
			.section#contact form input.text, .section#contact form textarea  {
				border: none;
				border-radius: 0 !important; -webkit-border-radius: 0 !important;
				color: #286F7E;
				display: block;
				float: right;
				outline: none;
				padding: 10px 2%;
				width: 76%;
			}
				.section#contact form input.text:focus, .section#contact form textarea:focus {
					background: #E8F6F7;
				}
				
				.section#contact form input.text.valid {
					background-image: url(../images/contact/checkmark.png);
					background-position: right center;
					background-repeat: no-repeat;
				}
				
				.section#contact form input.text.invalid {
					background-image: url(../images/contact/x.png);
					background-position: right center;
					background-repeat: no-repeat;
				}
			
			.section#contact form .textarea label, .section#contact form textarea {
				height: 100px;
			}
			
			.section#contact form input.submit {
				background: #8ED4D8;
				border: none;
				border-radius: 0 !important; -webkit-border-radius: 0 !important;
				color: #FFF;
				box-sizing: content-box;
				padding: 10px 3%;
				text-align: right;
				text-transform: uppercase;
				width: 94%;
			}
				.section#contact form input.submit:hover { background: #286F7E; }
				.section#contact form input.submit:active { margin: 2px 0 -2px; }
				
				.section#contact form input.submit[disabled] { opacity: 0.5; margin: 0 !important; background: #8ED4D8 !important; cursor: default; }


footer {
	background: #286F7E url(../images/footer/footer.png) no-repeat center bottom;
	min-height: 450px; min-width: 1000px;
	padding-top: 25px;
	position: relative;
	z-index: 1000;
}

	footer .top { overflow: hidden; }

	footer a { color: #8ED4D8; }
	footer a:hover { color: #FCD211; }

	footer nav {
		background: url(../images/core/line-left.png) no-repeat left center;
		float: left;
		font-size: 1.5em;
		padding: 10px 0 10px 20px;
	}
	
		footer nav h3 { margin: 0; }
		
	footer .twitter {
		background: url(../images/footer/tweet.png) no-repeat left top;
		float: left;
		margin-left: 50px;
		min-height: 150px;
		padding-left: 80px;
		position: relative;
		width: 20%;
	}
		footer .twitter .tweet {
			color: #8ED4D8;
			vertical-align: middle;
			margin-top: 10px;
			font-size: 0.95em;
			word-wrap: break-word;
		}
		
			footer .twitter .tweet a { color: #FFF; }
			footer .twitter .tweet a:hover { color: #FCD211; }
		
		footer .twitter a.posted {
			bottom: 10px; left: 80px;
			font-size: 0.5em;
			letter-spacing: 1px;
			position: absolute;
			text-transform: uppercase;
		}
		footer .facebook {
		background: url(../images/footer/facebook.png) no-repeat left top;
		float: left;
		margin-left: 50px;
		min-height: 150px;
		padding-left: 80px;
		position: relative;
		width: 20%;
	}
	footer .social {
		background: url(../images/core/line-left.png) no-repeat left center;
		float: left;
		padding-left: 25px;
		margin: 0 0 0 25px;
	}
	
		footer .social a {
			display: block;
		}
		
	footer .logo {
		display: block;
		float: right;
	}
		
	footer .copyright {
		color: #FFF;
		font-size: 0.7em;
		margin-top: 50px;
		text-align: right;
	}
		


/* Fixed */

.fixed header {
	position: fixed;
	width: 100%;
	z-index: 1000;
}

.fixed .main {
	margin-top: 290px;
	position: relative;
}


/* Image Replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

/* Clear Floats */
.clear { clear: both; }

/* Hide it */
.hidden { display: none; }


/* =============================================================================
   Media Queries for Responsive Design
   ========================================================================== */

/* Mobile Size */
@media only screen and (min-width: 320px) and (max-width : 730px) {
  
	
}

/* Tablet Size */
@media only screen and (min-width: 730px) and (max-width: 1024px)  {


}

/* =============================================================================
   Font Face
   ========================================================================== */

@font-face {
    font-family: 'Steelfish';
    src: url('/css/fonts/steelfish/steelfish_rg-webfont.eot');
    src: url('/css/fonts/steelfish/steelfish_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/steelfish/steelfish_rg-webfont.woff') format('woff'),
         url('/css/fonts/steelfish/steelfish_rg-webfont.ttf') format('truetype'),
         url('/css/fonts/steelfish/steelfish_rg-webfont.svg#SteelfishRgRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}