/*
 * Project Name: Macrofab Style Guide
 * Version: 1.0
 * Date: 05-03-2016
 * URL: https://macrofab.com/
 */
/**
 * @license
 * MyFonts Webfont Build ID 3213443, 2016-05-03T18:00:39-0400
 *
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are
 * explicitly restricted from using the Licensed Webfonts(s).
 *
 * You may obtain a valid license at the URLs below.
 *
 * Webfont: Gibson-LightIt by Canada Type
 * URL: http://www.myfonts.com/fonts/canadatype/gibson/light-italic/
 *
 * Webfont: Gibson-BoldItalic by Canada Type
 * URL: http://www.myfonts.com/fonts/canadatype/gibson/bold-italic/
 *
 * Webfont: Gibson-SemiboldIt by Canada Type
 * URL: http://www.myfonts.com/fonts/canadatype/gibson/semi-bold-italic/
 *
 * Webfont: Gibson-Bold by Canada Type
 * URL: http://www.myfonts.com/fonts/canadatype/gibson/bold/
 *
 * Webfont: Gibson-Regular by Canada Type
 * URL: http://www.myfonts.com/fonts/canadatype/gibson/regular/
 *
 * Webfont: Gibson-SemiBold by Canada Type
 * URL: http://www.myfonts.com/fonts/canadatype/gibson/semi-bold/
 *
 * Webfont: Gibson-Italic by Canada Type
 * URL: http://www.myfonts.com/fonts/canadatype/gibson/italic/
 *
 * Webfont: Gibson-Light by Canada Type
 * URL: http://www.myfonts.com/fonts/canadatype/gibson/light/
 *
 *
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=3213443
 * Licensed pageviews: 10,000
 * Webfonts copyright: Copyright &#x00A9; 2011 Rod McDonald. Published by Canada Type. All rights reserved.
 *
 * © 2016 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/310883");


@font-face {font-family: 'Gibson-LightIt';src: url('webfonts/310883_0_0.eot');src: url('webfonts/310883_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/310883_0_0.woff2') format('woff2'),url('webfonts/310883_0_0.woff') format('woff'),url('webfonts/310883_0_0.ttf') format('truetype');}


@font-face {font-family: 'Gibson-BoldItalic';src: url('webfonts/310883_1_0.eot');src: url('webfonts/310883_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/310883_1_0.woff2') format('woff2'),url('webfonts/310883_1_0.woff') format('woff'),url('webfonts/310883_1_0.ttf') format('truetype');}


@font-face {font-family: 'Gibson-SemiboldIt';src: url('webfonts/310883_2_0.eot');src: url('webfonts/310883_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/310883_2_0.woff2') format('woff2'),url('webfonts/310883_2_0.woff') format('woff'),url('webfonts/310883_2_0.ttf') format('truetype');}


@font-face {font-family: 'Gibson-Bold';src: url('webfonts/310883_3_0.eot');src: url('webfonts/310883_3_0.eot?#iefix') format('embedded-opentype'),url('webfonts/310883_3_0.woff2') format('woff2'),url('webfonts/310883_3_0.woff') format('woff'),url('webfonts/310883_3_0.ttf') format('truetype');}


@font-face {font-family: 'Gibson-Regular';src: url('webfonts/310883_4_0.eot');src: url('webfonts/310883_4_0.eot?#iefix') format('embedded-opentype'),url('webfonts/310883_4_0.woff2') format('woff2'),url('webfonts/310883_4_0.woff') format('woff'),url('webfonts/310883_4_0.ttf') format('truetype');}


@font-face {font-family: 'Gibson-SemiBold';src: url('webfonts/310883_5_0.eot');src: url('webfonts/310883_5_0.eot?#iefix') format('embedded-opentype'),url('webfonts/310883_5_0.woff2') format('woff2'),url('webfonts/310883_5_0.woff') format('woff'),url('webfonts/310883_5_0.ttf') format('truetype');}


@font-face {font-family: 'Gibson-Italic';src: url('webfonts/310883_6_0.eot');src: url('webfonts/310883_6_0.eot?#iefix') format('embedded-opentype'),url('webfonts/310883_6_0.woff2') format('woff2'),url('webfonts/310883_6_0.woff') format('woff'),url('webfonts/310883_6_0.ttf') format('truetype');}


@font-face {font-family: 'Gibson-Light';src: url('webfonts/310883_7_0.eot');src: url('webfonts/310883_7_0.eot?#iefix') format('embedded-opentype'),url('webfonts/310883_7_0.woff2') format('woff2'),url('webfonts/310883_7_0.woff') format('woff'),url('webfonts/310883_7_0.ttf') format('truetype');}

/* ==========================================================================
   Base Styles and Bootstrap Modifications
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #333333;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #40ACA9;
    color: #ffffff;
    text-shadow: none;
}

::selection {
    background: #40ACA9;
    color: #ffffff;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

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

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

 img {
    vertical-align: middle;
}

/*
 * Allow only vertical resizing of textareas.
 */

 textarea {
    resize: vertical;
}


/* ==========================================================================
   General styles
   ========================================================================== */

html,
body {
    height: 100%;
}

