* {
  margin: 0;
  padding: 0; }

html {
  background-color: #fff; }

html, body {
  font-size: 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, "Tahoma", Sans-Serif;
  line-height: 1.45;
  font-weight: 400;
  color: #333;
  text-align: left; }

header {
  height: 445px;
  width: 100%;
  background-color: #fff;
  text-align: center;
  padding-top: 155px; }
  @media (max-width: 649px) {
    header {
      height: 250px; }
      header img {
        max-width: 400px;
        width: 80%; } }

#colored-line {
  z-index: -1;
  height: 50%;
  background-color: #333; }

#colored-line-default {
  z-index: -2;
  height: 100%;
  background-color: #eee; }

#colored-line, #colored-line-default {
  width: 57px;
  position: fixed;
  overflow: hidden;
  margin-left: 30%; }
  @media (max-width: 1199px) {
    #colored-line, #colored-line-default {
      margin-left: 200px; } }
  @media (max-width: 989px) {
    #colored-line, #colored-line-default {
      margin-left: 20px; } }
  @media (max-width: 649px) {
    #colored-line, #colored-line-default {
      display: none; } }

#timeline {
  z-index: 1;
  margin-left: 30%;
  min-height: 2000px; }
  @media (max-width: 1199px) {
    #timeline {
      margin-left: 200px; } }
  @media (max-width: 989px) {
    #timeline {
      margin-left: 20px; } }
  @media (max-width: 649px) {
    #timeline {
      margin-left: 0; } }
  #timeline div.spacer {
    min-height: 100px;
    background: url("../img/timeline-line-mask.svg") left repeat-y; }
    #timeline div.spacer.time {
      position: relative;
      min-height: 200px; }
      #timeline div.spacer.time p {
        position: absolute;
        left: -250px;
        top: 80px;
        font-family: "Helvetica Neue", Helvetica, Arial, "Tahoma", Sans-Serif;
        font-size: 3em;
        font-weight: 100;
        color: #777777; }
        @media (max-width: 1199px) {
          #timeline div.spacer.time p {
            left: -140px; } }
        @media (max-width: 989px) {
          #timeline div.spacer.time p {
            font-size: 2.5em;
            left: 100px; } }
        @media (max-width: 649px) {
          #timeline div.spacer.time p {
            position: relative;
            text-align: center;
            left: 0; } }
  #timeline article {
    min-height: 200px;
    position: relative; }
    #timeline article div.overlay {
      position: absolute;
      z-index: 3;
      top: 0;
      left: 60px;
      right: 0;
      height: 100%;
      overflow: hidden;
      background-color: rgba(255, 255, 255, 0.8);
      padding-left: 0;
      -moz-transition: all 0.8s ease-in-out;
      -webkit-transition: all 0.8s ease-in-out;
      -o-transition: all 0.8s ease-in-out;
      transition: all 0.8s ease-in-out; }
      @media (max-width: 649px) {
        #timeline article div.overlay {
          width: 0;
          height: 0;
          left: 0px;
          background: none; } }
    #timeline article.active .overlay {
      background-color: transparent;
      height: 0; }
    #timeline article h2 {
      line-height: 58px;
      color: #333;
      font-family: "Helvetica Neue", Helvetica, Arial, "Tahoma", Sans-Serif;
      font-size: 2.4em;
      font-weight: normal; }
      @media (max-width: 1199px) {
        #timeline article h2 {
          font-size: 1.8em; } }
      @media (max-width: 649px) {
        #timeline article h2 {
          line-height: 1.45em; } }
      #timeline article h2 a {
        padding-right: 30px;
        background: url("../img/link.png") center right no-repeat; }
      #timeline article h2, #timeline article h2 a, #timeline article h2 a:visited, #timeline article h2 a:active {
        color: #333;
        text-decoration: none; }
      #timeline article h2 a:hover, #timeline article h2 a:focus {
        color: #000; }
    #timeline article h2, #timeline article div {
      padding-left: 150px; }
      @media (max-width: 1199px) {
        #timeline article h2, #timeline article div {
          padding-left: 100px; } }
      @media (max-width: 649px) {
        #timeline article h2, #timeline article div {
          padding: 0 10px;
          margin-left: 0; } }
    #timeline article.renew h2 {
      background: url("../img/timeline-renew-mask.svg") top left no-repeat; }
    #timeline article.create h2 {
      background: url("../img/timeline-atom-mask.svg") top left no-repeat; }
    #timeline article div:not(.overlay) {
      background: url("../img/timeline-line-mask.svg") left repeat-y; }
      #timeline article div:not(.overlay) .preview {
        display: block;
        width: 472px;
        background: url("../img/window.svg") top left no-repeat;
        margin-top: 40px;
        padding-top: 18px; }
        @media (max-width: 649px) {
          #timeline article div:not(.overlay) .preview {
            margin: 40px auto 0 auto;
            overflow: hidden; }
            #timeline article div:not(.overlay) .preview, #timeline article div:not(.overlay) .preview img {
              max-width: 472px;
              width: 100%; } }
      #timeline article div:not(.overlay) ul {
        list-style: none;
        padding-top: 10px; }
        #timeline article div:not(.overlay) ul li {
          font-family: "Helvetica Neue", Helvetica, Arial, "Tahoma", Sans-Serif;
          font-size: 1em;
          color: #777;
          line-height: 1.8em;
          padding-left: 30px; }
          @media (max-width: 649px) {
            #timeline article div:not(.overlay) ul li {
              font-size: 0.8em; } }
          #timeline article div:not(.overlay) ul li.technologies {
            background: url("../img/icon-technologies.png") center left no-repeat; }
          #timeline article div:not(.overlay) ul li.tools {
            background: url("../img/icon-tools.png") center left no-repeat; }

