/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.



*/


/* ------ NOTES-------------------------------------------------------------------------------------------

Master Screen Style for Elabs, http://www.elabs.se.

--------- CONTENTS ---------------------------------------------------------------------------------------

1: BODY OCH UNIVERSAL RESET
2: NAVIGATION
3: PAGE STRUCTURE
4: GLOBALS
5: SLIDER
6: MISC

------------------------------------------------------------------------------------------------------- */


/* 1: BODY OCH UNIVERAL RESET
======================================================================================================= */



body {
  margin: 0;
  padding: 0;
  background: #1a1a1a;
  color: #545454;
  font: 15px/160% "rooney-web-1", Calibri, "Helvetica Neue", Arial, sans-serif;
  text-align: center;
  height: 100%;
  }

/* Reset margin and padding for all elements */

* {margin: 0; padding: 0;}


/* 2: GLOBALS
======================================================================================================= */

p {margin: 0 0 21px; font-weight: 300;}

strong {font-weight: 500;}

h1, h2, .section-title {
  margin: 0 0 14px;
  padding: 0;
  color: #3b4648;
  font-size: 28px;
  font-weight: 700;
  font-family: "proxima-nova-1", Calibri, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  }
h1, .section-title {
  float: left;
  display: inline;
  margin-bottom: 18px;
  line-height: 120%;
  }
h2 {font-size: 22px;}
h1 a:link, h1 a:visited, h2 a:link, h2 a:visited {
  padding: 0 !important;
  background: none !important;
  color: #3b4648 !important;
  font-weight: 700;
  }
h1 a:hover, h2 a:hover {
  color: #32abc9 !important;
  border: none;
  }
h1.big, .section-title {font-size: 35px;}

h3 {
  display: block;
  clear: both;
  padding: 15px 0 20px;
  color: #bbb;
  background: url(/assets/divider-dottedborder.png) top left repeat-x;
  font-size: 14px;
  font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;
  font-size-adjust: none;
  font-weight: 700;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  }

h1+h3 {margin-top: 25px;}

em.highlight {background: #ffb; font-style: normal;}

blockquote {padding: 0.5em 0; color: #7e7aa4;}
blockquote p {
  padding: 0 20px !important;
  border-left: 3px solid #ddd;
  font: italic 18px "rooney-web-1", Cambria, Palatino, Georgia, serif;
  line-height: 160%;
  font-weight: 300;
  }

pre {margin: 0 0 21px; overflow-x: auto;}

code {
  color: #cc86cc;
  font-family: Menlo, Monaco, "Courier New", Courier, mono;
  font-size: 12px;
  }

kbd {
  margin: 0 1px;
  padding: 1px 3px;
  border: 1px solid #b3e2ef;
  background-color: #effaff;
  font: normal 13px Menlo, Monaco, "Courier New", Courier, mono;
  }

abbr, acronym {
  padding: 1px 0;
  border-bottom: 1px dotted #bbb;
  text-transform: uppercase;
  font-size: 90%;
  letter-spacing: 0.1em;
  cursor: help;
  }

sup {line-height: 0; font-size: 80%;}

::-moz-selection{background: #32abc9; color:#fff;}
::selection {background: #32abc9; color:#fff;}

/* Links */

a:link, a:visited {color: #32abc9; text-decoration: none;}
a:hover {
  background-color: rgba(50, 171, 201, .1);
  border-bottom: 1px solid rgba(0, 0, 0, .15);
  }
a {outline: none; font-weight: 500;}
a.img {background: none !important;}

/* Lists */

ul, ol, dl {font-weight: 300;}

dt {
  float: left;
  font-weight: 500;
  padding: 0;
  text-align: right;
  width: 100px;
  }

dd {margin: 0 0 7px;}

/* Buttons */

.btn {
  float: left;
  padding: 1px;
  background: #2a9fbd;
  }
.btn:hover {background: #6ac7df;}
.btn input {
  cursor: pointer;
  padding: 6px 8px;
  background: #2a9fbd;
  border: 1px solid #fff;
  color: #fff;
  font-size: 11px;
  font-style: italic;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Times New Roman", Georgia, sans-serif;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  }
.btn input:hover {background: #6ac7df;}

/* Images */

img {border: none;}

/* Forms */

form {float: left; margin: 0 0 21px;}
form p {margin: 0;}

fieldset {border: none;}

label {
  display: block;
  margin: 0 0 2px;
  font-weight: 500;
  }
label span {margin-left: 3px; color: #999; font-weight: 300;}

input[type="text"], input[type="email"], input[type="password"], textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 5px;
  color: #777;
  border: 1px solid #ccc;
  background: #fafafa;
  font-family: Menlo, Monaco, "Courier New", Courier, mono;
  font-size: 14px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  }
textarea {height: 100px;}

input[type="email"]:focus, input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
  border: 1px solid #32abc9;
  background: #fff;
  outline: none;
  -webkit-box-shadow: rgba(82, 168, 236, 0.4) 0px 0px 10px;
  -moz-box-shadow: rgba(82, 168, 236, 0.4) 0px 0px 10px;
  -o-box-shadow: rgba(82, 168, 236, 0.4) 0px 0px 10px;
  box-shadow: rgba(82, 168, 236, 0.4) 0px 0px 10px;
  }

/* Misc */

.align-right {float: right;}

.align-left {float: left;}

.last {margin-right: 0;}

.center {text-align: center;}


/* 3: NAVIGATION
======================================================================================================= */

#nav-main {
  list-style: none;
  float: none;
  display: block;
  margin: 0 0 20px;
  text-align: center;
  }
#nav-main li {
  display: inline;
  background: url(/assets/divider-nav.png) center left no-repeat;
  font-size: 12px;
  text-transform: uppercase;
  font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;
  font-size-adjust: none;
  }
#nav-main li:first-child {background: none;}
#nav-main li a {
  margin: 0 0 0 14px;
  padding: 15px 0;
  border: none;
  color: #3ab5d4;
  font-weight: 600;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
  background: none;
  }
#nav-main li a.disabled {color: #555; cursor: default;}
#nav-main li:first-child a {margin-left: 0;}
#nav-main .active a {color: #fff;}
#nav-main li a:hover {
  color: #fff;
  text-shadow: 0 0 100px rgba(250, 250, 250, .8);
  background-position: center 0;
  }
#nav-main li a.disabled:hover {text-shadow: none; color: #555;}


/* 4: PAGE STRUCTURE
======================================================================================================= */

/* Containers and columns */

.wrapper {
  margin: 0 auto;
  padding: 0 10px;
  text-align: left;
  }

.full {float: left; width: 940px; margin: 0 0 40px;}

.column {float: left; margin: 0 20px 0 0;}
.column.last {margin-right: 0;}

.two {width: 140px;}
.four {width: 300px;}
.five {width: 380px;}
.six {width: 460px;}
.seven {width: 540px;}
.eight {width: 620px;}

.about-us {width: 280px;}

/* Header */

#header {
  float: left;
  width: 100%;
  background: #1a1a1a;
  text-shadow: 0 1px 0 #000;
  z-index: -2;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  }
#header .wrapper {position: relative;}
#header h1 {
  float: left;
  clear: left;
  height: 27px;
  width: 319px;
  margin: 10px 0 30px 10px;
  padding: 0;
  background: url(/assets/hello.png) no-repeat;
  text-indent: -99999px;
  }
#header .blurb {
  display: none;
  float: left;
  clear: left;
  margin: 0 0 48px 0;
  color: #454545;
  font-size: 22px;
  font-style: italic;
  font-weight: 100;
  text-shadow: 0 -1px 0 #000;
  }
#header .intro {
  position: absolute;
  display: block;
  width: 700px;
  height: 0;
  padding: 140px 0 0;
  overflow: hidden;
  z-index: 30;
  background: url(/assets/welcome.png) no-repeat;
  }
#header .work,
#header .about,
#header .blog,
#header .contact,
#header .admin {padding-left: 10px;}
#header .logged-in {
  position: absolute;
  top: 0;
  right: 100px;
  background: white;
  padding: 4px 10px;
  z-index: 100000;
  }

#animated-highlight {
  display: none;
  position: absolute;
  width: 520px;
  height: 160px;
  right: 0;
  z-index: 1;
  }