body {
    font-family: Gibson-Regular;
    font-weight: normal;
		font-style: normal;
    font-size: 17px;
    color: #333;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

hr {
    position: relative;
    border: none;
}

hr:before {
    content: " ";
    position: absolute;
    top: 0;
    width: 100%;
    height: 1px;
    background: #e8e8e8;
}

/* nav */
@media screen and (max-width: 580px){
    .navbar-fixed-top {
    position: absolute;
    }
}
.navbar-inverse {
    background-color: #fff;
    border-color: #fff;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.15);
    -webkit-box-shadow:  0 1px 1px 0 rgba(0,0,0,.15);
    -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,.15);
}
.navbar-default {
border-color: transparent;
background-color: #fff;
}
.navbar-nav {
    margin: 28px 0 23px 0;
}
.navbar-inverse .navbar-nav>li>a {
    color: #333333;
    font-family: Gibson-SemiBold;
	font-size:17px;
}
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
  color: #E3282F;
}
.navbar-inverse .navbar-nav li.current_page_item a,
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover {
    color: #E3282F;
    background-color: transparent;
}
.navbar-inverse .navbar-nav>li.signup>a {
    color: #ffffff;
}
.navbar-inverse .navbar-nav>li.signup>a.clr-red:hover,
.navbar-inverse .navbar-nav>li.signup>a.clr-red:focus {
  background-color:#E3282F;
}
.nav>li>a {
    padding: 10px 20px;
}
.nav>li.signup>a {
      padding: 12px 35px;
}
.nav>li.login {
  padding-right: 20px;
}
.nav>li.signup {
  margin-top:-5px;
}
/* nav custom */
.nav>li>a[title="Signup"],
.nav>li>a[title="SIGNUP"] {
  padding: 12px 35px;
  color:#fff;
  background-color: #E3282F;
  border-radius: 2px;
  text-decoration: none;
}
.nav>li>a[title="Signup"]:hover,
.nav>li>a[title="Signup"]:focus,
.nav>li>a[title="SIGNUP"]:hover,
.nav>li>a[title="SIGNUP"]:focus {
  opacity:0.8;
  color:#fff;
  background-color: #E3282F;
  text-decoration:none;
}
@media only screen and (min-width: 768px) {
	.nav>li.login {
    border-left:1px solid #333333;
	}
	.nav>li>a[title="Login"],
  .nav>li>a[title="LOGIN"] {
    border-left: 1px solid #333333;
  }
  .nav>li>a[title="Signup"],
  .nav>li>a[title="SIGNUP"] {
    margin-left: 10px;
  }
}
.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #333;
}
.navbar-toggle {
    margin-top: 30px;
    margin-right: 15px;
    margin-bottom: 30px;
}
.navbar-inverse .navbar-toggle:hover .icon-bar,
.navbar-inverse .navbar-toggle:focus .icon-bar {
    background-color: #fff;
}

.navbar-brand {
    height: 51px;
    padding: 20px 15px;
}
.navbar-brand img {
	width:233px;
}

/* Titles */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-style:normal;
    color: #333;
}
h1, .jumbotron h1  {
	font-family: Gibson-SemiBold;
	font-size:60px;
}
.page.homepage h1,
.homepage .jumbotron h1 {
  font-size:46px;
  margin-bottom: 15px;
}
.page h1 {margin:0;}
h2 {
	font-family: Gibson-SemiBold;
	font-size:40px;
}
h3 {
	font-family: Gibson-SemiBold;
	font-size:30px;
}
h4 {
	font-family: Gibson-Regular;
	font-size:22px;
	line-height: 38px;
}
h5 {
	font-family: Gibson-SemiBold;
	font-size:20px;
}
h6 {
	font-family: Gibson-SemiBold;
	font-size:17px;
}
@media only screen and (max-width: 768px) {
	.page h1 {
			font-size: 50px;
	}
	.page h2 {
			font-size: 35px;
	}
}
@media only screen and (max-width: 480px) {
	.page h1, .page.homepage h1 {
			font-size: 35px;
	}
	.page h2 {
			font-size: 25px;
	}
}


/* Paragraph & Typographic */
p {
    /*line-height: 28px;
    margin-bottom: 25px;*/
}

strong {
  font-family: Gibson-SemiBold;
	font-weight: normal;
	font-style: normal;
}

pre {
    background: #ebebeb;
    border: none;
    font-family: "Monaco";
    font-size: 16px;
    color: #666;
    padding: 20px;
    line-height: 28px;
}

small {
    font-size: 12px;
}

blockquote,
blockquote p {
    line-height: 28px;
    color: #666666;
    font-family: Gibson-Italic;
    font-weight: normal;
    font-style: normal;
}

blockquote {
    position: relative;
    margin: 0 0 40px -30px;
    padding-left: 30px;
    border-left: 5px solid #40ACA9;
}

blockquote cite {
    position: absolute;
    bottom: -25px;
    right: 0;
    font-size: 12px;
    font-style: italic;
    color: #333;
    font-weight: 300;
}

blockquote cite:before {
    content: "-- "
}

/* Images */
.overflow-image {
    margin-top: -65px;
}

/* Links */
a {
    color: #40ACA9;
    word-wrap: break-word;

    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

a:hover,
a:focus {
    color: #40ACA9;
    text-decoration: none;
    outline: 0;
}

a:before,
a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}
a.readmore {
	font-family: Gibson-SemiBold;
	text-decoration:underline;
	color:#333333;
}
a.readmore:hover,
a.readmore:focus {
    color: #333333;
    text-decoration: none;
}
a.view {
	font-family: Gibson-Regular;
	font-size: 16px;
	text-decoration:underline;
	color:#333333;
}
a.readmore:hover,
a.readmore:focus {
    color: #333333;
    text-decoration: underline;
}

/* font family */
.Gibson-LightIt {
	font-family: Gibson-LightIt;
	font-weight: normal;
	font-style: normal;
}
.Gibson-BoldItalic {
	font-family: Gibson-BoldItalic;
	font-weight: normal;
	font-style: normal;
}
.Gibson-SemiboldIt {
	font-family: Gibson-SemiboldIt;
	font-weight: normal;
	font-style: normal;
}
.Gibson-Bold {
	font-family: Gibson-Bold;
	font-weight: normal;
	font-style: normal;
}
.Gibson-Regular {
	font-family: Gibson-Regular;
	font-weight: normal;
	font-style: normal;
}
.Gibson-SemiBold {
	font-family: Gibson-SemiBold;
	font-weight: normal;
	font-style: normal;
}
.Gibson-Italic,
em {
	font-family: Gibson-Italic;
	font-weight: normal;
	font-style: normal;
}
.Gibson-Light {
	font-family: Gibson-Light;
	font-weight: normal;
	font-style: normal;
}
.OpenSan {
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
}
.OpenSan-bold {
	font-family: 'Open Sans', sans-serif;
	font-weight:700;
}

