/*
* iShow Tour - Page Specific Styles
* Author: Stephen Scaff
* 8/10/2013
*/



body{
background: #ECF5F7;
overflow-x: hidden;
}


/*------------------------------------------------
Links - colors, transitions defined in style.css
================================================== */

a{color: #33ADCC;}
a:hover{color: #bfd5db;text-decoration: none;}
a:active{color: #33ADCC;text-decoration: none;}
a:focus{color:#33ADCC;outline:0}



/*------------------------------------------------
Color Classes - from color glossary
================================================== */

.grey{color:  #4c4a47;}
.lightgrey{color: #c4bdae;}
.white { color: #fff;}
.white-bg{background:#fff}
.grey-blue-bg{ background: #bfd5db;}
.grey-blue{ color: #93abb7;}
.blue-bg{background:#33ADCC}
.blue{color:#33ADCC}
.light-blue-bg{background: #7ECDE0}
.navy-bg{background:#060d15;}
.navy{color:#060d15;}

.js-hide{
  opacity: 0;
}

/*------------------------------------------------
Mobile Menu
================================================== */

/* Offcanvas Mobile Nav */
.menu-btn{
	position: relative;
	color: #fff;
	margin: 0;
	z-index: 999999;
	cursor: pointer;
}

.icon-menu-2{
	font-size: 1.4em;
	font-weight: 100 !important;
	position: relative;
	z-index: 9999;
}
.icon-menu-2:hover{
  color: #eee;
}
.mdrawer{
  background: #111 !important;
}
.dark-bg{
  background: #111 !important;
}
.pushy-active{
  background: #111;
}
.pushy{
  background: #111 !important;
}
.mobilenav{
  position: fixed;
  width: 300px;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 9999;
  background: #111 !important;
  font-size: 0.9em;
  font-weight: bold;
  -webkit-box-shadow: inset 10px 0 6px -9px rgba(0,0,0,0.7);
  -moz-box-shadow: inset -10px 0 6px -9px rgba(0,0,0,0.7);
  box-shadow: inset 10px 0 6px -9px rgba(0,0,0,0.7);
}
.mobilenav p{
font-family: "lovelo_black", proxima-nova, helvetica, arial, sans-serif;
  color: #eee;
  padding: 1em 1em 0 1.4em;
  font-weight: 400;
}
.mobilenav a{
	display: block;
	color: #b3b3b1;
	padding: 15px 30px;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	border-top: 1px solid rgba(255,255,255,0.1);
	text-decoration: none;
}

.mobilenav a:hover{
  background: #00aabb;
  color: #FFF;
}
.mobilenav ul{list-style-type: none;}

/* Menu Movement */
.mobilenav-right{
	-webkit-transform: translate3d(300px,0,0);
	-moz-transform: translate3d(300px,0,0);
	-ms-transform: translate3d(300px,0,0);
	-o-transform: translate3d(300px,0,0);
	transform: translate3d(300px,0,0);
}

.pushy-open{
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.container-push {
	-webkit-transform: translate3d(-300px,0,0);
	-moz-transform: translate3d(-300px,0,0);
	-ms-transform: translate3d(-300px,0,0);
	-o-transform: translate3d(-300px,0,0);
	transform: translate3d(-300px,0,0);
}

/* Menu Transitions */
.mobilenav, #content-slide{
	-webkit-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;

}

/* Site Overlay */
.site-overlay{
  display: none;
}

.pushy-active .site-overlay{
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 200px;
	z-index: 999;
}



/*------------------------------------------------
Nav and Logo
================================================== */  


#nav{
	list-style: none;
	position: fixed;
	left: .1em;
	top: 1em;
	z-index: 9999;
	display: block;
}

#nav li{
  background: #0ab;
  border-radius: 5em;
  height: 1em;
  width: 1em;
  margin: 1em;
  display: block;
  cursor: pointer;
}

#header-bar{
	position: fixed !important;
	width: 100%;
	display: block;
	top: 0;
	z-index: 9999;
	background: #060d15; /*#0c1d31*/
	/*background: rgba(6, 13, 21, 0.6);#060d15*/
		background: rgba(0,0,0, 0.0);
	/*border-bottom: 1px solid rgba(0, 170, 187, .2);*/
    -webkit-font-smoothing: antialiased;
   -webkit-backface-visibility:  hidden;
   -webkit-perspective: 1000;
}

#header-bar{
	position: fixed !important;
	width: 100%;
	display: block;
	top: 0;
	z-index: 9999;
	background: #060d15; /*#0c1d31*/
	/*background: rgba(6, 13, 21, 0.6);#060d15*/
		background: rgba(0,0,0, 0.5);
	border-bottom: 1px solid rgba(0, 170, 187, .5);
    -webkit-font-smoothing: antialiased;
   -webkit-backface-visibility:  hidden;
   -webkit-perspective: 1000;
}

#header-bar, #header-bar nav, #header-bar nav li a, #header-bar #logo{
	-webkit-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}
 
 
#header-bar .row{
	padding:  0 2em !important;
}
#header-bar.sticky{
  background: #060d15;
}
h1#logo { 
	font-size: 2em;
	width: em; 
	margin: 0;
	float: left;
	padding-top: .4em;
}

nav {
	padding: 2.1em 0 .7em;
	float: right;
}

nav ul li {
	list-style: none;
	float: left;
	display: block;
}

nav ul li a {
	display: block;
	font-size: 1.4em;
	color: #fff;
	font-weight: 600;
	text-shadow: -1px 1px 0px rgba(0,0,0,0.9);
}

nav ul li a:hover {color: #33adcc;}

/*Title elements
------------------------------------------------ */
.section-title{
	text-align: center;
	margin: 5em 0 2em ;
}
.section-title h3{
	font-family: "lovelo_black", proxima-nova, helvetica, arial, sans-serif;
	font-size: 2.5em;
   margin: -0.6em auto .4em;
  padding: 0 2em;
	display: table;
	text-align: center;
	font-weight: 400;
	text-transform: uppercase;
}
.section-title p{
	font-size: 1.4em;
	text-shadow: -1px 1px 0px #fff;
}
.section-title img{
	margin: 0em 0 1em;
}
.divline{border-top: 2px groove white;}
.divline h3{
	background: #ECF5F7;
	margin: -0.6em auto .4em;
	padding: 0 4em;
}
.divline h4{
	font-family: "lovelo_black", proxima-nova, helvetica, arial, sans-serif;
	background: #ecf5f7;
	display: table;
	text-align: center;
	margin: -0.6em auto 0em;
	padding: 0 2em;
	text-transform: uppercase;
}

.blue-bg .divline h3{background: #33ADCC;}
.light-blue-bg .divline h3{background: #7ECDE0;}
.grey-blue-bg .divline h3{background: #bfd5db;}
.blue-bg .divline h3{background: #bfd5db;}



#title-section{
	padding: 1em;
	margin: 0 0 3em;
	
}
#title-section h2{
	-webkit-hyphens: none !important;
	-epub-hyphens:   none;
	-moz-hyphens:    none;
	hyphens:         none;
}

.btn-section h3{
   font-size: 2em;
   font-family: "lovelo-black", proxima-nova, helvetica, arial, sans-serif;
}
.btn-section{
  padding: 2em 0 3em;
  box-shadow: inset 0 0px 2px rgba(0,0,0,0.275)
}

.btn-div {

padding: 1em 0 3em;
margin: 2em auto 0;
}
.btn-div h3{
  font-family: "lovelo-black", proxima-nova, helvetica, arial, sans-serif;
}
/* ==============================================

Mastheads & Banners

=================================================*/
/*
#masthead{
  background: #000 url('../images/hero1.jpg');
  background-position: 50% 0%;
  background-attachment: fixed;
  background-size: 100%;
  padding: 15% 0 29%;
  border-bottom: 7px solid #060D15;
}
*/
#masthead{
   background: url('../images/bg-phone1.jpg') no-repeat 50% top;
   padding: 20% 0 35%;
   border-bottom: 1px solid #333;
   background-attachment: fixed;
   background-size: 104%;
}

/*  Hero-section
================================================== */ 

#hero-section{
  position: fixed;
  width: 100%;
  z-index: 1;
  top: 0;
  padding: 2% 0 12%;
}

#hero-section #intro { 
	padding: 12% 0 19%;
	color: #fff;
}

#hero-section h2{
	font-size: 3.8em !important;
	color: #fff;
	color: rgba(255,255,255,0.7);
	font-weight: 600;
	text-shadow: -1px 1px 5px #000;
	margin: .4em auto .4em;
	letter-spacing: -1px;
	font-family: "lovelo-black", proxima-nova, helvetica, arial, sans-serif;
	padding: .3em .4em .1em;
	display: block;
}

#hero-section h3{
  font-size: 1.7em;
  color: rgba(255,255,255,0.9);
  font-family: proxima-nova, helvetica, arial, sans-serif !important;
  display: block;
  margin: 2% 0 0;
  text-align: left;
  text-shadow: -1px 1px 1px rgba(0,0,0,0.3);
}
#hero-section h4{
  font-size: 3em !important;
  padding: 0;
  font-family: proxima-nova, helvetica, arial, sans-serif !important;
  display: block;
  margin: .4em 0 0em;
  text-align: left;
  font-weight: 600;
  text-shadow: -1px 1px 1px rgba(0,0,0,0.3);
}
#hero-section h5{
  font-size: 3em;
  text-align: left;
  font-family: proxima-nova, helvetica, arial, sans-serif !important;
  padding: 0;
  margin: .1em 0 0.4em;
  display: block;
  max-width: 60%;
  text-shadow: -1px 1px 1px rgba(0,0,0,0.3);
}

#hero-section .icon-down-chev{
  font-size: 4em !important;
  color: rgba(255,255,255,0.3);
 
}
.down{
  padding-top: 3em !important;
  position: relative;
  top: 1em;
}




#page-content{
  position: relative;
  z-index: 1;
  background: #ECF5F7;
 
}

/* Title Section
-----------------------------------------------*/
#title-section{
	position: relative;
	display: block;
  margin: 0;
	/*margin-top: 35em;*/
	width: 100%;
	padding: 0 0 2em;
}

