/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */
html,
button,
input,
select,
textarea {
  color: #222;
}
body {
  font-size: 1em;
  line-height: 1.5;
}
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
img {
  vertical-align: middle;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
textarea {
  resize: vertical;
}
.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}
/* ==========================================================================
   $VARS
   ========================================================================== */
/* ==========================================================================
   $MAIN
   ========================================================================== */
* {
  -webkit-box-sizing: border-box;
  /* Android ≤ 2.3, iOS ≤ 4 */
  -moz-box-sizing: border-box;
  /* Firefox 1+ */
  box-sizing: border-box;
  /* Chrome, IE 8+, Opera, Safari 5.1 */
}
html {
  font-size: 100%;
}
body {
  font-family: "PT Sans", sans-serif;
  font-size: 1em;
}
h1,
h2,
h3,
h4,
h5,
h6,
hgroup,
ul,
ol,
dl,
blockquote,
p,
address,
table,
fieldset,
figure,
pre {
  margin: 0;
  padding: 0;
  margin-bottom: 1.5rem;
}
/*------------------------------------*\
    $TYPOGRAPHY
\*------------------------------------*/
h1,
.alpha {
  font-size: 3rem;
}
h2,
.beta {
  font-size: 2rem;
}
h3,
.delta {
  font-size: 1.5rem;
}
h4,
.gamma {
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 1;
}
.small {
  font-size: .85rem;
}
ol li,
ul li {
  margin-bottom: .75rem;
  margin-left: .75rem;
}
li li {
  margin-left: 1rem;
}
@media only screen and (min-width: 990px) {
  ol li,
  ul li {
    margin-left: 0;
  }
  li li {
    margin-left: 1rem;
  }
}
a,
a:visited {
  color: #155bd3;
}
a:hover {
  color: #2048b2;
}
/*------------------------------------*\
    $IMAGES
\*------------------------------------*/
/**
 * Fluid images.
 */
img {
  max-width: 100%;
}
/**
 * Non-fluid images if you specify `width` and/or `height` attributes.
 */
img[width],
img[height] {
  max-width: none;
}
/**
 * Rounded images.
 */
.img--round {
  border-radius: 50%;
}
/**
* Bigger images
**/
/**
 * Images in `figure` elements.
 */
