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

GLOBAL SECTIONS ELEMENTS

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

body{
	background: #eee;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
}


/*==================================================
Page Content - main wrapper requirement for fixed masthead/heros.
================================================== */
#page-content{
	background: #eee;
	z-index: 9;
	position: relative;
	width: 100% !important;
}

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

Navigation 

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

/*------------------------------------------------
Mobile menu
================================================== */
.menu-btn{
	position: relative;
	z-index: 99;
	color: #222;
	position: fixed;
	top: .7em;
	right: 0.5em;
	margin: 0;
	z-index: 999;
	cursor: pointer;
	font-size: 2em;
}

.mobilenav{
  background: #111;
  font-size: 0.9em;
  font-weight: 700;
  position: fixed;
  z-index: 9999;
  width: 200px;
  height: 100% !important;
  top: 0;
  right: 0;
  z-index: 9999;
  -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 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: #3EBC7A;
  color: #FFF;
  cursor: pointer;
}

.mobilenav ul{list-style-type: none;}
/* Menu Movement */

.mobilenav-right{
	-webkit-transform: translate3d(200px,0,0);
	-moz-transform: translate3d(-200px,0,0);
	-ms-transform: translate3d(-200px,0,0);
	-o-transform: translate3d(-200px,0,0);
	transform: translate3d(200px,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(-200px,0,0);
	-moz-transform: translate3d(200px,0,0);
	-ms-transform: translate3d(200px,0,0);
	-o-transform: translate3d(200px,0,0);
	transform: translate3d(-200px,0,0);
}

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

/* Site Overlay - to click anywhere and close*/
.site-overlay{
  display: none;
}

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

/*----------------------------------------------------  
@ > 48 em - Mobile Nav
----------------------------------------------------*/ 
@media only screen and (min-width: 48em){
.menu-btn {display: none !important;}
}

@media only screen and (max-width:48em) {
/*Mobile Nav 
----------------------------------------------------*/
nav{display: none !important;}
.menu-btn{display: block !important;z-index: 9999;}
}

/*------------------------------------------------
Headerbar - Nav & Logo
================================================== */
#header-bar{
	position: fixed !important;
	width: 100%;
	display: block;
	top: 0;
	padding: 2em 0 .4em;
	z-index: 99;
	/*background: rgba(6, 13, 21, 0.6);#060d15*/
		background: white;
	border-bottom: 3px solid rgba(0, 170, 187, .2);
   -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
   -webkit-backface-visibility:  hidden;
   -webkit-perspective: 1000;
}

#header-bar, #header-bar nav, #header-bar nav li a{
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

h1#logo { 
	font-size: 1em;
	width: 19em; 
	line-height: 1;
	float: left;
	margin: 0;
}

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