/* Color */
.white-text {color:#ffffff !important;}
.black-text, .black-text a {color:#333333 !important;}
.black-text a:hover,
.black-text a:focus {text-decoration:underline}
.clr-red {background-color:#E3282F;}
.clr-teal {background-color:#40ACA9;}
.clr-grey {background-color:#333333;}
.clr-greige {background-color:#EDEDED;}
.clr-maroon {background-color:#B22B2F;}
.border-white {
  border-right: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
}
.border-white-right {border-right:solid 1px #ffffff;}
.border-grey-right {border-right:1px solid #e8e8e8}
.border-grey-bottom { border-bottom:1px solid #e8e8e8;}

/* Button */
.btn {
	font-family: Gibson-SemiBold;
	font-weight: normal;
	font-style: normal;
	color:#fff;
	font-size:23px;
	border-radius: 2px;
	padding: 14px 70px;
}
.btn:hover,
.btn:focus {
	color:#fff;
	opacity:0.8;
}
.btn-arrow {
  padding: 14px 40px 12px 40px;
}
.btn-arrow i.fa {
  padding-left: 65px;
  color: #000;
  opacity: 0.3;
  font-size: 26px;
  vertical-align: middle;
}
.btn-small {
  padding: 7px 20px 6px 20px;
  font-size: 20px;
}

/* Spacing */
.ms {margin:20px;}
.msT {margin-top:20px;}
.msB {margin-bottom:20px;}
.msR {margin-right:20px;}
.msL {margin-left:20px;}

.ps {padding:10px;}
.psT {padding-top:10px;}
.psB {padding-bottom:10px;}
.psR {padding-right:10px;}
.psL {padding-left:10px;}

.mm {margin:30px;}
.mmT {margin-top:30px;}
.mmB {margin-bottom:30px;}
.mmR {margin-right:30px;}
.mmL {margin-left:30px;}

.pm {padding:30px;}
.pmT {padding-top:30px;}
.pmB {padding-bottom:30px;}
.pmR {padding-right:30px;}
.pmL {padding-left:30px;}

.ml {margin:65px;}
.mlT {margin-top:65px;}
.mlB {margin-bottom:65px;}
.mlR {margin-right:65px;}
.mlL {margin-left:65px;}

.pl {padding:65px;}
.plT {padding-top:65px;}
.plB {padding-bottom:65px;}
.plR {padding-right:65px;}
.plL {padding-left:65px;}

.space-30 {height: 30px;}
.space-40 {height: 40px;}
.space-50 {height: 50px;}
.space-75 {height: 75px;}
.space-95 {height:95px;}

.noP {padding:0;}

/* ==========================================================================
   Section Style Guide Hero styles
   ========================================================================== */
section#style-guide-hero {
	margin-top:94px;
}
section#style-guide-hero .homepage {
	background: url() no-repeat top center scroll;
    background-color: #fff;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
section#style-guide-hero .jumbotron {
    background-color: transparent;
	margin: 0 15%;
}

/* ==========================================================================
   Section Style Guide styles
   ========================================================================== */
section#styleguide p.display {
	font-size: 90px;
    line-height: 90px;
}
section#styleguide .clr {
	width: 30px;
	height: 30px;
}
section#styleguide .palette {
    display: inline-block;
    text-align: center;
}
section#styleguide .img-palette {
	width: 120px;
    height: 120px;
    display: inline-block;
}

/* ==========================================================================
   Section Hero styles
   ========================================================================== */
section#hero {
	margin-top: 144px;	
}
@media only screen and (min-width: 1200px) {
	section#hero {
	margin-top: 94px;	
	}
}
@media only screen and (max-width: 768px) {
	section#hero {
	margin-top: 94px;	
	}
}
section#hero .homepage,
section#hero .page {
	background: url() no-repeat top center scroll;
    background-color: #fff;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
section#hero .jumbotron {
    background-color: transparent;
    padding-right:15%;
    padding-left:15%;
    margin-bottom:0;
}
section#hero p.lead {
	font-size:24px;
	margin-bottom: 0;
}
section#hero .page.homepage p.lead {
	margin-bottom: 35px;
}
.anchor {
  position: absolute;
  bottom: 40px;
  width: 100%;
}

/* ==========================================================================
   Section Work styles
   ========================================================================== */
section#work h4 {
	line-height: 30px;
}
section#work .story {
  padding: 20px 25px 0px 25px;
}
section#work .bg-work {background-color:#2c303b;}
section#work .bg-blog {background-color:#ededed;}
section#work .work-entry h4 {
	line-height: 28px;
	font-size: 18px;
	margin-bottom: 20px;
}
section#work .work-entry p {
	font-size:17px;
}
section#work .border-white:hover {
  opacity:0.7;
}
section#work .border-white .active {
  height: 100%;
  width: 100%;
  position: relative;
  left: 0;
  top: 0;
}

/* ==========================================================================
   Section Blog styles
   ========================================================================== */
section#blog h4 {line-height: 30px;}
section#blog h5 {margin-bottom:20px;}
section#blog .story {
  padding: 20px 25px 0px 25px;
}
section#blog .story p {
  color:#333;
}
section#blog .bg-blog {background-color:#ededed;}
section#blog .imgBox {
  height: 280px;
  background-size: cover;
  background-position: center;
  margin: 20px 25px;
}
section#blog .border-white:hover {
  opacity:0.7;
}
section#blog .border-white .active {
  height: 100%;
  width: 100%;
  position: relative;
  left: 0;
  top: 0;
}
@media only screen and (min-width: 1200px) {
  section#blog .imgBox {
      margin:0;
      margin-left: 11.5px;
  }
}

/* ==========================================================================
   Section Start Building styles
   ========================================================================== */
section#startbuilding .lrgText {
  font-size:47px;
  display: inline-block;
  padding: 6px 60px;
}
section#startbuilding .btn {margin-bottom:20px;}

@media only screen and (max-width: 768px) {
	section#startbuilding .lrgText {
  	font-size:32px;
  }
  .btn.btn-arrow {
    padding: 14px 30px 12px 30px;
	}
}
@media only screen and (max-width: 480px) {
	.btn.btn-arrow {
    width: 100%;
    padding: 14px 15px 12px 15px;
	}
}

/* ==========================================================================
   Section Featured styles
   ========================================================================== */
section.featured p {
  font-size:22px;
  line-height: 35px;
  margin-bottom: 30px;
}
section.featured ul,
section.featured li {
  font-size:22px;
}
section.featured p a {
  font-family: Gibson-SemiBold;
	font-weight: normal;
	font-style: normal;
}
@media only screen and (min-width: 768px) {
  section.featured.layoutImageRight .col-sm-8 {
    padding-right:60px;
  }
  section.featured.layoutImageLeft .col-sm-8 {
    padding-left:60px;
  }
}

/* ==========================================================================
   Section Case Study styles
   ========================================================================== */
