/*!
 _               _                                 _ _ 
| |__  _   _  __| |_ __ ___  ___  __ _ _   _  __ _| | |
| '_ \| | | |/ _` | '__/ _ \/ __|/ _` | | | |/ _` | | |
| | | | |_| | (_| | | | (_) \__ \ (_| | |_| | (_| | | |
|_| |_|\__, |\__,_|_|  \___/|___/\__, |\__,_|\__,_|_|_|
       |___/                        |_|                

// made with intenspiration
@hydrosquall - Cameron Yick 2015
*/
/* Slider Color */
/* striking content */
/* Link On Hover */
.col .service, .col .feature {
  font-size: 21px;
  font-weight: 300;
  font-family: "Roboto Slab", sans-serif; }

html {
  margin: 0;
  padding: 0; }

body {
  margin: 0;
  padding: 0; }

.section {
  width: 100%; }
  .section .container {
    padding: 30px 0 50px; }
  .section.bg {
    background: #f7f7f7; }
  .section .slider {
    background: #59ABE3; }
  .section .footer {
    background: #333; }

.container {
  position: relative;
  width: 1170px;
  margin: 0 auto;
  color: #444;
  font-size: 14px;
  font-weight: 300;
  font-family: "Roboto", "Open Sans", "Arial", sans-serif;
  overflow: hidden; }
  .container > h1:after {
    content: "";
    width: 30px;
    position: relative;
    border-bottom: 1px solid #aaa;
    display: block;
    text-align: center;
    margin: auto;
    margin-top: 15px; }
  .container > h1:not(.hero) {
    margin-bottom: 30px;
    text-align: center; }

.hold {
  height: 80px; }

.header {
  line-height: 80px;
  width: 100%;
  -webkit-transition: line-height 0.2s linear, box-shadow 0.2s linear;
          transition: line-height 0.2s linear, box-shadow 0.2s linear;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: rgba(245, 245, 245, 0.97); }
  .header.small {
    line-height: 50px;
    box-shadow: 0 1px 3px 0 rgba(50, 50, 50, 0.8); }
    .header.small > .container > #logo {
      height: 40px; }

#logo {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  background: #fafa3c url("http://dummyimage.com/170x40/333333/fafa3c.png&text=SPARK");
  float: left;
  height: 40px;
  width: 170px;
  margin-left: 5px; }

.slidercontent {
  text-align: center; }

.hero {
  font-family: "Roboto Slab", sans-serif;
  color: #fffff6;
  font-weight: normal;
  letter-spacing: 1px; }

h2 {
  font-family: "Roboto Slab", sans-serif;
  text-align: center;
  font-weight: 400;
  font-size: 18px; }
  h2.hero {
    font-size: 30px;
    margin-bottom: 60px; }

.call {
  color: #fffff6;
  display: block;
  margin-bottom: 20px; }
  .call a {
    display: inline;
    border: 1px solid #fffff6;
    padding: 8px 13px;
    font-size: 20px;
    -webkit-transition: background 0.15s linear;
            transition: background 0.15s linear; }
    .call a:hover {
      background: rgba(255, 255, 255, 0.1);
      cursor: pointer; }
    .call a:visited {
      text-decoration: none;
      color: white; }

.col {
  float: left;
  padding: 0;
  margin: 0;
  position: relative; }
  .col.four {
    width: 23%;
    margin: 0 1%; }
  .col.three {
    width: 31.3%;
    margin: 0 1%; }
  .col.two {
    width: 40%;
    margin: 0 2.5%;
    padding: 0 2.5%; }
  .col.extrapad {
    padding-top: 20px;
    padding-bottom: 20px; }
  .col .service:after {
    content: "";
    width: 50px;
    position: relative;
    border-bottom: 1px solid #eee;
    display: block;
    text-align: center;
    margin: auto;
    margin-top: 15px; }
  .col .feature {
    font-size: 19px; }
  .col h1 {
    padding: 0 1%;
    text-align: center; }
    .col h1.side {
      margin-left: 50px;
      text-align: left; }
  .col p {
    padding: 0 1%;
    text-align: center; }
    .col p.side {
      margin-left: 50px;
      text-align: left; }
  .col span.feature {
    font-size: 20px; }
  .col span.side:first-of-type {
    margin-left: 50px;
    text-align: left; }
  .col .icon {
    border-radius: 50%;
    height: 85px;
    width: 85px;
    line-height: 85px;
    text-align: center;
    margin: 0 auto;
    -webkit-transition: background 0.25s linear, color 0.25s linear;
            transition: background 0.25s linear, color 0.25s linear; }
    .col .icon.side {
      position: absolute;
      padding: 0;
      margin: 0;
      top: -15px;
      height: 50px;
      width: 50px; }
  .col .imgholder {
    height: 300px;
    width: 100%;
    background: #333 url("https://unsplash.it/370?random") center no-repeat;
    -webkit-transition: background 0.3s linear;
            transition: background 0.3s linear; }
  .col.bg {
    background: #fffff6; }
    .col.bg:hover .imgholder {
      background: #555 url("https://unsplash.it/g/370?random") center no-repeat; }
  .col.pointer {
    cursor: pointer; }
  .col:hover > .icon {
    background: #59ABE3;
    color: #fffff6; }
    .col:hover > .icon.side {
      background: initial;
      color: initial; }

.responsivegroup {
  display: none; }

.group.margin {
  margin-bottom: 20px; }

.group:after {
  content: "";
  display: table;
  clear: both; }

.left {
  text-align: left; }
  .left > h1 {
    text-align: left; }
  .left > p {
    text-align: left; }

.callout:after {
  display: none !important; }

.white {
  color: #fffff6; }

ul.nav {
  float: right;
  list-style: none;
  margin: 0;
  padding: 0; }
  ul.nav li {
    float: left;
    position: relative; }
    ul.nav li a {
      -webkit-transition: color 0.2s linear;
              transition: color 0.2s linear;
      font-size: 18px;
      padding: 21px;
      color: initial;
      text-decoration: initial; }
    ul.nav li:hover a {
      color: #59ABE3; }

h1.hero {
  font-size: 54px; }
  h1.hero:after {
    content: "";
    width: 300px;
    position: relative;
    border-bottom: 1px solid #aaa;
    text-align: center;
    margin: auto;
    margin-top: 15px; }

.footer a {
  color: #fafa3c;
  text-decoration: none; }

@media all and (min-width: 768px) {
  .container {
    width: 750px; } }

@media all and (min-width: 992px) {
  .container {
    width: 970px; } }

@media all and (min-width: 1200px) {
  .container {
    width: 1170px; } }

@media all and (max-width: 450px) {
  .col, .col.four, .col.three, .col.two {
    display: block;
    width: 95%;
    padding: 0;
    margin: 0 auto;
    float: none; }
  .col.extrapad {
    padding: 1%;
    margin-bottom: 10px; }
  .group {
    display: none; } }