@import url(normalize.css);
/* == Variables == */
/* == Mixins == */
/* == Extensions */
.horizontal {
  margin: 0;
  padding: 0; }
  .horizontal li {
    list-style-type: none;
    display: inline; }
    .horizontal li:first-child {
      margin-left: 0;
      padding-left: 0;
      border-left: none; }
    .horizontal li:last-child {
      margin-right: 0;
      padding-right: 0;
      border-right: none; }

.cf, .container, #slider .slider-nav .slider-nav-inner, #slider .slider-nav .slider-pager {
  *zoom: 1; }
  .cf:before, .container:before, #slider .slider-nav .slider-nav-inner:before, #slider .slider-nav .slider-pager:before, .cf:after, .container:after, #slider .slider-nav .slider-nav-inner:after, #slider .slider-nav .slider-pager:after {
    content: " ";
    display: table; }
  .cf:after, .container:after, #slider .slider-nav .slider-nav-inner:after, #slider .slider-nav .slider-pager:after {
    clear: both; }

.container {
  width: 970px;
  margin: 0 auto;
  position: relative; }

.ctr {
  text-align: center; }

/* == Styles == */
html {
  font-size: 62.5%;
  height: 100%; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Gudea", arial, sans-serif;
  overflow: hidden;
  height: 100%; }

#pages {
  height: 100%;
  max-height: 100%;
  overflow: hidden; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; }

a {
  color: #fff;
  text-decoration: none; }
  a:hover {
    color: #407CBA; }

header {
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999; }
  header .logo {
    width: 94px;
    height: 158px;
    padding-top: 77px;
    margin-bottom: 2px;
    background: #000; }
  header .nav-toggle {
    background: black url(../img/open-menu.jpg) no-repeat center center;
    display: block;
    width: 94px;
    height: 27px;
    cursor: pointer; }
  header nav {
    position: absolute;
    top: 0;
    left: -160px;
    width: 158px;
    height: 100%;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.4;
    text-align: center; }
    header nav .nav-top {
      background: #000;
      height: 158px;
      margin-bottom: 2px;
      padding-top: 50px; }
    header nav ul {
      margin: 0;
      padding: 30px 20px 0;
      background: #000;
      height: 100%; }
      header nav ul li {
        list-style-type: none;
        background: url(../img/bg-nav.png) no-repeat top center;
        padding-top: 23px;
        margin: 20px 0; }
        header nav ul li:first-child {
          background: none;
          margin-top: 0; }
    header nav a {
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 2px;
      padding-top: 30px;
      display: block; }
      header nav a.btn-contact {
        background: url(../img/icon-contact.png) no-repeat top center; }
      header nav a.btn-about {
        background: url(../img/icon-megaphone.png) no-repeat top center; }
      header nav a.btn-testimonials {
        background: url(../img/icon-heart.png) no-repeat top center; }
      header nav a.btn-whoweare {
        background: url(../img/icon-thumb.jpg) no-repeat top center;
        padding-top: 35px; }
      header nav a.btn-portfolio {
        background: url(../img/icon-portfolio.png) no-repeat top center; }
      header nav a:hover {
        color: #407cba; }

#slider {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; }
  #slider .background {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    z-index: 1; }
    #slider .background .slide {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%; }
      #slider .background .slide img {
        width: 100%; }
  #slider .foreground {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    z-index: 2; }
    #slider .foreground .slide {
      position: absolute;
      width: 970px;
      height: 100%;
      left: 50%;
      margin-left: -485px; }
    #slider .foreground .slide-pane {
      width: 311px;
      height: 100%;
      position: relative;
      margin-left: 241px;
      overflow: hidden; }
      #slider .foreground .slide-pane .slide-pane-blurmask {
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0; }
        #slider .foreground .slide-pane .slide-pane-blurmask canvas {
          position: absolute; }
        #slider .foreground .slide-pane .slide-pane-blurmask img {
          position: absolute;
          height: 100%; }
      #slider .foreground .slide-pane .slide-pane-content {
        padding-top: 147px;
        color: #fff;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2; }
      #slider .foreground .slide-pane .border {
        height: 6px;
        width: 70px;
        background: #407cba;
        margin: 0; }
      #slider .foreground .slide-pane h2 {
        font-family: "Abel", arial, sans-serif;
        font-size: 75px;
        font-size: 7.5rem;
        line-height: 0.8;
        font-weight: normal;
        margin: 3px 0 20px -6px; }
      #slider .foreground .slide-pane p {
        font-family: arial,sans-serif;
        text-align: left;
        font-weight: bold;
        padding: 0 35px;
        font-size: 16px;
        font-size: 1.6rem;
        line-height: 1.8;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-smooth: always;
        transform: rotate(0.0deg); }
      #slider .foreground .slide-pane .read-more {
        margin: 40px 0 40px -24px;
        position: absolute;
        bottom: 0;
        left: 50%; }
  #slider .slider-nav {
    position: absolute;
    top: 158px;
    left: 100%;
    z-index: 3; }
    #slider .slider-nav .slider-nav-inner {
      position: absolute;
      left: -81px;
      top: 0;
      width: 1000px; }
    #slider .slider-nav .slider-arrow {
      float: left;
      width: 81px;
      height: 37px;
      background: black url(../img/icon-arrow.png) no-repeat right center;
      cursor: pointer; }
    #slider .slider-nav .slider-pager {
      float: left; }
      #slider .slider-nav .slider-pager a {
        font-size: 14px;
        font-size: 1.4rem;
        line-height: 1.4;
        font-weight: bold;
        float: left;
        background: #000;
        height: 37px;
        width: 21px;
        margin-left: 2px;
        text-align: center;
        padding-top: 9px;
        text-decoration: underline; }
        #slider .slider-nav .slider-pager a.activeSlide {
          color: #407CBA; }