section#case-study-featured {
  background-color:#f9f9f9;
}
section#case-study-featured .img-wrapper {
    height: 180px;
    text-align: center;
    white-space: nowrap;
    margin: 1em 0;
}
section#case-study-featured .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
section#case-study-featured .img-wrapper img.img-responsive {
    max-height: 180px;
    display: inline-block;
    vertical-align: middle;
}
section#case-study-featured .Gibson-Italic a,
section#case-study-featured em a {
  color:#333;
}
section.case-study p a,
section#case-study-featured p a {
  font-family: Gibson-SemiBold;
	font-weight: normal;
	font-style: normal;
}
section.case-study .content-container {
    display: table;
}
section.case-study .img-wrapper {
  width: 50%;
  height: 100%;
  vertical-align: middle;
  background-size: cover;
    display: table-cell;
}
section.case-study .image-left .img-wrapper {
    width: 50%;
    height: 100%;
    vertical-align: middle;
}
section.case-study .image-right .img-wrapper {
    width: 50%;
    height: 100%;
    vertical-align: middle;
    position: absolute;
    right: 0;
}
section.case-study .image-right .txt-container,
section.case-study .image-left .txt-container {
    padding-top: 90px;
    padding-bottom: 90px;
    min-height: 737px;
}
section.case-study .image-left .txt-container {
    float: right;
    width: 100%;
    padding-left: 14%;
    padding-right: 14%;
    right: 0;
    vertical-align: middle;
}
section.case-study .image-right .txt-container {
    float: left;
    width: 50%;
    padding-right: 7%;
    padding-left: 7%;
    vertical-align: middle;
}
section.case-study .vert-pad {
    padding: 40px 0;
}
@media (max-width: 768px) {
  section.case-study .content-container {
      display: block;
  }
  section.case-study .img-wrapper {
    display: block;
    min-height: 550px;
  }
  section.case-study .image-right .img-wrapper {
    width: 100% !important;
    float: none !important;
    position: relative;
  }
  section.case-study .image-right .txt-container {
    width: 100% !important;
    float: none !important;
    position: relative;
  }
  section.case-study .image-left .img-wrapper {
    width: 100% !important;
    float: none !important;
    position: relative;
  }
  section.case-study .image-left .txt-container {
    width: 100% !important;
    float: none !important;
    position: relative;
  }
}

/* ==========================================================================
   Section Blog Listing styles
   ========================================================================== */
section#blog-listing {
  margin-top: 50px;
}
section#blog-listing .search-wrapper {
  width:80%;
  margin-bottom:40px;
}
section#blog-listing .search-wrapper label {
  width:100%;
}
section#blog-listing .search-wrapper input {
  background-color:transparent;
}
section#blog-listing .search-wrapper .form-control {
  border:none;
  font-size:22px;
  height: 56px;
  border-bottom: 1px solid #e8e8e8;
  margin-top: 3px;
  padding: 6px 30px;
}
section#blog-listing .blogPost {
  position:relative;
  max-height: 250px;
  overflow: hidden;
}
section#blog-listing .blogPost img {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  width: 100%;
}
section#blog-listing .blogPost .mask-podcast {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background: rgba(178, 43, 47, 0.50);/* red #b22b2f */
}
section#blog-listing .blogPost .mask-blog {
   width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background: rgba(51, 51, 51, 0.50);/* grey #333333 */
}
section#blog-listing .blogPost .mask-engineering {
   width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
   background: rgba(15, 91, 120, 0.50);/* green #0f5b78 */
}
section#blog-listing .blogPost h3 {
  margin-top:0;
}
section#blog-listing .blogPost p {
  font-size:20px;
}
section#blog-listing .blogPost .cat-text {
  position:absolute;
  right:30px;
  bottom:15px;
}
section#blog-listing .blogPost .cat-text a {
  color:#fff;
}
section#blog-listing .blogPost .abstract {
  display: none;
  opacity: 0;
  -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
@media only screen and (min-width: 480px) {
  section#blog-listing .blogPost:hover .abstract {
    display:block;
  opacity: 1;
  -webkit-animation: anim .3s ease-in-out;
          animation: anim .3s ease-in-out;
  }
}
@-webkit-keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    opacity: 1;
    }
}
section#blog-listing #pagination nav {
 text-align: center;
}
section#blog-listing #pagination .pagination>li>a,
section#blog-listing #pagination .pagination>li>span {
  color:#333333;
  border: none;
  font-size:22px;
  font-family: Gibson-SemiBold;
	font-weight: normal;
	font-style: normal;
}
section#blog-listing #pagination .pagination>li>a:hover,
section#blog-listing #pagination .pagination>li>span:hover {
  color: #40ACA9;
background-color:#fff;
}
section#blog-listing #pagination .pagination>.active>a,
section#blog-listing #pagination .pagination>.active>a:focus,
section#blog-listing #pagination .pagination>.active>a:hover,
section#blog-listing #pagination .pagination>.active>span,
section#blog-listing #pagination .pagination>.active>span:focus,
section#blog-listing #pagination .pagination>.active>span:hover {
    z-index: 3;
    color: #40ACA9;
    cursor: default;
    background-color:transparent;
    border:none;
}
section#blog-listing .widget-form h5 {
  margin-top:0;
}
section#blog-listing .widget-form .form-control {
  font-size:22px;
  height: 56px;
}
section#blog-listing .widget-form .btn.clr-teal {
  font-size:17px;
  padding:15px 20px;
  width:100%;
}
section#blog-listing .widget-wysiwyg {
  position:relative;
}
section#blog-listing .widget-wysiwyg:hover,
section#blog-listing .widget-wysiwyg:focus {
  opacity:0.7;
}
section#blog-listing .wysiwyg-wrapper {
   width: 100%;
  height: 100%;
  position: absolute;
  /*overflow: hidden;*/
  top: 0;
  left: 0;
  padding: 15px;
}
section#blog-listing .wysiwyg-wrapper a {
	height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