#animated-highlight .shading {position: absolute;}

@-webkit-keyframes rotation {
  from {-webkit-transform: rotateZ(0deg);}
  to {-webkit-transform: rotateZ(360deg);}
  }

#gradient {
  position: absolute;
  width: 520px;
  height: 160px;
  -webkit-mask-box-image: url(/assets/mosaic-mask.png);
  }
#gradient img {
  z-index: 2;
  margin-top: -360px;
  -webkit-animation-name: rotation;
  -webkit-animation-duration: 30s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  }

#logo {
  display: block;
  margin: 20px auto;
  width: 145px;
  color: #fff;
  z-index: 20;
  }
#logo span, #logo a {
  display: block;
  width: 145px;
  height: 46px;
  border: none;
  }
#logo span, #logo a {background: url(/assets/logo-small-text.png) no-repeat;}
#logo img {display: block; width: 0; border: none;}

/* Start page */

.map {
  float: right;
  min-height: 150px;
  background: url(/assets/map.png) 166px 0 no-repeat;
  }
.map p {line-height: 150%;}
.map .directions {float: left; padding-top: 8px;}

.partners {list-style: none; line-height: 140%;}
.partners li {width: 300px; float: left; margin-bottom: 1em;}
.partners li img {margin: 5px 0 0;}

#content {
  float: left;
  width: 100%;
  padding: 0 0 40px;
  background: #fff;
  z-index: 10;
  }

#home #content {padding: 0;}

.what-we-do {margin-left: 10px;}
.what-we-do .center {
  margin-top: 42px;
  padding: 25px 0 20px;
  font-size: 30px;
  line-height: 120%;
  }
.what-we-do div {float: left;}
.what-we-do h2 {text-align: center;}
.what-we-do .view-our-work {
  float: left;
  width: 140px;
  height: 140px;
  color: #fff;
  background: url(/assets/circle-large.png) center center no-repeat;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
  text-transform: uppercase;
  text-align: center;
  line-height: 140%;
  font-size: 12px;
  font-family: "proxima-nova-1", Calibri, "gesta-1", "Helvetica Neue", Arial, sans-serif;
  }
.what-we-do .view-our-work a {color: #fff; background: none; border: none;}
.what-we-do .view-our-work p {padding: 52px 0 0; font-weight: 400;}
.what-we-do .view-our-work p span {display: block;}

.get-in-touch {clear: both; float: left;}
.get-in-touch .center {padding: 25px 0 20px; font-size: 30px; line-height: 120%;}
.get-in-touch .six, .get-in-touch .address {font-size: 14px; line-height: 150%;}

#bottom {
  float: left;
  width: 100%;
  background: #f4f4f4;
  font-size: 14px;
  line-height: 160%;
  }
#bottom .four {padding-bottom: 20px;}
#bottom h3 {
  padding: 25px 10px 10px;
  color: #3b4648;
  text-transform: none;
  font-size: 18px;
  font-weight: 700;
  font-family: "proxima-nova-1", Calibri, "gesta-1", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  }
#bottom p {padding: 0 10px;}
#bottom ul {list-style: none; padding: 0 10px;}
#bottom .recent-posts ul li {padding: 10px 0; border-bottom: 1px solid #dcdcdc;}
#bottom .recent-posts ul li a {margin-left: 4px;}
#bottom .recent-posts ul li:last-child {border: none;}
#bottom .follow-elabs a {
  float: left;
  display: block;
  width: 25px;
  height: 25px;
  margin: 15px 12px 30px 0;
  border: none;
  text-indent: -9999px;
  background-position-y: top;
  background-position-x: left;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
  }
#bottom .follow-elabs .twitter a {background: url(/assets/follow-icon-twitter.png) no-repeat;}
#bottom .follow-elabs .facebook a {background: url(/assets/follow-icon-facebook.png) no-repeat;}
#bottom .follow-elabs .rss a {background: url(/assets/follow-icon-rss.png) no-repeat;}
#bottom .follow-elabs .flickr a {background: url(/assets/follow-icon-flickr.png) no-repeat;}
#bottom .follow-elabs .github a {background: url(/assets/follow-icon-github.png) no-repeat;}
#bottom .follow-elabs .mynewsdesk a {background: url(/assets/follow-icon-mnd.png) no-repeat;}
#bottom .follow-elabs a:hover {background-position-y: bottom;}
#bottom .tweets {
  margin: 0 10px 15px;
  border-bottom: 1px solid #dcdcdc;
  }

#newsletter-signup {margin: -10px 0 0;}
#newsletter-signup input.text {
  float: left;
  clear: left;
  width: 160px;
  margin-right: 10px;
  padding: 7px 6px 6px;
  background: #fff;
  font-size: 12px;
  }
#newsletter-signup .fineprint {
  float: left;
  clear: both;
  margin: -1px 0 10px;
  color: #aaa;
  font-size: 12px;
  font-style: italic;
  line-height: 130%;
  }

/* About */

#people {
  float: right;
  width: 310px;
  margin: 7px -5px 21px 0;
  }
#people li {
  display: inline;
  float: left;
  width: 140px;
  margin: 0 0 24px 10px;
  }
#people {list-style: none; line-height: 120%;}
#people img {margin: 0 0 5px;}
#people p {
  margin: 0;
  font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;
  font-size-adjust: none;
  font-size: 12px;
  }
#people .fn {
  font-size: 13px;
  font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;
  font-size-adjust: none;
  }
#people .role {
  margin: 0 0 8px;
  color: #999;
  font-size: 10px;
  text-transform: uppercase;
  }
#people .twitter, #people .mail, #people .phone {font-size: 11px; line-height: 14px;}

#by-the-numbers {
  list-style: none;
  float: left;
  margin: 0 0 20px -10px;
  }
#by-the-numbers li {
  float: left;
  display: inline;
  margin-left: 20px;
  width: 260px;
  }
#by-the-numbers p {
  margin-bottom: 25px;
  display: block;
  color: #999;
  font-size: 11px;
  font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  }
#by-the-numbers .stat {
  margin: 0 0 37px;
  color: #545454;
  font-size: 70px;
  font-weight: 100;
  font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;
  }

#clients {
  list-style: none;
  float: right;
  width: 300px;
  margin: 0 0 50px 0;
  line-height: 21px;
  font-size: 14px;
  font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;
  }
#clients li {
  display: inline;
  float: left;
  width: 130px;
  margin: 0 0 7px 20px;
  font-weight: bold;
  }
#clients li a {padding: 0 4px; font-weight: bold;}

.heart {
  color: #c00;
  font-family: Georgia, serif;
  font-size: 28px;
  }

#open-source-projects {
  list-style: none;
  float: right;
  width: 300px;
  margin: 0 0 22px 20px;
  font-size: 14px;
  line-height: 150%;
  }
#open-source-projects li {
  display: inline-block;
  float: left;
  width: 280px;
  margin: 0 0 21px 10px;
  }
#open-source-projects h4 {
  font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;
  }
#open-source-projects .github {
  padding-left: 22px;
  background: url(/assets/icon-github.png) center left no-repeat;
  }

.office-images {
  float: right;
  margin: 7px 33px 35px 0;
  overflow: hidden;
  width: 233px;
  }
.office-images img {float: right;}

/* Work */

#projects {
  float: left;
  margin: 0 0 20px -20px;
  }
#projects li {
  display: inline;
  float: left;
  width: 300px;
  margin: 0 0 30px 20px;
  }
#projects li a {background: none; border: none;}
#projects img {padding: 2px; border: 1px solid #ccc; margin-left: -3px;}
#projects h2, #projects p {margin: 0; text-align: center;}
#projects h2 {margin: 5px 0 -2px;}
#projects .intro h2 {margin: 0 0 .5em 0; text-align: left;}
#projects .intro p {margin: 0 0 1em; text-align: left;}

.how-we-work .how-intro {margin-bottom: 40px;}
.how-we-work .how-outro {margin-top: 20px;}
.how-we-work .six img {float: left; margin: 10px 15px 5px 5px;}
.how-we-work h3 {
  clear: both;
  margin: 2px 0 7px;
  padding: 0;
  color: #3b4648;
  background: none;
  text-transform: none;
  line-height: 120%;
  font-size: 19px;
  font-family: "proxima-nova-1", Calibri, "gesta-1", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  }

