@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Lobster|Ubuntu|Fira+Sans:500");
@font-face {
  font-family: "FontAwesome";
  src: url("/fonts/FontAwesome.otf") format("otf"), url("/fonts/fontawesome-webfont.ttf") format("ttf"), url("/fonts/fontawesome-webfont.woff") format("woff"), url("/fonts/fontawesome-webfont.woff2") format("woff2"); }

html, body {
  width: 100%;
  height: 100%;
  margin: 0; }

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

a {
  color: inherit;
  text-decoration: inherit; }

body {
  background: repeating-linear-gradient(135deg, transparent, transparent 1.5px, #6F9CCD 2px, #6F9CCD 20px), #AABBCD;
  background-attachment: fixed; }

.wrapper.main {
  position: relative;
  max-width: 800px;
  min-height: 100%;
  margin: auto;
  padding: 150px 0 200px 0; }

@media screen and (max-width: 650px) {
  .wrapper.main {
    padding: 75px 0 200px 0; } }

.nav.main {
  font-family: FontAwesome, sans-serif;
  color: white;
  margin: 0;
  padding: 0 120px;
  text-align: justify; }
  .nav.main:after {
    content: '';
    display: inline-block;
    width: 100%; }
  .nav.main:before {
    content: '';
    display: block;
    margin-top: -1.25em; }
  .nav.main .icon {
    position: relative;
    display: inline-block;
    width: 92px;
    height: 92px;
    background-color: #6F9CCD;
    text-align: center;
    line-height: 92px; }
    .nav.main .icon.home {
      font-size: 64px; }
    .nav.main .icon.project {
      font-size: 56px; }
    .nav.main .icon.article {
      font-size: 52px; }
    .nav.main .icon.contact {
      font-size: 56px; }
    .nav.main .icon:after {
      content: '';
      position: absolute;
      display: inline-block;
      width: 75px;
      height: 0;
      left: 8px;
      top: 150px;
      -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
              clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      background-color: white;
      -webkit-transition: height 0.2s, top 0.2s;
      transition: height 0.2s, top 0.2s; }
    .nav.main .icon:hover:after {
      height: 50px;
      top: 100px; }
    .nav.main .icon.selected:after {
      height: 50px;
      top: 100px; }

@media screen and (max-width: 650px) {
  .nav.main {
    padding: 0 50px; }
    .nav.main .icon {
      width: 64px;
      height: 64px;
      line-height: 64px; }
      .nav.main .icon.home {
        font-size: 48px; }
      .nav.main .icon.project {
        font-size: 44px; }
      .nav.main .icon.article {
        font-size: 40px; }
      .nav.main .icon.contact {
        font-size: 44px; }
      .nav.main .icon:after {
        width: 50px;
        height: 0;
        left: 6px;
        top: 120px; }
      .nav.main .icon:hover:after {
        height: 30px;
        top: 85px; }
      .nav.main .icon.selected:after {
        height: 30px;
        top: 85px; } }

@media screen and (max-width: 400px) {
  .nav.main {
    padding: 0 50px; }
    .nav.main .icon {
      width: 48px;
      height: 48px;
      line-height: 48px; }
      .nav.main .icon.home {
        font-size: 32px; }
      .nav.main .icon.project {
        font-size: 28px; }
      .nav.main .icon.article {
        font-size: 24px; }
      .nav.main .icon.contact {
        font-size: 28px; }
      .nav.main .icon:after {
        width: 40px;
        height: 0;
        left: 4px;
        top: 100px; }
      .nav.main .icon:hover:after {
        height: 30px;
        top: 70px; }
      .nav.main .icon.selected:after {
        height: 30px;
        top: 70px; } }

.content.main {
  width: 100%;
  min-height: 300px;
  margin: 30px 0;
  background-color: white;
  -webkit-box-shadow: 0 2px 2px grey;
          box-shadow: 0 2px 2px grey;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  font-family: Ubuntu, sans-serif; }
  .content.main .padding {
    padding: 50px; }
  .content.main h1 {
    margin: 0;
    font-size: 42px; }
  .content.main a {
    color: royalblue; }
    .content.main a:hover {
      text-decoration: underline; }
  .content.main .subtitle {
    font-size: 24px; }
  .content.main blockquote {
    position: relative;
    width: auto;
    margin: 50px 20px;
    color: #666666;
    font-family: Fira Sans, sans-serif;
    font-size: 20px;
    font-weight: 500; }
    .content.main blockquote.before-image {
      margin-right: 250px; }
    .content.main blockquote .tabulation {
      display: inline-block;
      width: 30px; }
    .content.main blockquote p {
      margin: 0; }
      .content.main blockquote p:before {
        content: '';
        display: inline-block;
        width: 30px; }
    .content.main blockquote:before {
      content: '';
      position: absolute;
      display: block;
      width: 32px;
      height: 32px;
      top: -20px;
      left: -20px;
      font-family: FontAwesome, sans-serif;
      font-size: 32px;
      color: #333333; }
    .content.main blockquote:after {
      content: '';
      position: absolute;
      display: block;
      width: 100%;
      height: 32px;
      font-family: FontAwesome, sans-serif;
      font-size: 32px;
      color: #333333;
      text-align: right; }
  .content.main img.right {
    float: right;
    width: 200px;
    margin-left: 50px;
    border-radius: 5px; }
  .content.main .cv {
    position: relative;
    height: 32px;
    line-height: 32px;
    font-size: 24px; }
    .content.main .cv button {
      position: absolute;
      width: 64px;
      height: 28px;
      top: 2px;
      margin-left: 10px;
      font-family: Fira Sans, sans-serif;
      font-size: 18px;
      background: linear-gradient(#6F9CCD, #6F9CCD 12px, #AABBCD 12px, #AABBCD 12px);
      color: snow; }
  .content.main .article-date {
    font-size: 16px;
    color: grey;
    text-align: right; }

@media screen and (max-width: 650px) {
  .content.main .padding {
    padding: 30px; }
  .content.main img.right {
    width: 100px;
    margin-left: 30px; }
  .content.main blockquote.before-image {
    margin-right: 0; } }

@media screen and (max-width: 470px) {
  .content.main .subtitle {
    font-size: 18px; } }

@media screen and (max-width: 430px) {
  .content.main h1 {
    font-size: 24px; } }

.footer.main {
  position: absolute;
  width: 100%;
  height: 78px;
  bottom: 50px;
  line-height: 78px;
  text-align: center;
  background-color: #6F9CCD;
  font-family: Lobster, sans-serif;
  font-size: 32px;
  color: white; }

@media screen and (max-width: 650px) {
  .footer.main {
    height: 120px;
    line-height: 60px;
    padding: 0 20px; } }