/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700|Open+Sans+Condensed:300,700);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

.animate, .fadeIn, .fadeInDown, .fadeInUp {
  -webkit-animation-delay: .5s;
  /* Chrome, Safari, Opera */
  animation-delay: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 2s;
  /* Chrome, Safari, Opera */
  animation-duration: 2s; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown; }

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

/*******************************************************
* z-index
*******************************************************/
.hero-text {
  z-index: -10; }

.main-nav {
  z-index: 10; }

/*******************************************************
* Variables and Stacks
*******************************************************/
/*******************************************************
* Elements
*******************************************************/
html {
  -webkit-font-smoothing: antialiased;
  background: url(../images/city_street_sepia.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  font-family: "Open Sans", sans-serif; }

body {
  font-size: 14px; }

h1 {
  font-size: 30px;
  color: #333;
  text-transform: uppercase;
  text-align: center;
  line-height: 70px; }

h2 {
  font-size: 20px;
  margin: 100px 0;
  color: #999;
  text-transform: uppercase;
  text-align: center; }

h3 {
  font-size: 18px;
  line-height: 30px;
  text-align: center; }

a {
  text-decoration: none;
  color: inherit; }

hr {
  border: 1px solid #333;
  width: 200px; }

section {
  padding: 50px 0; }

svg {
  display: block; }

/*******************************************************
* Layout
*******************************************************/
.page-width {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px; }

.row {
  width: 100%; }

.grid-no-pad {
  width: 100%;
  clear: both; }
  .grid-no-pad [class*='col-'] {
    float: left; }

.col-2-3 {
  width: 66.66%; }

.col-1-3 {
  width: 33.33%; }

.col-1-2 {
  width: 50%; }

.col-1-4 {
  width: 25%; }

.col-1-5 {
  width: 20%; }

.col-1-8 {
  width: 12.5%; }

/*******************************************************
* Main Styles
*******************************************************/
.hero-text {
  position: fixed;
  top: 200px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: -1px -1px 0 #291c14, 1px -1px 0 #291c14, -1px 1px 0 #291c14, 1px 1px 0 #291c14; }
  .hero-text h1 {
    line-height: 100px;
    font-size: 110px;
    font-weight: 700;
    letter-spacing: 6px;
    color: white; }
  .hero-text h6 {
    font-size: 30px;
    font-weight: 400;
    line-height: 80px;
    color: white; }

.main-nav {
  position: fixed;
  background: rgba(238, 233, 216, 0.8);
  height: 70px;
  line-height: 70px;
  color: white; }
  .main-nav img {
    position: relative;
    top: 5px; }
  .main-nav ul {
    padding: 0; }
  .main-nav li {
    color: inherit;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    line-height: inherit; }

.main-nav-scroll-trigger {
  background-color: #c6c0b0; }

.whitespace {
  position: relative;
  height: 600px;
  height: 100vh; }

.expertise {
  background-color: whitesmoke;
  z-index: -2; }
  .expertise .col-1-4 {
    padding: 50px 0; }

.workflow {
  background-color: white; }

.focus {
  height: 500px;
  background-color: white; }

.wheelhouse-icon {
  display: block;
  margin: 10px auto;
  height: 160px;
  width: 160px; }

.arrow {
  width: 180px;
  margin: 0 auto;
  padding: 0;
  height: 55px; }

.arrow-set {
  margin: 30px 0; }
  .arrow-set p {
    position: relative;
    color: white;
    font-weight: 700;
    text-align: center;
    line-height: 0;
    top: -30px; }

.tool_icon {
  display: block;
  margin: 0 auto;
  background: url(../images/iconsprite_120.png); }

.tool {
  margin-top: 50px; }

#apple {
  width: 120px;
  height: 148px;
  background-position: 0 0; }

#terminal {
  width: 120px;
  height: 105px;
  background-position: 0 -550px; }

#textmate {
  width: 120px;
  height: 120px;
  background-position: 0 -664px; }

#codekit {
  width: 120px;
  height: 122px;
  background-position: 0 -288px; }

#git {
  width: 120px;
  height: 120px;
  background-position: 0 -420px; }

#chrome {
  width: 120px;
  height: 120px;
  background-position: 0 -158px; }

/*******************************************************
* No-JS
*******************************************************/
.no-js .main-nav {
  background: #eee9d8;
  color: #999; }

@media all and (max-width: 799px) {
  .page-width {
    padding: 0; }

  .col-1-4 {
    width: 50%; }

  .expertise .col-1-4 {
    background-image: linear-gradient(whitesmoke, white); } }
@media all and (max-width: 499px) {
  .col-1-4, .col-1-2 {
    width: 100%; } }