.arrow {
  bottom: 30px;
  left: 50%;
  margin-left: -23px;
  position: absolute; }

.testimonial-slider {
  font-size: 14px;
  height: 250px;
  padding-left: 60px;
  position: absolute;
  right: -660px;
  top: 0;
  width: 630px; }
  .testimonial-slider .quote-start {
    padding-bottom: 15px; }
  .testimonial-slider .quote-end {
    left: 60px;
    position: absolute;
    top: 217px; }
  .testimonial-slider .testimonial-clip {
    height: 150px;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative; }
  .testimonial-slider .nav-btns {
    color: #fff;
    left: 0;
    position: absolute;
    top: 0; }
    .testimonial-slider .nav-btns .nav-btn {
      background: none repeat scroll 0 0 #2f7dc1;
      border-radius: 32px;
      height: 30px;
      margin: 10px 0;
      padding-top: 3px;
      text-align: center;
      width: 30px;
      cursor: pointer; }
      .testimonial-slider .nav-btns .nav-btn:hover {
        background: #b3c235; }
  .testimonial-slider .testimonial {
    position: absolute;
    top: 170px;
    display: none; }
    .testimonial-slider .testimonial .name {
      color: #4495d1;
      font-size: 1.55em;
      font-weight: bold; }
    .testimonial-slider .testimonial .title {
      font-size: 1.1em;
      font-style: italic; }
    .testimonial-slider .testimonial p {
      position: relative;
      top: -12px; }

.gallery {
  width: 510px;
  position: absolute;
  right: 0;
  bottom: 0; }
  .gallery .imgbox {
    position: absolute;
    overflow: hidden; }
    .gallery .imgbox img {
      height: 100%;
      width: auto; }
  .gallery .h1 {
    height: 170px; }
  .gallery .w1 {
    width: 170px; }
  .gallery .h2 {
    height: 340px; }
  .gallery .w2 {
    width: 340px; }
  .gallery .w3 {
    width: 510px; }
  .gallery .w4 {
    width: 680px; }

.words {
  width: 710px;
  position: absolute;
  right: 9%;
  top: 0;
  height: 100%;
  min-height: 1060px;
  z-index: -100; }
  .words div {
    position: absolute; }
  .words #diligent {
    right: 0px; }
  .words #courageous {
    right: 110px; }
  .words #knowledgeable {
    right: 70px; }
  .words #creative {
    right: 95px; }
  .words #adept {
    right: 175px; }
  .words #methodical {
    right: 60px; }
  .words #honest {
    right: 5px; }

