/* IMPORT THE FRAMEWORK */
/* /////////////// VARIABLES /////////////// */
/* /////////////// MIXIN FUNCTIONS /////////////// */
/* /////// CUSTOM BORDER RADIUS //////// */
/* /////// CUSTOM TRANSITIONS //////// */
/* /////// LINEAR GRADIENTS //////// */
/* /////// BREAKPOINTS //////// */
/* CUSTOM MIN MAX */
/* CUSTOM MAX */
/* CUSTOM MIN */
/* --------------------------------- */
/* /////// LAYOUT FRAMEWORK //////// */
/* --------------------------------- */
/* PLACEHOLDERS */
.hero {
  position: relative; }

.hero img, .hero-banner {
  position: absolute; }

.hero-banner .button-primary, .hero-banner .button-alt {
  display: inline-block;
  zoom: 1;
  *display: inline; }

.slogan p, .service, .quote-text p {
  text-align: center; }

.about, .quote {
  width: 1200px;
  margin: 0 auto;
  text-align: left; }
  @media screen and (max-width: 1199px) {
    .about, .quote {
      width: 95%;
      padding-left: 2.5%;
      padding-right: 2.5%; } }

.slogan:before, .about:before, .services:before, .quote-wrapper:before, .quote:before, .slogan:after, .about:after, .services:after, .quote-wrapper:after, .quote:after {
  content: "";
  display: table; }
.slogan:after, .about:after, .services:after, .quote-wrapper:after, .quote:after {
  clear: both; }

.about div {
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 1.5em; }

/* LOOP TO CREATE A CLASS FOR EACH COLUMN WIDTH */
.about div {
  width: 50%; }

.quote-text p {
  font-family: "MuseoSansRounded", sans-serif;
  font-weight: 100; }

/* --------------------------------- */
/* /////// END LAYOUT FRAMEWORK //// */
/* --------------------------------- */
/* --------------------------------- */
/* /////// SITE SPECIFIC STYLES //// */
/* --------------------------------- */
/* PLACEHOLDERS */
.hero-banner .button-primary, .hero-banner .button-alt, .hero-banner h1, .slogan p, .service h1 {
  text-transform: uppercase; }

