/* let's clear some floats */
/* We like off-black for text. */
body, select, input, textarea {
  color: white; }

a {
  color: white;
  transition: all 0.15s; }

a:hover, a.active {
  text-decoration: none; }

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection {
  background: #1b345c;
  color: #fff;
  text-shadow: none; }

::selection {
  background: #1b345c;
  color: #fff;
  text-shadow: none; }

/*  j.mp/webkit-tap-highlight-color */
ins {
  background-color: #1b345c;
  color: #fff;
  text-decoration: none; }

mark {
  background-color: #1b345c;
  color: #fff;
  font-style: italic;
  font-weight: bold; }

/* Mozilla dosen't style placeholders by default */
input:-moz-placeholder {
  color: #a9a9a9; }

textarea:-moz-placeholder {
  color: #a9a9a9; }

html {
  height: 100%;
  width: 100%; }

body {
  font-family: "Helvetica Neue", Helvetica, Calibri, Helmet, Freesans, sans-serif;
  font-size: 16px;
  line-height: 1.2em;
  margin: 0;
  padding: 0;
  background: #366ba8; }

.wrapper {
  padding: 0 1.5em;
  max-width: 1150px;
  margin: 0 auto; }

h1, h2, h3, h4, p {
  max-width: 28em; }

h1 {
  font-size: 3.33em;
  line-height: 1em;
  margin-bottom: 0.5em;
  max-width: 250px; }

.desc, h2 {
  font-size: 1.8em;
  line-height: 1em; }

h3, h4 {
  font-size: 1.5em;
  font-weight: 300;
  margin: 1em 0;
  line-height: 1.33em; }

h3 {
  font-size: 1.25em;
  margin: 1.5em 0 0.75em; }

h4 {
  font-size: 1em;
  margin: 1em 0 0; }

p {
  margin-bottom: 1em; }

#noflash {
  display: none; }

hr {
  border-color: #d7d8df;
  margin: 2em 0; }

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200; }
  header > .wrapper {
    padding-left: 0;
    padding-right: 0; }
  header #menu {
    padding: 2em 1.5em 1em;
    cursor: pointer;
    float: right; }
    header #menu svg {
      fill: white;
      width: 1.475em;
      height: 1.25em; }
  header nav {
    width: 100%;
    font-size: 1.25em;
    display: none;
    clear: right;
    background: rgba(165, 184, 210, 0.9); }
    header nav li > a {
      color: #1b345c;
      text-decoration: none;
      text-transform: uppercase;
      display: block;
      padding: 0.75em 1.25em 0.7em;
      line-height: 1em;
      border: 0;
      border-top: 0.05em solid #1b345c; }
      header nav li > a:hover {
        opacity: 0.6; }
    header nav li > ul {
      display: none; }
      header nav li > ul > li a {
        background: rgba(255, 255, 255, 0.2); }

main {
  display: block; }
  main > .wrapper {
    margin-top: 2em;
    margin-bottom: 3em; }

.home .wrapper > .tags {
  float: right; }
.home .work-list {
  margin-top: 1.5em; }
  .home .work-list li:nth-child(7) {
    display: none; }
.home figure {
  margin-bottom: 1em;
  position: relative;
  transition: 0.25s;
  font-size: 0.85em; }
  .home figure img {
    margin: 0 auto;
    display: block;
    transition: 0.25s; }
  .home figure > a {
    color: white; }
  .home figure figcaption {
    position: absolute;
    left: 0;
    padding: 1em;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 0.25s;
    background-color: rgba(0, 0, 0, 0.6); }
  .home figure:hover figcaption {
    opacity: 1; }
.home .tags {
  font-size: 0.8em;
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em; }
  .home .tags li {
    display: inline-block;
    margin-right: 0.5em; }
    .home .tags li.active a {
      background: #d7d8df;
      color: white; }
    .home .tags li a {
      background: #f9f9fa;
      color: #1b345c;
      border-radius: 0.25em;
      padding: 0.75em 0.85em 0.5em;
      display: block; }
      .home .tags li a:hover {
        background: #d7d8df;
        color: white; }

#project {
  margin-bottom: 5em; }
  #project img {
    max-height: 600px; }
  #project .next {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 125;
    cursor: pointer; }
  #project #count {
    text-align: center;
    margin-top: 1em; }
    #project #count span {
      border: 1px solid #1b345c;
      border-radius: 0.75em;
      height: 0.7em;
      width: 0.7em;
      margin: 0 0.15em;
      display: inline-block;
      cursor: pointer; }
      #project #count span.cycle-pager-active {
        background: #1b345c; }