section#blog-listing .wysiwyg-popular a {
  text-decoration:underline;
  color:#333333;
}
section#blog-listing .wysiwyg-popular a:hover,
section#blog-listing .wysiwyg-popular a:focus {
  text-decoration:none;
}
section#blog-listing .blogLink a {
  font-size:22px;
  font-family: Gibson-SemiBold;
	font-weight: normal;
	font-style: normal;
	line-height: 1.2;
	display:inline-block;
	padding-right:30px;
	padding-top:4px;
	padding-bottom: 3px;
	-moz-padding-top:0;
  -moz-padding-bottom: 0;
}
/*ONLY for FireFox*/
@-moz-document url-prefix() {
  section#blog-listing .blogLink a {
  padding-top:0;
  padding-bottom: 0;
  }
}
section#blog-listing .blogLink a.active {
  text-decoration:underline;
}
section#blog-listing .blogLink a.link-engineer {
  color:#40ACA9;
}
section#blog-listing .blogLink a.link-podcast {
  color:#E3282F;
}
section#blog-listing .blogLink a.link-blog {
  color:#333333;
}

/* ==========================================================================
   Blog Article styles
   ========================================================================== */
#blog-single section#hero .engineering {
  background: rgba(15, 91, 120, 0.50);/* green #0f5b78 */
}
#blog-single section#hero .podcast {
  background: rgba(178, 43, 47, 0.50);/* red #b22b2f */
}
#blog-single section#hero .blog {
  background: rgba(51, 51, 51, 0.50);/* grey #333333 */
}
#blog-single section#hero .blogPage {
  min-height: 150px;
  max-height: none;
}
#blog-single section#hero .blogPage .row {
    max-height: none;
}
#blog-single section#hero .blogPage .mask {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
}
#blog-single section#hero .blogPage h1 {
  padding: 23px 0 20px 0;
}
@media screen and (min-width: 768px) {
  #blog-single section#hero .jumbotron {
      padding-top: 30px;
      padding-bottom: 30px;
  }
}
#blog-single section#blog {
  margin-top: 50px;
}
#blog-single section#blog h2 {
  font-size:35px;
}
#blog-single section#blog p, #blog-single section#blog ul, #blog-single section#blog li {
  font-size:22px;
}
#blog-single section#blog p {
	margin-bottom:25px;
}
#blog-single section#blog .entry-content img {;
  margin: 40px 0;
}
#blog-single section#blog .entry-content figure.center {
	text-align: center;
}
#blog-single section#blog .entry-content img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#blog-single section#blog .entry-content img.alignright {float:right; }
#blog-single section#blog .entry-content img.alignleft {float:left; }

#blog-single section#blog .metaBox a {
  color:#333333;
}
#blog-single section#blog .metaBox a:hover,
#blog-single section#blog .metaBox a:focus {
  color:#333333;
  text-decoration:underline;
}
#blog-single section#blog .shareBox .shareTitle {
  font-size:25px;
  font-family: Gibson-SemiBold;
	font-weight: normal;
	font-style: normal;
	margin-bottom: 13px;
}
#blog-single section#blog .shareBox a {
  color:#333333;
  display: inline-block;
  margin-right: 20px;
}
#blog-single section#blog .shareBox i {
  font-size:25px;
}
#blog-single section#blog hr {
  margin: 2em 0;
}
#blog-single #accordion h4.panel-title {
  font-size:22px;
}
#blog-single #accordion h4.panel-title a:hover,
#blog-single #accordion h4.panel-title a:focus {
  text-decoration:underline;
  color:#333333;
}
#blog-single #accordion .panel {
    border:none;
}
#blog-single #accordion .panel-default>.panel-heading {
    color: #333;
    background-color: #fff;
    border-color: #fff;
}
#blog-single #accordion .panel-heading {
    padding: 10px 0;
}
#blog-single #accordion .panel-body {
    padding: 15px 0;
}
#blog-single #accordion .panel-default>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: #fff;
}
#blog-single #accordion a.accordion-toggle span.opened {
  display:none;
}
#blog-single #accordion a[aria-expanded="true"] span.opened {
  display:block;
}
#blog-single #accordion a[aria-expanded="true"] span.closed {
  display:none;
}

/* ==========================================================================
   About Us styles
   ========================================================================== */
section#about-us h4 {
	text-align: center;
}
section#about-us .card {
  border:1px solid #e8e8e8;
  margin-bottom:37px;
  text-align: center;
}
section#about-us .card h5 {
  margin-top:20px;
}
section#about-us .card p.title {
  margin-bottom:20px;
}
@media only screen and (max-width: 768px) {
	section#about-us .card img.img-responsive {
	  display:inline-block;
	}
}

/* ==========================================================================
   Work styles
   ========================================================================== */
section#work .card {
  border:1px solid #e8e8e8;
  margin-bottom:37px;
  text-align: center;
  padding: 0 20px 20px 20px;
  position: relative;
}
section#work .card:hover {
  border:1px solid #b22b2f;
}
section#work .card .img-wrapper {
  height:250px;
  text-align:center;
  white-space: nowrap;
  margin: 1em 0;
}
section#work .card .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
section#work .card .img-wrapper img.img-responsive {
  max-height:250px;
  display:inline-block;
  vertical-align: middle;
}
section#work .card .mask {
  overflow: hidden;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}
section#work .card .work-entry .btn-arrow {
    padding: 14px 10px 12px 10px;
    width: 100%;
}
section#work .card .work-entry .btn-arrow i.fa {
    padding-left: 10px;
}

/* ==========================================================================
   Contact Us styles
   ========================================================================== */
section#contact-us h3 {
    font-size: 33px;
    margin-bottom:15px;
}
section#contact-us .leftCol h3 {
    margin-bottom:20px;
}
section#contact-us h5 {
    font-size: 25px;
    margin-top:32px;
    margin-bottom:20px;
}
section#contact-us p {
    font-size: 22px;
}
section#contact-us p.social-icon {
    font-size: 30px;
}
section#contact-us p.social-icon a {
    display:inline-block;
    padding-right:25px;
}
@media only screen and (max-width: 768px) {
	section#contact-us .border-grey-right {
	  border-right:none;
	}
}

/* ==========================================================================
   FAQ styles
   ========================================================================== */
