@import url(fonts/_fonts.css);
@import url(//fonts.googleapis.com/css?family=PT+Sans:400,700|Oswald:400,700);
/*imports*/
/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/*
 * Corrects `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block; }

/*
 * Corrects `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video {
  display: inline-block; }

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/*
 * Addresses styling for `hidden` attribute not present in IE 8/9.
 */
[hidden] {
  display: none; }

/* ==========================================================================
   Base
   ========================================================================== */
/*
 * 1. Sets default font family to sans-serif.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */ }

/*
 * Removes default margin.
 */
body {
  margin: 0; }

/* ==========================================================================
   Links
   ========================================================================== */
/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted; }

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0; }

/* ==========================================================================
   Typography
   ========================================================================== */
/*
 * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
 * Safari 5, and Chrome.
 */
h1 {
  font-size: 2em; }

/*
 * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/*
 * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/*
 * Addresses styling not present in Safari 5 and Chrome.
 */
dfn {
  font-style: italic; }

/*
 * Addresses styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/*
 * Corrects font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em; }

/*
 * Improves readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

/*
 * Sets consistent quote types.
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

/*
 * Addresses inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* ==========================================================================
   Embedded content
   ========================================================================== */
/*
 * Removes border when inside `a` element in IE 8/9.
 */
img {
  border: 0; }

/*
 * Corrects overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden; }

/* ==========================================================================
   Figures
   ========================================================================== */
/*
 * Addresses margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */
/*
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/*
 * 1. Corrects color not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/*
 * 1. Corrects font family not being inherited in all browsers.
 * 2. Corrects font size not being inherited in all browsers.
 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
 */
button,
input,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */ }

/*
 * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal; }

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/*
 * Re-set default cursor for disabled elements.
 */
button[disabled],
input[disabled] {
  cursor: default; }

/*
 * 1. Addresses box sizing set to `content-box` in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box; }

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/*
 * Removes inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/*
 * 1. Removes default vertical scrollbar in IE 8/9.
 * 2. Improves readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */ }

/* ==========================================================================
   Tables
   ========================================================================== */
/*
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

/*
* Fluid Skeleton 
* Based on Skeleton, Dave Gamache
* www.getskeleton.com
* Butchered by Ian Yates
* http://webdesign.tutsplus.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
/* Flexible Column Widths - mobile first
================================================== */
.container {
  position: relative;
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  padding: 0; }

.container .columns,
.container .column {
  float: left;
  display: inline;
  padding-left: 1em;
  padding-right: 1em; }

.container .one.column,
.container .one.columns,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column {
  width: 100%; }

/* Offsets */
.container .offset-by-one,
.container .offset-by-two,
.container .offset-by-three,
.container .offset-by-four,
.container .offset-by-five,
.container .offset-by-six,
.container .offset-by-seven,
.container .offset-by-eight,
.container .offset-by-nine,
.container .offset-by-ten,
.container .offset-by-eleven,
.container .offset-by-twelve,
.container .offset-by-thirteen,
.container .offset-by-fourteen,
.container .offset-by-fifteen {
  margin-left: 0; }

 /* #getting bigger - breakpoint tablets
================================================== */
@media only screen and (min-width: 480px) {
  .container {
    width: 90%; } }
 /* #getting bigger - breakpoint beyond tablets portrait
================================================== */
@media only screen and (min-width: 767px) {
  .container .columns {
    padding-left: 1em;
    padding-right: 1em; }

  .container .one.columns {
    width: 6.25%; }

  .container .two.columns {
    width: 12.5%; }

  .container .three.columns {
    width: 18.75%; }

  .container .four.columns {
    width: 25%; }

  .container .five.columns {
    width: 31.25%; }

  .container .six.columns {
    width: 37.5%; }

  .container .seven.columns {
    width: 43.75%; }

  .container .eight.columns {
    width: 50%; }

  .container .nine.columns {
    width: 56.25%; }

  .container .ten.columns {
    width: 62.5%; }

  .container .eleven.columns {
    width: 68.75%; }

  .container .twelve.columns {
    width: 75%; }

  .container .thirteen.columns {
    width: 81.25%; }

  .container .fourteen.columns {
    width: 87.5%; }

  .container .fifteen.columns {
    width: 93.75%; }

  .container .sixteen.columns {
    width: 100%; }

  .container .one-third.column {
    width: 33.33%; }

  .container .two-thirds.column {
    width: 66.66%; }

  /* Offsets */
  .container .offset-by-one {
    margin-left: 6.25%; }

  .container .offset-by-two {
    margin-left: 12.5%; }

  .container .offset-by-three {
    margin-left: 18.75%; }

  .container .offset-by-four {
    margin-left: 25%; }

  .container .offset-by-five {
    margin-left: 31.25%; }

  .container .offset-by-six {
    margin-left: 37.5%; }

  .container .offset-by-seven {
    margin-left: 43.75%; }

  .container .offset-by-eight {
    margin-left: 50%; }

  .container .offset-by-nine {
    margin-left: 56.25%; }

  .container .offset-by-ten {
    margin-left: 62.5%; }

  .container .offset-by-eleven {
    margin-left: 68.75%; }

  .container .offset-by-twelve {
    margin-left: 75%; }

  .container .offset-by-thirteen {
    margin-left: 81.25%; }

  .container .offset-by-fourteen {
    margin-left: 87.5%; }

  .container .offset-by-fifteen {
    margin-left: 93.75%; } }