nav ul{margin:0 0 1.1em -1.8em;padding:0;list-style:none;overflow:hidden}
nav ul li{list-style:none;float:left;margin-left:1.3em;display:block}
nav ul li a{display:block;font-size: 1.4em;color: #ADD8E6;}

nav ul li a:hover {color: blue; !important;}
nav ul li a:active{color: #ADD8E6 ; !important;}

/*------------------------------------------------
Pure CSS drops - note: drops are stupid
------------------------------------------------ 
.main-navigation ul {
float: right;
    list-style: none;
    margin: 0;
    padding-left: 0;
    position: relative;
    right: 50%;
}

.main-navigation ul li {
	display: inline-block;
	position: relative;
	left: 50%;
}

.main-navigation ul ul li {
	float: left;
	left: auto;
	font-style:normal;
}

.main-navigation ul a {
	display: inline-block;
	text-decoration: none;
	padding: 10px 6px 10px 21px;
	font-style:normal;
}

.main-navigation ul ul a {
	color: #ADD8E6;
}

.main-navigation ul ul {
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
	box-shadow: 0 1px 1px rgba(0,0,0,0.2);
	background: #000;
	display: none;
	float: left;
	position: absolute;
		top: auto;
		left: 10px;
		right: auto;
	text-align: left;
  z-index: 99999;
}

.main-navigation ul ul ul {
	left: 100%;
	top: 0;
}

.main-navigation ul ul a {
	width: 250px;
	font-size: ;
	padding: 7px 15px;
}

.main-navigation ul ul li:after {
	content: normal;
	margin: 0;
	padding: 0;
}

.main-navigation li:hover > a {
	color: #blue;
}

.main-navigation ul ul :hover > a {
	color: #ADD8E6 ;
}

.main-navigation ul ul a:hover {}

.main-navigation ul li:hover > ul {
	display: block;
}

.main-navigation ul ul{
-webkit-transition: all 1s ease-in;
transition: all 1s ease-in;
}
.main-navigation ul ul:hover{
-webkit-transition: all 1s ease-in;
transition: all 1s ease-in;
}
*/

/*--Sticky classes on scroll --*/
#header-bar.sticky {
	background: rgba(255,255,255, 0.98);/*#060d15*/
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	-webkit-backface-visibility:  hidden;
}
/*
#header-bar.sticky  h1#logo{
	padding-top: .7em;
}

#header-bar.sticky  nav{
	padding: 1.3em 0 .2em;
}


.single #header-bar.sticky {
	background: #060d15; 
	background: rgba(6, 13, 21, 1);
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.365);
	-webkit-backface-visibility:  hidden;
}
*/



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

FOOTER

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

footer{
  background: #101C22;
  padding: 3em 0;
  position: relative;
  z-index: 9;
}

footer a{
  color: rgba(255,255,255,0.7);
}

footer a:hover{
  color: #3EBC7A;
}

footer h4{
  color: rgba(255,255,255,0.9);
}

footer p{
  color: #3EBC7A;
}

footer .vert-list .icon{
  font-size: 1.5em;
  padding-right: .5em;
}

footer .vert-list .icon-apple{
  padding-right: .7em;
}

footer .social-list {
  padding: .7em 0 0;
}

footer .social-list .icon{
  font-size: 2.7em;
}

footer .ac-network .icon{
  font-size: 2.5em !important;
  display: inline-block;
}

footer .ac-network .ac-text{
  font-size: 1em;
  line-height: 1.3;
  margin: 0em .1em 0 .2em;
  display: inline-block;
  vertical-align:top
}

footer .social-list .icon-linkedin{
  font-size: 2.9em;
  position: relative;
  top: -.1em;
}

#copyright p{
  font-size: .9em;
  line-height: 2.5;
}

#copyright hr{
  border-top: 1px solid rgba(255,255,255,0.4) !important;
  border-bottom: none;
}


/*------------------------------------------------
Section Title Elements
================================================== */
.section-title{
	text-align: center;
	padding: 1em 0 2em;
	text-transform: uppercase;
}

.section-title p{
	font-size: 1.1em;
	text-shadow: -1px 1px 0px #fff;
}

.section-title img{
	margin: 1em auto 0em !important;
}

.section-titleh2{
	-webkit-hyphens: none !important;
	-epub-hyphens:   none;
	-moz-hyphens:    none;
	hyphens:         none;
}

.section-title h3{
  text-align: center;
  font-weight: 700;
  -webkit-hyphens: none !important;
  -epub-hyphens:   none;
  -moz-hyphens:    none;
  hyphens:         none;
}

.section-title .icon{
  font-size: 2em;
  text-shadow: -1px 1px 0px rgba(255,255,255,0.9);
}
.section-title .four-dots{
  margin: -.1em 0 0;
  padding: 0;
}

/*------------------------------------------------
Hero Section - For Homepage
------------------------------------------------ */
#btn-section {
  padding: 3em 0;
}

/*------------------------------------------------
Home Page
================================================== */

/*------------------------------------------------
Hero Section - For Homepage
------------------------------------------------ */
.home #masthead{
	background: #fefefe url('/images/bg-home-hero.jpg');
	display: block;
	background-attachment: fixed;
	background-position: 50% 0;
	background-size: cover;
	/*fake the full viewport fill */
}