.speechbubble {
  background: url("../img/speechbubble.png") no-repeat scroll 0% 0% transparent;
  width: 194px;
  height: 105px;
  padding: 30px 30px;
  position: absolute;
  font-size: 14px;
  pointer-events: none; }
  .speechbubble.large {
    background: url("../img/speechbubble-large.png") no-repeat scroll 0% 0% transparent;
    width: 315px;
    height: 170px;
    padding: 45px 45px;
    margin-left: -106px;
    margin-top: -55px; }
  .speechbubble.mediumlarge {
    background: url("../img/speechbubble-mediumlarge.png") no-repeat scroll 0% 0% transparent;
    width: 254px;
    height: 105px;
    padding: 30px 30px;
    margin-left: -53px; }
  .speechbubble.medium {
    background: url("../img/speechbubble-medium.png") no-repeat scroll 0% 0% transparent;
    width: 224px;
    height: 105px;
    padding: 30px 30px;
    margin-left: -33px; }
  .speechbubble.long {
    background: url("../img/speechbubble-long.png") no-repeat scroll 0% 0% transparent;
    width: 334px;
    height: 105px;
    padding: 30px 30px;
    margin-left: -140px; }

.top-nav {
  position: absolute;
  top: 0;
  left: 310px;
  z-index: 99999999; }
  .top-nav .chunk {
    background: #000;
    color: #FFF;
    font-size: 1.4em;
    display: inline-block;
    margin-left: 3px;
    margin-right: 3px;
    height: 36px;
    vertical-align: top;
    padding: 10px 15px 0 15px;
    font-weight: bold;
    letter-spacing: 1.3px; }
    .top-nav .chunk em {
      font-style: normal; }
    .top-nav .chunk.case-study {
      background: url("../img/briefcase.jpg") left center no-repeat black;
      padding-left: 35px;
      width: 208px; }
    .top-nav .chunk.down-page {
      background: black url("../img/arrow-down.png") center bottom 6px no-repeat;
      width: 150px;
      height: auto;
      padding: 5px 5px 36px 5px;
      cursor: pointer;
      position: absolute;
      left: 291px;
      transition: all 0.3s;
      bottom: 0; }
      .top-nav .chunk.down-page img {
        padding: 5px; }
      .top-nav .chunk.down-page.open {
        bottom: -253px;
        background: black url("../img/arrow-up-drawer.png") center bottom 6px no-repeat; }

.page {
  background-color: #fff;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1; }
  .page:not(#home) {
    overflow: hidden; }
    .page:not(#home) > p, .page:not(#home) > .p {
      color: #fff;
      font-size: 16px;
      left: 9%;
      line-height: 24px;
      padding-left: 192px;
      padding-top: 160px;
      position: absolute;
      top: 30%;
      width: 630px; }

#projects a.arrow, #projects a.arrowup {
  position: relative;
  z-index: 9999999; }

#projects a.arrow[data-hide=true], #projects a.arrowup[data-hide=true] {
  display: none; }

.fancybox-skin {
  background: none repeat scroll 0px center transparent !important;
  box-shadow: none !important; }
  .fancybox-skin .fancybox-inner {
    border: 1px white solid !important; }

.read-more-extra {
  position: absolute;
  bottom: 76px;
  text-align: center;
  width: 100%;
  font-size: 20px;
  font-weight: bold; }