.project, .project .project-image {
  width: 100%;
  height: 360px;
  float: left;
  }
.project .wrapper {
  width: 300px;
  height: 360px;
  padding-top: 16px;
  position: relative;
  }
.project .wrapper a {
  color: #fff;
  background: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .15);
  }
.project .to-overview a, .project .next-project a {border: none;}
.project .to-overview {
  position: absolute;
  top: 17px;
  left: 0;
  width: 120px;
  padding-left: 23px;
  background: url(/assets/icon-grid.png) 0 4px no-repeat;
  font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;
  }
.project .next-project {
  position: absolute;
  top: 17px;
  right: 0;
  width: 82px;
  padding-right: 18px;
  background: url(/assets/icon-nextarrow.png) center right no-repeat;
  -webkit-transition: all .3s ease-in-out;
  font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;
  }
.project .next-project {text-align: right;}
.project .next-project:hover {margin-right: -6px; -webkit-transition: all .3s ease-in-out;}


#weplus .to-overview, #naturkartan .to-overview {
  background: url(/assets/icon-grid-dark.png) 0 4px no-repeat;
  }
#weplus .next-project, #naturkartan .next-project {
  background: url(/assets/icon-nextarrow-dark.png) center right no-repeat;
  }

#nfsnetwork {background: url(/assets/project-page-nfs-bg.jpg) top center repeat-x;}
#nfsnetwork .project-image {background: url(/assets/project-page-nfs.png) top center no-repeat;}

#naturkartan {background: #f8f0b7 url(/assets/project-page-naturkartan-bg.jpg) top center repeat-x;}
#naturkartan .project-image {background: url(/assets/project-page-naturkartan.png) top center no-repeat;}

#weplus {background: #f8f0b7 url(/assets/project-page-weplus-bg.jpg) top center repeat-x;}
#weplus .project-image {background: url(/assets/project-page-weplus.png) top center no-repeat;}

#shotbox {background: #f8f0b7 url(/assets/project-page-shotbox-bg.png) top center repeat;}
#shotbox .project-image {background: url(/assets/project-page-shotbox.png) top center no-repeat;}

#moz {background: #f8f0b7 url(/assets/project-page-moz-bg.png) top center repeat }
#moz .project-image {background: url(/assets/project-page-moz.png) top center no-repeat;}

#mynewsdesk {background: url(/assets/project-page-mynewsdesk-bg.jpg) top left repeat-x;}
#mynewsdesk .project-image {background: url(/assets/project-page-mynewsdesk.jpg) top center no-repeat;}

#seb {background: url(/assets/project-page-seb-bg.png) top left repeat-x;}
#seb .project-image {background: url(/assets/project-page-seb.png) top center no-repeat;}

#mediapilot {background: url(/assets/project-page-mediapilot-bg.png) top left repeat-x;}
#mediapilot .project-image {background: url(/assets/project-page-mediapilot.png) top center no-repeat;}

#ems {background: url(/assets/project-page-ems-bg.jpg) top left repeat-x;}
#ems .project-image {background: url(/assets/project-page-ems.jpg) top center no-repeat;}

#tv4 {background: url(/assets/project-page-tv4-bg.png) top left repeat-x;}
#tv4 .project-image {background: url(/assets/project-page-tv4.jpg) top center no-repeat;}

#streamio {background: url(/assets/project-page-streamio-bg.png) top left repeat-x;}
#streamio .project-image {background: url(/assets/project-page-streamio.jpg) top center no-repeat;}

#nordicruby {background: url(/assets/project-page-nordicruby-bg.png) top left repeat-x;}
#nordicruby .project-image {background: url(/assets/project-page-nordicruby.jpg) top center no-repeat;}

#moola {background: url(/assets/project-page-moola-bg.png) top left repeat-x;}
#moola .project-image {background: url(/assets/project-page-moola.jpg) top center no-repeat;}

.project-description {float: left; width: 300px;}

.project-nav {
  list-style: none;
  float: left;
  clear: both;
  width: 100%;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #dfdfdf;
  font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  }
.project-nav li {display: inline;}
.project-nav .back {float: left;}
.project-nav .next {float: right;}

.project-pagination {
  float: none;
  display: none;
  width: auto;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  }
.project-pagination ul {list-style: none;}
.project-pagination li {display: inline; margin:  0 4px;}
.project-pagination ul li a {
  padding: 2px 7px;
  border: 2px solid transparent;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -o-border-radius: 30px;
  -ms-border-radius: 30px;
  border-radius: 30px;
  -webkit-transition: border .8s ease-in-out;
  -moz-transition: border .8s ease-in-out;
  transition: border .8s ease-in-out;
  }
.project-pagination .active a,
.project-pagination .active a:hover,
.project-pagination ul li a:hover {
  border: 2px solid #fff;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -o-border-radius: 30px;
  -ms-border-radius: 30px;
  border-radius: 30px;
  }
.project-pagination ul li a:hover {
  border-color: rgba(250, 250, 250, .6);
  -webkit-transition: border 0s ease-in-out;
  -moz-transition: border 0s ease-in-out;
  transition: border 0s ease-in-out;
  }

#weplus .wrapper a, #naturkartan .wrapper a {
  color: #3B4648;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  }

#weplus .project-pagination .active a,
#weplus .project-pagination .active a:hover,
#weplus .project-pagination ul li a:hover,
#naturkartan .project-pagination .active a,
#naturkartan .project-pagination .active a:hover,
#naturkartan .project-pagination ul li a:hover {
  border-color: #3B4648;
  }


#project-details .visit-site {
  font-size: 13px;
  font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;
  }
#project-details .visit-site.align-right {display: none;}

.quote {width: 284px; float: right;}
.quote blockquote {
  width: 284px;
  float: right;
  padding-left: 36px;
  background: url(/assets/bg-blockquote.png) top left no-repeat;
  }
.quote blockquote p {
  border: none;
  margin-bottom: .3em;
  padding: 0;
  color: #7e7aa4;
  font-weight: 100;
  font-size: 21px;
  font-family: "rooney-web-1", Georgia, serif;
  line-height: 140%;
  }
.quote .quote-source {text-align: right;}

.gallery {
  list-style: none;
  float: right;
  margin-top: 20px;
  width: 300px;
  }
.gallery li {
  display: inline;
  float: left;
  margin: 15px 0 0 40px;
  }
