@import url('https://fonts.googleapis.com/css?family=Nunito:300,600|Libre+Baskerville:400i,700');

/*
-----------------------------------------------
reset
-----------------------------------------------
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	text-decoration: none;
}
html {
	font-size: 62.5%;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%;
	box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit; }
body { background: #fff; }
article, aside, details, figcaption, figure, #footer,
#header, main, #nav, section, div { display: block; }
ol, ul { list-style: none; }

table { /* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate; border-spacing: 0;
}
caption, th, td { font-weight: normal; text-align: left; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

a:hover, a:active { outline: 0; }
a img { border: 0; }

/*
-----------------------------------------------
rarely used tags
-----------------------------------------------
*/
abbr, acronym { border-bottom: 1px dotted #666; cursor: help; }
address { margin: 0 0 1.5em; }
big { font-size: 125%; }
cite, dfn, em, i { font-style: italic; }
code, kbd, tt, var { font: 15px Monaco, Consolas, "Andale Mono", monospace; }
dt { font-weight: bold; }
dd { margin: 0 1.5em 1.5em; }
figure { margin: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03); }
mark, ins { background: #fff9c0; text-decoration: none; }
pre {
    background: #eee;
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}
small { font-size: 75%; }
sub, sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub { top: .5ex; }
sup { bottom: 1ex; }
table {
    margin: 0 0 1.5em;
    width: 100%;
}
th { font-weight: bold; }

/*
-----------------------------------------------
UNIVERSAL STYLES
-----------------------------------------------
*/

* { box-sizing: border-box; }

body, button, input, select, textarea {
    color: #666;
    font-family: Nunito, sans-serif;
    font-size: 16px;
    line-height: 1.4em;
}
#gestalt {
	position: relative;
	margin: 0 auto;
	padding: 0; 
	max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-family: Nunito, sans-serif;
	line-height: 1.4em;
	word-wrap: break-word;
	color: #006489;
	margin-top: 1em;
}
h1 { font-size: 28px; margin-bottom: 1.0em; color: #6C6E20; font-weight: bold;}
h2 { font-size: 18px; margin-bottom: 1.0em; color: #6B2E0E; font-weight: bold;}
h3 { font-size: 16px; margin-bottom: 0.25em; color: #5386B9; font-weight: bold}
h4 { font-size: 14px; margin-bottom: 0em; color: #333; }
h5 { font-size: 14px; margin-bottom: 0em; color: #555; }

p { margin-bottom: 1em; }
strong, b { font-weight: bold; }

a:link, a:visited { color: #ff7c17 }
a:hover { color: #58595b; }

blockquote {
	margin: 1em;
}
img {
    height: auto; /* Make sure images are scaled correctly. */
    max-width: 100%; /* Adhere to container width. */
}
#header { position: relative; }
#header .logo {
	padding-top: 20px;
	padding-bottom: 30px;
	width: auto;
	max-width: 100%;
}
#social-media li { 
	display: inline-block;
	margin-left: 5px;
	padding: 0;
}
#social-media a img { width: 24px; }
#social-media a img:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
}

#nav {
	margin: 0;
	z-index: 100;
	font: 14px Nunito, sans-serif;
	border-top: 2px solid #DD8025;
}
#nav a:link, #nav a:visited { color: #58595b; }
#nav a:hover { color: #ff7c17; }
#nav a#mobile_menu {
	width: 24px;
	height: 24px;
	background-image: url(images/menu.png);
	background-repeat: no-repeat;
	background-position: right top;
	background-size: contain;
	position: absolute;
	top: 8px;
	left: 20px;
	z-index: 1000;
	display: none;
}

#intro {
	margin-top: 0;
	margin-bottom: 2em;
	position: relative;
}
.home #intro { background: #000 url(images/bkg-workflow.jpg) no-repeat right top; }
.about #intro { background: #000 url(images/bkg-chip.jpg) no-repeat right top; }
.who-we-are #intro { background: #D4D6BE url(images/bkg-kids.jpg) no-repeat right top; }
.services #intro { background: #3B1401 url(images/bkg-plane.jpg) no-repeat right top; }
.testimonials #intro { background: #571F01 url(images/bkg-circuits3.jpg) no-repeat right top; }
.contact-us #intro { background: #223079 url(images/bkg-train.jpg) no-repeat right top; }
.error-404 #intro { background: #F58D4B url(images/bkg-404.jpg) no-repeat right top; }

#intro {
	height: 365px;
}
#intro p { color: #ccc; }

#intro strong {
	font: italic 32px "Libre Baskerville", serif;
	display: block;
	margin-bottom: .25em;
	color: #fff;
}
main {
	margin: 0 10%;
	padding-bottom: 4em;
}
.tagline {
	font-size: 21px;
	font-weight: bold;
	color: #6B2F0F;
	line-height: 1.4em;
	margin-top: 1.5em;
}