#title-section h3{
font-family: proxima-nova, helvetica, arial sans-serif;
font-size: 2em;
font-weight: 600;

}
#title-section p{
	font-size: 1.5em;
	max-width: 85%;
	margin: 0 auto;
}

/* Features overview Section
==================================================*/
#features-section{
  display: block;
  margin: 0 auto;
  padding: 1em 0 5em;
}
#features-section{
  
}
#features-section h5{
  text-align: center;
  font-size: 1.4em;
  color: #999;
  text-transform: uppercase;
  margin: 1em auto 1em;
}

#features-section h4{
  font-size: 1.5em;
  font-weight: 600;
  margin: .3em 0 .4em;
}
#features-section img{
  opacity: .9;
}

#gap-1{
  background: url('../images/bg-phone2.jpg') no-repeat 50% 55%;
  background-size: 100%;
  padding: 5% 0 19%;
  border-top: 10px solid #bfd5db;
  border-bottom: 10px solid #bfd5db;
}

#gap-2{
  background: url('../images/bg-ipad8.jpg') no-repeat 50% bottom;
  background-size: 100%;
  padding: 12% 0 13%;
}
#gap-3{
  background: #f5f5f5 url('../images/bg-ipad4.jpg') no-repeat;
  background-size: 100%;
  padding: 10% 0 12%;
}