.gallery li a {background: none; padding: 0 !important;}
.gallery li img {padding: 2px; border: 1px solid #ccc;}

.image {
  float: right;
  width: 480px;
  margin: 20px 0;
  text-align: center;
  }

/* Blog */

.social-rss {float: right; margin-top: 8px;}
.social-rss a {
  float: left;
  display: block;
  margin-left: 12px;
  width: 26px;
  height: 26px;
  padding: 0 !important;
  text-indent: -9999px;
  border: none;
  background-color: transparent !important;
  background-position-x: left;
  background-position-y: top;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
  }
.social-rss a:hover {background-position-y: bottom;}
.social-rss .facebook {background-image: url(/assets/icon-blog-fb.png);}
.social-rss .twitter {background-image: url(/assets/icon-blog-twitter.png);}
.social-rss .rss {background-image: url(/assets/icon-blog-rss.png);}

.section {margin: 22px 0 0;}

.article {float: left;}

.aside {float: right; font-size: 14px; line-height: 150%;}
.aside .style-guide {color: #999;}
.aside h3 {
  margin: 0 0 6px;
  padding: 0;
  color: #9c7ea6;
  background: none;
  font-weight: 700;
  }
.aside ul {
  list-style: none;
  float: left;
  margin: 1px 0 14px;
  }
.aside p {margin-bottom: 14px;}

.search-about form {margin-bottom: 20px;}
.search-about input[type="text"] {
  width: 297px;
  margin: 0;
  padding-left: 26px;
  background-image: url(/assets/icon-search.png);
  background-position: 6px 6px;
  background-repeat: no-repeat;
  }
.search-about input[type="text"]:focus {background-position: 6px -22px;}

.tag-cloud li {
  float: left;
  display: inline;
  margin-right: 8px;
  line-height: 24px;
  text-transform: lowercase;
  }

.archive .post {border-bottom:  0px;}

.post {
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid #ddd;
  }
.post h1 {
  line-height: normal;
  display: block;
  float: none;
  }
.post .caption {
  margin: -20px 0px 15px;
  color: #999;
  font-style: italic;
  }
.post img {
  margin: 0.5em 0 0 0;
  max-width: 100%;
  }
.post .right img {float: right; margin: 0 0 20px 30px;}
.post .left img {float: left; margin: 0 30px 20px 0;}
.post img.borderless {border: none; margin: 0 3px 0 83px;}
.post h1, .post h2, .post h3 {
  clear: both;
  margin: 2px 0 7px;
  padding: 0;
  color: #3b4648;
  background: none;
  text-transform: none;
  line-height: 120%;
  font-size: 28px;
  font-family: "proxima-nova-1", Calibri, "gesta-1", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  }
.post-body h2 {font-size: 24px;}
.post h3 {font-size: 20px;}
.post p {margin-bottom: 1.3em;}
.post p + h2 {margin-top: 1em; margin-bottom: .5em;}
.post p + h3 {margin-top: 1em; margin-bottom: .5em;}
.post h2 + h3 {margin-top: 1em;}
.post ul {list-style: square inside; margin: 0 0 21px}
.post ol {list-style: decimal inside; margin: 0 0 21px;}
.post dl {margin: 0 0 21px;}
.post dt {width: 80px; text-align: left;}
.post dd {margin-bottom: 0;}

.post ol p { padding: 0; }
.post ol li {
  padding-left: 5px;
  margin-left: 30px;
  list-style: decimal outside;

}

.posted-on {
  float: left;
  clear: both;
  display: block;
  margin: 0 22px 10px 2px;
  padding: 2px 7px;
  color: #fff;
  background: #9b7ca5;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  line-height: 120%;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .1);
  font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  }

.post-meta {
  padding: 0 0 16px 0;
  color: #999;
  font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;
  }
.post-meta ul {
  float: left;
  margin: 0 0 13px;
  padding: 10px 0 0 !important;
  font-size: 13px;
  border-top: 1px solid #ddd;
  }
.post-meta li {
  display: inline;
  float: left;
  padding: 0;
  margin-right: 10px;
  }
.post-meta a {font-weight: normal !important;}
.post-meta .published:first-letter {text-transform: uppercase;}
.post-meta .author {
  padding-left: 22px;
  background: url(/assets/icon-user.png) 0 4px no-repeat;
  }
.post-meta .tags {
  padding-left: 22px;
  background: url(/assets/icon-tag.png) 0 4px no-repeat;
  }
.post-meta .comments {
  padding-left: 22px;
  background: url(/assets/icon-comment.png) 0 4px no-repeat;
  }
.post-meta .tags a {text-transform: lowercase; margin: 0 4px 0 0;}
.post-meta .author .email {display: none;}

.print-info {display: none;}

p.comment {
  margin-top: -30px;
  padding: 5px 0 0 24px;
  background: url(/assets/icon-comment.png) 0 10px no-repeat;
  }

#comments {float: left; width: 620px; margin: 0 0 30px;}
#comments h2 {
  float: left;
  width: 540px;
  margin: -30px 0 24px 80px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
  }
#comments .leave-comment {margin-top: -10px;}
#comments .comment-list {
  list-style: none;
  margin-bottom: 30px;
  font-size: 15px;
  }
#comments .comment-list li {
  margin: 1.5em 0 0 80px;
  padding: 0 0 1.5em;
  border-bottom: 1px solid #ddd;
  }
#comments .comment-list p {margin: 1.1em 0 0;}
#comments .avatar {float: left; margin-left: -80px;}
#comments .avatar img {padding: 2px; border: 1px solid #ccc;}
#comments .meta {color: #999; font-size: 14px;}
#comments .meta cite {
  margin-right: 5px;
  color: #545454;
  font-style: normal;
  font-weight: bold;
  }
#comments .anchor {
  float: right;
  margin-top: -3px;
  font-size: 26px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size-adjust: none;
  }
#comments .anchor a {color: #ddd; background: none;}
#comments .anchor a:hover {color: #32abc9; border: none;}

#comment-form {margin-left: 80px;}
#comment-form input.text {width: 400px;}
#comment-form textarea.text {width: 530px; height: 180px;}

.twitter-follow {margin-top: 30px;}
.twitter-follow iframe {margin: 0 10px 10px 0;}

.pagination {
  float: left;
  margin-top: -30px;
  text-align: center;
  font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  }
.pagination .prev_page {float: left;}
.pagination .next_page {float: right;}
.pagination span, .pagination a {margin: 0 2px;}

/* Contact */

.contact-list {line-height: 160%; font-weight: 300;}
.contact-list li {
  width: 220px;
  margin-bottom: 30px;
  padding-left: 80px;
  min-height: 62px;
  }
.contact-list .address {
  background: url(/assets/circle-small-home.png) top left no-repeat;
  }
.contact-list .phone {
  background: url(/assets/circle-small-phone.png) top left no-repeat;
  }
.contact-list .email {
  background: url(/assets/circle-small-mail.png) top left no-repeat;
  }
.contact-list .follow {
  background: url(/assets/circle-small-follow.png) top left no-repeat;
  }
.contact-list .newsroom {
  background: url(/assets/circle-small-mnd.png) top left no-repeat;
  }

#contact textarea {width: 290px; height: 180px;}
#contact input[type="text"], #contact input[type="email"] {width: 290px;}
#contact .switch-map {float: right;}

#map-canvas {
  float: left;
  width:100%;
  height: 160px;
  border-bottom: 1px solid #bbb;
  }

/* Footer */

#footer {
  float: left;
  width: 100%;
  padding: 20px 0 0;
  color: #fff;
  font-size: 12px;
  font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;
  border-top: 1px solid #444;
  }
#footer strong {font-weight: 600;}
#footer .logo {
  float: none;
  display: block;
  text-align: center;
  margin: 0 auto;
  }
#footer p {
  float: none;
  text-align: center;
  margin: 20px 0 40px;
  line-height: 150%;
  }
#footer a {
  background: none;
  -webkit-transition: none;
  -moz-transition: none;
  }
#footer .social-media {float: right; margin: 8px 97px 0 0;}
#footer .social-media a {
  float: right;
  display: block;
  width: 27px;
  height: 26px;
  margin: 0 0 100px 12px;
  text-indent: -9999px;
  background-position-y: top;
  background-position-x: left;
  }
#footer .social-media .twitter {background: url(/assets/icon-footer-twitter.png) no-repeat;}
#footer .social-media .fb {background: url(/assets/icon-footer-fb.png) no-repeat;}
#footer .social-media .rss {background: url(/assets/icon-footer-rss.png) no-repeat;}
#footer .social-media a:hover {background-position-y: bottom;}

/* Errors and notices */

#flash {
  background-color: #59983c;
  clear: both;
  color: #fff;
  font-size: 16px;
  }
#flash p {
  display: none;
  width: auto;
  margin: 0;
  padding: 5px 15px 5px 22px;
  }

#errorExplanation {margin-top: 1em;}
#errorExplanation h2 {color: #c00;}
#errorExplanation ul {list-style: disc inside;}


