html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }

i {font-style: italic;}

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }


/**
 * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
 */

body { font:15px/1.5 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */
select, input, textarea, button { font:99% sans-serif; }

/* Normalize monospace sizing:
   en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre, code, kbd, samp { font-family: monospace, sans-serif; }


/**
 * Minimal base styles.
 */

/* Always force a scrollbar in non-IE */
html { overflow-y: scroll; }

/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }

ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }

/* Remove margins for navigation lists */
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }

small { font-size: 85%; }
strong, th { font-weight: bold; }
em { font-style: italic; }

td { vertical-align: top; }

/* Set sub, sup without affecting line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre {
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre; white-space: pre-wrap; word-wrap: break-word;
  padding: 15px;
}

textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */

.lt-ie8 legend { margin-left: -7px; } 

/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.lt-ie8 input[type="checkbox"] { vertical-align: baseline; }
.lt-ie8.lt-ie7 input { vertical-align: text-bottom; }

/* Hand cursor on clickable input elements */
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea { margin: 0; }

/* Colors for form validity */
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid {
   border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }


/* These selection declarations have to be separate
   No text-shadow: twitter.com/miketaylr/status/12228805301 */
::-moz-selection{ background: #0aa9be; color:#fff; text-shadow: none; }
::selection { background:#0aa9be; color:#fff; text-shadow: none; }

/* j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #0aa9be; }

/* Make buttons play nice in IE:
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }

/* Bicubic resizing for non-native sized IMG:
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.lt-ie8 img { -ms-interpolation-mode: bicubic; }
 
/* End Reset */

/* +Globals */

img { max-width: 100%; }

html { min-width: 980px; }
body { 
	background: #fdfdfd; 
	border-top: 6px solid #000; 	
}
body, input { font-family: "proxima-nova-1","proxima-nova-2",Segoe,Segoe UI,Frutiger,"Frutiger Linotype","Myriad Pro",Myriad,Univers,Tahoma,"Gill Sans","Gill Sans MT","DejaVu Sans Condensed","Liberation Sans","Nimbus Sans L",Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif; }

#wrapper { width: 100%; overflow: hidden; }


a {
	color: #5b9bb3;
	text-decoration: none;
}
	a:hover {
		text-decoration: underline;
	}

h1, h2, h3, h4, h5, h6 {
	position: relative;
	display: block;
}
h1, .h1 { font-size:52px; }
h2 , .h2{ font-size:24px; }
h3 , .h3{ font-size:18px; } 
h4, .h4 { font-size:16px; }
h5, .h5 { font-size:14px; }
h6, .h6 { font-size:13px; font-weight: normal; }
h1, h2, h3, h4, h5, h6 { margin: 30px auto; }	
p, ul { margin: 0 auto 15px; font-size: 14px; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none;}

hr { margin: 0 auto 14px; border: none; height: 1px; background: none; border-bottom: 1px solid #d2d2d2; }

.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.mid { text-align: center; }

.half, .third, .twothird { float: left; position: relative; }
.half { width: 50%; }
.half--tweets { width: 90%; margin-top: 25px; margin-botom: 25px;}
.third { width: 33.3%; }
.twothird { width: 66.6%; }

.wrap { width: 970px; margin: 0 auto; }

/* basic clearfix - comes in many flavours! */
.clearfix:after, .fix:after, .group:after, .row:after, .gw:after, .media:after {
    content: "";
    display: table;
    clear: both;
}

.social { float: right; }
a.facebook, a.twitter, a.interviews { min-height: 18px; position: relative; color: #eeefef; cursor: pointer; padding-left: 34px; text-decoration: none;}
a.facebook.button, a.twitter.button, a.interviews.button { padding: 5px 14px; }
a.facebook:before, a.twitter:before, a.interviews:before { display: block; position: absolute; left: 4px; top: 50%; content: ""; }
a.facebook.button { padding-left: 47px;}
a.facebook:before { margin-top:-9px; height: 17px; left: 10px;width: 9px; background: url(../images/facebook-icon.png) 0 0 no-repeat; }
a.facebook.button:before { left: 14px; }
a.twitter.button { padding-left: 57px;}
a.twitter:before { margin-top:-7px; height: 14px; width: 20px; background: url(../images/twitter-icon.png) 0 0 no-repeat; }
a.twitter.button:before { left: 12px; }
a.interviews.button { padding-left: 57px;}
a.interviews:before { margin-top:-9px; height: 17px; left: 0px;width: 23px; background: url(../images/interviews-icon.png) 0 0 no-repeat; }
a.interviews.button:before { left: 12px; }
a.facebook.button:after, a.twitter.button:after, a.interviews.button:after { display: block; width: 1px; content: ""; background: #058099; height: 100%; position: absolute; top: 0; border-right: 1px solid #95d7f0; }
a.facebook.button:hover:after, a.twitter.button:hover:after, a.interviews.button:hover:after { background: #016f85; border-right: 1px solid #3398a7; }
a.facebook.button:after { left: 37px; }
a.twitter.button:after { left: 42px; }
a.interviews.button:after { left: 46px; }

#header { min-height: 104px; border-bottom: 1px solid #d2d2d2; }
	#header #title { float: left; }
	#header h1, #header p { margin: 0; padding: 0;  }
	#header h1 { color: #191f1f; line-height: 1.1; padding-top: 20px; display: inline-block; font-weight: bold; }
	#header p { color: #616161; padding-left: 0.4em; padding-bottom: 7px; }
	#header .social { padding-top:35px; margin-right: -15px;}
			#header .social a.button { margin-right: 15px; float: left; }
	

#hero { min-height: 675px; }
	#hero #bookpic { float: right; margin-right: -52px; margin-bottom: 30px; margin-top: 50px;}
	#free {padding-top: 8px;}
	#bonus {padding-top: 8px;}
	#ctabox { padding-top: 45px; width: 592px; text-align: center; }
		#ctabox h2, #ctabox h3 { font-weight: normal; margin: 0; }	
		#ctabox h2 { 
		    font-family: "Proxima Nova Regular"
		    line-height: 1; 
		    color: #383838; 
		    font-size: 28px;
		    margin: 0px auto 0;
		}
		#ctabox h3 { padding: 5px 40px 0; margin-bottom: 20px; color: #2d2d2d; }
		#ctabox img { display: block; margin: 0 auto 10px; }
		#ctabox fieldset { 
			padding: 30px 17px 20px; 
			border: 1px solid #989898; 
			position: relative; 
			margin: auto;
			width: 75%;
			text-align: center;
			-moz-border-radius: 7px;
			-webkit-border-radius: 7px;
			border-radius: 7px;
		}
			#ctabox fieldset legend { background: #fff; padding: 5px 14px; display: block; margin: 0 auto; text-align: center; }
			.lt-ie9 #ctabox fieldset legend { margin: -45px auto 25px; }
			#ctabox input[type="text"], #ctabox input[type="email"] { 
				width: 200px; 
				padding: 5px 0 5px 11px; 
				margin-right: 9px; 
				height: 23px; 				
				font-size: 13px;
				line-height: 1.5; 
				color: #959595; 
				border: 1px solid #949494;
				box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
				-moz-border-radius: 3px;
				-webkit-border-radius: 3px;
				border-radius: 3px;
				}
				#ctabox input[type="text"]:focus, #ctabox input[type="email"]:focus { 
					color: #000; 
					outline: medium none;
					border: 1px solid #76caef; 
					-moz-box-shadow: 0 0 5px #76caef;
					-webkit-box-shadow: 0 0 5px #76caef;
					box-shadow: 0 0 5px #76caef;
				}
			#ctabox input.button { margin-right: -3px; }
	#interviews { position: relative; top: -25px; padding-top:20px;padding-bottom:20px; }
		#interviews h3 { color: #4a4a4a; margin: 0 0 3px; }
		#interviews h4 { color: #353535; font-size: 16px; margin: 40px 0 4px; line-height: 1;}
		#interviews h5 { color: #4e4e4e; font-size: 12px; margin:0; line-height: 1;}
#interviews .third { margin-bottom: 10px; }
#interviews hr { clear: both; }
		.int-box { 
			padding: 6px; 
			border: 1px solid #d2d2d2; 
			margin: 0 7px 0 0; 
			overflow: hidden; 
		}
			.int-box .photo { 
				background: #ddd;
				display: block; 
				width: 146px; 
				height: 116px; 
				overflow: hidden; 
				float: left; 
				margin-right: 11px;
			}
	.people-wrap {
		display: block;
		position: relative;
		white-space:nowrap;
		overflow: visible;
		width: 100%;
	}
		.people-group {
			-webkit-transition: opacity 0.3s ease-in-out;
			-webkit-transition-delay: 0;
			-moz-transition: opacity 0.3s ease-in-out 0;
			-o-transition: opacity 0.3s ease-in-out 0;
			transition: opacity 0.3s ease-in-out 0;
			vertical-align: top;
			display: inline-block;
			white-space: normal;
			width: 100%;
			opacity: 0;
		}
		
		.no-js .people-group,
		.people-group.is-active {
			opacity: 1;
		}
		 .people-group.is-first {
			-webkit-transition: margin-left 0.3s,opacity 0.3s;
			-moz-transition: margin-left 0.3s,opacity 0.3s;
			-o-transition: margin-left 0.3s,opacity 0.3s;
			transition: margin-left 0.3s,opacity 0.3s;
		}
		
		.slider-nav {
/*
			-moz-border-radius: 50%;
			-webkit-border-radius: 50%;
			border-radius: 50%;
			border: 1px solid #95d7f0;
*/
			
			display: block;
			position: absolute;
			cursor: pointer;
			margin-top: -21px;
			height: 42px;
			width: 42px;
			top: 50%;
			z-index: 5;
		}
		.slider-nav--next {
/*			background: #fff url(../images/action-arrow.png) 55% 50% no-repeat; */
			right: -50px;
		}
		.slider-nav--prev {
/*			background: #fff url(../images/action-arrow-rev.png) 45% 50% no-repeat; */
			left: -60px;
		}
		.slider-nav:hover {
			background-color: #f2f2f2;
		}


#modals { 
    background: #f2f2f2;
	min-height: 354px; 	
	position: relative;
	}	
	#modals:before { display: block; position: absolute; width: 100%; content: ""; left: 0; top: -13px; height: 13px; }
	#modals .wrap { overflow: hidden; position: relative; }
	#modals .wrap:before {
		display: block; position: absolute; width: 100%; content: ""; left: 0; top: -33%; height: 100%;
	}
	#modals h3 { text-transform: uppercase; font-weight: bold; color: #3d3835; height: 28px; }
	#modals p { color: #4a4a4a; line-height: 1.42; margin-right: 30px;}
	
	#mod1 h3 { padding-left: 46px; background: url(../images/icon_graph.png) 0 50% no-repeat; }
	#mod2 p, #mod2 .action, #mod2 > * { margin-left: 10px; margin-right: 30px; }
	#mod2 h3 { margin-left: 10px; padding-left: 62px; background: url(../images/icon_customers.png) 0 50% no-repeat;  }
	#mod2 {padding-top:45px;}
	#mod2 img.profile {float: left; margin-bottom:10px;}
	#mod2 .ptop {padding-top: 10px;}
	#mod2 .ptop2 {padding-top: 20px;}
	#mod3 { margin-left: 3%; width: 30.3%; }
		#mod3 h3 { padding-left: 53px; background: url(../images/icon_discussion.png) 0 50% no-repeat; }

	.blogpost h2 { color: #262626; font-size: 16px; font-weight: bold; margin: -0.2em 0 0.7em; }
	.blogpost p { font-style: normal; }
		
#footer { background: #191e1f; color: #9e9993; font-size: 13px; line-height: 16px; }
	#footer h4 { color: #e5e1d6; }
	#footer ul { list-style: none; margin: 0; padding: 0; }
	#footer .author { margin-bottom: 25px; }
		#footer .author strong { text-decoration: none; font-weight: normal; color: #95d7f0; }
		#footer .author img { float: left; }
		#footer .author p { padding-left: 120px; margin: 0; }
		#footer .author a { color: #AAA; }
	#footer .copyright { background: #131718; min-height: 66px; clear: both; overflow: hidden; }
		#footer .copyright p { margin: 0; line-height: 66px; float: left; }
	#tweet-spacer {padding-bottom: 25px;}
	#footer .copyright .social { line-height: 66px; font-size: 14px; margin-right: -30px;}
			#footer .social a { 
			        display: inline-block;
				margin-right: 50px; 
				padding-top:4px; 
				padding-bottom: 4px; 
				padding-right: 5px; 
				-moz-border-radius: 4px;
				-webkit-border-radius: 4px;
				border-radius: 4px;
			}
				#footer .social a:hover { 					
					color: #fff;
					box-shadow: 0 0 6px #2d3638;
				}
		