/*------------------------------------------------
@ < 70em Mastheads
------------------------------------------------ */
@media only screen and (min-width: 70em) {
.home #masthead{min-height: 34em;}
}
#hero-section{
  background: url('/images/bg-home-hero.jpg') no-repeat center top;
	background-size: cover;
	-webkit-font-smoothing: antialiased;
	-webkit-backface-visibility:  hidden;
	background-repeat: no-repeat;
	width: 100%;
	margin: 0 auto;
	top: 0;
	z-index: -2;
}

#hero-section #intro { 
	padding: 15% 0 7%;
	max-width: 60%;
}

#hero-section #intro h2{
	letter-spacing: -1px;
	line-height: 1.15;
}

#hero-section .twelve.columns{
  background-size:53% !important;
  margin-right: 0px;
  background: url('/images/hero-graphic-macbook.png') right bottom no-repeat;
}

#hero-section .btn { 
	font-size: 1.4em !important;
}

#home-services-section{
  padding: 0 0 4em;
}
	
#home-services-section img{
  max-width: 12em;
}	
	
#home-services-section h3{
  font-size: 2em;
  text-transform:uppercase;
  margin: .3em auto .4em;
}
#home-services-section p{
  margin-bottom: 3em;
}

#home-services-section hr.sep{
  padding: 0 !important;
  margin: 0 auto 1em;
  width: 70%;
}

/*------------------------------------------------
Signup-section Elements
================================================== */
#signup-section{
  padding: 4.5em 4% 3em;
  position: relative;
  z-index: 9;
}

#signup-section h5{
  font-family: brandon;
  font-weight: 600;
  color: #101C22;
  margin: 0 0 1em;

}
#signup-section  input[type="text"],
#signup-section input[type="email"],
#signup-section input[type="tel"]{
  border: 2px solid rgba(16,28,34,0.7);
  height: 3.6em;
  background: rgba(255,255,255,0.8);
  color: rgba(0,0,0,0.9);
}

#signup-section input[type="submit"]{
  font-size: 1.1em !important;
  height: 3.2em;
  box-shadow: none;
  padding: 0 !important;
  margin-left: .4em !important;
  line-height: 1;
  background-color: #1d282b;
}

#signup-section ::-webkit-input-placeholder { color: #101C22;}
#signup-section ::-moz-placeholder { color: #101C22;}
#signup-section ::-moz-placeholder { color: #101C22;}
#signup-section ::-ms-input-placeholder { color: #101C22;}

/*------------------------------------------------
Quote Section
================================================== */
#testimonials-slider{
	background: #ADD8E6 no-repeat 80% 2em;
	background-attachment: fixed;
	display: block;
	background-size:cover;
	text-shadow: -1px 1px 5px rgba(0,0,0,0.2);
	text-align: center;
	padding:  3em 0 1em;
}

#testimonials-slider *{
  color: #22;
  text-shadow: none;
}
.quote{
	text-align: center;
	color: #fff; 
	line-height: 2.0;
	margin: 0 0 0.0em;
}

.quoter{
	text-align: center;
	font-size: 1.7em;
	color: #ccc;
	color: #9FBEAE;
}

.mids{
	color: #FFF;
	padding: 1% 1% 1%;
	vertical-align: middle;
	display: block;
	margin: 0 auto;
	max-width: 50%;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-box;
	display: box;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-ms-box-orient: vertical;
	box-orient: vertical;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-box-pack: center;
	box-pack: center;
	height: 50%;
}

.vcenter{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-box-pack: center;
  box-pack: center;
  height: 100%;
}

.vert-center	{
  clear:both;  
  position:relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-box-pack: center;
  box-pack: center;
}


/*------------------------------------------------
Testimonials Section - Slider
================================================== */

#testimonials-slider .section-title{
  text-align: center;
  padding: 2em 0 0em;
  margin: 0 auto 1em;
}

    

#testimonials-slider .slides { color: #555;}