.field_with_errors input, .field_with_errors textarea {border: 1px solid #c00;}
.field_with_errors .error {padding-left: 6px; color: #c00;}
.field_with_errors textarea + .error {float: right; margin-top: -12px; padding-right: 11px;}

#new_message .btn {margin-top: 10px;}

/* Admin */

.post-new, .add {
  float: right;
  margin: -32px 0 0;
  padding-left: 18px;
  background: url(/assets/icon-add.png) center left no-repeat;
  }
.add {float: left; margin: 1.5em 0;}

.options {
  list-style: none;
  float: right;
  margin: 0;
  padding: 10px 0 0;
  }
.options li {float: right; margin: 0 0 4px;}
.options .edit {
  padding-left: 18px;
  background: url(/assets/icon-edit.png) left center no-repeat;
  }
.options .delete {
  padding-left: 18px;
  background: url(/assets/icon-cross.png) left center no-repeat;
  }
.options .view {
  padding-left: 18px;
  background: url(/assets/icon-magnifier.png) left center no-repeat;
  }
.options .back {
  padding-left: 18px;
  background: url(/assets/icon-back.png) left center no-repeat;
  }

.aside .options li {display: block; float: none; margin-bottom: 10px;}

.inline {display: inline;}
.inline li {display: inline; float: left; margin-left: 15px;}

.admin textarea, .admin input[type="text"], .admin input[type="email"] {
  width: 620px;
  font-size: 12px;
  line-height: 170%;
  }
.admin textarea {height: 320px;}
.admin select {margin: 0 5px 10px 0;}
.admin .add {clear: left; margin: 15px 0;}

#pictures {
  float: left;
  clear: both;
  list-style: none;
  margin-top: 25px;
  }
#pictures li {float: left; display: inline; margin: 0 20px 10px 0;}
#pictures .remove label {
  display: inline;
  margin: 0 0 0 3px;
  font-weight: normal;
  font-size: 14px;
  }

.admin a, .options a {
  font-weight: normal;
  background: none;
  -webkit-transition: none;
  -webkit-transition: none;
  transition: none;
  }
.admin a:hover, .options a:hover {color: #32abc9; text-decoration: underline;}

.style-guide pre {
  width: auto;
  margin: 0;
  padding: 0;
  overflow-x: visible;
  }
.style-guide code pre {
  margin: 0 0 12px;
  padding: 0;
  font-size: 12px;
  font-family: Menlo, Monaco, "Courier New", Courier, mono;
  }


/* 6: MISC
======================================================================================================= */

/* hr */

.hr, .hr-big {
  height: 1px;
  margin: 30px 0;
  border-bottom: 1px solid #ddd;
  font-size: 1px;
  line-height: 1px;
  }
.hr-big {
  width: 100%;
  clear: both;
  height: 5px;
  margin: 0 0 28px;
  background: url(/assets/divider-dottedborder.png) top left repeat-x;
  border: none;
  font-size: 5px;
  line-height: 5px;
  }
.hr hr, .hr-big hr {display: none;}

/* Clear floats */

.clearall {
  display: block;
  clear: both;
  height: 1px;
  margin: 0;
  font-size: 1px;
  line-height: 1px;
  }

.hide {display: none;}

html {height: 100%; margin-bottom: 1px;}

/* Shadowbox */

#sb-title-inner,
#sb-info-inner,
#sb-loading-inner,
div.sb-message {
  font-family:"HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200;
  color: #fff;
  }

#sb-container {
  position: fixed;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  z-index: 999;
  text-align: left;
  visibility: hidden;
  display: none;
  }

#sb-overlay {position: relative; height: 100%; width: 100%;}

#sb-wrapper {position: absolute; visibility: hidden; width: 100px;}

#sb-wrapper-inner {
  position: relative;
  border: 1px solid rgba(0, 0, 0, .4);
  overflow: hidden;
  height: 100px;
  }

#sb-body {position: relative; height: 100%;}

#sb-body-inner {position: absolute; height: 100%; width: 100%;}

#sb-player.html {height: 100%; overflow: auto;}

#sb-body img {border: none;}

#sb-loading {position: relative; height: 100%;}

#sb-loading-inner {
  position: absolute;
  font-size: 14px;
  line-height: 24px;
  height: 24px;
  top: 50%;
  margin-top: -12px;
  width: 100%;
  text-align: center;
  }
#sb-loading-inner span {
  background: url(/assets/loading-spinner.gif) no-repeat;
  padding-left: 34px;
  display: inline-block;
  }

#sb-body, #sb-loading {background-color: #060606;}

#sb-title, #sb-info {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  }
#sb-title, #sb-title-inner {height: 26px; line-height: 26px;}
#sb-title-inner {font-size: 16px;}

#sb-info, #sb-info-inner {height: 20px; line-height: 20px;}
#sb-info-inner {font-size: 12px;}

#sb-nav {
  float: right;
  height: 16px;
  padding: 2px 0;
  width: 45%;
  }
#sb-nav a {
  display: block;
  float: right;
  height: 16px;
  width: 16px;
  margin-left: 3px;
  cursor: pointer;
  background-repeat: no-repeat;
  }
#sb-nav a:hover {background-color: transparent;}

#sb-nav-close {background-image: url(/assets/close.png);}
#sb-nav-next {background-image: url(/assets/next.png);}
#sb-nav-previous {background-image: url(/assets/previous.png);}
#sb-nav-play {background-image: url(/assets/play.png);}
#sb-nav-pause {background-image: url(/assets/pause.png);}

#sb-counter {float: left; width: 45%;}
#sb-counter a {
  padding: 0 4px 0 0;
  text-decoration: none;
  cursor: pointer;
  color: #fff;
  }
#sb-counter a.sb-counter-current {text-decoration: underline;}

div.sb-message {font-size: 12px; padding: 10px; text-align: center;}
div.sb-message a:link,div.sb-message a:visited {color: #fff; text-decoration: underline;}

/* Slider */

#slider {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: -50px;
  background-color: #f4f4f4;
  background-repeat: repeat-x;
  background-position-x: 0;
  background-position-y: 0;
  z-index: 20;
  font-size: 13px;
  line-height: 150%;
  }
#slider .wrapper {position: relative;}
#slider p a {padding: 0 .2em;}

.slider-wrap {clear: both; position: relative;}

.details {
  float: left;
  width: 100%;
  margin: -5px 0 0 10px;
  background: url(/assets/divider-dottedborder.png) top left repeat-x;
  font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;
  }
.details .work {float: left; margin-top: 15px;}
.details .visit {float: right; margin-top: 15px;}

.flexslider {float: left; overflow: hidden; position: relative; width: 100%;}
.flexslider ul {list-style: none;}
.flexslider .slides li {display: block; float: left; text-align: center; height: 100%;}
.flexslider .slides > li {display: none;}
.flexslider .slides img {max-width: 100%;}

.flex-container {zoom: 1; position: relative;}


/* 6: MEDIA QUERIES
======================================================================================================= */

/* Print */