/* BUTTON */
.hero-banner .button-primary, .hero-banner .button-alt {
  margin: 1em 0.5em 1em 0em;
  padding: 0.9em 2.4em;
  font-size: 1em;
  color: #FFF; }

.hero-banner .button-primary {
  background: #138fd1; }

.hero-banner .button-primary:hover {
  background: #5abcf0; }

.hero-banner .button-primary:active {
  background: #0f6fa2; }

.hero-banner .button-alt {
  background: #c2292a; }

.hero-banner .button-alt:hover {
  background: #e17071; }

.hero-banner .button-alt:active {
  background: #982021; }

/* TITLES & BODY TEXT */
.hero-banner h1 {
  color: #f26d32;
  font-size: 1.5em;
  line-height: 1.2em;
  font-weight: 300;
  margin-bottom: 0.5em; }

.slogan p, .service h1 {
  color: #138fd1;
  font-size: 1.4em;
  line-height: 1.2em;
  font-weight: 300;
  margin-bottom: 0.5em; }

.hero-banner p, .service p {
  color: #615C56;
  padding-bottom: 1em;
  line-height: 1.5em;
  font-size: 1em; }

/* FORMS */
/* --------------------------------- */
/* /////// END SITE STYLES ///////// */
/* --------------------------------- */
/* GLOBAL ELEMENTS */
.breadcrumbs {
  border-top: none; }

/* HERO */
.hero {
  width: 100%;
  height: 540px;
  overflow: hidden; }

.hero img {
  left: 50%;
  top: -30px;
  margin-left: -600px;
  width: 1100px;
  overflow: hidden !important; }

.hero-banner {
  margin-top: 280px;
  left: 20px;
  width: 50%;
  z-index: 1;
  text-align: left;
  overflow: hidden; }
  .hero-banner h1 {
    font-size: 1.8em; }
  .hero-banner p {
    font-size: 1.1em; }

/* SLOGAN */
.slogan {
  padding: 20px 40px; }
  .slogan p {
    text-transform: none !important;
    color: #138fd1;
    font-size: 1.5em;
    margin-bottom: 10px; }

/* ABOUT */
.about {
  padding: 1.5em 0; }

/* SERVICES */
.services {
  padding: 3em 0; }

.service {
  width: 18.5%;
  min-height: 380px;
  float: left;
  padding: 1.5em 0.5%;
  color: #fff;
  border: 1px solid #fff; }
  .service h1 {
    color: #fff;
    font-size: 1em;
    font-weight: 500; }
  .service p {
    color: #fff; }
  .service img {
    width: 40%;
    padding: 1.5em 0 3em 0; }

/* QUOTE */
.quote-wrapper {
  background-color: #1f75b5;
  /* Fallback Color */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#2792c5), to(#1f75b5));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #2792c5, #1f75b5);
  /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(top, #2792c5, #1f75b5);
  /* FF3.6 */
  background-image: -ms-linear-gradient(top, #2792c5, #1f75b5);
  /* IE10 */
  background-image: -o-linear-gradient(top, #2792c5, #1f75b5);
  /* Opera 11.10+ */
  background-image: linear-gradient(top, #2792c5, #1f75b5);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#2792c5', EndColorStr='#1f75b5'); }

.quote {
  padding: 0px 0; }

.quote-text {
  width: 60%;
  float: left; }
  .quote-text p {
    color: #FFF;
    font-size: 1.5em;
    line-height: 2em;
    font-weight: 100;
    padding: 120px 20px; }

.quote-image {
  width: 40%;
  float: left; }
  .quote-image img {
    width: 90%;
    padding-left: 1em; }

@media screen and (max-width: 768px) {
  .hero img {
    margin-left: -550px;
    width: 1000px; }

  .hero-banner {
    margin-top: 350px;
    left: 20px;
    z-index: 1;
    text-align: left; }
    .hero-banner h1 {
      font-size: 1.5em; }

  .service {
    min-height: 430px;
    padding: 1.5em 0%; }

  .quote-text p {
    font-size: 1.4em;
    padding: 60px 20px; }

  .quote-image {
    margin-top: 20px; } }
@media screen and (max-width: 680px) {
  .hero {
    height: 400px; }

  .hero img {
    top: -40px;
    margin-left: -300px;
    width: 600px; }

  .hero-banner {
    width: 90%;
    margin-top: 180px;
    left: 20px; }
    .hero-banner h1 {
      font-size: 1.2em; }
    .hero-banner p {
      font-size: 0.9em; }
    .hero-banner .button-primary {
      margin: 1em 0.4em 1em 0em;
      padding: 0.9em 1em;
      font-size: 0.8em;
      color: #FFF; }
    .hero-banner .button-alt {
      margin: 1em 0em 1em 0em;
      padding: 0.9em 1em;
      font-size: 0.8em;
      color: #FFF; }

  .slogan {
    padding: 10px 0px; }
    .slogan p {
      font-size: 1.3em;
      margin-bottom: 0px; }

  .about div {
    width: 100% !important;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0.5em; }

  .services {
    padding: 0 0; }

  .service {
    width: 100%;
    min-height: 280px;
    margin-bottom: 0.5em;
    margin-right: 0; }
    .service h1 {
      color: #fff;
      font-size: 1.4em; }
    .service p {
      color: #fff;
      font-size: 1.1em; }
    .service img {
      width: 20%;
      padding: 1.5em 0 1.5em 0; }

  .quote {
    padding: 0 0; }

  .quote-text {
    width: 100%; }
    .quote-text p {
      line-height: 1.5em;
      padding: 50px 0px; }

  .quote-image {
    width: 100%; }
    .quote-image img {
      width: 100%;
      padding-left: 0em;
      margin-bottom: 1em; } }