#testimonials-slider .previous{
  position: absolute; 
  left: 0;
  top: 10%;
  display: block;
  z-index: 999;
}

#testimonials-slider .next{
  position: absolute; 
  right: 1%;
  top: 10%;
  display: block;
  z-index: 999;
}

#testimonials-slider .flex-control-paging{display: none;}


/*------------------------------------------------
About Page
================================================== */
.about #masthead{
  padding: 1em 0 1em;
  min-height: 0em;
  display: block;
  background: #fff;
  min-height: 32em;
}

.about #intro{
  position: fixed;
  padding-top: 6em;
  width: 100%;
  z-index: 1;
  min-height: 10em;
}

.about #intro h1{margin: 0.3em 0 0.3em;}

@media only screen and (min-width: 77em) {
.about #masthead{min-height: 34em;}
}

@media only screen and (max-width: 60em) {
.about #intro{position: relative;}
.about #masthead{min-height: 20em;}
}

.about #gap{
  background: #101C22 url('/images/bg-services-3.jpg') no-repeat 50% 0;
  padding: 7em 0 6em;
  background-attachment: fixed;
  background-size: cover;
}

#gap blockquote{
  border: 0;
  line-height: 1.5;
}

#bio-section{
  padding: 2em 0 5em;
  background: #eee url('/images/bg-faded-biosection.jpg') no-repeat 50% 0;
  background-attachment: fixed;
  background-size: cover;
}
#affiliated-section{
  padding: 2em 0 4em;
  background: #f5f5f5 url('/images/bg-faded-affiliatedsection.jpg') no-repeat left bottom;
  background-attachment: fixed;
  background-size: cover;
}

/*------------------------------------------------
Services Page
================================================== */

.services #masthead{
  padding: 1em 0 6em;
  display: block;
  background: #fff;
}

.services #intro{
  padding: 6em 0 0;
  margin: 0 auto;
}

.services #intro h1{
  margin-bottom:0.1em;
}
.services #intro p{
  margin-bottom:0.8em;
}

.services #intro img{
  margin: 0 auto;
  display: block;
  width: 100%;
}

.services #intro{
  position: fixed;
  width: 100%;
  z-index: 1;
  min-height: 1em;
  background-color: white;
}

.services #page-content{
  margin-top: 40%;
}

#services-section{
  padding: 4em 0;
}

#services-section ul{
  list-style-position: outside;
  padding-left: 1em;
}

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

#services-section p{
  margin-bottom: .3em;
}

#services-section hr.sep{
  border-width: 0;
  padding: 1em 0;
}

.services #gap{
  background: #101C22 url('/images/bg-gap-services.jpg') no-repeat 50% 0;
  padding: 11em 0 12em;
  background-attachment: fixed;
}



/*----------------------------------------------------  
When to call section
---------------------------------------------------- */

#whentocall-section{
  padding: 4em 0 3em;
  background: url('/images/bg-faded-whentocall2.jpg') no-repeat center bottom;
  background-attachment: fixed;
  background-size: 100%;
}

#whentocall-section .section-title{
  text-transform: none;  
} 

#whentocall-section h3{
  border-bottom: 3px solid #666;
  padding: 0 0 0.5em;
  max-width: 95%;
}
#whentocall-section ul{
  margin: 2em 0 1em 1em;
}

#whentocall-section ul li{
  font-size: 1em;
  line-height: 1.3;
  padding: 0 0 1em;
}

#whentocall-section ul li:last-child{border-bottom: 0;}
#whentocall-section hr.sep{
  margin: 0.5em auto -.1em ;
  border-color: rgba(0,0,0,0.5);
 width: 60%;
}

/*------------------------------------------------
Why Me Page
================================================== */


/*----------------------------------------------------  
Tabs
---------------------------------------------------- */

.why-me #tabs{
  margin: 6em 0 0;
}


.current{
  background: #3EBC7A !important;
  background-color: rgba(0,0,0,0.4) !important;
  display: inline-block;
}

.whyme-tabs ul.btn-group{
  margin: 0 auto;
  padding: 0 0 1em;
  display: table;
  width: 100%;
}