#lang-switcher {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #999;
  text-decoration: none; }
  #lang-switcher span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #999 url("../img/world.svg") center left no-repeat;
    background-size: 20px 20px;
    margin-right: 10px;
    margin-bottom: -4px; }
  #lang-switcher:hover {
    color: #333; }
    #lang-switcher:hover span {
      background-color: #333; }

main {
  border-bottom: 1px #eee solid; }

footer {
  position: relative;
  min-height: 500px;
  background: #f1f1f1 url("../img/joey.png") bottom left no-repeat;
  text-align: center;
  padding: 100px 20px 0 300px; }
  @media (max-width: 649px) {
    footer {
      background-size: 140px 256px;
      padding-left: 20px;
      padding-top: 50px; } }
  @media (max-width: 530px) {
    footer {
      min-height: 780px; } }
  footer a {
    color: #333;
    text-decoration: none; }
  footer p.lang {
    position: absolute;
    bottom: 50px;
    left: 250px; }
    footer p.lang svg {
      margin-bottom: -4px; }
    @media (max-width: 649px) {
      footer p.lang {
        left: 150px; } }
    footer p.lang a {
      margin-left: 10px; }
  footer p.bio {
    font-size: 2em; }
    @media (max-width: 1199px) {
      footer p.bio {
        font-size: 1.5em; } }
    footer p.bio span.intro {
      display: block; }
    footer p.bio span.small {
      font-size: 0.5em; }
  footer ul {
    list-style: none;
    margin-top: 60px;
    font-size: 1.5em; }
    footer ul li.cv {
      margin: 20px 0; }
    footer ul a {
      text-decoration: underline; }

html #logo-animated {
  position: relative;
  width: 172px;
  height: 84px;
  margin: 0 auto; }
html:not(.js) .fadeIn {
  opacity: 1; }
html:not(.js) #logo-animated {
  background: url("../img/logo-devplopr.png") top left no-repeat; }
html.js .fadeIn {
  opacity: 0;
  -moz-transition: opacity 0.8s ease-in-out;
  -webkit-transition: opacity 0.8s ease-in-out;
  -o-transition: opacity 0.8s ease-in-out;
  transition: opacity 0.8s ease-in-out; }
  html.js .fadeIn.animated {
    opacity: 1; }
html.js #logo-animated #logo-bracket-left, html.js #logo-animated #logo-bracket-right, html.js #logo-animated #logo-droplet {
  position: absolute;
  opacity: 0; }
  html.js #logo-animated #logo-bracket-left.animated, html.js #logo-animated #logo-bracket-right.animated, html.js #logo-animated #logo-droplet.animated {
    opacity: 1; }
