/**
 * Parallax Scrolling Tutorial
 * For Smashing Magazine
 * July 2011
 *  
 * Author: Richard Shepherd
 *		   www.richardshepherd.com
 * 		   @richardshepherd   
 */


article {font-family: 'Montserrat'; font-size: 16px; margin: 83px auto 0 auto; width: 98%; max-width:960px; position: relative;padding: 10px 12px; line-height: 1.5em; color: #efefef; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); height: 100%;}
article ul {text-align: left;}
article p { margin-bottom: 15px; text-align: left; padding: 4px 0;}
article h2 { font-family:'Museo Sans', 'Montserrat', Arial, Helvetica, sans-serif; font-size: 32px; margin-top: 0;line-height: 1em; text-transform: uppercase; font-weight: 300;}
article h3 { font-family:'Museo Sans','Montserrat', Arial, Helvetica, sans-serif; font-size: 24px; margin: 15px 0; line-height: 0.8em; text-align: left; font-weight: 100; text-transform: uppercase;}
article div, section div {margin: 0;}
.story { height: 750px; text-align: center; padding: 0; width: 100%; max-width:1920px;position: relative; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.2); box-shadow: 0 0 8px rgba(0,0,0,0.5);}
#index .story h2   {margin-bottom: 22px;}

#index .story a {text-decoration: underline;}

#overview { background: url('/images/index/slide1_bg.jpg') 50% 0 no-repeat fixed; }
#search { background: url('/images/index/slide2_bg.jpg') 50% 0 no-repeat fixed; }
#metrics { background: url('/images/index/slide3_bg.jpg') 50% 0 no-repeat fixed; }
#tools { background: url('/images/index/slide4_bg.jpg') 50% 0 no-repeat fixed; }
#uses { background: url('/images/index/slide5b_bg.png') 50% 0 no-repeat fixed ; }
#start { background: url('/images/index/slide6_bg.jpg') 50% bottom no-repeat fixed; }

#wrapper {
	width:940px;
	margin: 0 auto;
}

.ht_for_nav {
  height: 4580px;
  position: relative;
}

#nav_3 {
  color: #f1f1f1;
  left: 0;
  list-style: none;
  position: absolute;
  padding: 0;
  right: 0;
  text-align: center;
  bottom: 0;
  z-index: 10000;
	height: 65px;
	width: 100%;
	line-height:50px;
	font-family: 'Montserrat';
	font-size: 12px;
	top: 0;
  margin: 0;
  padding-left: 0;
}

#nav_3 li {
  display: inline-block;
}
#nav_3 a {
  display: block;
  font-size: 11px;
  text-decoration: none;
  background-color:rgba(0,0,0,0.8);
  color: #ccc; 
  margin: 0; 
  padding: 35px 5px 0 5px;
  width: 96px; 
  height: 40px;
  border-radius: 2px; 
  text-decoration: none; 
  position: relative;
}

#section-1 {
  padding-top: 50px;
}
.section p:last-child {
  margin-bottom: 0;
}

/**nav :hover & :selected arrow & text **/
#nav_3 a:hover:after, #nav_3 .current a:after{top: 100%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;
}
#nav_3 a:hover:after, #nav_3 .current a:after{border-top-color:rgba(0,0,0,0.6);border-width: 6px;left: 50%;margin-left: -6px;
}
#nav_3 a:hover, #nav_3 .current a{color:#f7c300;text-decoration: none; cursor: pointer;}

 
#nav_3 a.back_to_top, #nav_3 .current a .back_to_top, #nav_3 a.back_to_top:hover {
  background: none; font-size: 12px; color: #efefef; font-family: Arial, sans-serif;border: 1px dotted red;
}

#content {background: none;} 
.fixed {position:fixed;}

/**nav icons**/
#nav_3 a.overview {background: rgba(0,0,0,0.6) url('/images/index/icon_overview.png') top center no-repeat;}
#nav_3 a.overview:hover, 
#nav_3 .current a.overview{background: rgba(0,0,0,0.6) url('/images/index/icon_overview2.png') top center no-repeat;}

#nav_3 a.search {background: rgba(0,0,0,0.6) url('/images/index/icon_search.png') top center no-repeat;}
#nav_3 a.search:hover, #nav_3 .current a.search{background: rgba(0,0,0,0.6) url('/images/index/icon_search2.png') top center no-repeat;}