.whyme-tabs ul.btn-group li.btn-tab {
  display: inline-block;
  background: #101C22;
  width:50%;
}

.whyme-tabs ul.btn-group a {
  font-family:brandon;
  font-size: 2em;
  font-weight: 600;
  color: #fff;
  text-shadow: -1px 1px 0px rgba(0,0,0,0.1);
  text-align: center;
  display: block;
  margin: 0 auto;
  padding: 3em 2em 3em;
  -webkit-transition: background-color ease-in-out 500ms;
  -moz-transition: background-color ease-in-out 500ms;
  -o-transition: background-color ease-in-out 500ms;
  transition: background-color ease-in-out 500ms;
}

.btn-group > li.btn-tab a:hover{
  background: #43c788;
  background: rgba(0,0,0,0.6);
}

/*
.btn-group > li.btn-tab:first-child {
  -moz-border-bottom-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  border-bottom-left-radius: 3px;
  -moz-border-top-left-radius: 3px;
  -webkit-border-top-left-radius: 3px;
  border-top-left-radius: 3px;
}

.btn-group > li.btn-tab:last-child{
  -moz-border-top-right-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  border-top-right-radius: 3px;
  -moz-border-bottom-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  border-border-bottom-right-radius: 3px;
}
*/

.highfive{ background:#101C22 url('/images/bg-box-chighfives.png') no-repeat 50% 0 !important;}
.casestudies{ background: #3EBC7A url('/images/bg-box-casestudies.png') no-repeat 50% 0 !important;}


#casestudies-section .icon{
  text-shadow: -1px 1px 0px #fff;
}
.why-me blockquote.noborders{
  color: #666 !important;
}

.case-single{
  padding: 2em 0 5em;
}


/*------------------------------------------------
Contact Page
================================================== */
.contact #masthead {
  background: #F5F5F4 url('/images/bg-cali-5.jpg') no-repeat 50% 0;
  min-height: 10em;
  background-size: 100%;
  background-attachment: fixed;
  padding: 11% 0 22%;
}

.contact #masthead #intro{
  padding: 0;
  position: fixed;
  width: 100%;
}

#contact-section{
  padding: 3em 0 4em;
}

#contact-section ul.vert-list li{
  font-size: 1.1em;
  font-weight: 600;
}

#contact-section ul.vert-list li .icon{
  color: #999;
  padding-right: 1em;
}
#contact-form-section {
  padding: 2em 0;
}

div.wpcf7-mail-sent-ok, .alert-ok {
  border-left: 5px solid #1BB157;
  background: #FFF;
  padding: 2em;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  font-size: 1.2em;
}

/*------------------------------------------------
Full Width Page
================================================== */
#main-section {
  padding: 7em 0 0;
}

#main-section figure img{
  width: auto;
}

#main-section ul {
  padding-left: 1em;
}

#main-section ul li{
  font-size: 1.1em;
}

/*------------------------------------------------
Full Width Page
================================================== */
html, body.error404 {
  height: 100%;
}

body.error404 {
background-image: url('/images/bg-404.jpg') !important;
height: 100% !important;
background-size: 77EM !important;
background: #FFF;
background-position: 50% bottom;
background-repeat: no-repeat;
height: 100%;
}

.error404 footer{
  display: none;
}

#fourohfour{
  margin: 0 auto;
  padding-top: 8em;
  display: block;
}


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

Blog Stuffs

=====================================================*/ 
/*
.blog #header-bar, .blog header, .blog #masthead{
    background: rgba(255,255,255,0.3);  
}
.blog #masthead{border-bottom:2px solid #eee;background:url('https://d233eq3e3p3cv0.cloudfront.net/fit/t/1800/756/1*T8NXg9O9dF-53lTdLArkqw.jpeg');
background-size:cover}
.blog #masthead #intro h1,
.blog #masthead #intro h3{
    margin:0
}
*/