section#faq h4 a {
  font-family: Gibson-SemiBold;
	font-weight: normal;
	font-style: normal;
}
section#faq #accordion h5.panel-title,
section#faq #accordion .panel-body p {
  font-size:22px;
}
section#faq #accordion a h5.panel-title,
section#faq #accordion a h5.panel-title:focus {
  color:#333;
}
section#faq #accordion a h5.panel-title:hover {
  color:#40ACA9;
}
section#faq #accordion .panel {
    border:none;
    border-bottom:1px solid #e8e8e8;
    padding-bottom:28px;
}
section#faq #accordion .panel-default>.panel-heading {
    color: #333;
    background-color: #fff;
}
section#faq #accordion .panel-heading {
    padding: 28px 0 0 0;
}
section#faq #accordion .panel-body {
    padding: 0;
}
section#faq #accordion .panel-default>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: #fff;
}

/* ==========================================================================
   Section SEO styles
   ========================================================================== */
section.seo p {
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 30px;
}
section.seo ul,
section.seo li {
  font-size:18px;
}
section.seo p a {
  font-family: Gibson-SemiBold;
	font-weight: normal;
	font-style: normal;
}
@media only screen and (min-width: 768px) {
  section.seo.layoutImageRight .col-sm-8 {
    padding-right:60px;
  }
  section.seo.layoutImageLeft .col-sm-8 {
    padding-left:60px;
  }
}

/* ==========================================================================
   Landing Page styles
   ========================================================================== */
section#lp {
	margin-top: 144px;
}
@media only screen and (min-width: 1200px) {
	section#lp {
	margin-top: 94px;
	}
}
@media only screen and (max-width: 768px) {
	section#lp {
	margin-top: 94px;
	}
}
section#lp h1 {
  margin-bottom:30px;
}
section#lp h1,
section#lp h2 {
  margin-top:0;
}
section#lp img {
  display: block;
    max-width: 100%;
    height: auto;
}
@media only screen and (min-width: 768px) {
  section#lp .col-sm-8 {
    padding-right:60px;
  }
}
section#testimonial {
  background: rgba(18, 133, 152, 0.75);/* green #128598 */
}
section#customer-logo img {
  max-height:100px;
  display:inline-block;
  margin:0 20px;
  opacity:0.8;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

/* ==========================================================================
   Post Navigation styles
   ========================================================================== */
.pager li>a, .pager li>span {
    border: none;
    border-radius: 0;
}
.pager li>a:hover, .pager li>span:hover,
.pager li>a:focus, .pager li>span:focus {
    background-color:#fff;
}

/* ==========================================================================
   Page Header
   ========================================================================== */
section#hero .engineering {
  background: rgba(15, 91, 120, 0.50);/* green #0f5b78 */
}
section#hero .podcast {
  background: rgba(178, 43, 47, 0.50);/* red #b22b2f */
}
section#hero .blog {
  background: rgba(51, 51, 51, 0.50);/* grey #333333 */
}
section#hero .page {
  position:relative;
  max-height: 250px;
  overflow: hidden;
}
section#hero .page .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
section#hero .page .row {
  max-height: 250px;
  display: inline-block;
    vertical-align: middle;
    width: 100%;
}
section#hero .page.homepage,
section#hero .page.homepage .row {
  max-height: 650px;
}
section#hero .page img {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
section#hero .page .mask-podcast {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background: rgba(178, 43, 47, 0.82);/* red #b22b2f */
}
section#hero .page .mask-blog {
   width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background: rgba(51, 51, 51, 0.65);/* grey #333333 */
}
section#hero .page .mask-engineering {/*Engineering Blog*/
   width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background: rgba(18, 133, 152, 0.75);/* green #128598 */
}
section#hero .page .mask-teal {/*Contact Us*/
   width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background: rgba(18, 133, 152, 0.75);/* green #128598 */
}
section#hero .page .mask-features {/*Features*/
   width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background: rgba(18, 133, 152, 0.75);/* green #128598 */
}
section#hero .page.seoPage {
    min-height: 150px;
    max-height:none;
}
section#hero .page.seoPage .row {
    max-height: none;
}
section#hero .page.seoPage h1 {
  padding: 23px 0 20px 0;
}
section#hero .page.seoPage .mask-teal {
    position: relative;
}

/* ==========================================================================
   404 Page styles
   ========================================================================== */
section#nav-error {
  height:92px;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.15);
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.15);
    -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,.15);
}
section#nav-error img {
  width: 233px;
  padding: 20px 15px;
}
section#page-error {
  margin:7% 0;
}
section#page-error .error-msg-lrg {
  font-size: 350px;
  font-family: Gibson-SemiBold;
	font-weight: normal;
	font-style: normal;
  line-height: 285px !important;
}
@media screen and (max-width: 1120px) {
  section#page-error .error-msg-lrg {
    font-size: 265px;
    line-height: 260px !important;
  }
}
@media screen and (max-width: 780px) {
  section#page-error .error-msg-lrg {
    font-size: 150px;
  }
  section#page-error .btn.clr-teal {
    padding: 14px 20px;
  }
}


/* ==========================================================================
   Footer styles
   ========================================================================== */
footer#footer {
	font-family: 'Open Sans', sans-serif;
	font-weight:700;
	background-color:#333333;
	color:#ffffff;
	font-size:15px;
	padding: 50px 0;
}
footer#footer a {
  color:#ffffff;
}
footer#footer a:hover,
footer#footer a:focus {
  color:#ffffff;
}
footer#footer .footer-link p {
  display:inline-block;
}
footer#footer .copyright {
	font-weight:400;
	color:#707070;
	font-size:13px;
}
footer#footer .sm-icon {padding-bottom: 15px;}
footer#footer .sm-icon a {
  display:inline-block;
  padding:0 20px;
  font-size: 27px;
}
footer#footer .footer-link a {
  display:inline-block;
  padding:0 10px;
}
footer#footer .nowrap {white-space: nowrap;}

/* ==========================================================================
   Responsive Style
   ========================================================================== */
@media only screen and (max-width: 480px) {
  #service1 .col-sm-6,
  #service2 .col-sm-6,
  .featured .col-sm-4,
  .featured .col-sm-8,
  .case-study .txt-container  {
  	text-align: center;
  }
  section.case-study .image-right .img-wrapper,
  section.case-study .image-left .img-wrapper {
    background-position: center;
	}
	section.case-study .img-wrapper {
    min-height: 250px;
    margin-top: 30px;
	}
	section.case-study .image-right .txt-container, 
	section.case-study .image-left .txt-container {
    padding-top: 30px;
    padding-bottom: 30px;
    min-height: 250px;
	}
	section#blog-listing .blogPost {
    height: 220px;
	}
	section#blog-listing .blogPost img {
    height: 100%;
	}
	section#blog-listing .blogPost h3 {
		font-size:23px;
	}
	.billboard .btn.clr-teal {
		padding: 14px;
		width:100%;
	}
	.navbar-brand {
    padding: 23px 10px;
	}

}