/* #Clearing
================================================== */
/* Self Clearing Goodness */
.container:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }

.row:after,
.clearfix:after {
  clear: both; }

.row,
.clearfix {
  zoom: 1; }

/* You can also use a <br class="clear" /> to clear columns */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }

/* apply a natural box layout model to all elements */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html {
  font: 100%/1.5em 'ProximaNova_Light', sans-serif; }

body {
  font-size: 1em;
  /* 16px / 16px */
  color: #353738;
  min-width: 275px; }

img {
  vertical-align: top; }

hr {
  margin: 1em 0;
  height: 1px;
  background: #d3d3d3;
  border: none;
  width: 100%;
  clear: both; }

a, a:visited {
  color: #333;
  text-decoration: none;
  outline: none !important; }

a:hover {
  color: #111;
  text-decoration: underline; }

div.band .columns {
  padding-top: 2em;
  padding-bottom: 2em; }

header.band {
  background: #101216;
  color: white;
  text-align: center;
  height: 410px;
  padding-top: 100px; }

.fixed {
  position: fixed !important;
  top: 0; }

.nav {
  box-shadow: 0 5px 5px -2px #cecece;
  -moz-box-shadow: 0 5px 5px -2px #cecece;
  -webkit-box-shadow: 0 5px 5px -2px #cecece;
  position: relative;
  background-color: #fff;
  z-index: 99; }

.nav ul {
  height: 35px;
  list-style-type: none;
  text-align: center;
  margin: 15px 0 0 0; }

.nav ul li {
  display: inline-block;
  background: transparent url("../img/nav-divider.png") no-repeat right center;
  padding: 0 15px 0 10px; }

.nav ul li.last {
  background: none !important; }

.nav ul li.last a {
  margin: 0  !important; }

.nav ul li:last-of-type {
  background: none; }

.nav ul a {
  color: #303030;
  font-family: 'Oswald',serif;
  text-transform: uppercase; }

.footer-nav {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 10px 5px !important;
  margin-top: 25px; }

#footer-nav {
  list-style-type: none;
  padding: 0 !important;
  margin: 0 !important; }

#footer-nav li {
  display: inline-block;
  background: transparent url("../img/nav-divider.png") no-repeat right center; }

#footer-nav li a {
  color: #333;
  font-size: 1.1em;
  padding: 0 10px;
  font-family: "ProximaNova_SemiBold", sans-serif; }

#footer-nav li:last-of-type {
  background: none; }

.io-logo {
  margin-top: 5px; }

#magic-line {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100px;
  height: 3px;
  background: #111;
  list-style-type: none !important; }

h1, h2, h3 {
  font-family: 'Oswald', serif;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase; }

header.band h1 {
  font-size: 3em;
  line-height: 1em;
  margin-bottom: 1em; }

h1 {
  font-size: 3em;
  margin-top: 1.4em;
  margin-bottom: 1.4em; }

h1 > span:first-child {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc; }

h1 span.sub {
  display: block;
  font-size: 0.4em;
  margin-top: 1.9em;
  color: #999;
  font-weight: 400; }