#footer {
	background-color: #2B262B;
	border-top: 2px solid #DD8025;
	padding-top: 2em;
	padding-bottom: 3em;
	clear: both;
	position: relative;
}
#footer::after { content: ""; display: block; clear: both; }
#footer .logo { 
	display: block;
	width: auto;
	max-width: 100%;
	margin-bottom: 25px;
}
#footer p {
	margin: 0 10% .5em; 
	font-size: .8em;
	color: #aaa;
}
#footer a:link, #footer a:visited { color: #aaa; }
#footer a:hover { color: #fff; }
#footer a.phone-link, #footer a.mail-link {
	padding-left: 24px;
	margin-right: 1.5em;
}
#footer a.phone-link { background: url(images/phone.png) no-repeat left center; }
#footer a.mail-link { background: url(images/envelope.png) no-repeat left center; }

main #features { padding: 1em 0 3em; margin-bottom: 1em; }
main #features::after { content: ""; display: block; clear: both; }
main aside h3 { display: block; text-align: center; }
main aside p { height: 5em; font-size: .8em; }
main .content {
	margin: 10px;
	background-repeat: no-repeat;
	background-position: center top;
	position: relative;
}
main aside .content.maintain { background-image: url(images/i-tools.png); }
main aside .content.enhance { background-image: url(images/i-meter.png); }
main aside .content.migrate { background-image: url(images/i-gears.png); }
main aside .content.implement { background-image: url(images/i-checklist.png); }
main .content a:link, main .content a:hover { 
	display: block;
	font-weight: bold; 
}
main .content a.stealth-link {
	position: absolute;
}

#cater {
	width: 100%;
	background-color: #eee;
	padding: 1em 1em .5em;
	font-weight: bold;
}
#cater::after { content: ""; display: block; clear: both; }
#cater p {
	color: #000;
	margin: 0 1em 1em;
}
#cater li {
	margin-bottom: 1em;
	padding: 0 1em;
	font-size: .8em;
	color: #999;
}
#cater li img { 
	width: 100%; 
}

.team {
	position: relative;
	margin-bottom: 2em;
	font-size: 16px;
	line-height: 1.4em;
}
.team h2 { font-weight: normal; font-size: 16px; }
.team h2 strong { font: bold 18px "Libre Baskerville", Georgia, serif; }

.testimony {
	padding-left: 75px;
	margin-bottom: 2em;
	position: relative;
}
.testimony img {
	position: absolute;
	left: 0;
	top: 0;
	width: 50px;
}
.testimony p strong {
	color: #000;
	font-weight: bold;
}
.testimony blockquote { margin: 1em 0; }

.service {
	padding-left: 60px;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 50px;
}
#maintenance { background-image: url(images/i-tools.png); }
#enhancement { background-image: url(images/i-meter.png); }
#migration { background-image: url(images/i-gears.png); }
#implementation { background-image: url(images/i-checklist.png); }
.service h2 { padding-top: 5px; }

/*
-----------------------------------------------
COONTACT FORM
-----------------------------------------------
*/
input {
	width: 95%;
	padding: 8px 5px;
	border: 1px solid #ccc;
}
input[type="submit"], .wpcf7-submit {
	background-color: #ff7c17; 
	color: #fff;
	text-transform: uppercase;
	width: 100px;
	font-weight: 700;
	letter-spacing: 1px;
	text-align: center;
}
input[type="submit"]:hover {
	background-color: #58595b;
}
textarea {
	width: 95%;
	height: 8em;
	padding: 5px; 
	border: 1px solid #ccc;
}
@media screen and (min-width: 701px) {
	input { width: 300px; }
	textarea { width: 600px; }
}




/*
-----------------------------------------------
SMALL SCREENS max 650
-----------------------------------------------
*/

@media screen and (max-width: 650px) {
	#header .logo {
		display: block;
		max-width: 80%;
		margin: 0 auto;
	}

	#social-media {
		position: absolute;
		right: 20px;
		bottom: 2px;
		z-index: 200;
	}
	#nav { height: 42px; position: relative; }
	#nav a#mobile_menu { display: block; }
	#nav ul { 
		display: none;
		padding: 10px;
		margin-top: 30px;
	}
	#nav ul a {
		display: block;
		padding: 10px;
		background-color: #fff;
		color: #666;
		margin: 0 5px;
		border-top: 1px solid #ccc;
		text-transform: uppercase;
		letter-spacing: 1px;
	}
	#nav ul ul { margin-top: 0; padding: 0;}
	#nav ul ul a { padding-left: 30px; text-transform: none; }
	
	#intro p strong { font-size: 22px; }

	main #features { padding: 0; }
	main .content {
		margin: 0; padding: 0 0 0 45px;
		background: no-repeat left top; 
		background-size: 40px; 
	}
	main .content a.stealth-link:link, main .content a.stealth-link:visited {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 40px;
		height: 30px;
	}
	main .content a.stealth-link:hover {
		background-color: rgba(255, 255, 255, .5);	
	}
	
	main aside { width: 100%; float: none; text-align: left; }
	main aside h3 { text-align: left; }
	main aside p { height: auto; }
	
	.team h3 img {
		display: block;
		max-width: 100%;
		margin: 1em auto;
	}
}