.bg{
  position: relative;
}

#process-section{
  padding: 1em 0 5em;
}


#process-section sup{
  color: #999;
  font-family: lovelo_black;
  font-weight: 100;
  text-transform: uppercase;
  text-shadow: -1px 1px 0px #fff;  
}
#process-section h4{
  line-height: .9;
}


/* #Canvas Element Circular charts
================================================== */
canvas, video {display: inline-block;}

#stats-section{
  padding: 2em 0 10em;
  text-align: center;
}


.stats-container {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
padding-bottom: .5em;
}

.stats-container li {
display: inline-block;
margin: 3em 4% 5px !important;
position: relative;
}

.circular-stat {
position: relative;

}

.circular-stat .digit-label {
color:  #33ADCC;
font-size: 2em;
text-align: center;
display: inline-block;
position: absolute;
top: 21%;
width: 65%;
left: 14.5%;
padding: 0px 0 0 1em;
  text-shadow:-1px 1px 0px #fff ;
white-space: nowrap;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.circular-stat .text-label {
color: #060d15;
font-size:1.3em;
top: 36%;
left: 22.875%;
width: 56.25%;
padding-top: 6px;
display: inline-block;
position: absolute;
text-align: center;
font-weight: 100;
line-height: 1.2;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

span.text-dates{
font-size: 1.3em !important;
color: #00aabb;
font-weight: 400;
text-shadow: -1px 1px 0px #fff;font-size:1.4em;
top: 59%;
left: 21.875%;
width: 56.25%;
padding-top: 6px;
display: inline-block;
position: absolute;
text-align: center;
}

@media only screen and (min-width: 1010px) { 
.stats-container li {margin: 0 2% 5px;}
}
@media only screen and (max-width: 1009px) { 
.stats-container li {margin: 0 -.2em 5px;}
}



/* Look Closer Section
==================================================*/
#lookcloser-section{
  padding: 1em 0 2em;
}



.ao-item {
	width: 80%;
	margin: 0 auto;
	padding: 2em 0;
	position: relative;
	clear: both;
}

.ao-item:before,
.ao-item:after {
    content:"";
    display:table;
}

.ao-item:after {
    clear:both;
}

.ao-item {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
} /* from CSSTricks: http://css-tricks.com/pseudo-element-roundup/ */




.ao-preview {
	width: 80%;
	margin: 0 auto;
	display: block;
	position: relative;
	padding: 1em;
}

.ao-item-left .ao-details{
	float: left;
	padding-right: 20px;
	padding-left: 0px;
	text-align: right;
}

.ao-item img {
	margin: 0 auto;
	max-width: 100%;
	display: block;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
	opacity: 0.8;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.ao-annotations {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background: rgba(33,62,68,0.2);
	box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
	opacity: 0;
	z-index: 5;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-o-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.ao-annotations span {
	display: block;
	position: absolute;
	padding: .8em .8em;
	width: 33%;
	min-width: 110px;
	font-size: 1.3em;
	text-align: center;
	background: rgba(255,255,255,.8);
	/*background: #a0d9e8;*/
	color: rgba(20,40,47,0.9);
  
	text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
	box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-o-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.ao-annotations span:after {
	position: absolute;
	background: transparent url(../images/arrow.png) no-repeat center center;
	width: 42px;
	height: 43px;
	top: 41%;
	left: 99%;
	margin: -16px 0 0 -16px;
	content: '';
}

.ao-annotations span:nth-child(1) {
	top: 35%;
	left: -15%;
}

.ao-annotations span:nth-child(2) {
	top: 60%;
	left: -13%;
}

.ao-annotations span:nth-child(3) {
	top: 27%;
	right: -12%;
}

.ao-annotations span:nth-child(4) {
	top: 49%;
	right: -10%;
}

.ao-annotations span:nth-child(5) {
	bottom: 24%;
	right: -9%;
}



.ao-annotations span:nth-child(3):after,
.ao-annotations span:nth-child(4):after,
.ao-annotations span:nth-child(5):after,
.ao-item:nth-child(2) .ao-annotations span:nth-child(1):after {
	left: auto;
	right: 98%;
	margin: -16px -16px 0 0;
	background-image: url(../images/arrow_left.png);
}

input.ao-toggle {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0;
	padding: 0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
	opacity: 0;
	z-index: 100;
	border: none;
	cursor: pointer;
}

/*
input.ao-toggle:checked + img {
	box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
    filter: alpha(opacity=99);
	opacity: 1;
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-o-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
}
*/
/*
input.ao-toggle:hover + img{
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
    filter: alpha(opacity=99);
	opacity: 1;
}
*/
input.ao-toggle:checked ~ .ao-annotations,
input.ao-toggle:checked ~ .ao-annotations span{
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
    filter: alpha(opacity=99);
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

input.ao-toggle ~ .ao-annotations span:nth-child(1) {
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	-ms-transition-delay: 0.3s;
	transition-delay: 0.6s;

}

input.ao-toggle ~ .ao-annotations span:nth-child(2) {
	-webkit-transition-delay: .8s;
	-moz-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
	-ms-transition-delay: 0.4s;
	transition-delay: .8s;
}

input.ao-toggle:checked ~ .ao-annotations span:nth-child(3) {
	-webkit-transition-delay: 1s;
	-moz-transition-delay: 0.5s;
	-o-transition-delay: 0.5s;
	-ms-transition-delay: 0.5s;
	transition-delay: 1s;
}

input.ao-toggle:checked ~ .ao-annotations span:nth-child(4) {
	-webkit-transition-delay: 1.2s;
	-moz-transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
	-ms-transition-delay: 0.6s;
	transition-delay: 1.2s;
}

input.ao-toggle:checked ~ .ao-annotations span:nth-child(5) {
	-webkit-transition-delay: 1.4s;
	-moz-transition-delay: 0.7s;
	-o-transition-delay: 0.7s;
	-ms-transition-delay: 0.7s;
	transition-delay: 1.4s;
}

@media screen and (max-width: 730px){
	.ao-item .ao-details,
	.ao-preview { 
		float: none; 
		width: 80%;
		padding: 0;
		text-align: left;
	}
	.ao-annotations span {
		font-size: 11px;
	}
}


/* Logo Section
==================================================*/
#logos-section{
    padding: 0 0 3em;
}

/* Info-Section
==================================================*/
#info-section{
  padding: 2em 0 3em;
}

#info-section img{
  max-width: 11em;
  margin: 0 0 -2em;
}
#info-section h3{
  font-size: 2em;
  font-family: "lovelo_black", proxima-nova, helvetica, arial, sans-serif;
   text-shadow: -1px 1px 0px rgba(255,255,255,0.4);
}

#info-section p{
  text-shadow: -1px 1px 0px rgba(255,255,255,0.4);

}