#nav_3 a.metrics {background: rgba(0,0,0,0.6) url('/images/index/icon_metrics.png') top center no-repeat;}
#nav_3 a.metrics:hover, #nav_3 .current a.metrics{background: rgba(0,0,0,0.6) url('/images/index/icon_metrics2.png') top center no-repeat;}

#nav_3 a.tools {background: rgba(0,0,0,0.6) url('/images/index/icon_tools.png') top center no-repeat;}
#nav_3 a.tools:hover, #nav_3 .current a.tools{background: rgba(0,0,0,0.6) url('/images/index/icon_tools2.png') top center no-repeat;}

#nav_3 a.uses {background: rgba(0,0,0,0.6) url('/images/index/icon_uses.png') top center no-repeat;}
#nav_3 a.uses:hover, #nav_3 .current a.uses{background: rgba(0,0,0,0.6) url('/images/index/icon_uses2.png') top center no-repeat;}

#nav_3 a.start {background: rgba(0,0,0,0.6) url('/images/index/icon_start.png') top center no-repeat;}
#nav_3 a.start:hover, #nav_3 .current a.start{background: rgba(0,0,0,0.6) url('/images/index/icon_start2.png') top center no-repeat;}



/* Overview w/ Video */
/*
#overview .vidbox {margin-left: 42%; height: 340px; margin-top: -330px;}
#overview article p {width: 40%; padding-top: 30px;}
#overview .textbox { height: 500px;}
*/
#overview .vidbox {height: 340px; margin-top: -5px;}
#overview article p {padding-top: 10px;}
#overview .textbox {width: 680px; margin: 0 auto 200px auto;}


/* Search */
#search p {width: 680px; margin: 20px auto; font-size: 18px;}
.search_list {font-size: 18px; margin: 0 auto 0 120px; width: 780px;}
.search_list li {margin-bottom: 10px;}


/* Metrics */
#metrics .illustration { background: transparent url('/images/index/metrics_graphic2.png') top center no-repeat; min-height: 560px; padding: 0;width: 100%; max-width: 855px; position: relative; margin: 0 auto; border: 1px solid transparent;}
.bubble p {font-size: 14px;line-height: 18px; margin: 0;}
.bubble h5{font-size: 21px; padding:0px; margin: 0px; text-align: left; text-transform: uppercase;font-weight: 100;}
.reach {width: 240px; margin:15px 0 0 237px; height:113px;}
.engagement {width: 205px; margin: -56px 0 0 612px; height:104px;}
.content {width: 210px; margin: 17px 0 0 25px; height:104px;}
.contribs {width: 240px; margin: 140px 0 0 280px; height:100px;}


/* Tools */
#tools #tools_slide1 {font-size: 18px; line-height: 1.6em;}
#tools ul.snapshot { width: 360px; float: left; margin-left: 0px; padding: 0;}
#tools ul.tracker { width: 380px; float:left; margin-left: 75px; padding: 0;}
#tools ul.snapshot li, #tools ul.tracker li { margin-left: 30px;}
#tools #tools_slide1 h3 {background: url('/images/index/chalk_outline_horiz.png') top left  no-repeat; top:0;height: 68px; padding-top: 24px;}
.subtitle {font-size: 16px; line-height: 2em;text-transform: none;}
#tools #tools_slide1 img {margin:-10px 10px 0 24px;float: left; }
.matrix  {width: 630px; text-align: left;margin: 0 auto ; padding-right: 25px;}
.matrix td {font-size: 14px;}
td.headings {padding-left: 28px;}
td.bg {background: url('/images/index/chalk_outline_vert.png') top center no-repeat; text-align: center; padding: 20px 0; font-size: 16px;}
td.top_headings {text-align: center; }
td.snapshoticon {background: url('/images/index/icon_snapshotpie_sm.png') top left no-repeat; height: 50px;width: 180px; font-size:19px;text-decoration: underline;}
td.trackericon {background: url('/images/index/icon_trackergraph_sm.png') top left no-repeat; height: 50px;width: 160px; font-size: 19px;text-decoration: underline;}

