html {
    font-family: 'Raleway', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

header, h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Slab', serif;
    page-break-after: avoid;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

a {
    color: rgb(34, 121, 193);
}

b, strong {
    font-weight: bolder;
}

p, ul {
    page-break-before: avoid;
    orphans: 100;
}

picture, img {
    page-break-inside: avoid;
}

@media print {
    p {
        font-size: 10pt;
    }
}

header#top {
    top: 0px;
    height: 60px;
    width: 100%;
    position: sticky;
    z-index: 1;
    overflow: hidden;

    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "name internal external";

    background: white;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

@media screen and (max-width: 660px) {
    header#top {
        position: relative;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "name . external";
    }

    header#top ul#internal-links {
        display: none;
    }
}

@media print {
    header#top {
        display: none;
    }
}

header#top h1 {
    grid-area: name;

    line-height: 40px;
    padding: 0 20px;
    margin: 10px 0;
    font-size: 20px;
    border-right: 1px solid #ddd;
}

header#top ul {
    height: 60px;
    margin: 0 0 0 10px;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
header#top ul > li {
    display: inline-block;
}

header#top ul > li a {
    height: 60px;
    padding: 0 4px;
    margin: 0 6px;
    display: inline-block;
    box-sizing: border-box;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;

    line-height: 60px;
    text-decoration: none;
    color: black;
}

header#top ul > li a:hover {
    border-bottom: 2px solid #ddd;
}

header#top ul#internal-links {
    grid-area: internal;
}

header#top ul#external-links {
    grid-area: external;

    margin-right: 20px;
}

header#top ul#external-links > li a {
    width: 2em;
    background-size: 2em;
    background-repeat: no-repeat;
    background-position: center;
}

@media screen and (max-width: 420px) {
    header#top h1 {
        font-size: 18px;
    }

    header#top ul#external-links > li a {
        width: 1.6em;
        background-size: 1.6em;
        margin: 0 3px;
        background-repeat: no-repeat;
        background-position: center;
    }
}

header#top ul#external-links > li a.external-linkedin {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 67"><path xmlns="http://www.w3.org/2000/svg" d="M52.3 49.29V36.2c0-7-3.74-10.27-8.73-10.27a7.52 7.52 0 0 0-6.83 3.77v-3.23h-7.58c.1 2.14 0 22.8 0 22.8h7.58V36.56c0-.68.05-1.36.25-1.85.55-1.36 1.8-2.77 3.89-2.77 2.74 0 3.84 2.09 3.84 5.15v12.2h7.58zM21.17 23.36c2.64 0 4.3-1.75 4.3-3.94-.06-2.24-1.66-3.94-4.25-3.94s-4.29 1.7-4.29 3.94c0 2.19 1.65 3.94 4.2 3.94zM33.5 67a33.5 33.5 0 1 1 0-67 33.5 33.5 0 0 1 0 67zm-8.54-17.71V26.48h-7.58v22.8z"/></svg>');
}

header#top ul#external-links > li a.external-github {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 67"><path d="M33.5 0A34 34 0 0 0 0 34.4c0 15.1 9.6 28 23 32.5 1.6.4 2.2-.7 2.2-1.6v-6.4c-9.4 2-11.3-4-11.3-4-1.6-4-3.8-5-3.8-5-3-2.2.3-2.2.3-2.2 3.3.3 5.1 3.6 5.1 3.6 3 5.2 7.9 3.7 9.8 2.8a7.4 7.4 0 0 1 2-4.6c-7.3-.8-15.2-3.8-15.2-17 0-3.7 1.3-6.8 3.5-9.2-.4-.8-1.5-4.3.3-9 0 0 2.8-1 9.2 3.5a31.1 31.1 0 0 1 16.8 0c6.4-4.5 9.2-3.6 9.2-3.6 1.8 4.8.7 8.3.3 9.1 2.2 2.4 3.5 5.5 3.5 9.3 0 13.1-7.9 16-15.3 17 1.2 1 2.2 3 2.2 6.3v9.4c0 .9.6 2 2.3 1.6A34.3 34.3 0 0 0 67 34.3 34 34 0 0 0 33.5 0z"/></svg>');
}

header#top ul#external-links > li a.external-scholar {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 67"><path d="M33.5 0C15.08 0 0 15.08 0 33.5S15.08 67 33.5 67 67 51.92 67 33.5 51.92 0 33.5 0zm0 10.05c5.7 0 10.05 4.36 10.05 10.05S39.19 30.15 33.5 30.15 23.45 25.8 23.45 20.1s4.36-10.05 10.05-10.05zm0 47.57A24.45 24.45 0 0 1 13.4 46.9c0-6.7 13.4-10.38 20.1-10.38s20.1 3.69 20.1 10.38a24.43 24.43 0 0 1-20.1 10.72z"/></svg>');
}