/* social-Section
==================================================*/
#social-section{
  padding: 3em 0 0em;
}
ul.social-list{
  display: table;
  margin: 0 auto;
  text-align: center;
}
ul.social-list li a{
  font-size: 3em !important;
  padding: .5em .3em;
}
#social-section a{color:#93abb7}
#social-section a:hover{color:#33ADCC}
#social-section a{
font-size: 2em;
}

/* Footer
==================================================*/


footer{ 
	color: #8698A8; 
	padding: 2em 0;
	background: #060d15; 
	padding: 2em 0 1em;
}

/* Scroll to Top fade in 
================================================== */

.scroll_to_top{
width:50px;
height:50px;
padding:10px;
font-size: 1.4em;
text-align:center;
background: #060d15 !important;
font-weight: bold;
color: #fff;
text-shadow: -1px 1px 0px rgba(0,0,0,0.1);
text-decoration: none;
position:fixed;
z-index:9999 !important;
bottom:75px;
right:40px;
border-radius: 100px;
display:none;
-webkit-transition: background 400ms ease-in-out;
-moz-transition: background 400ms ease-in-out;
-o-transition: background 400ms ease-in-out;
transition: background 400ms ease-in-out;
}

.scroll_to_top:hover{
text-decoration:none;
color: #fff !important;
background: #00aabb !important;
-webkit-transition: background 400ms ease-in-out;
-moz-transition: background 400ms ease-in-out;
-o-transition: background 400ms ease-in-out;
transition: background 400ms ease-in-out;
}




