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-color:#ffffff;
	color:#000000;
}
a:link, a:visited { color:#000000;text-decoration:none; }
a:focus, a:hover  { color:#5db5e3; }
a:active { color:#f00; }
.clear { clear:both; }
.nowrap { white-space: nowrap; }

.container { 
	width:100%;
	background-color:#ffffff;
	margin:0 auto;
	overflow:hidden;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
	-webkit-box-shadow:none;
	box-shadow:none;
}

.top-logo img {
	width:200px;
	float:left;
	position:relative;
	left:20px;
	top:10px;
	/*border:1px solid blue;*/
}
h1.top-tagline {
	color:#000000;
	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:20px;
	top:12px;
	/*border:1px solid aqua;*/
}
.section p {
	line-height:150%;
	padding:10px 20px; 
}
div.contact-subtitle {
	padding:2px 20px;
	color:#000000;
	font-size:.96em;
}
div.first-subtitle {
	padding:20px 20px 2px 20px;
}
div.description { float:left; }
div.description-graphic { display:none; }
div.demo-reel { 
	float:left;
	width:10%;
	padding:10px 0 20px 20px;
}
.demo-reel video { 
	width:5%;
	height:auto;
	border:1px solid #000;
}
div.p { width:100%; padding:10px 0 20px 0; }
div.p h2, div.description h2 {
	/*font-family:"Courier New", Courier, monospace;*/
	/*font-style:italic;*/
	text-transform:uppercase;
	letter-spacing:2px;
	font-size:100%;
	color:#000000;
	width:100%;
	padding:20px 20px .5% 20px;
	/* border-bottom:1px solid #ffc;*/
}
div.sub-p { float:none; }
div.sub-p span {
	/* color:#ff9;*/
	/*font-weight:bold;*/
	font-style:italic;
	color:#000000;
}
div.testimonial { 
	float:left;
	width:100%;
}
p.quote  { 
	margin-left:0px;
	padding:0 0 0 20px;
	color:#000000;
}

p.attribute  { 
	margin-left:14px;
	margin-top:-4px;
	margin-bottom:5px;
	color:#000000; 
}

/* http://medialoot.com/blog/how-to-create-a-responsive-.navigation-menu-using-only-css/ */

/*Strip the ul of padding and list styling*/
.nav ul {
	list-style-type:none;
	margin:0;
	padding:0;
	float:left;
	position:relative;
	top:10px;
	/*border:1px solid yellow;*/
}

/*Create a horizontal list with spacing*/
.nav li {
	display:inline;
	float:left;
	border-right:1px solid #000000;
}

/*Style for menu links*/
.nav li a {
	display:inline-block;
	margin:0;
	padding:5px 20px;
	font-size:.875em;
	letter-spacing:1px;
	text-align:center;
	line-height:100%;
	color:#000000;
	background-color:#ffffff;
	text-decoration:none;
}

.nav li.last { border-right:none; }

/*Hover state for top level links*/
.nav li:hover a {
	color:#5db5e3;
	font-weight:normal;
}

/*Display the menu on hover*/
.nav ul li a:hover + .hidden, .hidden:hover {
	display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-size:1.2em;
	text-decoration:none;
	color:#fff;
	background:#2f3036;
	text-align:center;
	padding:10px 0;
	display:none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display:none;
    -webkit-appearance:none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display:block;
}

.footer {
	color:#000000;
	width:100%;
	margin: 0 auto;
	font-size:.785em;
	letter-spacing:1px;
	background-color:#ffffff;
	padding:20px 0;
	overflow:hidden;
	/*border-top:1px solid #abe2ff;*/
	border-top:1px solid #000000;
}
.footer div {float:left;/*border:1px solid blue;*/}
.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:10px;margin:0 10px;line-height:140%;}
.footer a {color:#000000;text-decoration:none;}
.footer li a {color:#000000;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:#000000; text-decoration:none;}
.footer p.back-top a:hover {color:#5db5e3;}

/*Responsive Styles*/

@media screen and (max-width: 760px){
	.container { width:100%; }
	/*Make dropdown links appear inline*/
	.nav ul {
		position:static;
		display:none;
		width:100%;
		/*border:1px solid lime;*/
	}
	/*Make all menu links full width*/
	.nav ul li, li a {
		width:100%;
		border-right:none;
	}
	.nav li a {
		border-bottom:1px solid #ccc;
		font-size:.9em;
		padding:4px 0;
		background-color:#ffffff;
	}
	.nav a.first {
		border-top: 1px solid #ccc;
	}
	.nav li a.last { 
		margin-bottom:10px;
	}
	/*Hover state for top level links*/
	.nav li:hover a {
		color:#fff;
		background-color:#145474;
		font-weight:normal;
		border-bottom:1px solid #5db5e3;
	}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
		width:40px;
		line-height:80%;
		border-radius:5px;
		margin:0;
		padding:4px 0;
		float:left;
		position:absolute;
		left:4px;
		top:10px;
		cursor:pointer;
	}
	span.menu-label {font-size:.5em;text-transform:uppercase;letter-spacing:1px;}
	h1.top-tagline {
		margin-bottom:20px;
	}
}

@media screen and (max-width:499px){
	.container { width:100%; }
	.nav ul li, li a { width:100%; }
	.nav li a {
		border-bottom:1px solid #ccc;
		font-size:.9em;
	}

}

@media screen and (min-width:500px) and (max-width:600px){
	.container { width:100%; }
	.top-logo img {
		width:240px;
		height:34px;
	}
	/*Make dropdown links appear inline*/
	.nav ul {
		position:static;
		display:none;
		width:100%;
		/*border:1px solid orange;*/
	}
	/*Make all menu links full width*/
	.nav ul li, li a {
		width:100%;
		border-bottom:none;
	}
	div.description-graphic { display:none; }
}

@media screen and (min-width:601px) and (max-width:760px){
	.container { width:100%; }
	.top-logo img {
		width:240px;
		height:34px;
	}
	h1.top-tagline { font-size:.825em; }
	.nav ul {
		position:static;
		display:none;
		width:100%;
		/*border:1px solid darkmagenta;*/
	}
	.nav ul li, li a {
		width:100%;
		border-bottom:none;
	}
	div.description { float:left; width:60%; }
	div.description-graphic { 
		display:block;
		float:left;
		width:30%;
		position:relative;
		/*top:-80px;*/
		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:#000000;
	}
	div.sub-p {
		float:left;
		width:100%;
		/*height:100%;*/
		margin-right:2%;
		border-right:1px solid #000;
	}
	div.last {
		margin-right:0;
	}
}

@media screen and (min-width:761px){
	.top-logo img {
		/*width:400px;*/
		width:50%;
		left:20px;
	}
	h1.top-tagline {
		margin-left:0;
		font-size:.825em;
		left:20px;
	}
	div.contact-subtitle {
		float:left;
		margin-top:20px;
		padding:20px 20px 10px 20px;
		color:#000000;
		font-size:.96em;
	}
	div.description { float:left; width:60%; }
	div.description-graphic { 
		display:block;
		float:left;
		width:30%;
		height:100px;
		position:relative;
		/*top:100px;*/
		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:#000000;
	}
	div.sub-p {
		float:left;
		width:31%;
		margin-right:2%;
		border-right:1px solid #000;
	}
	div.last {
		margin-right:0;
	}

}

@media screen and (max-width:420px){
	.footer div {width:98%;}
	.footer li {float:none;}

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

}
@media screen and (min-width:1200px){
	.top-logo img {
		/*width:400px;*/
		width:40%;
		left:20px;
	}
	div.description { 
		float:left; 
		width:50%;
		padding-right:100px;
	}
	div.description-graphic { 
		float:left;
		width:30%;
		height:100px;
		position:relative;
		/*top:-200px;*/
		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:#000000;
	}
	div.sub-p {
		float:left;
		width:23%;
		margin-right:2%;
	}
	div.last {
		margin-right:0;
	}

}
/* change to 2000 min width */
@media screen and (min-width:1240px){
	body { font-size:22px; }
	.top-logo img {
		/*width:400px;*/
		width:40%;
		left:20px;
	}
	div.description-graphic { 
		float:left;
		width:30%;
		height:100px;
		position:relative;
		/*top:-200px;*/
		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:#000000;
	}
	div.sub-p {
		float:left;
		width:23%;
		/*height:100%;*/
		margin-right:2%;
	}
	div.last {
		margin-right:0;
	}
	
}