@media print {
  * {background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important;}
  a, a:visited {color: blue !important; text-decoration: underline; font-weight: normal;}
  a[href]:after {content: " (" attr(href) ")"; color: black !important;}
  a[href^="javascript:"]:after, a[href^="#"]:after {content: "";}
  abbr[title]:after {content: " (" attr(title) ")";}
  pre, blockquote {-moz-box-shadow: none !important; -webkit-box-shadow: none !important; -o-box-shadow: none !important; -ms-box-shadow: none !important; box-shadow: none !important; page-break-inside: avoid;}
  thead {display: table-header-group;}
  tr, img {page-break-inside: avoid;}
  p, h2, h3 {orphans: 3; widows: 3;}
  p, ul, ol {font-size: 10pt; line-height: 15pt; margin-bottom: 10pt !important;}
  .post h1 {display: block; page-break-after: avoid;}
  h2, h3 {page-break-after: avoid;}
  body {margin: 0 5%;}
  html {padding: 3% 0;}
  #header #logo {margin: 0; float: right; width: 80px;}
  #header #logo img, #header #logo span {display: inline !important; width: 80px; height: 80px;}
  #nav-main, #animated-highlight, .post-meta .tags, .post-meta .comments, #disqus_thread, h1, .aside, .dsq-brlink, #footer .logo, #footer .social-media, #footer p span, .social-rss, .hr-big {display: none;}
  .post-meta .author {padding: 0;}
  .post-meta .author .email {display: inline !important;}
  .post-meta ul {border-color: black;}
  .posted-on {float: left; width: 65px; height: 62px; border-radius: 100px; margin: 0 12px 0 0; padding: 0; color: #fff; background: black !important; line-height: 120%; text-align: center; font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;}
  .posted-on span {display: block;}
  .posted-on .post-month {margin: 11px 0 4px; font-size: 12px; text-transform: uppercase; color: white !important;}
  .posted-on .post-date {font-size: 26px; font-weight: 600; color: white !important;}
  .post {margin-right: 5%; border: none;}
  .post p, .post h1, .post h2, .post h3,
  .post dl, .post-meta {padding-left: 80px;}
  .post ol, .post ul {padding-left: 95px; padding-right: 15px;}
  .post h1, .post h2, .post h3 {clear: none;}
  .post pre {min-width: 100%;}
  .post code {border: 1px dashed #999; border-width: 1px 0; margin-left: 80px;}
  p.print-info, #footer p.print-info {display: inline; color: #666 !important;}
  p.print-info a[href]:after, .post-meta .author .email a[href]:after {content: "";}
  #footer {border-color: silver; padding-top: 0;}
  #footer p, #footer strong {color: #666 !important; font-weight: normal; font-size: 8pt !important; text-align: left; margin-bottom: 5pt !important;}
  #footer p.print-info span {display: inline; color: #666 !important; padding: 0 5pt;}
  }

/* 320px */

@media only screen and (min-width: 320px) {
  .wrapper, .project .wrapper, #nav-main, .article, .post-meta ul, pre, .pagination {width: 300px;}
  .wrapper {padding: 0;}
  .aside {margin-top: 20px; width: 300px;}
  .three, .four, .six {width: 280px; margin: 0 10px;}
  .what-we-do {margin-left: 0;}
  .what-we-do .center {font-size: 28px; padding: 5px 0 15px;}
  .what-we-do div {width: 280px; margin: 0 10px;}
  .what-we-do .view-our-work {margin: -10px 80px 15px;}
  .details {width: 300px;}
  #slider .wrapper {width: 320px;}
  #slider .panel-wrapper img {width: 300px; height: 124px;}
  #slider {background-image: url(/assets/bg-slider-480.png);}
  .flex-direction-nav {display: none;}
  .flex-control-nav {display: none;}
  }

/* 480px */

@media only screen and (min-width: 480px) {
  .wrapper, #nav-main {width: 480px;}
  .post-meta ul, pre, .pagination {width: 460px; padding: 0 10px;}
  .project .wrapper, .aside, .project-description, .quote, .quote blockquote, .article {width: 460px;}
  .section {margin-left: 10px; margin-right: 10px;}
  .section h1, .section-title {width: auto;}
  #nav-main li {font-size: 14px; letter-spacing: .1em; -webkit-text-size-adjust: none;}
  #nav-main li a {margin: 0 0 0 12px; padding: 15px 8px;}
  .search-about input[type="text"] {width: 457px;}
  .social-rss {margin-right: 10px;}
  #projects {width: 480px; margin-left: -20px;}
  #projects li.intro {width: 460px; margin: 0 0 30px 20px;}
  #projects li {width: 220px; margin: 0 0 30px 20px;}
  #projects li a { font-size: 18px; }
  #projects li img {width: 214px; height: 141px;}
  .gallery {clear: both; float: left; width: 480px; margin-left: -20px;}
  .gallery li {margin: 15px 0 0 20px;}
  #footer {padding: 40px 0 0;}
  #footer .logo {float: left; margin: 0 27px 0 10px;}
  #footer p {float: left; margin: 3px 0 0; line-height: 150%; text-align: left;}
  #contact input[type="text"], #contact input[type="email"], #contact textarea {width: 450px;}
  .contact-list li {display: inline; float: left; width: 153px; padding: 66px 0 0 0;}
  .contact-list li:nth-child(4) {display: none;}
  #people {width: 460px; margin-right: 0;}
  #by-the-numbers li {width: 220px;}
  .three, .four {width: 460px;}
  .three, .four, .six {margin: 0;}
  pre {padding: 0;}
  .what-we-do .center, .get-in-touch .center {font-size: 30px; padding: 10px 60px;}
  .what-we-do div {width: 440px; padding: 0 10px;}
  .what-we-do .view-our-work {margin: -10px 160px 15px;}
  #clients, #open-source-projects {float: left; width: 460px; margin-top: 10px; margin-left: 10px;}
  #clients li, #open-source-projects li {width: 200px; margin-left: 0; margin-right: 20px;}
  #open-source-projects li.clear-small {clear: both;}
  .office-images {margin-right: 33px; width: 415px;}
  .details {width: 460px;}
  #slider .wrapper {width: 480px;}
  #slider .panel-wrapper img {width: 400px; height: 165px;}
  #slider {background-image: url(/assets/bg-slider-480.png);}
  .flex-direction-nav {display: inline;}
  .flex-direction-nav li a {position: absolute; width: 12px; height: 20px; top: 90px; background: url(/assets/arrow-left.png) center left no-repeat; text-indent: -99999px; cursor: pointer; border: none;}
  .flex-direction-nav li a.next {background: url(/assets/arrow-right.png) center right no-repeat; right: 10px;}
  .flex-direction-nav li a.prev {left: 10px;}
  .get-in-touch .contact-info p:first-child {float: left; width: 200px;}
  .get-in-touch .contact-info p:last-child {float: left; width: 200px; text-align: right;}
  .get-in-touch div {width: 440px;}
  .contact-list .newsroom {display: none;}
  .partners li {width: 200px; margin-right: 20px;}
  .six {width: 440px; margin: 0 10px;}
  .map {background: url(/assets/map.png) 226px 0 no-repeat;}
  #bottom .four {margin-left: 10px;}
  #footer .social-media {margin: 8px 10px 0 0;}
  .get-in-touch {margin: 0 10px;}
  }

@media only screen and (min-width: 568px) and (max-width: 568px;) {
  .wrapper, #nav-main {width: 480px; padding: 0 44px;}
  }

/* 768px */

@media only screen and (min-width: 768px) {
  #logo {position: absolute; right: 10px; display: block; margin: 42px 0; width: 86px; height: 86px;}
  #logo span, #logo a {width: 86px; height: 86px; -webkit-transform: rotate(0deg) scale(1.0); -moz-transform: rotate(0deg) scale(1.0); -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out;}
  #logo span, #logo a {background: url(/assets/logo.png) no-repeat;}
  #logo span:hover, #logo a:hover {-webkit-transition: all 1.6s ease-in-out; -moz-transition-duration: 1.6s; -webkit-transform: rotate(360deg) scale(1.0); -moz-transform: rotate(360deg) scale(1.0);}
  #nav-main {list-style: none; float: left; width: auto; margin: 50px 0 30px; text-align: left;}
  #nav-main li:first-child a {margin-left: 10px; padding-left: 0;}
  #header .intro {left: 14px; top: 165px;}
  .section {margin: 40px 10px 0;}
  .section h1, .section .hr-big, .section-title {width: 100%; margin-left: 0; margin-right: 0;}
  .section h1, .section-title {width: auto;}
  .social-rss {margin-right: 0;}
  .wrapper, .article {width: 720px;}
  #blog .article {width: 700px;}
  .article {padding: 0;}
  .project .wrapper {width: 700px;}
  .post-meta ul {width: 620px;}
  #header .blurb {display: inline;}
  .post p, .post h1, .post h2, .post h3,
  .post dl, .post iframe, .post-meta, .post blockquote {padding-left: 80px;}
  .post ol, .post ul {padding-left: 80px; padding-right: 15px;}
  .post h1, .post h2, .post h3 {clear: none;}
  .posted-on {float: left; width: 65px; height: 62px; margin: 0 12px 0 0; padding: 0; color: #fff; background: url(/assets/circle-small.png) top left no-repeat; line-height: 120%; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, .1); font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;}
  .posted-on span {display: block;}
  .posted-on .post-month {margin: 11px 0 4px; font-size: 12px; text-transform: uppercase;}
  .posted-on .post-date {font-size: 26px; font-weight: 600;}
  .twitter-follow {margin-left: 80px;}
  pre {width: 620px; margin-left: 80px;}
  .pagination {width: 720px;}
  .aside {float: right; width: 700px; padding: 0;}
  .aside div {float: left; width: 340px;}
  .aside .about {clear: left;}
  .aside .side-meta {float: right;}
  .search-about input[type="text"] {width: 337px;}
  .image {width: 720px;}
  .project-description {width: 380px;}
  .project-pagination {display: block;}
  #project-details .visit-site.align-right {display: inline; margin-top: 8px;}
  .quote, .quote blockquote {width: 284px;}
  #projects {width: 740px;}
  #projects li.intro {width: 720px; margin: 0 0 30px 20px;}
  #projects li {width: 300px; margin: 0 0 30px 46px;}
  #projects li img {width: 294px; height: 194px;}
  .gallery {clear: both; float: right; width: 720px; margin-left: -20px; margin-top: 0;}
  #projects li a { font-size: 22px; }
  .gallery li {margin: 0 0 0 20px;}
  .gallery li:nth-child(4) {display: none;}
  .contact-list li {width: 170px; padding: 66px 0 0 0;}
  .contact-list li:nth-child(4) {display: inline;}
  #contact textarea {width: 610px;}
  #about-us .three {width: 200px;}
  #people {width: 480px; margin-right: 0;}
  #people li {margin-left: 20px;}
  .who-we-are {float: left; width: 220px;}
  #by-the-numbers {margin-left: -20px;}
  #by-the-numbers li {width: 160px;}
  #clients, #open-source-projects {float: right; width: 420px;}
  #clients li, #open-source-projects li {width: 190px; margin-left: 20px; margin-right: 0;}
  .three {width: 220px;}
  #home #header {height: 325px;}
  .details {width: 700px;}
  #slider .wrapper {width: 720px;}
  #slider .panel-wrapper img {width: 580px; height: 239px;}
  #slider {background-image: url(/assets/bg-slider-720.png);}
  .flex-direction-nav li a {top: 160px;}
  .flex-control-nav {position: absolute; clear: both; display: block; bottom: 20px; width: auto; margin-left: 306px; overflow: hidden; text-align: center;}
  .flex-control-nav li {display: inline-block; zoom: 1; *display: inline;}
  .flex-control-nav li a {display: block; float: left; width: 9px; height: 9px; margin: 0 0 0 6px; background: url(/assets/indicator.png) center left no-repeat; text-indent: -99999px; text-decoration: none; cursor: pointer; border: none;}
  .flex-control-nav li a.active {background: url(/assets/indicator-active.png) center left no-repeat;}
  .what-we-do h2 {font-size: 19px;}
  .four {width: 220px;}
  .what-we-do .center {padding: 25px 0 20px;}
  .what-we-do div {width: 240px; margin: 0;}
  .what-we-do .view-our-work {margin: 80px 20px 0;}
  .get-in-touch .three, .get-in-touch .vcard {width: 220px;}
  .get-in-touch .six {width: 420px; padding: 0 40px 10px 0;}
  .get-in-touch .six div {width: 420px;}
  .get-in-touch .three.contact-info {width: 100%;}
  .get-in-touch .contact-info p:first-child {width: 460px;}
  .get-in-touch .contact-info p:last-child {text-align: left;}
  .column {margin: 0 20px 0 0;}
  .map {min-height: 260px; background: url(/assets/map.png) right 40px no-repeat;}
  .office-images {margin-right: 0;}
  #bottom .four {margin-left: 0;}
  #bottom .recent-posts {margin-left: 10px;}
  #newsletter-signup .fineprint {margin: 10px 0;}
  #newsletter-signup input.text {width: 200px;}
  #map-canvas {height: 360px;}
  }

/* 992px */

@media only screen and (min-width: 992px) {
  .wrapper {width: 960px;}
  .article, .pagination {width: 620px;}
  .post-meta ul {width: 540px;}
  .map-canvas {margin-left: 10px; margin-right: 10px;}
  .logo {margin-right: 10px;}
  #nav-main {margin-left: 0;}
  #animated-highlight {display: inline;}
  #blog .article {width: 620px;}
  pre {width: 540px;}
  .aside {width: 220px; margin-top: 0;}
  .aside div {float: none; width: auto;}
  .image {float: right; width: 480px;}
  .quote, .quote blockquote {width: 480px;}
  .quote {margin-bottom: 20px;}
  .project .wrapper {width: 940px;}
  #projects {width: 960px; margin: 0 0 20px -20px;}
  #projects li.intro {width: 300px; height: 200px;}
  #projects li {margin: 0 0 30px 20px;}
  .gallery {clear: right; float: right; width: 480px;}
  .gallery li {margin: 0 0 15px 20px;}
  .gallery li:nth-child(4) {display: inline;}
  .contact-list li {padding: 0 0 0 80px;}
  #people {width: 640px;}
  #by-the-numbers li {width: 215px;}
  #clients, #open-source-projects {width: 640px;}
  #open-source-projects li.clear-small {clear: none;}
  #open-source-projects li.clear-full {clear: both;}
  .search-about input[type="text"] {width: 218px;}
  .details {width: 940px;}
  #slider .wrapper {width: 960px;}
  #slider .panel-wrapper img {width: 800px; height: 330px;}
  #header .intro {left: 120px; top: 110px;}
  #home #header {height: 270px;}
  #slider {background-image: url(/assets/bg-slider.png);}
  #slider .slides {min-height: 330px;}
  .flex-direction-nav li a {top: 220px;}
  .flex-control-nav {margin-left: 424px;}
  .what-we-do h2 {font-size: 22px;}
  .four {width: 300px;}
  .partners li {width: 300px;}
  .get-in-touch .three {margin-top: 15px;}
  .get-in-touch .six {width: 420px; padding: 0 20px 10px;}
  .get-in-touch .three.contact-info {width: 220px;}
  .get-in-touch .contact-info p, .get-in-touch .contact-info p:first-child {float: none; width: auto;}
  .contact-list .newsroom {display: inline;}
  .office-images {width: 620px;}
  .what-we-do div {width: 365px; margin: 0;}
  .what-we-do .view-our-work {float: left; margin: 40px 15px 0;}
  #newsletter-signup input.text {width: 160px;}
  #newsletter-signup .fineprint {margin: -1px 0 10px;}
  }

/* 2X */

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
  .project-pagination {display: none;}
  #logo span, #logo a {
    background-image: url(/assets/logo-small-text-2x.png);
    background-size: 145px 46px;
    }
  #nav-main li {
    background-image: url(/assets/divider-nav-2x.png);
    background-size: 10px 20px;
    }
  .what-we-do .view-our-work {
    background-image: url(/assets/circle-large-2x.png);
    background-size: 125px 120px;
    }
  .map {background-size: 102px 102px;}
  #bottom #tweet {
    background-image: url(/assets/twitter-bg-2x.png);
    background-size: 155px 107px;
    }
  #bottom #tweet .timestamp {
    background-image: url(/assets/icon-timestamp-2x.png);
    background-size: 14px 14px;
    }
  #footer .social-media .twitter {
    background-image: url(/assets/icon-footer-twitter-2x.png);
    background-size: 27px 52px;
    }
  #footer .social-media .fb {
    background-image: url(/assets/icon-footer-fb-2x.png);
    background-size: 27px 52px;
    }
  #footer .social-media .rss {
    background-image: url(/assets/icon-footer-rss-2x.png);
    background-size: 27px 52px;
    }
  .social-rss .facebook {
    background-image: url(/assets/icon-blog-fb-2x.png);
    background-size: 26px 52px;
    }
  .social-rss .twitter {
    background-image: url(/assets/icon-blog-twitter-2x.png);
    background-size: 26px 52px;
    }
  .social-rss .rss {
    background-image: url(/assets/icon-blog-rss-2x.png);
    background-size: 26px 52px;
    }
  .contact-list .address {
    background-image: url(/assets/circle-small-home-2x.png);
    background-size: 65px 62px;
    }
  .contact-list .phone {
    background-image: url(/assets/circle-small-phone-2x.png);
    background-size: 65px 62px;
    }
  .contact-list .email {
    background-image: url(/assets/circle-small-mail-2x.png);
    background-size: 65px 62px;
    }
  .contact-list .follow {
    background-image: url(/assets/circle-small-follow-2x.png);
    background-size: 65px 62px;
    }
  .contact-list .newsroom {
    background-image: url(/assets/circle-small-mnd-2x.png);
    background-size: 65px 62px;
    }
  .project .wrapper, .project, .project .project-image {height: 180px;}
  .project-nav {
    list-style: none;
    float: left;
    clear: both;
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
    border-top: 1px solid #dfdfdf;
    font-family: "proxima-nova-1", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    }
  .project .to-overview {
    top: 7px;
    padding-left: 0;
    background: none !important;
    }
  .project .next-project {
    top: 7px;
    padding-right: 0;
    background: none !important;
    }
  #seb {background-size: 5px 180px;}
  #seb .project-image {background-size: 470px 180px;}
  #mediapilot {background-size: 1px 180px;}
  #mediapilot .project-image {background-size: 570px 180px;}
  #mynewsdesk {background-size: 36px 180px;}
  #mynewsdesk .project-image {background-size: 470px 180px;}
  #streamio {background-size: 2px 180px;}
  #streamio .project-image {background-size: 600px 180px;}
  #nordicruby {background-size: 2px 180px;}
  #nordicruby .project-image {background-size: 600px 180px;}
  #nfsnetwork {background-size: 800px 180px;}
  #nfsnetwork .project-image {background-size: 470px 180px;}
  #naturkartan {background-size: 800px 180px;}
  #naturkartan .project-image {background-size: 470px 180px;}
  #weplus {background-size: 800px 180px;}
  #weplus .project-image {background-size: 470px 180px;}
  #shotbox .project-image {background-size: 470px 180px;}
  #moz .project-image {background-size: 470px 180px;}
  #tv4 {background-size: 1px 180px;}
  #tv4 .project-image {background-size: 600px 180px;}
  #projects li a {font-size: 12px;}
  #projects h2 {font-size: 12px; margin-top: 0;}
  #projects .intro h2 {font-size: 22px;}
  #bottom .follow-elabs .twitter a {background: url(/assets/follow-icon-twitter-2x.png) no-repeat; background-size: 25px 50px;}
  #bottom .follow-elabs .facebook a {background: url(/assets/follow-icon-facebook-2x.png) no-repeat; background-size: 25px 50px;}
  #bottom .follow-elabs .rss a {background: url(/assets/follow-icon-rss-2x.png) no-repeat; background-size: 25px 50px;}
  #bottom .follow-elabs .flickr a {background: url(/assets/follow-icon-flickr-2x.png) no-repeat; background-size: 25px 50px;}
  #bottom .follow-elabs .github a {background: url(/assets/follow-icon-github-2x.png) no-repeat; background-size: 25px 50px;}
  #bottom .follow-elabs .mynewsdesk a {background: url(/assets/follow-icon-mnd-2x.png) no-repeat; background-size: 25px 50px;}
  }