figure > img {
  display: block;
}
/*------------------------------------*\
    $NAVIGATION
\*------------------------------------*/
.nav {
  list-style: none;
  margin: 0;
  *zoom: 1;
  /* For IE 6/7 only -- triggers hasLayout */
}
.nav:before,
.nav:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.nav:after {
  clear: both;
}
.nav li {
  display: inline;
  margin: 0;
}
.nav a {
  display: inline-block;
  *display: inline;
  zoom: 1;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.nav--stacked li {
  display: list-item;
}
.nav--stacked a {
  display: block;
}
.nav--main {
  text-align: right;
}
.nav--main a {
  text-decoration: none;
  color: inherit;
  margin-top: -0.75rem;
  margin-left: .5rem;
  padding: .75rem;
  border-radius: 2px;
  border-bottom: 1px solid transparent;
}
.nav--main .active,
.nav--main a:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.nav--sub {
  text-align: center;
  width: 100%;
}
@media only screen and (min-width: 990px) {
  .nav--sub {
    text-align: right;
  }
}
.nav--sub a {
  color: #222;
  line-height: 3;
  text-decoration: none;
  padding-right: 1.5rem;
  border-bottom: 1px solid #eee;
}
.nav--sub .active,
.nav--sub a:hover {
  border-right: none;
  background: #f7f7f7;
}
.nav--footer {
  -webkit-font-smoothing: antialiased;
  margin-bottom: 1.5rem;
  *zoom: 1;
  /* For IE 6/7 only -- triggers hasLayout */
  background-image: url('../img/hero-blur.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.nav--footer:before,
.nav--footer:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.nav--footer:after {
  clear: both;
}
.nav--footer a {
  background: rgba(0, 0, 0, 0.6);
  padding: 1.5rem 0;
  color: #fff;
  font-weight: bold;
  display: block;
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  text-decoration: none;
}
@media only screen and (min-width: 990px) {
  .nav--footer {
    background: none;
  }
  .nav--footer a {
    font-size: .85rem;
    padding: .75rem 1.5rem;
    color: #222;
    display: inline-block;
    *display: inline;
    zoom: 1;
    background: none;
    border-radius: 2px;
  }
  .nav--footer .active,
  .nav--footer a:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
}
/*------------------------------------*\
    $BUTTONS
\*------------------------------------*/
.btn {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  font-family: inherit;
  font-size: 100%;
  cursor: pointer;
  border: none;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 3;
  padding-right: 1em;
  padding-left: 1em;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
}
.btn,
.btn:hover {
  text-decoration: none;
}
.btn:active,
.btn:focus {
  outline: none;
}
.btn {
  background: #ccc;
  text-transform: uppercase;
  color: #222;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  border-radius: 2px;
  -webkit-box-shadow: 0 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px rgba(0, 0, 0, 0.25);
}
.btn--full {
  width: 100%;
  text-align: center;
}
.btn--primary {
  color: #fff !important;
  background-color: #155bd3;
}
/*------------------------------------*\
    $CONTAINERS
\*------------------------------------*/
.container {
  background: #fff;
  color: #222;
  overflow: hidden;
  position: relative;
}
.container--hero {
  padding-top: 1rem;
  height: 25rem;
  background-image: url('../img/hero-blur.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #fff;
}
@media only screen and (min-width: 990px) {
  .container--hero {
    height: 35rem;
    background-image: url('../img/hero.jpg');
    background-position: center;
    background-size: cover;
  }
}
@media only screen and (min-width: 1025px) {
  .container--hero {
    background-attachment: fixed;
    background-position: center -9rem;
  }
}
.container--clients {
  padding: 1.5rem 0 0 0;
  background: #f2f2f2;
}
.container--quotes {
  padding-top: 1.5rem;
}
@media only screen and (min-width: 990px) {
  .container--quotes {
    padding-top: 6rem;
    padding-bottom: 0;
    text-align: center;
  }
}
.container--footer {
  background: #f2f2f2;
  padding-bottom: 1.5rem;
  text-align: center;
  font-size: 0.75rem;
}
@media only screen and (min-width: 990px) {
  .container--footer {
    padding: 1.5rem 0;
  }
}
.container--header {
  padding-top: 1rem;
  color: #fff;
  height: 6.5rem;
  background: #333;
}
.container--header {
  background-image: url('../img/hero.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media only screen and (min-width: 990px) {
  .container--header {
    height: 15rem;
    background-image: url('../img/hero.jpg');
    background-position: center -25rem;
    background-size: cover;
  }
}
@media only screen and (min-width: 1025px) {
  .container--header {
    background-position: center -30rem;
    background-attachment: fixed;
  }
}
.container--text {
  padding-bottom: 3rem;
}
.container--padded {
  padding: 3rem 0;
}
@media only screen and (min-width: 990px) {
  .container--padded {
    padding: 7.5rem 0;
  }
}
.container--double-padded {
  padding: 7.5rem 0;
}
@media only screen and (min-width: 990px) {
  .container--double-padded {
    padding: 12rem 0;
  }
}
.content {
  padding-top: 3rem;
  padding-left: 3%;
  padding-right: 3%;
}
@media only screen and (min-width: 990px) {
  .content {
    padding-left: 0;
    padding-right: 0;
  }
}
.sidebar {
  padding-top: 3rem;
  margin-bottom: -9999px;
  padding-bottom: 9999px;
}
@media only screen and (min-width: 990px) {
  .sidebar {
    border-right: 1px solid #eee;
  }
}
/*------------------------------------*\
    $GRID
\*------------------------------------*/
/* this grid should never go inside the .content container */
.grid {
  padding: 0 3%;
  position: relative;
  margin-left: -3rem;
  *zoom: 1;
  /* For IE 6/7 only -- triggers hasLayout */
}
.grid:before,
.grid:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.grid:after {
  clear: both;
}
@media only screen and (min-width: 990px) {
  .grid {
    padding: 0 15%;
  }
}
.grid--tight {
  margin-left: -1.5rem;
}
.grid--page {
  padding: 0 3%;
}
@media only screen and (min-width: 990px) {
  .grid--page {
    padding: 0;
  }
}
.grid__item {
  float: left;
  padding-left: 3rem;
  margin-bottom: 1.5rem;
  *zoom: 1;
  /* For IE 6/7 only -- triggers hasLayout */
  position: relative;
}
.grid__item:before,
.grid__item:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.grid__item:after {
  clear: both;
}
.grid--tight .grid__item {
  padding-left: 1.5rem;
}
.grid__img {
  width: 100%;
}
/* Palm grid */
.palm--one-half {
  width: 50%;
}
.palm--one-whole {
  width: 100%;
}
/* lap/tablet grid */
@media only screen and (min-width: 500px) {
  .lap--one-third {
    width: 33%;
  }
  .lap--one-fourth {
    width: 25%;
  }
}
/* Desktop grid */
@media only screen and (min-width: 990px) {
  .desk--one-half {
    width: 50%;
  }
  .desk--one-third {
    width: 33.33333333%;
  }
  .desk--one-fourth {
    width: 25%;
  }
  .desk--one-fifth {
    width: 20%;
  }
}
/*------------------------------------*\
    $FORMS
\*------------------------------------*/
form label {
  display: block;
  font-weight: bold;
  line-height: 2;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
  background-color: #f7f7f7;
  width: 100%;
  border: none;
  padding: .75rem .75rem;
  margin-bottom: 1.5rem;
  *zoom: 1;
  /* For IE 6/7 only -- triggers hasLayout */
  border-radius: 2px;
  border: 1px solid #ddd;
}
input[type=text]:before,
input[type=email]:before,
input[type=url]:before,
input[type=password]:before,
textarea:before,
input[type=text]:after,
input[type=email]:after,
input[type=url]:after,
input[type=password]:after,
textarea:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
input[type=text]:after,
input[type=email]:after,
input[type=url]:after,
input[type=password]:after,
textarea:after {
  clear: both;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
  outline: 2px solid #155bd3;
}
.required {
  color: #DA432C;
}
/*------------------------------------*\
    $SPECIFICS
\*------------------------------------*/
.header {
  padding: 1.5rem 0 3rem 0;
}
.logo {
  display: block;
  text-decoration: none;
  position: relative;
  top: -1rem;
  max-width: 10rem;
  margin: 0 auto;
}
@media only screen and (min-width: 990px) {
  .logo {
    width: 100%;
  }
}
.welcome {
  color: #fff;
  position: relative;
  top: 12%;
  text-align: center;
}
@media only screen and (min-width: 990px) {
  .welcome {
    top: 30%;
    text-align: left;
  }
}
.welcome h1,
.welcome h2 {
  margin: 0;
}
.welcome h2 {
  font-size: 1.5rem;
  text-transform: uppercase;
}
.welcome h3 {
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 100;
}
.client {
  width: 100%;
  -webkit-animation: unblur 2s 1;
  /* Chrome, Safari 5+ */
  -moz-animation: unblur 2s 1;
  /* Firefox 5-15 */
  -o-animation: unblur 2s 1;
  /* Opera 12.00 */
  animation: unblur 2s 1;
}
.client-text {
  display: block;
  text-align: center;
  font-size: .75rem;
  text-transform: uppercase;
  color: #bbb;
}
.service {
  position: relative;
  overflow: hidden;
  height: auto;
  padding: 1.5rem 0;
  background-color: #f2f2f2;
}
@media only screen and (min-width: 990px) {
  .service {
    padding: 4.5rem 0;
  }
}
.service--alt {
  background-color: #fff;
}
.service__img {
  position: absolute;
  left: -10%;
  width: 50%;
  border-radius: 10px;
}
.service__title a {
  text-decoration: none;
  color: inherit;
}
.service__title a:hover {
  color: #2048b2;
}
.service--alt .service__img {
  right: -10%;
  left: auto;
  width: 50%;
}
.quote {
  background: #f2f2f2;
  border-radius: 10px;
  padding: 1.5rem .5rem;
  position: relative;
}
.quote:after {
  content: " ";
  display: block;
  position: absolute;
  bottom: -1.7rem;
  left: 50%;
  margin-left: -16px;
  border: 16px solid transparent;
  border-top-color: #f2f2f2;
  width: 0;
  height: 0;
}
.quote-logo {
  display: block;
  margin: 0 auto;
  width: 30%;
}
@media only screen and (min-width: 990px) {
  .quote-logo {
    width: 50%;
  }
}
.team-avatar {
  position: relative;
  overflow: hidden;
  display: block;
  *zoom: 1;
  /* For IE 6/7 only -- triggers hasLayout */
}
.team-avatar:before,
.team-avatar:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.team-avatar:after {
  clear: both;
}
.team-avatar .team-avatar__front {
  -webkit-transition: all 0.2s ease-in;
  /* Chrome 1-25, Safari 3.2+ */
  -moz-transition: all 0.2s ease-in;
  /* Firefox 4-15 */
  -o-transition: all 0.2s ease-in;
  /* Opera 10.50–12.00 */
  transition: all 0.2s ease-in;
  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
.team-avatar:hover .team-avatar__front {
  opacity: 0;
}
.team-avatar__front {
  position: absolute;
}
.team-avatar__name {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: .1rem 0;
}
.contact-form {
  margin-bottom: 6rem;
}
/* ==========================================================================
   Animations
   ========================================================================== */
@-webkit-keyframes unblur {
  0% {
    -webkit-filter: blur(20px);
  }
  50% {
    -webkit-filter: blur(5px);
  }
  100% {
    -webkit-filter: blur(0);
  }
}
@-moz-keyframes unblur {
  0% {
    -moz-filter: blur(20px);
  }
  50% {
    -moz-filter: blur(5px);
  }
  100% {
    -moz-filter: blur(0);
  }
}
@-o-keyframes unblur {
  0% {
    -o-filter: blur(20px);
  }
  50% {
    -o-filter: blur(5px);
  }
  100% {
    -o-filter: blur(0);
  }
}
@keyframes unblur {
  0% {
    filter: blur(20px);
  }
  50% {
    filter: blur(5px);
  }
  100% {
    filter: blur(0);
  }
}
/* ==========================================================================
   Helper classes
   ========================================================================== */
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.full-width {
  width: 100%;
}
/*
 * Horizontal text alignment
 */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
@media only screen and (max-width: 989px) {
  .m-text-center {
    text-align: center;
  }
  .m-text-left {
    text-align: left;
  }
  .m-text-right {
    text-align: right;
  }
}
/**
 * Display-type utilities
 */
.inline {
  display: inline !important;
}
.inline-block {
  display: inline-block !important;
}
.block {
  display: block !important;
}
/*
 * Common margins
 */
.margin-t {
  margin-top: 1.5rem;
}
.margin-r {
  margin-right: 1.5rem;
}
.margin-b {
  margin-bottom: 1.5rem;
  *zoom: 1;
  /* For IE 6/7 only -- triggers hasLayout */
}
.margin-b:before,
.margin-b:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.margin-b:after {
  clear: both;
}
.margin-l {
  margin-left: 1.5rem;
}
.margin-ts {
  margin-top: .75rem;
}
.margin-rs {
  margin-right: .75rem;
}
.margin-bs {
  margin-bottom: .75rem;
  *zoom: 1;
  /* For IE 6/7 only -- triggers hasLayout */
}
.margin-bs:before,
.margin-bs:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.margin-bs:after {
  clear: both;
}
.margin-ls {
  margin-left: .75rem;
}
.tight {
  margin: 0;
}
/* Image Replacement */
.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  *text-indent: -9999px;
}
.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}
/* Hiding Stuff */
.hidden {
  display: none !important;
  visibility: hidden;
}
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}
.invisible {
  visibility: hidden;
}
.clearfix {
  *zoom: 1;
  /* For IE 6/7 only -- triggers hasLayout */
}
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.clearfix:after {
  clear: both;
}
/* ==========================================================================
   Print styles
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links for images, or javascript/internal links
     */
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
    /* h5bp.com/t */
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}