header#top ul#external-links > li a.external-twitter {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 67"><path d="M33.5 0a33.5 33.5 0 1 0 0 67 33.5 33.5 0 0 0 0-67zm16.9 26.8c1.2 19.7-16.6 30.7-37 21.3 4.4.4 9.5-1.2 12.5-3.5a8.5 8.5 0 0 1-7.9-5.9c1.3.3 2.7 0 3.9-.1-4-1.7-6.6-3.3-6.8-8.4a8 8 0 0 0 3.8 1c-3.6-3-4.8-7.4-2.6-11.2a24 24 0 0 0 17.4 8.8c-3-10 10.1-15.5 14.4-7.7 2-.4 3.7-1.1 5.3-2-.6 2-2 3.6-3.7 4.6 1.7-.2 3.4-.7 4.9-1.3a17 17 0 0 1-4.2 4.4z"/></svg>');
}

section.content {
    margin: -60px auto 2em auto;
    max-width: 1000px;

    padding-top: 60px;
}

footer {
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}

@media screen and (max-width: 1060px) {
    section.content {
        margin: -60px 30px 2em 30px;
    }
}

@media print {
    section.content {
        padding-top: 0px;
        margin: 0px;
    }
}

section.content article > div.description p {
    margin: 1em 0 0 0;
}
section.content article > div.description p:first-of-type {
    margin: 0;
}

section.content article > ul.mentions {
    display: flexbox;
    flex-wrap: wrap;

    margin: 0;
    padding: 0 0 0.25em 0;

    list-style: none;
    font-size: 10pt;
}
section.content article > ul.mentions::before {
    content: 'Mentions:';
    font-weight: 600;
}
section.content article > ul.mentions.awards::before {
    content: 'Awards:';
    font-weight: 600;
}
section.content article > ul.mentions.reviews::before {
    content: 'Reviews:';
    font-weight: 600;
}
section.content article > ul.mentions li {
    display: inline;
}
section.content article > ul.mentions li::before {
    content: ' • ';
}
section.content article > ul.mentions li:first-of-type::before {
    content: '';
}

@media print {
    section.content article > ul.mentions {
        font-size: 10pt;
    }
    section.content article > ul.mentions li::before {
        content: '';
    }
    section.content article > ul.mentions li::after {
        content: ' • ';
    }
    section.content article > ul.mentions li:last-of-type::after {
        content: '';
    }
    section.content article > ul.mentions li a {
        text-decoration: none;
    }
    section.content article > ul.mentions li a::after {
        color: #555;
        content: ' [' attr(href) ']';
    }
}

section.content article > ul.links {
    display: flexbox;
    flex-wrap: wrap;

    margin: 0;
    padding: 0 0 0.25em 0;
    border-bottom: 1px solid #eee;

    list-style: none;
    font-size: 10pt;
}
section.content article > ul.links li {
    display: inline;
    overflow: hidden;
}
section.content article > ul.links li::before {
    content: '[';
}
section.content article > ul.links li::after {
    content: ']';
}

@media print {
    section.content article > ul.links {
        font-size: 8pt;
    }
    section.content article > ul.links li::before {
        content: '';
    }
    section.content article > ul.links li::after {
        content: ' • ';
    }
    section.content article > ul.links li:last-of-type::after {
        content: '';
    }
    section.content article > ul.links li a {
        text-decoration: none;
        white-space: nowrap; /* otherwise links breaks link in PDFs, which makes them the size of the outer container */
    }
    section.content article > ul.links li a::after {
        color: #555;
        content: ' [' attr(href) ']';
    }
}

section.content#contact {
    margin-bottom: 0em;
    overflow: hidden;
}

section.content#about {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-areas: "name description"
                         "name links";
    grid-column-gap: 10px;
    align-items: center;
    padding-top: 70px;
    margin-top: -30px;
}

@media screen and (max-width: 660px) {
    section.content#about {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: "name" "description" "links";
    }
}

@media print {
    section.content#about {
        grid-template-columns: 200px 1fr;
        grid-template-areas: "name description"
                             "links links";
        padding-top: 0px;
        margin: 0px;
        align-items: start;
    }
}

section.content article#name {
    grid-area: name;
    padding: 1em 0;
}

@media print {
    html.no-profile section.content#about {
        display: none;
    }
}

section.content article#name img {
    width: 200px;
    height: 200px;
    display: block;
    margin: 0 auto;

    border-radius: 100px;
    border: 1px solid #000;
}

@media print {
    section.content article#name img {
        width: 130px;
        height: 130px;
    }
}

section.content article#name header {
    text-align: center;
}

section.content article#name header .name {
    font-size: 20pt;
    margin-bottom: 0;
    margin-top: 11px;
}

section.content article#name header .title {
    color: rgb(65, 65, 65);
    font-size: 12pt;
    font-weight: 300;
    margin-top: 5px;
}

