@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,500);
@import url(http://fonts.googleapis.com/css?family=Volkhov:700);
body {
  background: #f1f1f1;
  color: #2f3034;
  font-family: 'Ubuntu', sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5em;
  margin: 0;
  padding: 0; }

a {
  color: #223a6e;
  text-decoration: none; }
  a:hover {
    color: #2f3034;
    text-decoration: underline; }

ul {
  margin: 0;
  padding: 0; }
  ul li {
    list-style: none;
    margin-bottom: .7em; }

h1 {
  color: #2f3034;
  font-family: 'Volkhov', serif;
  font-size: 24px;
  font-weight: 500; }

h2 {
  color: #2f3034;
  font-size: 20px;
  font-weight: 300;
  line-height: 25px;
  margin: 0 0 10px;
  padding-top: 30px; }
  @media only screen and (max-width: 960px) {
    h2 {
      padding-top: 5px; } }

header,
main,
footer {
  display: block;
  margin: 0 auto;
  position: relative; }

header {
  background: #fff;
  height: 170px;
  margin-top: 40px;
  padding: 45px;
  width: 870px; }
  @media only screen and (max-width: 960px) {
    header {
      padding: 10px 15px; }
      header > img {
        width: 200px; } }
  header > h1 {
    font-size: 30px; }
    @media only screen and (max-width: 960px) {
      header > h1 {
        font-size: 23px; } }
    header > h1 a {
      color: #2f3034; }
  header > img {
    border-radius: 0 0 0 75px;
    float: right; }

main {
  background: #fff;
  padding: 10px 45px 45px;
  width: 870px; }

footer {
  font-size: .9em;
  margin-bottom: 40px;
  padding: 5px 0 0;
  width: 960px; }
  footer ul {
    float: right;
    list-style: none;
    margin: 0;
    padding: 0; }
    footer ul li {
      display: inline;
      padding-left: 10px; }

@media only screen and (max-width: 960px) {
  header,
  main,
  footer {
    padding: 15px;
    width: auto; }

  header {
    border-top: 0;
    margin-top: 0; }

  footer {
    margin-bottom: 0; } }
section {
  border-bottom: 1px solid #e3e3e3;
  padding: 20px 0 30px 250px; }
  section:last-child {
    border: 0;
    padding-bottom: 0; }
  section > h1 {
    float: left;
    margin-left: -250px;
    margin-top: 0;
    padding-top: 32px; }
  @media only screen and (max-width: 960px) {
    section {
      padding-left: 0; }
      section > h1 {
        float: none;
        margin-left: 0; } }

.period {
  background: #f1f1f1;
  clear: right;
  float: right;
  margin: 30px 0 10px 10px;
  padding: 3px 10px; }
  .period.current {
    background: #223a6e;
    border-radius: 0 0 0 10px;
    color: #fff; }
  @media only screen and (max-width: 960px) {
    .period {
      float: none;
      margin: 30px 0 0;
      text-align: center; } }

ul.contact li {
  margin-bottom: 0; }
  ul.contact li.github, ul.contact li.xing {
    display: inline-block;
    margin-left: 5px; }
    ul.contact li.github a, ul.contact li.xing a {
      background: url("../images/social.png");
      background-image: url("../images/social.svg");
      display: block;
      height: 20px;
      overflow: hidden;
      text-indent: 100000px;
      width: 20px; }
  ul.contact li.github a {
    background-position: 0px 0;
    transition: background-position .5s; }
    ul.contact li.github a:hover {
      background-position: 0px -20px;
      transition: background-position .2s; }
  ul.contact li.xing a {
    background-position: -20px 0;
    transition: background-position .5s; }
    ul.contact li.xing a:hover {
      background-position: -20px -20px;
      transition: background-position .2s; }
@media only screen and (max-width: 960px) {
  ul.contact {
    bottom: auto;
    position: relative;
    right: auto;
    text-align: left; }
    ul.contact li {
      margin: 0 5px 0 0 !important; } }

ul.cloud {
  padding-top: 19px; }
  @media only screen and (max-width: 960px) {
    ul.cloud {
      text-align: center; } }
  ul.cloud li {
    background: #f1f1f1;
    display: inline;
    line-height: 2.3em;
    margin: 0 6px;
    padding: 5px 15px; }
    @media only screen and (max-width: 960px) {
      ul.cloud li {
        margin: 0 3px;
        padding: 3px 5px; } }
    ul.cloud li.expert {
      background: #223a6e;
      color: #fff;
      font-size: 20px; }
    ul.cloud li.advanced {
      font-size: 15px; }
    ul.cloud li.basic {
      font-size: 10px; }