/*===================================================== 

MEDIA QUERIES - 

=====================================================*/ 

/*----------------------------------------------------  
@ > 79 em - Large and up
=====================================================*/ 
@media only screen and (min-width: 60em) { }

/*----------------------------------------------------  
@ 96 em - Large / Laptop
=====================================================*/ 
@media only screen and (max-width:96em){}

/*----------------------------------------------------  
@ 79 em - Large / Laptop
=====================================================*/ 
@media only screen and (max-width:91em){

/*General 
----------------------------------------------------*/
.biggest{font-size: 210% !important;}
 
/*Mastheads, Heros, Banners
----------------------------------------------------*/
#masthead{padding: 18% 0 29%;}
#hero-section h2{font-size: 2.9em !important;}
#hero-section h3{font-size: 1.7em;}
#hero-section h4{font-size: 1.7em;}


/*Titles - section and title-section
----------------------------------------------------*/
#title-section h3{font-size: 1.7em;} 

}


/*----------------------------------------------------  
@ < 60 em - Large / tablet-ish
=====================================================*/ 

@media only screen and (max-width:60em) {
.biggest{font-size: 190% !important;}
/*Header Bar & Nav
----------------------------------------------------*/
#header-bar .row{padding: 0 .5em!important;}
#header-bar nav,
#header-bar.sticky nav{font-size: 1.1em;}
#header-bar nav{padding: 1.7em 0 1em;}


/*Mastheads, Heros, Banners
----------------------------------------------------*/
#hero-section #intro{padding: 25% 0 16%;max-width: 100%;}
#hero-section #intro h2{font-size: 3em;}
#hero-section #intro {padding: 17% 0 16%;}
#hero-section h4 {font-size: 2.4em;}
#hero-section h3 {font-size: 1.4em;}
#hero-section h5 {font-size: 2em;}
.btn-large {font-size: 1.1em!important;}

/*Titles - section and title-section
----------------------------------------------------*/
#title-section p{font-size: 1.7em;}
#title-section .btn{display: none;}

}