/* 2X mobile */

@media only screen and (max-device-width: 320px) and (-webkit-device-pixel-ratio: 2) and (orientation:portrait) {
  #projects li.intro {width: 300px; height: auto; margin: 0 0 20px 20px;}
  #projects li {width: 186px; margin: 0 0 20px 77px;}
  #projects li img {width: 180px; height: 119px; margin-left: 0;}
  }

/* 2X tablet */

@media only screen and (min-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
  #logo span, #logo a {background: url(/assets/logo-2x.png) no-repeat; background-size: 86px 86px;}
  #header .intro {background: url(/assets/welcome-2x.png) no-repeat; background-size: 700px 123px;}
  #projects li.intro {width: 228px; height: 440px; margin-right: 20px;}
  }


/* 8: CODE
======================================================================================================= */

pre {
  float: left;
  margin-bottom: 21px;
  background: #1a1a1a;
  -moz-box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  -o-box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  -ms-box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  }
pre code {
  display: block;
  background: #1a1a1a;
  color: #f8f8f8;
  font-size: 12px;
  line-height: 21px;
  padding: 14px;
  -webkit-font-smoothing: subpixel-antialiased;
  }
pre .shebang,
pre .comment,
pre .template_comment,
pre .javadoc {
  color: #7c7c7c;
  }
