/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
@import url("../fonts/fonts.css");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

.group:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0; }

:focus {
  outline: 1px solid #489aff;
  outline-offset: 2px; }

.apple-logo {
  display: inline-block;
  width: 1em;
  height: 1em;
  position: relative;
  top: 2px;
  background-image: url("../images/apple-logo.svg"); }

h1, h2, h3, h4 {
  font-family: "Nunito", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  margin: 1em 0;
  font-weight: 500;
  color: #1c1c1c; }

h2 {
  margin-top: 1.2em;
  border-bottom: 1px solid #efefef;
  padding-bottom: 4px; }
  h2:before {
    display: inline-block;
    color: #efefef;
    content: "\00b6";
    text-align: right;
    width: 20px;
    padding-right: 8px;
    margin-left: -28px; }

h1 {
  font-size: 2.0em;
  font-weight: 300; }

h2 {
  font-size: 1.4em; }

h3 {
  font-size: 1.2em; }

h4 {
  font-size: 1.0em; }

sup {
  vertical-align: super;
  font-size: 0.7em; }

sub {
  vertical-align: sub;
  font-size: 0.7em; }

p {
  margin: 1em 0;
  line-height: 1.2em; }

p img {
  max-width: 100%; }

figure img {
  max-width: 100%; }

p.lead {
  font-weight: 300;
  font-size: 1.2em; }
  p.lead b, p.lead strong {
    font-weight: 500; }

ul, ol {
  margin: 1em 0;
  margin-left: 2em; }

ul {
  list-style-type: disc; }

ol {
  list-style-type: decimal; }

li {
  line-height: 1.6em; }

a {
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
  a, a:visited {
    color: #000000;
    text-decoration: underline; }
  a:hover, a:active {
    color: #489aff; }

b, strong {
  font-weight: 700; }

i, em {
  font-style: italic; }

small {
  font-size: 0.9em; }

hr {
  margin: 1em 0;
  padding: 0;
  height: 0;
  border: none;
  border-top: 1px solid #efefef; }

table {
  margin: 1em 0;
  border-collapse: collapse; }
  table td, table th {
    border: 1px solid #efefef;
    padding: 0.6em 1em; }
  table thead {
    font-weight: 500;
    background-color: #efefef; }

pre {
  font-family: "Inconsolata", "Monaco", "Menlo", monospace;
  font-size: 0.9em;
  line-height: 1.5em; }

code {
  font-family: "Inconsolata", "Monaco", "Menlo", monospace;
  font-size: 0.9em;
  color: #3182bd;
  padding: 0.2em 0.3em;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.04); }

pre {
  font-size: 1em;
  padding: 1em;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.02); }
  pre code {
    background: none; }

code.hljs {
  padding: 0; }

code.hljs {
  padding: 0; }

.highlight .hll {
  background-color: #ffffcc; }

.highlight .c {
  color: #999988;
  font-style: italic; }

/* Comment */
.highlight .err {
  color: #a61717;
  background-color: #e3d2d2; }

/* Error */
.highlight .k {
  color: #000000;
  font-weight: bold; }

/* Keyword */
.highlight .o {
  color: #000000;
  font-weight: bold; }

/* Operator */
.highlight .cm {
  color: #999988;
  font-style: italic; }

/* Comment.Multiline */
.highlight .cp {
  color: #999999;
  font-weight: bold;
  font-style: italic; }

/* Comment.Preproc */
.highlight .c1 {
  color: #999988;
  font-style: italic; }

/* Comment.Single */
.highlight .cs {
  color: #999999;
  font-weight: bold;
  font-style: italic; }

/* Comment.Special */
.highlight .gd {
  color: #000000;
  background-color: #ffdddd; }

/* Generic.Deleted */
.highlight .ge {
  color: #000000;
  font-style: italic; }

/* Generic.Emph */
.highlight .gr {
  color: #aa0000; }

/* Generic.Error */
.highlight .gh {
  color: #999999; }

/* Generic.Heading */
.highlight .gi {
  color: #000000;
  background-color: #ddffdd; }

/* Generic.Inserted */
.highlight .go {
  color: #888888; }

/* Generic.Output */
.highlight .gp {
  color: #555555; }

/* Generic.Prompt */
.highlight .gs {
  font-weight: bold; }

/* Generic.Strong */
.highlight .gu {
  color: #aaaaaa; }

/* Generic.Subheading */
.highlight .gt {
  color: #aa0000; }

/* Generic.Traceback */
.highlight .kc {
  color: #000000;
  font-weight: bold; }

/* Keyword.Constant */
.highlight .kd {
  color: #000000;
  font-weight: bold; }

/* Keyword.Declaration */
.highlight .kn {
  color: #000000;
  font-weight: bold; }

/* Keyword.Namespace */
.highlight .kp {
  color: #000000;
  font-weight: bold; }

/* Keyword.Pseudo */
.highlight .kr {
  color: #000000;
  font-weight: bold; }

/* Keyword.Reserved */
.highlight .kt {
  color: #445588;
  font-weight: bold; }

/* Keyword.Type */
.highlight .m {
  color: #009999; }

/* Literal.Number */
.highlight .s {
  color: #d01040; }

/* Literal.String */
.highlight .na {
  color: #008080; }

/* Name.Attribute */
.highlight .nb {
  color: #0086B3; }

/* Name.Builtin */
.highlight .nc {
  color: #445588;
  font-weight: bold; }

/* Name.Class */
.highlight .no {
  color: #008080; }

/* Name.Constant */
.highlight .nd {
  color: #3c5d5d;
  font-weight: bold; }

/* Name.Decorator */
.highlight .ni {
  color: #800080; }

/* Name.Entity */
.highlight .ne {
  color: #990000;
  font-weight: bold; }

/* Name.Exception */
.highlight .nf {
  color: #990000;
  font-weight: bold; }

/* Name.Function */
.highlight .nl {
  color: #990000;
  font-weight: bold; }

/* Name.Label */
.highlight .nn {
  color: #555555; }

/* Name.Namespace */
.highlight .nt {
  color: #000080; }

/* Name.Tag */
.highlight .nv {
  color: #008080; }

/* Name.Variable */
.highlight .ow {
  color: #000000;
  font-weight: bold; }

/* Operator.Word */
.highlight .w {
  color: #bbbbbb; }

/* Text.Whitespace */
.highlight .mf {
  color: #009999; }

/* Literal.Number.Float */
.highlight .mh {
  color: #009999; }

/* Literal.Number.Hex */
.highlight .mi {
  color: #009999; }

/* Literal.Number.Integer */
.highlight .mo {
  color: #009999; }

/* Literal.Number.Oct */
.highlight .sb {
  color: #d01040; }

/* Literal.String.Backtick */
.highlight .sc {
  color: #d01040; }

/* Literal.String.Char */
.highlight .sd {
  color: #d01040; }

/* Literal.String.Doc */
.highlight .s2 {
  color: #d01040; }

/* Literal.String.Double */
.highlight .se {
  color: #d01040; }

/* Literal.String.Escape */
.highlight .sh {
  color: #d01040; }

/* Literal.String.Heredoc */
.highlight .si {
  color: #d01040; }

/* Literal.String.Interpol */
.highlight .sx {
  color: #d01040; }

/* Literal.String.Other */
.highlight .sr {
  color: #009926; }

/* Literal.String.Regex */
.highlight .s1 {
  color: #d01040; }

/* Literal.String.Single */
.highlight .ss {
  color: #990073; }

/* Literal.String.Symbol */
.highlight .bp {
  color: #999999; }

/* Name.Builtin.Pseudo */
.highlight .vc {
  color: #008080; }

/* Name.Variable.Class */
.highlight .vg {
  color: #008080; }

/* Name.Variable.Global */
.highlight .vi {
  color: #008080; }

/* Name.Variable.Instance */
.highlight .il {
  color: #009999; }

/* Literal.Number.Integer.Long */
.grid-row {
  display: flex;
  flex-direction: row; }
  .grid-row .grid-col-3 {
    flex-shrink: 0;
    width: 25%;
    margin-right: 1em; }
  .grid-row .grid-col-fill {
    flex: 1; }

@media (max-width: 600px) {
  .grid-row {
    flex-direction: column; }
    .grid-row .grid-col-3 {
      width: 100%; } }
.blog-figure-row {
  display: flex;
  flex-direction: row;
  margin-bottom: 2em; }
  .blog-figure-row figure {
    flex: 1; }
    .blog-figure-row figure:not(:last-child) {
      margin-right: 2em; }

@media (max-width: 600px) {
  .blog-figure-row {
    display: block; }
    .blog-figure-row figure,
    .blog-figure-row figure:not(:last-child) {
      margin: 0;
      margin-bottom: 1em; } }
.post-date {
  font-size: 14px;
  margin-top: -1em;
  margin-bottom: 2em; }

body {
  font-family: "PT Serif", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 16px;
  color: #4a4a4a;
  box-sizing: border-box;
  background: url("../images/crossword.png"); }

.navigation a.icon {
  display: none; }
  .navigation a.icon:hover:before, .navigation a.icon.active:before {
    display: none; }

@media screen and (max-width: 700px) {
  .navigation a {
    display: none; }

  .navigation a.icon {
    float: right;
    display: block; } }
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 700px) {
  .navigation.responsive {
    position: relative; }

  .navigation.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0; }

  .navigation.responsive a {
    float: none;
    display: block;
    text-align: left; } }
header {
  margin: 0px auto;
  max-width: 1000px;
  padding: 0px 20px; }
  header .navigation {
    position: relative;
    padding: 0;
    min-height: 48px; }
    header .navigation:before {
      content: " ";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: #efefef; }
  header label {
    font-size: 1.2em;
    margin-right: 1em;
    color: #4a4a4a;
    font-family: "Nunito", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    height: 48px;
    line-height: 48px; }
  header a {
    font-family: "Nunito", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    display: inline-block;
    font-size: 1.2em;
    line-height: 48px;
    height: 48px;
    text-decoration: none;
    font-weight: 500;
    padding: 0 1em;
    position: relative;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    header a, header a:visited {
      color: #7d7d7d; }
    header a:before {
      content: " ";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 0px;
      transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    header a.active {
      color: #1c1c1c; }
      header a.active:before {
        height: 2px;
        background: #989898; }
    header a:hover {
      color: #489aff; }
      header a:hover:before {
        height: 2px;
        background: #489aff; }

section {
  margin: 20px auto;
  padding: 0 20px;
  max-width: 1000px; }

section.with-sidebar {
  display: flex;
  flex-direction: column;
  flex-flow: initial;
  margin-top: 2em; }
  section.with-sidebar > aside {
    margin: 0;
    flex: 0 0 auto;
    padding-right: 1em; }
  section.with-sidebar > .content {
    padding-left: 1em;
    flex: 1 1 auto; }
    section.with-sidebar > .content h1 {
      margin-top: 0; }

footer {
  margin: 20px auto;
  padding: 0 20px;
  max-width: 1000px;
  font-size: 0.8em;
  color: #989898; }

.publication-item {
  margin-bottom: 1em; }
  .publication-item .publication-title {
    font-weight: 700;
    display: block;
    font-family: "Nunito", "Helvetica Neue", "Helvetica", "Arial", sans-serif; }
  .publication-item .publication-authors,
  .publication-item .publication-controls {
    display: block;
    font-size: 0.9em; }
  .publication-item .publication-note {
    color: #7d7d7d;
    display: block;
    font-size: 0.9em; }
    .publication-item .publication-note b,
    .publication-item .publication-note strong {
      color: #4a4a4a; }
  .publication-item .publication-where {
    color: #7d7d7d;
    font-style: italic;
    display: block;
    font-size: 0.9em; }
  .publication-item .publication-controls {
    font-size: 0.9em; }
    .publication-item .publication-controls > span:not(:first-child):before {
      content: " | ";
      color: #7d7d7d; }
    .publication-item .publication-controls > span:first-child:before {
      content: "[ ";
      color: #7d7d7d; }
    .publication-item .publication-controls > span:last-child:after {
      content: " ]";
      color: #7d7d7d; }

.project-item {
  display: flex;
  flex-direction: row;
  margin-bottom: 1em; }
  .project-item .project-item-image {
    flex-shrink: 0;
    width: 200px;
    margin-right: 1em;
    margin-top: 1em; }
    .project-item .project-item-image .project-image {
      width: 200px;
      height: 150px;
      background-size: cover;
      background-position: 0% 0%;
      background-repeat: no-repeat;
      transition: ease 750ms background-position;
      margin-bottom: 1em;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); }
      .project-item .project-item-image .project-image:hover {
        background-position: 100% 100%; }
  .project-item .project-item-content {
    flex: 1; }
  .project-item:not(:last-child) {
    padding-bottom: 1em;
    border-bottom: 1px solid #efefef; }

.post-list {
  list-style-type: none;
  margin: 0;
  padding: 0; }
  .post-list-item {
    display: block;
    margin-bottom: 1em; }
    .post-list-item a {
      display: block;
      color: #4a4a4a;
      text-decoration: none;
      padding: 1em 1em;
      background: white;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      border: 1px solid white;
      transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
      .post-list-item a:hover {
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
        color: #489aff;
        border: 1px solid #7bb6ff; }
      .post-list-item a .el-title {
        font-size: 1.2em;
        font-family: "Nunito", "Helvetica Neue", "Helvetica", "Arial", sans-serif; }
      .post-list-item a .el-date {
        font-size: 0.8em; }

.photo-gallery-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  margin: -20px; }
  .photo-gallery-list .gallery-item {
    text-align: center;
    margin: 40px 10px; }
    .photo-gallery-list .gallery-item .el-description {
      margin-top: 5px;
      font-size: 14px; }
    .photo-gallery-list .gallery-item .el-image img {
      max-width: 312px;
      max-height: 312px;
      box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
      padding: 0;
      margin: 0; }
    .photo-gallery-list .gallery-item.is-large {
      width: 90%; }
      .photo-gallery-list .gallery-item.is-large .el-image {
        width: 100%; }
        .photo-gallery-list .gallery-item.is-large .el-image img {
          max-width: none;
          max-height: none;
          height: auto;
          width: 100%; }
    .photo-gallery-list .gallery-item.is-full {
      margin: 40px 20px;
      width: 100%; }
      .photo-gallery-list .gallery-item.is-full .el-description {
        margin-top: 5px;
        font-size: 16px; }

.art-gallery-list .gallery-item {
  margin-top: 2em;
  margin-bottom: 3em; }
  .art-gallery-list .gallery-item .el-title {
    margin-bottom: 0.3em;
    font-weight: 700; }
    .art-gallery-list .gallery-item .el-title p {
      margin: 0; }
  .art-gallery-list .gallery-item .el-subtitle {
    font-size: 0.8em;
    margin-bottom: 0.6em; }
  .art-gallery-list .gallery-item .el-description {
    font-size: 0.9em; }
    .art-gallery-list .gallery-item .el-description p {
      margin: 0;
      margin-bottom: 0.3em; }
  .art-gallery-list .gallery-item img {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); }

audio {
  width: 100%;
  max-width: 400px;
  display: none; }

.audio-player {
  display: inline-block;
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 30px;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: row;
  border: 1px solid rgba(0, 0, 0, 0.05); }
  .audio-player.playing {
    border: 1px solid rgba(0, 0, 0, 0.4); }
  .audio-player .ap-play,
  .audio-player .ap-download {
    flex-shrink: 0;
    -webkit-appearance: none;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.02);
    cursor: pointer;
    background-size: 60% auto;
    background-position: 50%;
    background-repeat: no-repeat; }
    .audio-player .ap-play:hover,
    .audio-player .ap-download:hover {
      background-color: rgba(0, 0, 0, 0.04); }
    .audio-player .ap-play:focus,
    .audio-player .ap-download:focus {
      outline: 1px solid #489aff;
      outline-offset: 0; }
  .audio-player .ap-play {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIzMHB4IiBoZWlnaHQ9IjMwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNy40OTkwMjM0LDYuMzM5MzU1NSAyMi41LDE1IDcuNDk5MDIzNCwyMy42NjAxNTYyICIvPjwvc3ZnPg0K"); }
  .audio-player .ap-download {
    background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDE2IDE2IiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPmljb248L3RpdGxlPjxwYXRoIGQ9Ik0xLjI1LDExYS43NS43NSwwLDAsMSwxLjUsMHYyLjI1aDEwLjVWMTFhLjc1Ljc1LDAsMCwxLDEuNSwwdjNhLjc2Ljc2LDAsMCwxLS43NS43NUgyQS43Ni43NiwwLDAsMSwxLjI1LDE0Wk04LDEuMjVBLjc2Ljc2LDAsMCwwLDcuMjUsMlY4LjE5TDUuNyw2LjY0QS43NS43NSwwLDAsMCw0LjY0LDcuN2wyLjgzLDIuODNhLjc4Ljc4LDAsMCwwLC4yNC4xNi43My43MywwLDAsMCwuNTgsMCwuNzguNzgsMCwwLDAsLjI0LS4xNkwxMS4zNiw3LjdBLjc1Ljc1LDAsMCwwLDEwLjMsNi42NEw4Ljc1LDguMTlWMkEuNzYuNzYsMCwwLDAsOCwxLjI1WiI+PC9wYXRoPjwvc3ZnPg=="); }
  .audio-player.playing .ap-play {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIzMHB4IiBoZWlnaHQ9IjMwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxyZWN0IHg9IjE3LjM5ODQzNzUiIHk9IjcuMTM5NjQ4NCIgd2lkdGg9IjUuMTAxNTYyNSIgaGVpZ2h0PSIxNS43MjE2Nzk3Ii8+PHJlY3QgeD0iNy40OTkwMjM0IiB5PSI3LjEzOTE2MDIiIHdpZHRoPSI1LjEwMTU2MjUiIGhlaWdodD0iMTUuNzIxMTkxNCIvPjwvc3ZnPg0K"); }
  .audio-player .ap-progress {
    flex: 1;
    position: relative;
    width: calc("100% - 40px - 80px");
    margin-left: 10px;
    margin-right: 10px;
    height: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: white;
    cursor: pointer; }
    .audio-player .ap-progress .ap-region {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 0%;
      background-color: rgba(0, 0, 0, 0.2); }
    .audio-player .ap-progress .ap-loaded {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 0%;
      background-color: rgba(0, 0, 0, 0.1); }
    .audio-player .ap-progress .ap-indicator {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: calc("20% - 5px");
      width: 10px;
      background-color: black; }
  .audio-player .ap-time {
    flex-shrink: 0;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: right;
    padding-right: 10px;
    font-size: 12px; }

@media (max-width: 600px) {
  .project-item {
    flex-direction: column; } }
audio {
  max-width: 500px;
  width: 100%; }