.blog #masthead,
.archive #masthead,
.single #masthead{
	background: #061316;
  padding:7em 0 1em
}

/* Invert Header and Nav stuff */ 
.blog #header-bar nav li a,
.archive #header-bar nav li a{color:#fff;}
.blog #header-bar, .blog header, .blog #masthead,
.single #header-bar, .single header, .single #masthead,
.archive #header-bar, .archive header, .archive #masthead{background: #101C22;  }
.single #masthead{min-height:none;}
.blog nav,.single nav,.archive nav{display:none !important;}
.blog .menu-btn,.single .menu-btn,.archive .menu-btn{display: block !important;right:8% !important;color:rgba(255,255,255,0.8)}
.blog h1#logo,.single h1#logo,.archive h1#logo{width: 17em;margin: -.8em 0 .3em;padding:0 0 .5em; opacity:.8}

.blog #intro *,.archive #intro *{color: rgba(255,255,255,0.8); }
.blog #intro h1,.archive #intro h1{margin-bottom:0; }


#blog-posts{
  padding:2em 0em 7em;
  margin:0 auto;
}

#blog-posts article{
 padding:2em 0;
 clear:both;
 display:block;
 margin:0 auto; 
}

.circle-img {
  display: inline-block;
  width: 6.25em;
  height: 6.25em;
  border-radius: 50%;
  overflow: hidden;
  float: left;
  margin-top:4.2em
}

#blog-posts img {max-width: 12em !important;}

.blog-block{
  width: 80%;
  margin-left: 9em;
}

#blog-posts h2{
  margin: 0em 0 0;
  line-height: 1.1;
}

#blog-posts p{
  margin: 0.2em 0 1.4em;
}

#blog-posts .meta{
  padding: 1em 0;
  margin: 0 0 -0.5em;
  color: #999;
}

.meta{
  color:#999;
  padding: 1em 0;
  margin:0
}

#single-post{padding: 1em 0 5em;}

h2.entry-title{margin:1em 0 0; line-height:1.1}

#single-post article p:first-of-type {
  font-size: 1.75em;
  font-weight: 600;
  text-align: left;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

#single-post p{margin-bottom: .4em;}


/*----------------------------------------------------  
Pagination nav - thanks mr walton.
=====================================================*/ 
.sep {
display: none;
}

.pagination {
  margin-bottom: 0;
  width: auto;
  text-align: left;
}

.pagination a, .pagination a:hover {
  color: rgba(0, 0, 0, 0.3);
}

#older-nav a, #newer-nav a {
  top: 54%;
}

#older-nav a, #newer-nav a {
  -webkit-transition: margin 0.17s ease-in-out;
  -ms-transition: margin 0.17s ease-in-out;
  -moz-transition: margin 0.17s ease-in-out;
  -o-transition: margin 0.17s ease-in-out;
  transition: margin 0.17s ease-in-out;
}

#older-nav a, #newer-nav a {
  position: fixed;
  background: rgba(0, 0, 0, 0.05);
  padding: 0.55em 0.5em 0.5em;
  z-index: 2000;
  top: 44%;
  font-size: 1em;
  font-style: italic;
  width: 9em;
}

#newer-nav a {
  right: -6.5em;
  border-top-left-radius: 0.4em;
  border-bottom-left-radius: 0.4em;
}

#newer-nav a:hover {
  margin-right: 6em;
  color:#3EBC7A
}

#older-nav a {
  left: -6.7em;
  border-top-right-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
  float: left;
  text-align: right;
}
#older-nav a:hover {
  margin-left: 6em;
  color:#3EBC7A
}
.pagination .icon-arrow-left,
.pagination .icon-arrow-right{font-size:1.1em}

#single-footer p{font-weight:400 !important;font-size:}

/*------------------------------------------------
Blog - Social Loves
================================================== */
#sociallove-section {
  display: block;
  padding: 1.3em 0 3.7em;
  margin: 3em 0 0;
  border-top: 2px solid #DDD;
  border-bottom: 2px solid #DDD;
}