pre .keyword,
pre .tag,
pre .ruby .function .keyword,
pre .tex .command {
  color: #96cbfe;
  }
pre .function .keyword,
pre .sub .keyword,
pre .method,
pre .list .title {
  color: #ffffb6;
  }
pre .string,
pre .tag .value,
pre .cdata,
pre .filter .argument,
pre .attr_selector,
pre .apache .cbracket,
pre .date {
  color: #a8ff60;
  }
pre .subst {color: #daefa3;}
pre .regexp {color: #e9c062;}
pre .function .title,
pre .sub .identifier,
pre .pi,
pre .decorator,
pre .ini .title,
pre .tex .special {
  color: #ffffb6;
  }
pre .class .title,
pre .constant,
pre .smalltalk .class,
pre .javadoctag,
pre .yardoctag,
pre .phpdoc,
pre .nginx .built_in {
  color: #ffffb6;
  }
pre .symbol,
pre .ruby .symbol .string,
pre .ruby .symbol .keyword,
pre .ruby .symbol .keymethods,
pre .number,
pre .variable,
pre .vbscript,
pre .literal {
  color: #c6c5fe;
  }
pre .css .keyword {color: #96cbfe;}
pre .css .rule .keyword,
pre .css .id {
  color: #ffffb6;
  }
pre .css .class {color: #fff;}
pre .hexcolor {color: #c6c5fe;}
pre .number {color: #ff73fd;}
pre .tex .formula {opacity: 0.7;}

pre::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    }
pre::-webkit-scrollbar-button:start:decrement, pre::-webkit-scrollbar-button:end:increment {
    display: none;
    }
pre::-webkit-scrollbar-button:vertical:increment {
    background: transparent;
    }
pre::-webkit-scrollbar-track-piece {
    background: #444;
    -webkit-border-radius: 7px;
    margin: 0;
    }
pre::-webkit-scrollbar-thumb:horizontal {
    width: 50px;
    background: #777;
    -webkit-border-radius: 7px;
    }

/* 8: CODE
============================================================================ */


pre {
  float: left;
  margin-bottom: 21px;
  background: #1a1a1a; 
  -moz-box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  -o-box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  -ms-box-shadow: 0 2px 12px rgba(0, 0, 0, .4);  
  box-shadow: 0 2px 12px rgba(0, 0, 0, .4); 
  } 
pre code {
  display: block;
  background: #1a1a1a;
  color: #f8f8f8;
  font-size: 12px;
  line-height: 21px;
  padding: 14px;
  -webkit-font-smoothing: subpixel-antialiased;
  }
pre .shebang,
pre .comment,
pre .template_comment,
pre .javadoc {
  color: #7c7c7c;
  }
pre .keyword,
pre .tag,
pre .ruby .function .keyword,
pre .tex .command {
  color: #96cbfe;
  }
pre .function .keyword,
pre .sub .keyword,
pre .method,
pre .list .title {
  color: #ffffb6;
  }
pre .string,
pre .tag .value,
pre .cdata,
pre .filter .argument,
pre .attr_selector,
pre .apache .cbracket,
pre .date {
  color: #a8ff60;
  }
pre .subst {color: #daefa3;}
pre .regexp {color: #e9c062;}
pre .function .title,
pre .sub .identifier,
pre .pi,
pre .decorator,
pre .ini .title,
pre .tex .special {
  color: #ffffb6;
  }
pre .class .title,
pre .constant,
pre .smalltalk .class,
pre .javadoctag,
pre .yardoctag,
pre .phpdoc,
pre .nginx .built_in {
  color: #ffffb6;
  }
pre .symbol,
pre .ruby .symbol .string,
pre .ruby .symbol .keyword,
pre .ruby .symbol .keymethods,
pre .number,
pre .variable,
pre .vbscript,
pre .literal {
  color: #c6c5fe;
  }
pre .css .keyword {color: #96cbfe;}
pre .css .rule .keyword,
pre .css .id {
  color: #ffffb6;
  }
pre .css .class {color: #fff;}
pre .hexcolor {color: #c6c5fe;}
pre .number {color: #ff73fd;}
pre .tex .formula {opacity: 0.7;}

pre::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    }
pre::-webkit-scrollbar-button:start:decrement, pre::-webkit-scrollbar-button:end:increment {
    display: none;
    }
pre::-webkit-scrollbar-button:vertical:increment {
    background: transparent;
    }
pre::-webkit-scrollbar-track-piece {
    background: #444;
    -webkit-border-radius: 7px;
    margin: 0;
    }
pre::-webkit-scrollbar-thumb:horizontal {
    width: 50px;
    background: #777;
    -webkit-border-radius: 7px;
    }