/* ==========================================================================
   Override SharpSpring Form
   ========================================================================== */
.sharpspring_form form {padding: 0;}
.sharpspring_form fieldset li label {display: none !important;}
.sharpspring_form input[type=text],
.sharpspring_form input[type=email],
.sharpspring_form input[type=password],
.sharpspring_form input[type=number] {
	border: 1px solid #ccc;
	font-size: 22px;
	height: 56px;
	width: 100%;
	padding: 6px 12px;
  line-height: 1.42857143;
  color: #555;
}
.sharpspring_form textarea {
	border: 1px solid #ccc;
	font-size: 22px;
	height: 100px;
	width: 100%;
	padding: 6px 12px;
  line-height: 1.42857143;
  color: #555;
}
.sharpspring_form .button {
	font-family: Gibson-SemiBold;
  font-weight: normal;
  font-style: normal;
  font-size: 26px;
  padding: 11px 20px;
  color: #ffffff;
  background-image:none;
  background-color:#40ACA9;
  border:none;
  text-shadow: none;
  line-height: 1.5;
  width:100%;
}
.sharpspring_form .button:hover,
.sharpspring_form .button:focus {
	color: #fff;
	opacity: 0.8;
	background-image:none;
	background-color:#40ACA9;
}

/* ==========================================================================
   Infusion Form
   ========================================================================== */
.infusion-form input[type=text],
.infusion-form input[type=email],
.infusion-form input[type=password],
.infusion-form input[type=number] {
	border: 1px solid #ccc;
	font-size: 22px;
	height: 56px;
	width: 100%;
	padding: 6px 12px;
  line-height: 1.42857143;
  color: #555;
  border-radius: 2px;
  font-family: Helvetica, Arial, sans-serif;
}
.infusion-form input:focus {
  outline: none;
  box-shadow: 0 2px 4px #ddd;
  background-color: #fffdf3;
  transition: background-color .5s;
  -moz-transition: background-color .5s;
  /* Firefox 4 */
  -webkit-transition: background-color .5s;
  /* Safari and Chrome */
  -o-transition: background-color .5s;
  /* Opera */
}
.infusion-form textarea {
	border: 1px solid #ccc;
	font-size: 22px;
	height: 100px;
	width: 100%;
	padding: 6px 12px;
  line-height: 1.42857143;
  color: #555;
  font-family: Helvetica, Arial, sans-serif;
}
.infusion-form textarea:focus {
  outline: none;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px #ddd;
  background-color: #fffdf3;
  transition: background-color .5s;
  -moz-transition: background-color .5s;
  /* Firefox 4 */
  -webkit-transition: background-color .5s;
  /* Safari and Chrome */
  -o-transition: background-color .5s;
  /* Opera */
}
.infusion-form input[type=submit] {
	font-family: Gibson-SemiBold;
  font-weight: normal;
  font-style: normal;
  font-size: 26px;
  padding: 11px 20px;
  color: #ffffff;
  background-image:none;
  background-color:#40ACA9;
  border:none;
  text-shadow: none;
  line-height: 1.5;
  width:100%;
  border-radius: 2px;
}
.infusion-form input[type=submit]:hover,
.infusion-form input[type=submit]:focus {
	color: #fff;
	opacity: 0.8;
	background-image:none;
	background-color:#40ACA9;
}   
.infusion-form .infusion-field {
	margin: 0 0 14px 0;
}   
.infusion-form .infusion-field label,
.infusion-form .infusion-field br {
	display:none;
} 

/* ==========================================================================
   Hubspot embedded form
   ========================================================================== */
.leftCol br {display:none;}
.widget-form .hbspt-form {margin-top: 13px;}