h1 span.sub .second {
  color: #555; }

h1 span.sub .third {
  color: #777; }

h2 {
  font-size: 1.6em;
  margin-top: 1.5em;
  margin-bottom: 1.5em; }

h3 {
  font-size: 1.1em;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  margin-bottom: 1em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px; }

h4 {
  font-size: 1em;
  font-family: 'ProximaNova_SemiBold', sans-serif;
  font-weight: normal;
  text-align: center; }

.shadow {
  text-shadow: 2px 1px #475564; }

.center {
  text-align: center; }

.text-left {
  text-align: left !important; }

.text-right {
  text-align: right !important; }

.text-justify {
  text-align: justify !important; }

p.small {
  font-size: 0.9em;
  line-height: 1.4em; }

a.button {
  background: #e33f0c;
  text-align: center;
  padding: .5em 1em;
  color: white;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 0.2em 0 #ab3009;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /*transition cross-browser stuff*/
  -webkit-transition: background 0.2s ease-out;
  /* Safari 3.2+, Chrome */
  -moz-transition: background 0.2s ease-out;
  /* Firefox 4-15 */
  -o-transition: background 0.2s ease-out;
  /* Opera 10.5?12.00 */
  transition: background 0.2s ease-out;
  /* Firefox 16+, Opera 12.50+ */ }

a.button:hover {
  background: #ab3009; }

.band.main {
  width: 100%;
  background-color: #ffffff; }

.band.main p {
  text-align: center; }

ul {
  margin-left: 0 !important;
  padding-left: 15px !important; }

ul li {
  font-size: 0.9em; }

footer {
  font-size: 0.8em;
  text-align: center;
  margin-top: 30px; }

footer p {
  text-align: left !important; }

.last a {
  margin: 0 1em; }

.social-tuts {
  color: #E36316; }

.social-dribbble {
  color: #c5376d; }

.social-facebook {
  color: #3B5998; }

header.band {
  background-image: url(../img/header-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%; }

header .header-logo {
  background-image: url(../img/header-logo.png);
  background-repeat: no-repeat;
  background-position: center center;
  width: 200px;
  height: 200px; }

header .header-txt {
  background-image: url(../img/header-txt-heading.png);
  background-repeat: no-repeat;
  background-position: 1em 1em;
  background-size: 70%; }

header.band p {
  display: block;
  margin-top: 30%;
  font-size: 0.8em;
  line-height: 1.2em;
  text-align: left; }

/*as we don't haver many media queries, we'll stick them all here*/
@media only screen and (min-width: 767px) {
  body {
    font-size: 1em;
    /* 18px / 16px */
    line-height: 1.3em; }

  div.band .columns {
    padding-top: 2em;
    padding-bottom: 2em; }

  header.band h1 {
    font-size: 3.25em;
    /*52 / 16*/ }

  header.band p {
    font-size: 0.9em;
    line-height: 1.2em; }

  a.button {
    padding: .75em 1.5em; }

  footer {
    text-align: left; }

  .last {
    text-align: right; }

  #nav {
    display: block !important; } }
@media only screen and (max-width: 767px) {
  div.band .columns {
    padding-top: 1em;
    padding-bottom: 1em; }

  header.band {
    display: none;
    height: 270px;
    padding-top: 40px; }

  header .header-txt {
    background-image: none;
    background-repeat: no-repeat;
    background-position: 1em 1em; }

  header.band p {
    display: none;
    margin-top: 0px;
    font-size: 0.8em;
    line-height: 1.2em;
    text-align: center; }

  #nav-content {
    position: fixed; }

  #nav {
    display: none; }

  .nav ul {
    height: auto;
    text-align: left;
    margin: 0;
    padding: 0 !important; }

  .nav ul li {
    background: none;
    display: block;
    padding: 5px 0px 5px 20px;
    border-bottom: 1px solid #eee;
    cursor: pointer; }

  .nav ul li:hover {
    background-color: #efefef !important; }

  .nav ul li:last-of-type {
    border-bottom: none; }

  #magic-line {
    display: none; }

  .nav ul li:last-of-type {
    background: none; }

  #mnav-button {
    display: block;
    border-bottom: none;
    padding: 10px 20px;
    border-bottom: 1px solid #eee;
    cursor: pointer; }

  #mnav-button:hover span {
    background: #111; }

  #mnav-button span {
    display: block;
    margin: 4px 0px 4px 0px;
    height: 2px;
    background: #777;
    width: 15px; }

  .mhide {
    display: none !important; } }
/*
 * This file is NOT needed in order to use skrollr.
 * The demo uses it and it may help you as well.
 */
html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0; }

#expertise {
  list-style-type: none;
  padding: 0 !important;
  margin: 10px 0; }

#expertise li {
  float: left;
  text-align: center; }

#expertise h4 {
  font-size: 0.9em;
  margin-top: 0; }

form input, textarea {
  padding: 10px !important;
  border: 1px solid #eee;
  color: #111;
  resize: none;
  width: 100%; }

form button {
  border: 1px solid #ccc;
  padding: 10px !important;
  font-size: 0.9em;
  font-weight: bold;
  color: #fff;
  background-color: #637487; }

form button:hover {
  background-color: #444c5c; }

form .columns {
  padding: 0.3em !important; }

form .error span.help-block {
  font-size: 0.8em;
  color: #990000; }

.alert-box {
  text-align: center; }

.pagination {
  text-align: center;
  padding-bottom: 25px; }

.pagination a {
  background: url(../img/miscellaneous_sprite.png) 0 -300px no-repeat transparent;
  width: 15px;
  height: 15px;
  margin: 0 5px 0 0;
  display: inline-block; }

.pagination a.selected {
  background-position: -25px -300px;
  cursor: default; }

.pagination a span {
  display: none; }

#rocket {
  background: transparent url("../img/gfx-rocket.png") no-repeat center center;
  width: 78px;
  height: 113px;
  position: absolute;
  right: 5px;
  top: 100px;
  z-index: 5; }

#rocket-shadow {
  background: transparent url("../img/gfx-rocket-shadow.png") no-repeat center center;
  width: 93px;
  height: 19px;
  position: absolute;
  right: 0px;
  top: 140px;
  z-index: 0; }

#innovation {
  overflow-y: hidden; }