h5.sharelove {
	font-size: 1.6em;
	float: left;
	padding-right: 2em;
}

#sociallove-share-btns {
  float: left;
  padding: .2em 0 0;
  margin: 0 !important;
}

li.gplusshare {
  padding-top: .2em;
}


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

Global Media Queries

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


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

#hero-section #intro{width: 54% !important;padding: 14% 0 9%;}
#hero-section #intro h2{padding: .1em 0 .4em;}	
#hero-section #intro .btn{font-size: 1.2em !important;}

.services #masthead{ padding: 1em 0 9em;}
}
	
/*----------------------------------------------------  
@ < 60 em - Large / tablet-ish
=====================================================*/ 

@media only screen and (max-width:69em) {
#header-bar h1#logo, 
#header-bar.sticky h1#logo{width: 17em;margin: -.4em 0 0;}
nav li a{font-size: 1em !important;}


#header-bar .row{padding: 0;margin: 0;}
#hero-section #intro { padding: 10em 0 5%;max-width: 100%;}
#hero-section h1{font-size: 2.8em}
#home-services-section h3 {font-size: 1.5em;}
.services #masthead{padding: 0;}
.services #intro{position: relative;padding: 5em 0 0;}
.services #page-content{margin-top: 0;padding: 0;}

footer .social-list .icon{font-size: 2em !important;}

.why-me #tabs{margin: 5.3em 0 0;}
.whyme-tabs ul.btn-group a{font-size: 1.6em;padding: 2.3em 0 2em;}

}

/*----------------------------------------------------  
@ < iPad Targeting (can this be done in ems? Hit me up at stephen.scaff@sosweetcreative.com)
=====================================================*/ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  { 
#testimonials-slider{background-attachment: scroll;background-size: 260%;background-position: 50% 0;}
.about #gap, #bio-section {background-attachment: scroll;background-size: 120%;}
.services #gap {padding: 6em 0 7em;background-attachment: scroll;background-size: 130%;}
#affiliated-section{ background-attachment: scroll;background-size: 195%;}
.about #intro {position: relative !important;}
.contact #masthead #intro {position: relative !important;}
.contact #masthead {min-height: 8em;background-size: 100%;padding: 13% 0 11%;}
}


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

/*General & Layout
----------------------------------------------------*/ 
html, body{width: 100% !important; overflow-x: hidden !important;}
hr.sep {margin: 2em auto 1em;}
.scroll_to_top{display: none !important;}
*{background-attachment: scroll !important;}
.btn-med {font-size: 1em }


/*Mobile Nav 
----------------------------------------------------*/
nav{display: none !important;}
.menu-btn{display: block !important;z-index: 9999;}

/*Header Bar & Nav
----------------------------------------------------*/ 
#header-bar {padding: 1.5em 0 .9em;}
#header-bar h1#logo, 
#header-bar.sticky h1#logo{width: 16em;margin: -.5em 0 0;}
#banner-section h1{margin:.2em 0 0;}

/*Home
----------------------------------------------------*/ 
#hero-section h1{font-size: 2em}
#hero-section #intro{width: 90% !important;padding: 15% 0 10%;}
.home header .row {background-color: rgba(255,255,255,0.3);}
#hero-section .btn{font-size: 1.2em !important;padding: .9em 3em 1em !important;box-shadow: none;}
#hero-section #intro {padding: 5em 0 2em !important;}
#hero-section #intro h2{padding: .1em 0 .4em;}	
#hero-section .twelve.columns{background: none;}

#testimonials-slider{background-attachment: scroll;background-size: 250%;background-position: 50% 0;}
#testimonials-slider .section-title {padding: 1.5em 0 1em;}
/*Pages
----------------------------------------------------*/ 
.about #intro {position: scroll !important;}
.about #gap,#bio-section {background-attachment: scroll;background-size: 120%;}

.contact #masthead {background-size: 150%; padding: 5em 0 9em;}
.contact #masthead #intro {position: relative;}
.contact #masthead #intro h1{font-size: 2em;position: relative;}