a.action { font-size: 14px; display: block; cursor: pointer; color: #1a1f20; padding-left: 20px; background: url(../images/action-arrow.png) 0 50% no-repeat; text-decoration: none;}
	a.action:hover { color: #444; }

.button-wrap {
	text-align: center;
	display: block;
}
	.button-wrap .button {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		width: 45%;
		margin-left: 10px;
		margin-right: 10px;
	}

.button, input.button {
	outline: none;
	text-align: center; 
	padding: 7px 14px;
	display: inline-block; 
	position: relative;
	border: 1px solid #7cafc2;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
	background: #95d7f0;
}
	.button:hover {
		text-decoration: none;
		background: #7cafc2;
	}
	.button:active {
		background: #036979;
		color: #eee;
	}
	
	.button--lrg {
		box-shadow: none;
		text-shadow: none;
		font-size: 18px;
		padding-bottom: 10px;
		padding-top: 10px;
		margin-bottom: 7px;
	}
	
	.button--wire {
		color: #95d7f0;
		border-color: #95d7f0;
		-pie-background: none;
		background: none;
	}
		.button--wire:hover {
			background: #f7f7f7;
		}
		.button--wire:active {
			color: #95d7f0;
			background: #fff;
		}
	
@media only screen and (max-width:768px) {
	html { min-width: 320px; }
	.wrap, .half, .third, .twothird  { width: 95%; float: none; }
		.half .half { width: 50%; float: left; }
		.half--tweets { width: 100%; padding-top: 45px; margin-bottom: 0px;}
	#header #title { padding-left: 10px; }
	#header .social { padding-top:15px; margin-right: -2px;}
		#header .social a.button { margin-right: 5px; margin-bottom: 7px; float: right; clear: both; }
	#hero #bookpic { float: none; display: block; margin: 0 auto 20px; }
	#hero #ctabox { width: 90%; margin: -80px auto 20px; float: none; }
		#ctabox form input { float: none; display: block; width: 100%; margin: 0 auto 5px; }
		#ctabox input[type="text"], #ctabox input[type="email"] { width: 95%; margin-right: auto; }
	#modals { padding-bottom: 30px; margin-bottom: -30px; }
	#mod3 { width: 95%; margin: 0 auto; }	
	#ctabox input.button { margin-right: 0; }
	#interviews { top: 0; margin: 0 10px 14px;}
		#interviews .int-box { margin: 0 auto 7px; }
	#footer h4 { clear: both; padding-top: 20px; }
	#footer .copyright p { font-size: 12px; }
	
	.button-wrap .button {
		width: 40%;
	}
}
@media only screen and (max-width:574px) {
	.button-wrap .button {
		width: 45%;
		margin-left: 2%;
		margin-right: 2%;
	}
	.button--lrg {
		font-size: 16px;
	}
}
@media only screen and (max-width:488px) {
	#header .social { margin-right: -5px; }
	#header .social a.button { padding-top: 10px; font-size: 11px; }
	#footer .social { float: left; clear: both; margin-right: 0; }	
		#footer .social a { 
			margin-right: 10px; 
			font-size: 11px;
		}
		
	.button-wrap .button {
		margin-right: auto;
		margin-left: auto;
		display: block;
		width: auto;
	}
}

@media only screen and (max-width:433px) {
	#header h1 { font-size: 48px; }
	#header .social { display: none; visibility: hidden; }
}