/*
-----------------------------------------------
ALL OTHER SCREENS min 651
-----------------------------------------------
*/

@media screen and (min-width: 651px) {
	#header { margin: 0 10%; }

	/* horizontal navigation with dropdown capability */
	#nav {
		font-size: 15px; 
		border-top: 2px solid #DD8025;
	}
	#nav::after { content: ""; display: block; clear: both; }
	#nav ul { list-style: none; margin: auto; padding: 0; }
	#nav ul li { position: relative; }
	#nav ul li a {
		display: inline-block;
		padding: 8px 0;
		width: 140px;
		text-decoration: none;
		color: #666;
	}
	#nav ul ul {
		display: none; 
		position: absolute;
		left: -8px;
		top: 100%;
		z-index: 100;
	}
	#nav ul ul li { margin-top: 1px; }
	#nav ul ul li:first-child { margin-top: 0;}
	#nav ul ul li a {
		background: #eee;
		padding-left: 8px;		
	}
	#nav ul li:hover { color: #000; }
	#nav ul li:hover > ul { display: block; }
	
	/* first level overrides */
	#nav > ul > li { float: left; }
	#nav > ul > li > a { 
		margin-right: 1.5em;
		padding: 8px 0;
		width: auto;
		text-transform: uppercase;
	}
	#nav .current_menu_item { background-color: rgba(255,255,255,.2); }
	
	#social-media {
		position: absolute;
		right: 0;
		top: 45px;
	}
	
	#intro {
		margin: 0 10%;
		background-color: #000;
	}
	#intro p { 
		width: 320px;
		position: absolute;
		left: 2em;
		top: 100px;
	}
	.who-we-are #intro p { color: #333; }
	#intro p strong { width: 300px; }

	/* FOOTER */
	.phone-link, .mail-link { float: left; }
	.copyright { float: right; }

	
	/* homepage features */
	main .content {
		margin: 8px 10px;
		padding: 30px 0 0 0;
		background: no-repeat center top;
		background-size: 60px;
	}
	main .content a.stealth-link:link, main .content a.stealth-link:visited {
		display: block;
		position: absolute;
		left: 50%;
		top: 0;
		margin-left: -30px;
		width: 60px;
		height: 42px;
	}
	main .content a.stealth-link:hover {
		background-color: rgba(255, 255, 255, .5);	
	}


	main aside {
		width: 25%; float: 
		left; text-align: center;
	}
	#cater li {
		float: left;
		width: 25%;
	}
	
	.team {
		min-height: 250px;
		padding-left: 220px;
	}
	.team img {
		position: absolute;
		left: 0;
		top: 0;
		width: 200px;
	}
}

/* background small phones */

@media screen and (max-width: 480px){
	#intro {
		width: 100%;
		height: auto;
	}
	.home #intro { background: #445 url(images/bkg-workflow-m.jpg) no-repeat center top; }
	.about #intro { background: #455 url(images/bkg-chip-m.jpg) no-repeat center top; }
	.who-we-are #intro { background: #666 url(images/bkg-kids-m.jpg) no-repeat center top; }
	.services #intro { background: #3B1401 url(images/bkg-plane-m.jpg) no-repeat center top; }
	.testimonials #intro { background: #223079 url(images/bkg-circuits3-m.jpg) no-repeat center top; }
	.contact-us #intro { background: #223079 url(images/bkg-train-m.jpg) no-repeat center top; }
	.error-404 #intro { background: #666 url(images/bkg-404-m.jpg) no-repeat center top; }
	
	#intro p { 
		position: relative;
		padding-top: 260px;
		padding-bottom: 1em;
		margin: 0 5%;
	}
}

@media screen and (min-width: 481px) and (max-width: 650px){
	.home #intro p {
		width: 35%;
		position: absolute;
		left: 2em;
		bottom: 1em;
	}
	.about #intro p, .services #intro p, .testimonials #intro p, .contact-us #intro p {
		box-sizing: border-box;
		width: 100%;
		padding: 1em 10%;
		background:rgba(2,5,25,0.8);
		position: absolute;
		left:0;
		bottom: 0;
		margin: 0;
	}
	.who-we-are #intro {
		height: auto;
		background-color:rgba(2,5,25,0.8);
	}
	.who-we-are #intro p {
		box-sizing: border-box;
		width: 100%;
		padding: 370px 10% 16px;
	}
}