#services-section img{width: 30em;display: block;margin: 0 auto;}
.services #gap{padding: 5em 0 4em;background-size: 120%;background-attachment: scroll;}
.services h3{padding-top:0.5em}
#services-section {padding: 2em 0;}

.why-me #tabs{margin: 4.3em 0 0;}
.whyme-tabs ul.btn-group a{font-size: 1.3em;padding: 2.3em 0 2em;}

#affiliated-section{ background-attachment: scroll;background-size: 195%;}


/*Blog
----------------------------------------------------*/ 
#single-post article p:first-of-type {font-size: 1.45em;}
.blog #masthead, .archive #masthead{padding:6em 0 1em;} 
.blog .menu-btn,.archive .menu-btn{right:2% !important;}
.circle-img {float:right;display:block;width:4em; height:4em; margin-top:3em; margin-left: 1em;}
.blog-block{width:90%;margin-left: 0.2em;padding:0 1em;}
#blog-posts article{padding:0.5em 0; }
#blog-posts .meta{font-size:0.8em;}

/*Misc
----------------------------------------------------*/ 
.fade-left, .fade-right {-webkit-animation: none !important;-moz-animation:none !important;-ms-animation: none !important;-o-animation: none !important;animation:none !important;}

}

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

/*General
----------------------------------------------------*/ 
.btn-med {font-size: .9em !important;}

/*Header & Nav
----------------------------------------------------*/ 
#header-bar h1#logo, 
#header-bar.sticky h1#logo{width: 12em;margin: -.5em 0 0;}

/*Titles
----------------------------------------------------*/ 
.section-title h3.biggest{font-size: 1.5em !important;}

/*Home
----------------------------------------------------*/ 
#hero-section h1{font-size: 2em}
#hero-section #intro{padding: 5em 0 3em !important ;}

/*footer and lower region stuff
----------------------------------------------------*/ 
.div-link {padding: 2em 0 0;}
.div-link p.biggie{font-size: 1em;}
.f-block{width: 100%;}
footer h4 {font-size: 1.3em;}
footer .social-list .icon{font-size: 2em !important;}
footer .vert-list .icon {display: none;}
#copyright p {font-size: .9em;line-height: 1.8;}

/*Home
----------------------------------------------------*/
#home-services-section img {max-width: 10em;}
#home-services-section h3 {font-size: 1.6em;}
#testimonials-slider {padding:1.5em 0; background-attachment: scroll;background-size: 435%;}
.mids {padding: 0;}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {top: -3.4em;width: 85%;}

/*Pages
----------------------------------------------------*/
.why-me #tabs{margin: 3.7em 0 0;}
.whyme-tabs ul.btn-group a{font-size: 1.2em;padding: 1.2em 0 1em;}
.services #gap {background-size: 250%;}
.contact #masthead {background-size: 214%;padding: 5em 0 7em;}
.contact #masthead #intro h1 {font-size: 1.5em;}
.contact #masthead #intro p{font-size: 1em;;}
#contact-section ul.vert-list li .icon {padding-right: .6em;}

/*Form related
----------------------------------------------------*/
form h6 {font-size: 1em !important;}
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea {padding: 0.7em .2em;}
#signup-section {padding: 1.5em 4% 1em;}
#signup-section input[type="submit"] {font-size: 1em !important;height: 3em;}
#signup-section input[type="text"], #signup-section input[type="email"], #signup-section input[type="tel"] {border: 2px solid rgba(16, 28, 34, 0.7);height: 3.2em;}


/*Blog
----------------------------------------------------*/
.blog-block {width: 100%;margin-left: 0em;padding: 0 0.5em;}
#single-post article p:first-of-type {font-size: 1.25em;}
.single .pagination {display: none !important;}

}
	
/*----------------------------------------------------  
@ < 30 em - Smaller Still (approx 320px)
=====================================================*/ 
@media only screen and (max-width:30em) {
.whyme-tabs ul.btn-group a{font-size: 0.9em;padding: 1.4em 0 1.2em;}

}