section.content article#name header .education {
    color: rgb(65, 65, 65);
    font-size: 10pt;
    font-weight: 300;
    margin-top: 5px;
}

section.content article#description {
    grid-area: description;
}

section.content article#links {
    grid-area: links;
}

section.content.categorized h1 {
    color: rgb(88, 89, 87);
    display: block;
    text-align: center;
    position: relative;
    font-size: 16pt;
    font-weight: 500;
    text-transform: uppercase;
}

section.content.categorized h1:before {
    border-top: 1px solid rgb(157, 157, 157);
    content: "";
    margin: 0 auto;
    position: absolute;
    top: 50%; left: 0; right: 0; bottom: 0;
    width: 100%;
    z-index: -1;
}

section.content.categorized h1 span {
    background: white;
    padding: 0px 10px;
}

section.content.categorized article {
    page-break-inside: avoid;
    orphans: 100;
}

section.content.categorized article header {
    display: grid;
    grid-template-columns: 310px auto 1fr;
    grid-template-areas: "name title period";
    gap: 5px;
}

@media screen and (max-width: 660px) {
    section.content.categorized article header {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: "name title"
                             "name period";
    }
}

section.content.categorized article header h2, .content.categorized header div {
    color: rgb(34, 121, 193);
    font-size: 11pt;
    line-height: 1.25em;
    margin: 0;
}

section.content.categorized article header .name {
    grid-area: name;

    border-right: 1px solid rgb(34, 121, 193);
    padding-right: 5px;
    text-align: right;
}

section.content.categorized article header .title {
    grid-area: title;

    font-weight: 300;
}

section.content.categorized article header .period {
    grid-area: period;

    font-weight: 300;
    text-transform: uppercase;
    text-align: right;
    min-width: 37px;
}

section.content#portfolio #filter {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "buttons";
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    margin-bottom: 1em;
    justify-items: center;
}

@media print {
    section.content#portfolio #filter {
        display: none;
    }
}


section.content#portfolio #filter > ul {
    display: inline;
    grid-area: buttons;
    margin: 0;
    padding: 0;
    list-style: none;
}

section.content#portfolio #filter > ul > li {
    float: left;
    padding: 0.5em 0.8em;
    margin: 0.2em;
    border: 2px solid #ddd;
    border-radius: 2em;
    font-size: 10pt;
    cursor: pointer;
}

section.content#portfolio #filter > ul > li.filter-enabled {
    border-color: #555;
    background: #555;
    color: #fff;
}

section.content#portfolio #filter > ul > li.js-disabled {
    visibility: hidden;
}

section.content#portfolio article {
    margin-bottom: 2em;

    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas: "title title"
                         "img description"
                         "img awards"
                         "img mentions"
                         "img margin"
                         "img links";
    grid-column-gap: 10px;
}

section.content#portfolio article.hidden {
    display: none;
}

@media screen and (max-width: 660px) {
    section.content#portfolio article {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto;
        grid-template-areas: "title" "img" "description" "awards" "mentions" "links";
    }
}

@media print {
    section.content#portfolio article {
        grid-template-columns: 200px 1fr;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas: "title title"
                             "img description"
                             "awards awards"
                             "mentions mentions"
                             "links links";
    }
}

section.content#portfolio article > header {
    grid-area: title;
    margin-bottom: 1em;
}

section.content#portfolio article > picture, section.content#portfolio article > img, section.content#portfolio article > video {
    grid-area: img;
    justify-self: center;
    align-self: center;
}

section.content#portfolio article img, section.content#portfolio article > video {
    width: 300px;
    object-fit: contain;
    height: auto;
}


section.content#portfolio article img.rounded, section.content#portfolio article > video.rounded {
    border-radius: 40px;
}

section.content#portfolio article img.smaller, section.content#portfolio article > video.smaller {
    width: 270px;
}

section.content#portfolio article img.half, section.content#portfolio article > video.half {
    width: 150px;
}

@media print {
    section.content#portfolio article img, section.content#portfolio article > video {
        align-self: start;
        width: 200px;
    }

    section.content#portfolio article img.smaller, section.content#portfolio article > video.smaller {
        width: 180px;
    }

    section.content#portfolio article img.half, section.content#portfolio article > video.half {
        width: 100px;
    }
}

section.content#portfolio article > div.description {
    grid-area: description;
    margin-bottom: 1em;
}

section.content#portfolio article > ul.mentions.awards {
    grid-area: awards;
    margin-bottom: 1em;
}
section.content#portfolio article > ul.mentions {
    grid-area: mentions;
    margin-bottom: 1em;
}
section.content#portfolio article > ul.links {
    grid-area: links;
}

img#bottom-image {
    /* Hack to make iOS render at 2x resolution */
    width: 200%;
    height: 100%;
    object-fit: contain;
    transform: scale3d(0.5,0.5,0.5) translate(-50%, -50%);
    margin-bottom: -35%;
    margin-right: -100%;
}