/* Uses */ 
#uses .tall {height: 580px;}
.thumblinks {float:left; margin: 0 0 10px 0;}
.thumblinks h4, .thumblinks h4 a, .external_links h4{font-size:14px; padding:0; margin: 0; line-height: 1em; font-weight: 100;color: #fbf9d5;text-decoration: none;}
.case_studies {margin: 60px 0; width: 920px;}

.case_study_indiv img {float: left; }
.case_study_indiv div{float: left; width: 360px; margin-left: 55px; height: 380px;background: url('/images/index/quote.png') top center no-repeat;}
.external_links {font-size: 14px; text-align: left; margin: 0 auto;}
.external_links img {padding: 0; margin:0; float: right;  }
.external_links a, .case_study_indiv a {color: #333; text-shadow: none;}
.external_links a:hover, .case_study_indiv a:hover {text-decoration: underline;}
.external_links div {margin-bottom: 20px;}
.external_links p {width: 600px;  clear: both; float: left; line-height: 1.4em; margin: 0 0 0 20px;top:0;}
.external_links h4 {float: left; font-size: 19px;}


/* Start */
#start article {color: #222;text-shadow: 0 1px 0 rgba(255,255,255,0.3);}
#start h3 {font-size: 18px;color: #efefef; text-align: center; text-transform: none;text-shadow: 0 -1px 0 rgba(0,0,0,0.3); margin-top: 12px;}
.matrix_2  {width: 900px; text-align: left;margin: 0 auto;}
td.bg_pro {background: url('/images/index/ribbon_purple.png') top center no-repeat; text-align: center; padding:8px 0px 18px 0; font-size: 19px; line-height: 2em; margin-right: 100px;}

td.bg_free {background: url('/images/index/ribbon_blue.png') top center no-repeat; text-align: center; padding:8px 0px 18px 0; font-size: 19px; line-height: 2em;}

td.bg_none {background: url('/images/index/ribbon_grey.png') top center no-repeat; text-align: center; padding:8px 0 18px 0; font-size: 19px; line-height: 2em;}

.feature_col {font-size: 17px; line-height: 2em;}
.feature_col_empty {height: 74px;display: block;}

.heading_subtitle {padding: 0px; margin:10px auto 0px auto; font-size: 14px; color: #999; text-align: center; width: 180px; line-height: 1.5em;}

#start a.action_button {background: url('/images/index/button_blue.png') top center no-repeat; height: 30px; text-align: center; font-size: 15px;text-transform: uppercase;color: #efefef;text-shadow: 0 -1px 0 rgba(0,0,0,0.3); text-decoration: none; margin: auto; display: block; padding-top: 5px;}



/*** Slides css ***/
.sp-slideshow {
  position: relative;
	margin: 10px auto;
	width: 100%;
	max-width: 1800px;
	min-width: 260px;
	height: 510px;
}

.sp-content {
  background: none;
	position: relative;
	height: 100%;
	overflow: hidden;
	margin: 0 auto; 
	width: 960px;
}

.sp-slideshow input {
  position: absolute;
	bottom: 15px;
	left: 50%;
	width: 9px;
	height: 9px;
	z-index: 10000;
	cursor: pointer;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}

.sp-slideshow input + label {
  position: absolute;
  bottom: 15px;
	left: 50%;
  width: 6px;
	height: 6px;
	display: block;
	z-index: 1000;
	border: 3px solid #fff;
	border: 3px solid rgba(255,255,255,0.9);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: background-color linear 0.1s;
  -moz-transition: background-color linear 0.1s;
  -o-transition: background-color linear 0.1s;
  -ms-transition: background-color linear 0.1s;
  transition: background-color linear 0.1s;
}
.sp-slideshow input:checked + label {
	background-color: #fff;
  background-color: rgba(255,255,255,0.9);
}

.sp-selector-1, .button-label-1 {
    margin-left: -36px;
}
.sp-selector-2, .button-label-2 {
    margin-left: -18px;
}
.sp-selector-4, .button-label-4 {
    margin-left: 18px;
}
.sp-selector-5, .button-label-5 {
    margin-left: 36px;
}
.sp-selector-6, .button-label-6 {
    margin-left: 54px;
}

.sp-arrow {
  position: absolute;
  display: block;
	top: 50%;
	width: 58px;
	height: 58px;
	margin-top: -19px;
	display: none;
	opacity: .6;
	cursor: pointer;
	z-index: 1000;
	background: none;
	-webkit-transition: opacity linear 0.3s;
  -moz-transition: opacity linear 0.3s;
  -o-transition: opacity linear 0.3s;
  -ms-transition: opacity linear 0.3s;
  transition: opacity linear 0.3s;
}
.sp-arrow:hover{
	opacity: .8;
}
.sp-arrow:active{
	margin-top: -18px;
}
.sp-selector-1:checked ~ .sp-arrow.sp-a2,
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
.sp-selector-4:checked ~ .sp-arrow.sp-a5,
.sp-selector-5:checked ~ .sp-arrow.sp-a6 {
  right: 5px;
	display: block;
	background: url('/images/index/icon_right_next.png') top center no-repeat;
}
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
.sp-selector-5:checked ~ .sp-arrow.sp-a4,
.sp-selector-6:checked ~ .sp-arrow.sp-a5 {
  left: 5px;
	display: block;
	background:url('/images/index/icon_left_prev.png') top center no-repeat;
}

.sp-slideshow input:checked ~ .sp-content {
    -webkit-transition: background-position linear 0.6s, background-color linear 0.8s;
    -moz-transition: background-position linear 0.6s, background-color linear 0.8s;
    -o-transition: background-position linear 0.6s, background-color linear 0.8s;
    -ms-transition: background-position linear 0.6s, background-color linear 0.8s;
    transition: background-position linear 0.6s, background-color linear 0.8s;
}

.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
    -webkit-transition: background-position linear 0.7s;
    -moz-transition: background-position linear 0.7s;
    -o-transition: background-position linear 0.7s;
    -ms-transition: background-position linear 0.7s;
    transition: background-position linear 0.7s;
}

.sp-slider {
  position: relative;
	left: 0;
  width: 600%;
	height: 100%;
	list-style: none;
  margin: 0;
	padding: 0;
    -webkit-transition: left ease-in 0.8s;
    -moz-transition: left ease-in 0.8s;
    -o-transition: left ease-in 0.8s;
    -ms-transition: left ease-in 0.8s;
    transition: left ease-in 0.8s; 
}

.sp-slider > li {
	color: #fff;
	width: 860px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	height: 100%;
	margin: 0 30px 0 70px;
  float: left;
	text-align: center;
	opacity: 1;
    -webkit-transition: opacity ease-in 0.4s 0.8s;
    -moz-transition: opacity ease-in 0.4s 0.8s;
    -o-transition: opacity ease-in 0.4s 0.8s;
    -ms-transition: opacity ease-in 0.4s 0.8s;
    transition: opacity ease-in 0.4s 0.8s; 
}
.sp-slider > li img{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	margin: 0 auto;
	padding: 0;
	max-height: 100%;
	max-width: 100%;
}
input.sp-selector-1:checked ~ .sp-content .sp-slider {
    left: 0;
}

input.sp-selector-2:checked ~ .sp-content .sp-slider {
    left: -100%;
}

input.sp-selector-3:checked ~ .sp-content .sp-slider {
    left: -200%;
}

input.sp-selector-4:checked ~ .sp-content .sp-slider {
    left: -300%;
}

input.sp-selector-5:checked ~ .sp-content .sp-slider {
    left: -400%;
}
input.sp-selector-6:checked ~ .sp-content .sp-slider {
    left: -500%;
}

input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5),
input.sp-selector-6:checked ~ .sp-content .sp-slider > li:nth-child(6){
	opacity: 1;
}
@media screen and (max-width: 840px){
	.sp-slideshow { height: 345px; }
}
@media screen and (max-width: 680px){
	.sp-slideshow { height: 285px; }
}
@media screen and (max-width: 560px){
	.sp-slideshow { height: 235px; }
}
@media screen and (max-width: 320px){
	.sp-slideshow { height: 158px; }
}



/** @font-face**/
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url('//themes.googleusercontent.com/static/fonts/montserrat/v2/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff') format('woff');
}

@font-face {
  font-family: 'Museo Sans';
  font-style: normal;
  font-weight: 500;
  src: local('Museo Sans 500'), local('Museo Sans 500');
}





.top {
	position:fixed;
	right:15px;
	bottom:15px;
	width:50px;
	height:25px;
	padding-top:25px;
	line-height:25px;
	background:#333;
	color:#eee;
	display:block;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	font-size:14px;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	z-index: 1008;
  display: none;
}
a.top {color: #333;}

.top:before {
	position:absolute;
	top:11px;
	left:14px;
	content:"";
	border-bottom:11px solid #888;
	border-left:11px solid transparent;
	border-right:11px solid transparent;
}

.top:hover {
	color:#eee;
}

.top:hover:before {
	border-bottom-color:#eee;
}

.opacity .top {
	opacity:.4;
	-webkit-transition:opacity 700ms linear;
	-moz-transition:opacity 700ms linear;
	transition:opacity 700ms linear;
}

.sticky #nav_3 {
	position:absolute;
	bottom:100%;
	left:0;
	width:100%;
}