/*----------------------------------------------------  
@ > 48 em - Medium - Breakpoint
=====================================================*/ 
@media only screen and (min-width: 48em){

}


/*----------------------------------------------------  
@ < 48 em - Medium - Breakpoint
=====================================================*/ 
@media only screen and (max-width:48em) {
.biggest{font-size: 180% !important;}

/*Mobile Nav 
----------------------------------------------------*/

/*General 
----------------------------------------------------*/ 
html{width: 100%; overflow-x: hidden;}


/*Header Bar & Nav
----------------------------------------------------*/ 
#header-bar, 
#header-bar.sticky {background: #060d15; /*#0c1d31*/}
#header-bar h1#logo, 
#header-bar.sticky h1#logo{font-size: 1.5em; width: 190px; padding: 1.2em 0 1em;}

/*Hero & Banner Sections
----------------------------------------------------*/ 
.home #masthead{background-size: 290%;}


/*Titles - section and title-section
----------------------------------------------------*/ 
#title-section p{font-size: 1.2em;}
.section-title {margin: 3em 0 2em}
.section-title h3, #setup-section h3 {font-size: 2em;}



#tweets {margin:1em  1%;}

/*Footer
----------------------------------------------------*/ 
footer ul li{padding-left: .4em;}


}

/*----------------------------------------------------  
@ < 38 em - Mobile
=====================================================*/ 
@media only screen and (max-width:38em) {

/*Header Bar & Nav
----------------------------------------------------*/ 
h1#logo, #header-bar.sticky  h1#logo{width: 160px !important;padding: 1em 0 .7em!important;}
.menu-btn{font-size: .9em;}
.big{font-size: 100%;}
.biggie{font-size: 120%;}
.biggest{font-size: 130% !important;}


/*Mastheads, Heros, Banners
----------------------------------------------------*/
#hero-section #intro {padding: 38% 0 12%;}  
#hero-section #intro h2{font-size: 2em;}
#hero-section #intro h3{font-size: 1.1em;}
/*--Remove the button in hero -- */ 
#hero-section .btn{display: none;}


/*Section Titles
----------------------------------------------------*/ 
.section-title p{font-size: 1.1em;}
.section-title h3, #setup-section h3 {font-size: 1.4em;}
.divline h3 {padding: 0 1em;}

#title-section h3{font-size: 1.2em;}
#title-section p{font-size: 1.1em;}

#highlights-section ul li{font-size: 1em;}

/*Twitter Section
----------------------------------------------------*/ 
#tweets p, .tweethandle {font-size: 1.1em;}

	
/*Footer
----------------------------------------------------*/ 
footer p{font-size: 1em;}
footer ul li{font-size: 1.1em;padding-left: 0;}
footer .icon{font-size: 1.2em;}
footer ul.link-list{margin:0 0 1.1em -.5em;}
footer ul.link-list li{margin-left:.4em;}
}