.widget-form .hs-form input:not([type="image"]),
.widget-form .hs-form textarea {box-sizing: inherit;}
.widget-form input.hs-input:focus,
.widget-form textarea.hs-input:focus {border-color: #ccc;box-shadow: none;}
.widget-form .hs-form.stacked .actions {margin-left: 0;padding: 0;}
.widget-form .hs-form .hs-button:hover:not(.inactive),
.widget-form .hs-form .hs-button:focus:not(.inactive),
.widget-form .hs-form .hs-button.hovered:not(.inactive) {box-shadow: none;border: none;}
.widget-form .hs-form .hs-button:active:not(.inactive):not(.link) {background-color: #40ACA9;background-image: none;box-shadow: none;border: none;}

.hbspt-form input[type=text],
.hbspt-form input[type=email],
.hbspt-form input[type=password],
.hbspt-form input[type=number],
.hbspt-form input[type=tel] {
	border: 1px solid #ccc;
	font-size: 22px;
	height: 56px;
	width: 100%;
	padding: 6px 12px;
  line-height: 1.42857143;
  color: #555;
  border-radius: 2px;
  font-family: Helvetica, Arial, sans-serif;
}
.hbspt-form input:focus {
  outline: none;
  box-shadow: 0 2px 4px #ddd;
  background-color: #fffdf3;
  transition: background-color .5s;
  -moz-transition: background-color .5s;
  /* Firefox 4 */
  -webkit-transition: background-color .5s;
  /* Safari and Chrome */
  -o-transition: background-color .5s;
  /* Opera */
}
.hbspt-form textarea {
	border: 1px solid #ccc;
	font-size: 22px;
	height: 100px;
	width: 100%;
	padding: 6px 12px;
  line-height: 1.42857143;
  color: #555;
  font-family: Helvetica, Arial, sans-serif;
}
.hbspt-form textarea:focus {
  outline: none;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px #ddd;
  background-color: #fffdf3;
  transition: background-color .5s;
  -moz-transition: background-color .5s;
  /* Firefox 4 */
  -webkit-transition: background-color .5s;
  /* Safari and Chrome */
  -o-transition: background-color .5s;
  /* Opera */
}
.hbspt-form input[type=submit] {
	font-family: Gibson-SemiBold;
  font-weight: normal;
  font-style: normal;
  font-size: 26px;
  padding: 11px 20px;
  color: #ffffff;
  background-image:none;
  background-color:#40ACA9;
  border:none;
  text-shadow: none;
  line-height: 1.5;
  width:100%;
  border-radius: 2px;
}
.hbspt-form input[type=submit]:hover,
.hbspt-form input[type=submit]:focus {
	color: #fff;
	opacity: 0.8;
	background-image:none;
	background-color:#40ACA9;
}
.hbspt-form .input {margin-bottom:10px;}
.hbspt-form label {display:none;}
.hbspt-form ul.hs-error-msgs {list-style: none;padding-left: 14px;}
.hbspt-form ul.hs-error-msgs li {color:red;font-size:16px;}
.hbspt-form ul.hs-error-msgs label {display:inline-block;}
.widget-form .hs-form.stacked label {display:none;} 
.widget-form .hs-form.stacked ul.hs-error-msgs label {display:inline-block;} 
.widget-form .hs-form.stacked ul.hs-error-msgs li label {color:red;font-size:16px;font-weight: 700;}
.widget-form input.hs-input.error,
.widget-form .hs-form div.field.error input,
.widget-form .hs-form div.field.error textarea,
.widget-form .hs-form div.field.error .chzn-choices, 
.widget-form textarea.hs-input.error,
.widget-form input.hs-input.error:focus,
.widget-form .hs-form div.field.error input:focus,
.widget-form .hs-form div.field.error textarea:focus,
.widget-form .hs-form div.field.error .chzn-choices:focus,
.widget-form textarea.hs-input.error:focus {border-color: #ccc;box-shadow: none;}
.widget-form .hbspt-form .input {margin-bottom: 0;}

/* ==========================================================================
   Override Juicer Plugin styles
   ========================================================================== */
.widget-social {background-color:#f0f0f0;}
ul.juicer-feed h1.referral {display:none;}
.juicer-feed.classic li.feed-item .j-meta nav {
    font-size: 0.6em;
}
.juicer-feed.classic li.feed-item .j-meta ul {
    display: none;
}
.juicer-feed.classic li.feed-item .j-meta {
    width: 30px;
}
.juicer-feed .j-meta a:before {
    margin-right: 0;
}
.juicer-feed.classic li.feed-item .j-text {
  font-family: Gibson-Regular;
  font-weight: normal;
  font-style: normal;
  font-size: 0.7em;
  margin: 0 0 0 15px;
  padding: 10px 5px 10px 25px;
}
.juicer-feed.classic li.feed-item img {
    display: none;
}
.juicer-feed.classic li.feed-item .info {
    font-size: 0.8em;
}
/* ==========================================================================
   ========================================================================== */
/*!
 * IE10 viewport hack for Surface/desktop Windows 8 bug
 * Copyright 2014-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*
 * See the Getting Started docs for more information:
 * http://getbootstrap.com/getting-started/#support-ie10-width
 */
@-webkit-viewport { width: device-width; }
@-moz-viewport    { width: device-width; }
@-ms-viewport     { width: device-width; }
@-o-viewport      { width: device-width; }
@viewport         { width: device-width; }


/* ==========================================================================
   Landing Page - Contest styles
   ========================================================================== */
#contest-landing-page section#hero .page .mask-engineering {
    background: transparent;
}
#contest-landing-page section#hero .page img {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
}
#contest-landing-page section#hero .page img.banner {
    width:100%;
    height:auto;
}
#contest-landing-page .lpTitle {
  padding:20px 0;
}
#contest-landing-page .bgGrey {
  background-color:#1a1a1a;
}
#contest-landing-page .bgGrey h2,
#contest-landing-page .bgGrey h3,
#contest-landing-page .bgGrey h4,
#contest-landing-page .bgGrey p {
  color:#fff;
}
#contest-landing-page .bgGrey h2 {
  margin-bottom:40px;
}
.btn.clr-white {
  background-color:#fff;
  color:#333;
  border: 1px solid #333;
}
#contest-landing-page .brand {
  margin:0 auto 20px auto;
}
#contest-landing-page .smP {
  border-right:1px solid #e8e8e8;
  min-height:377px;
}
#contest-landing-page .smP:last-child {
  border-right:none;
}
#contest-landing-page .img-responsive {
  margin-right:auto;
  margin-left:auto;
}
@media only screen and (min-width: 780px) {
  .btn.clr-white {
    padding: 14px 100px;
    font-size: 30px;
  }
}
@media only screen and (max-width: 480px) {
  #contest-landing-page h2,
  #contest-landing-page h3,
  #contest-landing-page h4,
  #contest-landing-page p {
    text-align:center;
  }
  #contest-landing-page .smP {
    padding-bottom:50px;
  }
}

/* ==========================================================================
   Homepage - Section Service Stack styles
   ========================================================================== */
section#service-stack .sub h4 {
		color:#40ACA9;
}
section#service-stack .sub h4 a {
		color:#333;
}
section#service-stack .sub h4 a:hover {
		color:#40ACA9;
}
section#service-stack .img-circle {
    border: 2px solid #40ACA9;
    margin-left:auto;
    margin-right:auto;
}
section#service-stack .steps {
	display:inline-block;
	border: 1px solid #ccc;
	border-radius: 50%;
	width: 30px;
  height: 30px;
  padding: 4px 0;
	background-color:#fff;
	position: relative;
}
section#service-stack hr.bgBorder1:before,
section#service-stack hr.bgBorder2:before,
section#service-stack hr.bgBorder3:before,
section#service-stack hr.bgBorder4:before {
	width:110%;
}
section#service-stack hr.bgBorder1,
section#service-stack hr.bgBorder2,
section#service-stack hr.bgBorder3,
section#service-stack hr.bgBorder4 {
	margin-bottom: -16px;
}
section#service-stack hr.bgBorder4 {
	display:none;
}
section#service-stack .linkMask {
	overflow: hidden;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}
section#service-stack .hoverRed:hover .img-circle,
section#service-stack .hoverRed:hover .steps,
section#service-stack .hoverRed:hover h4 {
	border-color:#b22b2f;
	color:#b22b2f;
}
@media only screen and (max-width: 780px) {
	section#service-stack hr.bgBorder1,
	section#service-stack hr.bgBorder2,
	section#service-stack hr.bgBorder3,
	section#service-stack hr.bgBorder4 {
		display:none;
	}
	.mlBR {margin-bottom: 65px;}
}