.project main .wrapper {
  padding: 0 1.5em; }

.default h2, .default h3, .default h4 {
  font-size: 1em;
  line-height: 1.5em;
  font-style: italic;
  margin: 0; }

/* Media queries
-------------------------------------------------------------------------------*/
@media screen and (min-width: 28em) {
  body {
    font-size: 18px; }

  .home .work-list {
    line-height: 1em;
    margin-left: 0.35em;
    margin-right: -0.35em; }
    .home .work-list:after {
      display: none; }
    .home .work-list > li {
      display: inline-block;
      vertical-align: middle;
      width: calc(50% - 0.2em);
      margin-left: -0.35em;
      margin-right: 0.3em;
      margin-bottom: 0.2em;
      max-width: 400px;
      overflow: hidden; }
      .home .work-list > li:nth-child(2n), .home .work-list > li:nth-child(2n+7) {
        margin-right: 0;
        margin-left: -0.35em; }
      .home .work-list > li:nth-child(2n+6) {
        margin-right: 0.3em; }
      .home .work-list > li figure {
        margin-bottom: 0; }

  .default .main-content ul {
    max-width: 28em;
    columns: 180px 2; } }
@media screen and (min-width: 51em) {
  body {
    background: url(../bg.jpg) center top fixed; }

  h1 {
    max-width: 300px; }

  header {
    text-align: right;
    background: rgba(255, 255, 255, 0.5); }
    header #menu {
      display: none; }
    header > .wrapper {
      padding: 0 1.5em; }
    header nav {
      width: auto;
      margin-left: 13.5%;
      display: block !important;
      background: none; }
      header nav ul {
        display: block; }
        header nav ul li {
          display: inline-block;
          width: 25%;
          margin-left: -0.35em;
          position: relative;
          text-align: left; }
          header nav ul li ul {
            display: none !important; }
          header nav ul li:hover ul {
            display: block !important;
            position: absolute;
            left: -0.5em;
            width: 100%; }
            header nav ul li:hover ul li {
              margin: 0;
              display: block; }
              header nav ul li:hover ul li a {
                padding: 0.5em 0.75em;
                font-size: 0.85em;
                opacity: 1;
                width: 9.5em;
                background: rgba(255, 255, 255, 0.4);
                background: rgba(134, 151, 176, 0.925); }
                header nav ul li:hover ul li a:hover {
                  background: rgba(255, 255, 255, 0.35);
                  background: rgba(119, 138, 166, 0.925); }
          header nav ul li:hover > a {
            opacity: 0.6; }
          header nav ul li a {
            padding: 0.5em 1.5em 0.33em 0;
            text-align: left;
            border: 0; }
          header nav ul li:first-child {
            width: 19%; }
          header nav ul li:last-child a {
            margin-right: -1em; }

  main > .wrapper {
    margin-top: 5.5em; }

  .home .work-list {
    margin-top: 2.5em;
    margin-right: 0;
    margin-left: 13.5%;
    line-height: 1em; }
    .home .work-list:after {
      display: none; }
    .home .work-list > li {
      display: inline-block;
      vertical-align: middle;
      width: calc(25% - 0.2em);
      margin-left: -0.35em;
      margin-right: 0.3em;
      margin-bottom: 0.2em;
      max-width: 400px;
      overflow: hidden; }
      .home .work-list > li:nth-child(7) {
        display: inline-block; }
      .home .work-list > li:nth-child(2n), .home .work-list > li:nth-child(2n+7) {
        margin-right: 0.3em; }
      .home .work-list > li:nth-child(4n) {
        margin-right: 0; }
      .home .work-list > li:nth-child(4n-3) {
        margin-left: 0; }

  #project {
    margin-left: 13.5%;
    margin-top: 2.5em; }

  .default {
    background-image: url(../bg_experience.jpg); }
    .default main > .wrapper {
      text-align: justify; }
      .default main > .wrapper:after {
        content: '';
        display: inline-block;
        width: 100%; }
      .default main > .wrapper > * {
        display: inline-block;
        vertical-align: top; }
      .default main > .wrapper div {
        text-align: left; }
    .default .main-content {
      width: 59%; } }
@media screen and (min-width: 1675px) {
  body:not(.default) {
    background-size: cover;
    background-position: center 10%; }

  .wrapper {
    max-width: 1800px;
    width: 69%; } }
@media screen and (min-width: 1900px) {
  .default {
    background-size: cover;
    background-position: center 10%; }

  .default .wrapper {
    max-width: 1800px;
    width: 69%; } }
/* Print styles
-------------------------------------------------------------------------------*/