html.js #logo-animated #logo-bracket-left, html.js #logo-animated #logo-bracket-right {
  width: 42px;
  height: 70px;
  -moz-transition: all 0.8s ease-in-out;
  -webkit-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out; }
html.js #logo-animated #logo-bracket-left {
  left: -80px;
  bottom: 0;
  background: url("../img/logo-bracket-left.png") top left no-repeat; }
  html.js #logo-animated #logo-bracket-left.animated {
    left: 0; }
html.js #logo-animated #logo-bracket-right {
  right: -80px;
  bottom: 0;
  background: url("../img/logo-bracket-right.png") top left no-repeat; }
  html.js #logo-animated #logo-bracket-right.animated {
    right: 0; }
html.js #logo-animated #logo-droplet {
  width: 59px;
  height: 84px;
  top: -80px;
  left: 56px;
  background: url("../img/logo-droplet.png") top left no-repeat;
  -moz-transition: all 1.2s ease-in-out;
  -webkit-transition: all 1.2s ease-in-out;
  -o-transition: all 1.2s ease-in-out;
  transition: all 1.2s ease-in-out; }
  html.js #logo-animated #logo-droplet.animated {
    top: 0; }
html[lang="1337"] {
  background-color: #333; }
  html[lang="1337"] #colored-line {
    background-color: #33FF33; }
  html[lang="1337"] #colored-line-default {
    background-color: #324934; }
  html[lang="1337"] header {
    background-color: #333; }
  html[lang="1337"].js #logo-animated #logo-bracket-left {
    background: url("../img/logo-bracket-left-1337.png") top left no-repeat; }
  html[lang="1337"].js #logo-animated #logo-bracket-right {
    background: url("../img/logo-bracket-right-1337.png") top left no-repeat; }
  html[lang="1337"].js #logo-animated #logo-droplet {
    background: url("../img/logo-droplet-1337.png") top left no-repeat; }
  html[lang="1337"]:not(.js) #logo-animated {
    background: url("../img/logo-devplopr-1337.png") top left no-repeat; }
  html[lang="1337"] #timeline div.spacer.time p {
    color: #33FF33; }
  html[lang="1337"] #timeline div {
    background: url("../img/timeline-line-mask-1337.svg") left repeat-y; }
  html[lang="1337"] #timeline article.renew h2 {
    background: url("../img/timeline-renew-mask-1337.svg") left repeat-y; }
  html[lang="1337"] #timeline article.create h2 {
    background: url("../img/timeline-atom-mask-1337.svg") left repeat-y; }
  html[lang="1337"] #timeline article a {
    background: url("../img/link-1337.png") center right no-repeat; }
  html[lang="1337"] #timeline article h2, html[lang="1337"] #timeline article h2 a {
    color: #33FF33; }
    html[lang="1337"] #timeline article h2:hover, html[lang="1337"] #timeline article h2 a:hover {
      color: #25CE44; }
  html[lang="1337"] #timeline article div:not(.overlay) li {
    color: #25CE44; }
    html[lang="1337"] #timeline article div:not(.overlay) li.technologies {
      background: url("../img/icon-technologies-1337.png") center left no-repeat; }
    html[lang="1337"] #timeline article div:not(.overlay) li.tools {
      background: url("../img/icon-tools-1337.png") center left no-repeat; }
  html[lang="1337"] #timeline article div.overlay {
    background: none;
    height: 0;
    width: 0; }
  html[lang="1337"] main {
    border-bottom: 1px #25CE44 solid; }
  html[lang="1337"] footer {
    background: #333 url("../img/joey-1337.png") bottom left no-repeat;
    color: #33FF33; }
    @media (max-width: 649px) {
      html[lang="1337"] footer {
        background-size: 140px 256px; } }
    html[lang="1337"] footer a {
      color: #33FF33; }
      html[lang="1337"] footer a:hover {
        color: #25CE44; }
  html[lang="1337"] #lang-switcher {
    color: #33FF33; }
    html[lang="1337"] #lang-switcher span {
      background: #33FF33 url("../img/world-1337.svg") center left no-repeat;
      background-size: 20px 20px; }
    html[lang="1337"] #lang-switcher:hover {
      color: #25CE44; }
      html[lang="1337"] #lang-switcher:hover span {
        background-color: #25CE44; }