*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-backface-visibility: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased; }

body {
  background-color: #111;
  color: #999;
  font-family: "Nunito", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; }
  @media only screen and (min-width: 320px) {
    body {
      -webkit-overflow-scrolling: touch; } }
  @media only screen and (min-width: 1080px) {
    body {
      -webkit-overflow-scrolling: auto; } }

h1, h2, h3, h4, h5, h6 {
  color: #eee;
  font-weight: 400;
  font-family: "Nunito Bold", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; }

a, a:link, a:visited {
  -webkit-transition: color 200ms ease-in-out;
  -moz-transition: color 200ms ease-in-out;
  transition: color 200ms ease-in-out;
  color: #6dc6ff;
  text-decoration: none; }

a:hover, a:focus {
  color: white; }

.header {
  position: fixed;
  z-index: 5;
  width: 100%;
  height: 80px; }
  .header::after {
    clear: both;
    content: "";
    display: table; }
  .header div {
    display: inline-block;
    vertical-align: baseline;
    zoom: 1;
    *display: inline;
    *vertical-align: auto; }
  .header .menu {
    display: inline-block;
    vertical-align: baseline;
    zoom: 1;
    *display: inline;
    *vertical-align: auto;
    filter: alpha(opacity=30);
    -khtml-opacity: 0.3;
    -webkit-opacity: 0.3;
    -moz-opacity: 0.3;
    opacity: 0.3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    -webkit-transition: opacity 200ms ease-in-out;
    -moz-transition: opacity 200ms ease-in-out;
    transition: opacity 200ms ease-in-out;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
    display: block;
    background-image: url("../img/menu.png");
    background-size: 30px 30px;
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -15px;
    width: 30px;
    height: 30px; }
    .header .menu:hover {
      filter: alpha(opacity=100);
      -khtml-opacity: 1;
      -webkit-opacity: 1;
      -moz-opacity: 1;
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      cursor: pointer; }
  .header .hidemenu {
    display: none;
    z-index: 10;
    background-color: #6dc6ff;
    background-image: url("../img/menu-close.png");
    opacity: 1; }
  .header .block-title {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    padding: 10px 20px;
    height: 80px;
    background-color: #6dc6ff; }
    .header .block-title:before {
      display: inline-block;
      vertical-align: baseline;
      zoom: 1;
      *display: inline;
      *vertical-align: auto;
      margin-right: -0.25em;
      height: 100%;
      content: '';
      vertical-align: middle; }
    .header .block-title .title-wrapper {
      display: inline-block;
      vertical-align: baseline;
      zoom: 1;
      *display: inline;
      *vertical-align: auto;
      vertical-align: middle; }
      .header .block-title .title-wrapper p {
        margin: 0;
        padding: 0; }
      .header .block-title .title-wrapper .title {
        float: left;
        color: #222; }
        @media only screen and (min-width: 320px) {
          .header .block-title .title-wrapper .title {
            font-size: 0.83125em; } }
        @media only screen and (min-width: 768px) {
          .header .block-title .title-wrapper .title {
            font-size: 1em; } }
      .header .block-title .title-wrapper .subtitle {
        float: left;
        clear: left;
        color: #444; }
        @media only screen and (min-width: 320px) {
          .header .block-title .title-wrapper .subtitle {
            font-size: 0.75em; } }
        @media only screen and (min-width: 768px) {
          .header .block-title .title-wrapper .subtitle {
            font-size: 0.83125em; } }
  .header .block-navigation {
    display: block;
    background-color: #292929;
    text-align: right; }
    @media only screen and (min-width: 320px) {
      .header .block-navigation {
        margin-top: 80px; } }
    @media only screen and (min-width: 768px) {
      .header .block-navigation {
        margin-top: auto; } }
    .header .block-navigation ul {
      margin: 0;
      padding: 0;
      line-height: 80px; }
    .header .block-navigation li {
      list-style-type: none; }
      @media only screen and (min-width: 320px) {
        .header .block-navigation li {
          height: 50px;
          font-size: 0.83125em;
          line-height: 50px; }
          .header .block-navigation li a {
            position: relative;
            -webkit-transition: all 200ms ease-in-out;
            -moz-transition: all 200ms ease-in-out;
            transition: all 200ms ease-in-out;
            display: block;
            padding-right: 20px; }
            .header .block-navigation li a:hover {
              background-color: #585858;
              box-shadow: inset -10px 0 0 0 white; }
            .header .block-navigation li a.selected:before {
              content: '';
              position: absolute;
              box-shadow: inset 10px 0 0 0 #6dc6ff;
              left: 0;
              bottom: 0;
              width: 10px;
              height: 100%; } }
      @media only screen and (min-width: 768px) {
        .header .block-navigation li {
          display: inline-block;
          vertical-align: baseline;
          zoom: 1;
          *display: inline;
          *vertical-align: auto;
          margin-right: 10px;
          height: 80px;
          line-height: 80px; }
          .header .block-navigation li a {
            padding-right: 0; }
            .header .block-navigation li a:hover {
              background-color: transparent;
              box-shadow: inset 0 -10px 0 0 white; }
            .header .block-navigation li a.selected:before {
              box-shadow: inset 0 10px 0 0 #6dc6ff;
              bottom: auto;
              top: 0;
              width: 100%;
              height: 10px; }
          .header .block-navigation li:last-child {
            margin-right: 20px; } }
      @media only screen and (min-width: 1080px) {
        .header .block-navigation li {
          margin-right: 40px;
          font-size: 1em; } }

.content-title {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  padding: 20px;
  background-color: #6dc6ff; }
  .content-title p {
    margin: 0;
    padding: 0;
    text-align: left; }
  .content-title .work-title {
    color: #222; }
  .content-title .work-subtitle {
    color: #444;
    font-size: 0.83125em; }

.no-js #menu:target .hidemenu, .js.no-csstransitions #menu:target .hidemenu, .js.no-csstransforms #menu:target .hidemenu {
  display: block;
  z-index: 10;
  opacity: 1; }
@media only screen and (min-width: 320px) {
  .no-js #menu:not(:target), .js.no-csstransitions #menu:not(:target), .js.no-csstransforms #menu:not(:target) {
    display: none; } }
@media only screen and (min-width: 768px) {
  .no-js #menu:not(:target), .js.no-csstransitions #menu:not(:target), .js.no-csstransforms #menu:not(:target) {
    display: block; } }
.no-js #menu:not(:target) .hidemenu, .js.no-csstransitions #menu:not(:target) .hidemenu, .js.no-csstransforms #menu:not(:target) .hidemenu {
  display: none; }
@media only screen and (min-width: 320px) {
  .no-js .showmenu, .js.no-csstransitions .showmenu, .js.no-csstransforms .showmenu {
    display: block; } }
@media only screen and (min-width: 768px) {
  .no-js .showmenu, .js.no-csstransitions .showmenu, .js.no-csstransforms .showmenu {
    display: none; } }

.js.csstransitions.csstransforms .block-navigation {
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
  -webkit-transition: all 600ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 600ms cubic-bezier(1, 0, 0, 1);
  transition: all 600ms cubic-bezier(1, 0, 0, 1); }
  @media only screen and (min-width: 320px) {
    .js.csstransitions.csstransforms .block-navigation.hidden {
      -webkit-transform: translateY(-250px);
      -moz-transform: translateY(-250px);
      -ms-transform: translateY(-250px);
      -o-transform: translateY(-250px);
      transform: translateY(-250px);
      visibility: hidden; } }
  @media only screen and (min-width: 768px) {
    .js.csstransitions.csstransforms .block-navigation.hidden {
      -webkit-transform: translateY(-80px);
      -moz-transform: translateY(-80px);
      -ms-transform: translateY(-80px);
      -o-transform: translateY(-80px);
      transform: translateY(-80px); } }

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: normal;
  src: url("font/nunito-l.eot?#iefix") format("embedded-opentype"), url("font/nunito-l.woff2") format("woff2"), url("font/nunito-l.woff") format("woff"), url("font/nunito-l.ttf") format("truetype"), url("font/nunito-l.svg#Nunito") format("svg"); }
@font-face {
  font-family: "Nunito Bold";
  font-style: normal;
  font-weight: normal;
  src: url("font/nunito-r.eot?#iefix") format("embedded-opentype"), url("font/nunito-r.woff2") format("woff2"), url("font/nunito-r.woff") format("woff"), url("font/nunito-r.ttf") format("truetype"), url("font/nunito-r.svg#Nunito Bold") format("svg"); }