body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, img, input, blockquote { margin:0; padding:0; border:0; }
img { max-width:100%; }
h1, h2, h3, h4, p { font-weight:normal; }
body { 
	font-size:16px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
	background:url("../images/background.png") #000;
	color:#f0f0f0;
}
a:link, a:visited { color:#abe2ff;text-decoration:none; }
a:focus, a:hover  { color:#5db5e3; }
a:active { color:#f00; }
.clear { clear:both; }
.nowrap { white-space: nowrap; }

.container { 
	width:94%;/* originally 80% */
	background-color:#000;
	margin:0 auto;
	overflow:hidden;
	border-bottom-left-radius:15px;
	border-bottom-right-radius:15px;
	-webkit-box-shadow: 3px 3px 40px 3px rgba(250,250,221,0.2);
	box-shadow: 3px 3px 40px 3px rgba(250,250,221,0.2);
}
.top-logo img {
	width:200px;
	float:left;
	position:relative;
	/*left:54px;*/
	left:20px;
	top:10px;
}
h1.top-tagline {
	color:#f00;
	font-size:.715em;
	font-weight:normal;
	text-transform:uppercase;
	letter-spacing:2px;
	word-spacing:-1px;
	margin:3px 0 20px .625em;/* 20px */
	padding:0px 40px 0 0;
	float:left;
	position:relative;
	/*left:46px;*/
	left:15px;
	top:12px;
}
h1.top-tagline a {text-decoration:none;color:#f00;}
div.section { margin-top:0; }
.section p {
	line-height:150%;
	padding:10px 20px; 
}
/* div.contact-subtitle { display:none;}*/
	div.contact-subtitle {
		display:block;
		float:none;
		padding:2px 20px;
		color:#abe2ff;
		font-size:.96em;
	}

div.description { float:left; }
div.description-graphic { display:none;-webkit-appearance:none; }
div.demo-reel { 
	float:left;
	width:80%;
	padding:10px 0 20px 20px;
}
.demo-reel video { 
	width:100%;
	height:auto;
	border:1px solid #000;
}
div.p { 
	width:100%;
	padding:10px 0 20px 0;
}
h2, div.p h2, div.description h2 {
	text-transform:uppercase;
	letter-spacing:2px;
	font-size:100%;
	color:#f6f62f;
	width:100%;
	padding:20px 20px .5% 20px;
}
h3 {
	font-size:110%;
	color:#f6f62f;
	width:100%;
	font-style:italic;
	padding:10px 20px;
}
div.home-quote {float:left;width:100%;margin:0;padding:5px;}
div.home-quote-last {margin-bottom:5px;}
div.sub-p { float:none; }
div.sub-p span {
	font-style:italic;
	color:#abe2ff;
}
div.headshot { width:100%; }
div.headshot img { 
	/*border:1px solid #101d2e;*/ 
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px; 
}
/***************************/
/* Flex Grid Mobile */
/***************************/

.three-col-grid {
	display: flex;
	flex-direction:row;
	flex-wrap: wrap;
  	flex-basis: 100%;
}
.a-column {font-size:1.1rem;width:100%;order:1;}
.b-column {font-size:1.1rem;width:100%;order:5;}
.c-column {font-size:1.1rem;width:100%;order:4;}
.d-column {font-size:1.1rem;width:100%;order:2;}
.e-column {font-size:1.1rem;width:100%;order:4;}
.f-column {font-size:1.1rem;width:100%;order:6;}

.flex-col-grid {
	display: flex;
	flex-direction:row;
	flex-wrap: wrap;
  flex-basis: 100%;
}
.flex-col-grid .a-column {width:100%;order:0;}
.flex-col-grid .b-column {width:100%;order:1;}
.flex-col-grid .c-column {width:100%;order:2;}
.flex-col-grid .d-column {width:100%;order:3;}

/***************************/
div.inline img { 
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	width:100%;
}
div.client-list-area {
	width:98%;
	margin:0 auto;
	padding:20px 0 0 0;
}
div.client {
	width:98%;
}
div.client ul {
	display:inline-block;
	margin:0 auto;
	padding:0 0 0 20px;
}
div.client li {
	display:block;
	float:none;
	padding:3% 0;
	color:#f0f0f0;
	white-space:nowrap;
}
div.client li span { 
	/*color:#abe2ff;*/
	/*color:#06f;*/
	/*color:#145474;*/
	color:#5db5e3;
	font-style:normal;
}
div.client-img {display:block;float:left;width:30%;}
div.testimonial { 
	float:left;
	width:100%;
}
div.testimonial-area { 
	width:100%;
	padding-top:20px;
}
div.testimonial-section { 
	float:none;
	width:100%;
}
div.testimonial-area .quote  { 
	margin-left:0px;
	padding:20px 10px 10px 20px;
	color:#5db5e3;
}
div.testimonial-area .attribute  { 
	margin-left:14px;
	margin-top:-4px;
	padding-bottom:20px;
	color:#5db5e3;
}
p.quote  { 
	margin-left:0px;
	padding:2px 0 6px 20px;
	color:#5db5e3;
}
p.quote a { 
	color:#5db5e3;
}
div.contact-page { width:100%; }
/*****************************/
/*  NAV - Default  */
/*****************************/
.nav ul {
	list-style-type:none;
	margin:0;
	padding:.4em 0;
	position:static;
	/* but do not display until desktop */
	display:none;
	-webkit-appearance:none;
	}
/* NAV Mobile Menu Toggle */
/* Don't DISPLAY checkbox used for Hamburger menu */
input[type=checkbox]{
    display:none;
    -webkit-appearance:none;
}
/* But DO Display Hamburger when invisible checkbox is :checked */
input[type=checkbox]:checked ~ #menu{
    display:block;
}
/* NAV Mobile menu */
/* Position and Format of Hamburger Icon */
.show-menu {
	display:block;
	width:40px;
	line-height:100%;
	margin:0;
	padding:4px 0;
	float:right;
	position:absolute;
	right:2%;
	top:10px;
	font-size:2.3em;
	text-decoration:none;
	color:#fff;
	text-align:center;
	cursor:pointer;
	/* display:none;
	-webkit-appearance:none;*/
}
/* NAV Button */
.nav ul li, li a {
		width:100%; /* center the button and text within for mobile */
	}
.nav ul li {
	padding:.3rem 0;
	margin-bottom:.8em;
	display:inline;
	float:left;
	border: 0;
	border-radius: 0.25rem;
	background: #333;
	color: white;
	font-size: 1rem;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	/*padding: 0.25rem 0.5rem;*/
	/*margin: 0.25rem;*/
	cursor: pointer;	
}
.nav ul li.on {
		background:#145474; /* nav button "on" state */
	}
/* NAV links */
.nav ul li a:hover + .hidden, .hidden:hover {
	display:block;
}
.nav li a {
	display:inline-block;
	margin:0;
	padding:.4em 0;
	font-size:.9/1em;
	letter-spacing:2px;
	text-transform: uppercase;
	text-align:center;
	line-height:100%;
	color:#fff;
	text-decoration:none;
}
.nav li:hover a, .nav li:hover {
	color:#fff;
	background-color:#145474;
	font-weight:normal;
	border-radius: 0.25rem;
}
/* End NAV Defaults */
.footer {
	color:#f0f0f0;
	width:100%;
	margin:0 auto;
	font-size:.785em;
	letter-spacing:1px;
	background-color:#000;
	padding:20px 0;
	overflow:hidden;
	border-top:1px solid #f6f62f;
}
.footer div {float:left;}
.footer p {padding:5px 20px;}
.footer ul {float:left;padding-top:10px;margin:0;list-style:none;width:100%;}
.footer li {float:left;padding-left:.4px;margin:0 4px;line-height:140%;}
.footer li:first-child {float:left;padding-left:16px;margin:0 4px;line-height:140%;}
.footer a {color:#f0f0f0;text-decoration:none;}
.footer li a {color:#abe2ff;text-decoration:none;}
.footer a:hover {color:#5db5e3;}
.footer p.back-top {font-size:.9em;padding:30px 0 5px 20px;}
.footer p.back-top a {color:#abe2ff; text-decoration:none;}
.footer p.back-top a:hover {color:#5db5e3;}

/*Responsive Styles*/

@media screen and (max-width:47.5em){ /* 760px */
	.container { width:98%; }
	div.contact-subtitle {
		display:block;
		float:none;
		padding:2px 20px;
		color:#abe2ff;
		font-size:.96em;
	}
	h1.top-tagline { margin-bottom:20px; }
	
	div.testimonial-area .attribute  { 
		margin-left:14px;
		margin-top:-4px;
		margin-bottom:5px;
		color:#5db5e3;
		border-bottom:1px dotted #5db5e3;
	}
	div.testimonial-area .first  { border-top:1px dotted #5db5e3; }
	div.testimonial-area .last  { border:none }
	
div.client-img {display:none;}
}

@media screen and (max-width:31.1875em){ /* 499px */
	.container { width:98%; }
	div.client-img {display:none;}
}

@media screen and (min-width:31.25em) and (max-width:37.5em){ /* 500px and 600px  */
	.container {width:98%;}
	.top-logo img {
		width:240px;
		height:34px;
	}
	div.description-graphic { display:none;-webkit-appearance:none; }
	div.headshot {width:50%;}
	div.inline img {width:80%;}
	div.client-list-area { width:85%; }
	div.client-img { width:30%;display:block; }	
	div.client ul { margin-right:0;padding-right:0; }
	div.client li { /*color:pink;*/ }
}

@media screen and (min-width:37.5625em) and (max-width:48em) { /* 601px and 768px */
	
	div.client-list-area { width:85%; }
	div.client-img { width:30%;display:block; }	
	div.client ul { margin-right:0;padding-right:0; }
	div.client li { /*color:lime;*/ }
	
	.container {width:98%;}
	.top-logo img {
		width:240px;
		height:34px;
	}
	h1.top-tagline { font-size:.825em; }
	
	div.description { float:left; width:60%; }
	div.description-graphic { 
		display:block;
		float:left;
		width:30%;
		position:relative;
		top:50px;
		height:50px;
		overflow:visible;
	}
	div.demo-reel { 
		float:left;
		width:50%;
		position:relative;
		top:10px;
		padding:0 20px 20px 20px;
	}
	div.p { padding:10px 0 20px 0; }
	div.sub-p p { 
		line-height:170%;
		color:#f0f0f0;
	}
	div.sub-p {
		float:left;
		width:100%;
		margin-right:2%;
	}
	div.headshot {
		width:50%;
	}
	div.inline img { 
		width:80%; 
	}
	div.last {
		margin-right:0;
	}

	div.contact-page {width:40%;/*border:1px solid aqua;*/}
	
	
	.footer li { margin-left:20px;margin-right:10px; }
	.footer li:first-child { margin-left:6px;margin-right:10px; }
	
}	
	
@media screen and (min-width:48.0625em){ /* 769px iPad */
	.container {width:96%;}
	.top-logo img {
		width:50%;
		left:20px;
	}
	h1.top-tagline {
		margin-left:0;
		font-size:.825em;
		left:20px;
	}
	div.description { float:left; width:60%; }
	div.description-graphic { 
		display:block;
		float:left;
		width:30%;
		height:100px;
		position:relative;
		top:50px;
		overflow:visible; 
	}
	div.demo-reel { 
		float:left;
		width:50%;
		position:relative;
		top:10px;
		padding:0 20px 20px 20px;
	}
	div.testimonial { 
		float:left;
		width:90%;
	}
	div.p { padding:10px 0 20px 0; }
	div.sub-p p { 
		line-height:170%;
		color:#f0f0f0;
	}
	div.sub-p {
		float:left;
		width:31%;
		margin-right:2%;
	}
	/* flex grid breakpoint to 2 cols */
	.flex-col-grid .a-column {font-size:1.1rem;width:50%;order:0;}
	.flex-col-grid .b-column {font-size:1.1rem;width:50%;order:1;}
	.flex-col-grid .c-column {font-size:1.1rem;width:50%;order:2;}
	.flex-col-grid .d-column {font-size:1.1rem;width:50%;order:3;}
	
	div.headshot {
		width:50%;
	}
	div.last {
		margin-right:0;
	}
	div.contact-last {
		margin-right:0;
		width:50%;
	}
	
	div.client-list-area { width:65%; }/* iPad */
	div.client-img { width:35%;display:block; }	
	div.client ul { margin-right:0;padding-right:0; }
	div.client li { font-size:1.1em;/*color:aquamarine;*/ }
	

div.home-quote {border-top:none;}
	div.home-quote-last {margin-bottom:5px;}
	
	div.contact-page {width:40%;/*border:1px solid orange;*/}
	
	
	
	.footer li { margin-left:20px;margin-right:10px; }
	.footer li:first-child { margin-left:6px;margin-right:10px; }
	

}

@media screen and (max-width:420px){
	.footer div { width:98%; }
	.footer li { float:none;margin-left:20px; }
	.footer li:first-child { float:none;margin-left:6px; }

}
@media screen and (max-width:250px){
	.top-logo img { width:160px; }
	h1.top-tagline { font-size:.615em; }

}

@media screen and (min-width:56.1em) { /* iPad like start DESKTOP NAV */
	/* Display NAV Automatically */
	.nav ul {
	list-style-type:none;
	margin:0;
	padding:.4em 0;
	text-align:center;
	}
	div.contact-subtitle {
		display:none;
	}
	/* Display Nav Buttons when invisible checkbox is NOT :checked */
		input[type=checkbox]:not(:checked) ~ #menu{
   	 display:block;
	}
	/* Do not Display Hamburger Icon */
	.show-menu {
		display:none;
		-webkit-appearance:none;
	}
	/* Style NAV Buttons for Desktop */
	
	/* NAV Button */
	.nav ul li {
		width:18%;
		display:inline;
  		margin: 0.4rem;
  		padding:0;
	}
  
.nav li a {
	display:inline-block;
	margin:0;
	padding: 1em 0;
	font-size:.9/1em;
	letter-spacing:2px;
	text-transform: uppercase;
	text-align:center;
	line-height:100%;
	color:#fff;
  	white-space: nowrap;
	text-decoration:none;
	}
		
	/***************************/
	/* Flex Grid Desktop */
	/***************************/
	.three-col-grid {
		display: flex;
		flex-direction:row;
		flex-wrap: wrap;
  		flex-basis: 100%;
	}
	.a-column {font-size:1.2rem;width:32%;order:0;}
	.b-column {font-size:1.2rem;width:32%;order:1;}
	.c-column {font-size:1.2rem;width:32%;order:2;}
	.d-column {font-size:1.2rem;width:32%;order:3;}
	.e-column {font-size:1.2rem;width:32%;order:4;}
	.f-column {font-size:1.2rem;width:32%;order:5;}
	
	.flex-col-grid {
		flex-direction:row;
		flex-wrap: wrap;
  		flex-basis: 100%;
	}
	
	/* flex grid breakpoint to 4 cols */
	.flex-col-grid .a-column {font-size:1.1rem;width:24%;order:0;}
	.flex-col-grid .b-column {font-size:1.1rem;width:24%;order:1;}
	.flex-col-grid .c-column {font-size:1.1rem;width:24%;order:2;}
	.flex-col-grid .d-column {font-size:1.1rem;width:24%;order:3;}
	/***************************/	
	div.sub-p4 {
		float:left;
		width:24%;
		margin-right:0;
	}
	.sub-p4 p {font-size:1.1rem;}
  
}
@media screen and (min-width:75em){ /* 1200px */
	.container {width:80%;}
	
	.top-logo img {
		width:40%;
		left:20px;
	}
	div.description { 
		float:left; 
		width:50%;
		padding-right:100px;
	}
	div.description-graphic { 
		float:left;
		width:30%;
		height:100px;
		position:relative;
		overflow:visible; 
	}	
	div.demo-reel { 
		float:left;
		width:50%;
		position:relative;
		top:10px;
		padding:0 20px 20px 20px;
	}
	div.testimonial { 
		float:left;
		width:90%;
		padding:0;
		font-size:.875em;
	}
	div.p { padding:10px 0 20px 0; }
	div.sub-p p { 
		line-height:170%;
		color:#f0f0f0;
	}
	div.sub-p {
		float:left;
		width:23%;
		margin-right:2%;
	}
	div.headshot {
		width:50%;
	}
	div.equipment { width:31%; }
	div.last {
		margin-right:0;
	}
	div.contact-last {
		margin-right:4%;
		width:50%;
	}
	div.client ul {
		width:50%;
		margin-left:20px;
		margin-right:0;
		display:inline-block;
	}
	div.client li {
		float:left;
		/*width:30%;*/ /* for cols */
		width:100%;
		padding-left:0;
		padding-right:20px;
		/*color:red;*/
	}
	div.client-list-area { width:50%; }
	div.client-img { width:35%;display:block; }	
	div.client ul { margin-right:0;padding-right:0; }
	div.client li { font-size:1.1em;}
	div.testimonial-section { width:30%; }
	div.home-quote {float:left;width:30%;margin:0;padding:10px;border-top:none;}
	div.home-quote-last {margin-bottom:5px;}
	
	div.contact-page {width:40%;/*border:1px solid blue;*/}
}

@media screen and (min-width:79.9375em){ /* 1279px */
	body { font-size:22px; }
	.container {width:70%;}
	.top-logo img {
		width:40%;
		left:20px;
	}
	div.description-graphic { 
		float:left;
		width:30%;
		height:100px;
		position:relative;
		overflow:visible; 
	}
	div.testimonial { 
		float:left;
		width:90%;
		padding:0;
		font-size:.875em;
	}
	div.p { padding:10px 0 20px 0;}
	div.sub-p p { 
		font-size:90%;
		line-height:170%;
		color:#f0f0f0;
	}
	div.sub-p {
		float:left;
		width:23%;
		margin-right:2%;
	}
	div.headshot {
		width:40%;
	}
	div.equipment { width:31%; }
	div.last {
		margin-right:0;
	}
	div.contact-last {
		margin-right:4%;
	}
	div.testimonial-section {
		margin:0 4%; 
		padding:10px;
	}
	div.client ul {
		/*width:40%;*/
		margin-left:20px;
		margin-right:0;
		display:inline-block;
	}
	div.client li {
		float:left;
		/*width:30%;*/ /* for cols */
		width:100%;
		padding-left:0;
		padding-right:20px;
		font-size:.85em;
		/*color:blue;*/
	}
	div.client-list-area { width:60%; }
	div.client-img { width:35%;margin-right:2%;display:block; }	
	div.client ul { margin-right:0;padding-right:0; }
	div.client li { font-size:.95em;/*color:aqua;*/ }
	div.home-quote {float:left;width:30%;margin:0;padding:10px;border-top:none;}
	div.home-quote-last {margin-bottom:5px;}
	div.contact-page {width:50%;/*border:1px solid lime;*/}
	
}
@media screen and (min-width:1600px) and (max-width:1899px) {

	/* flex grid breakpoint to 4 cols */
	.flex-col-grid .a-column {font-size:1.2rem;width:24%;order:0;}
	.flex-col-grid .b-column {font-size:1.2rem;width:24%;order:1;}
	.flex-col-grid .c-column {font-size:1.2rem;width:24%;order:2;}
	.flex-col-grid .d-column {font-size:1.2rem;width:24%;order:3;}
	
	div.client-list-area { width:50%; }
	div.client-img { width:35%;margin-right:2%;display:block; }	
	div.client ul { margin-right:0;padding-right:0; }
	div.client li { font-size:.95em;/*color:yellow;*/ }
}
@media screen and (min-width:1900px) {
	div.client-list-area { width:50%; }
	div.client-img {width:40%;margin-right:2%;display:block; }	
	div.client ul { margin-right:0;padding-right:0; }
	div.client li { font-size:1em;/*color:red;*/ }
}