*,
    *::before,
    *::after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
    .content {
        margin-bottom: 1.2em;
        line-height: 1.4em;
    }
    
    .content:last-child {
        margin-bottom: 0;
    }
    
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    
    .btn {
        padding: 0.75em 2em;
        text-decoration: none;
        background: #335271;
        color: white;
        font-family: 'akzidenz-grotesk_bqmedium', sans-serif;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        max-width: 15em;
        height: fit-content;
    }
    
    .btn:hover {
        background: #87a8c9;
    }
    
    .btn-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #335271;
        border: 1px #335271 solid;
        background: white;
        font-family: 'akzidenz-grotesk_bqmedium', sans-serif;
    }
    
    .btn-secondary:hover {
        background: #335271;
        color: white;
    }
    
    .btn-link {
        text-decoration: none;
        color: black;
        font-family: 'akzidenz-grotesk_bqmedium', sans-serif;
    }
    
    .btn-link:hover,
    .btn-link:active {
        text-decoration: underline;
        color: #335271;
    }
    
    .btn-back {
        display: block;
        height: 2em;
        width: auto;
    }
    
    .btn-back:hover {
        opacity: 0.7;
        transition: opacity 2.5ms;
        cursor: pointer;
    }
    
    .logo {
        height: 1.5em;
    }
    
    .heading-with-icon {
        padding-left: 1.75em;
        min-height: 1.25em;
    }
    
    .heading-with-btn {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .heading-with-btn-end {
        display: none;
        visibility: hidden;
    }
    
    .heading-with-btn h2 {
        margin: 0;
    }
    
    @media only screen and (max-width: 575px) {
        .heading-with-btn {
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
            grid-gap: 24px;
        }
        .heading-with-btn .btn {
            width: 100%;
            max-width: 100%;
        }
    }
    
    .icon {
        width: 2.5em;
        height: auto;
    }
    
    .icon-yes {
        background-image: url("../img/IAT334/yes.svg");
        background-repeat: no-repeat;
        background-size: contain;
        height: auto;
        width: auto;
    }
    
    .icon-maybe {
        background-image: url("../img/IAT334/maybe.svg");
        background-repeat: no-repeat;
        background-size: contain;
        height: auto;
        width: auto;
        text-align: left;
        margin: 0 auto;
    }
    
    .icon-yes-no {
        max-height: 1.25em;
        width: 1.25em;
        vertical-align: baseline;
    }
    
    img {
        width: 100%;
    }
    /* Flexbox Container */
    
    .content-container {
        display: flex;
        justify-content: space-between;
    }
    
    .col-50 {
        flex: 0 0 49%;
    }
    
    .col-20 {
        flex: 0 0 20%;
    }
    
    .col-22-5 {
        flex: 0 0 22.5%;
    }
    
    .col-25 {
        flex: 0 0 25%;
    }
    
    .col-60 {
        flex: 0 0 60%;
        width: 60%;
    }
    /* Main Navigation */
    
    .main-nav {
        background: #335271;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1em;
        box-shadow: 0px 11px 20px #c5c5c5;
    }
    
    .main-nav .left-nav,
    .main-nav .right-nav {
        animation: 0.75s opacityIn linear 1;
    }
    
    .main-nav .right-nav a:not(:last-child) {
        padding-right: 1em;
    }
    
    .main-nav a {
        color: white;
        text-decoration: none;
        font-size: 1em;
    }
    
    .main-nav a:hover {
        text-decoration: underline;
        color: white;
        opacity: 0.6;
    }
    
    .main-nav .left-nav img:hover {
        transform: scale(1.1);
    }
    
    @media only screen and (max-width: 425px) {
        .main-nav a {
            font-size: 0.9em;
        }
        .main-nav .right-nav a {
            margin-right: 0.25em;
        }
        .main-nav .right-nav {
            margin-right: 0.25em;
        }
    }
    /* general home */
    
    #landing {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 2em;
        background: #335271;
        color: white;
        background-size: 30px 30px;
        background-image: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);
    }
    /* Landing Page */
    
    #landing h1 {
        font-size: 7em;
        margin-bottom: 0;
    }
    
    #landing .content-wrapper {
        animation: 0.75s fadeIn linear 1;
    }
    
    #landing h2 {
        font-size: 4.5em;
        font-family: 'akzidenz-grotesk_bqlight', sans-serif;
        font-weight: 300;
        margin-bottom: 0;
    }
    
    #landing .mouse-container {
        margin-top: 3em;
    }
    
    #landing .short {
        display: none;
    }
    
    @media only screen and (max-width: 768px) {
        #landing h1 {
            font-size: 5em;
        }
        #landing h2 {
            font-size: 2.5em;
        }
    }
    
    @media only screen and (max-width: 425px) {
        #landing .short {
            display: inline-block;
        }
        #landing .full {
            display: none;
        }
        #landing h1 {
            font-size: 3.5em;
        }
        #landing h2 {
            font-size: 1.75em;
        }
    }
    
    .mouse-container,
    .wheel-container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }
    
    .wheel-container {
        margin-top: 1em;
        animation: 2s wheelScroll infinite;
    }
    
    .mouse {
        width: 3em;
        height: 5em;
        border: 3px solid white;
        border-radius: 3em;
    }
    
    .wheel {
        width: 0.6em;
        height: 0.6em;
        background: white;
        border-radius: 5em;
    }
    
    .scrolldown {
        margin-top: 2.5em;
    }
    
    .arrow {
        width: 1.5em;
        height: 1.5em;
        transform: rotate(45deg) translateX(0.75em);
        /* 0.75em because of pythagoren theorem; 1.5/2 */
        border-bottom: 3px solid white;
        border-right: 3px solid white;
        animation: 2s arrowFade infinite
    }
    /* about on homepage */
    
    #short-about {
        padding-top: 7em;
        padding-bottom: 5em;
        margin-bottom: 2em;
    }
    
    #short-about .content {
        font-size: 1.25em;
    }
    /* about */
    
    #about {
        padding: 2em;
        min-height: 100vh;
        display: flex;
        align-items: center;
        animation: 0.75s fadeIn linear 1;
    }
    
    #about .content-container {
        width: 75%;
        margin: auto;
        grid-gap: 48px;
    }
    
    #about h1 {
        font-size: 3em;
        margin-bottom: 0.5em;
    }
    
    #about .content-container .col-50 {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #about .content-container .col-50 .content {
        font-size: 1.1em;
    }
    
    #about .content-container .col-50 img {
        max-width: 100%;
        width: 100%;
        height: auto;
    }
    
    .contact-info div {
        display: block;
        font-size: 1.1em;
        padding-bottom: 0.25em;
    }
    
    .contact-info div span {
        font-weight: bold;
    }
    
    .resume {
        padding-top: 1em;
    }
    /* projects */
    
    #recent-projects {
        padding: 2em;
        min-height: 100vh;
        display: flex;
        align-items: center;
    }
    
    #recent-projects .project-wrapper {
        width: 75%;
        margin: auto;
    }
    
    .card {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: black;
        border-radius: var(--border-radius);
    }
    
    .card-category {
        color: #808080;
    }
    
    .card-content {
        padding: 1em;
    }
    
    .card img {
        width: 100%;
        margin-bottom: 0.5em;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    
    .card-description,
    .card-category {
        margin-bottom: 0.75em;
    }
    
    .card-content h3 {
        margin-bottom: 0.25em;
    }
    
    .card-wrapper {
        box-shadow: 0px 11px 20px #c5c5c5;
        border-radius: var(--border-radius);
    }
    
    footer {
        background: #335271;
        margin-top: 2em;
        padding: 0.75em 1em;
        padding-top: 1.25em;
        text-align: center;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    
    footer .btn-link {
        display: block;
        padding-bottom: 0.5em;
    }
    
    footer .btn-link:hover {
        color: white;
    }
    
    footer .btn-link,
    footer h3,
    footer h2 {
        color: white;
    }
    
    .about-footer h2 {
        font-size: 1.75em;
        font-family: 'akzidenz-grotesk_bqregular', sans-serif;
    }
    
    footer h3,
    footer h2,
    footer .btn-link:nth-of-type(2) {
        padding-bottom: 0.25em;
        margin-bottom: 0;
    }
    
    footer .content-container {
        align-items: center;
        justify-content: center;
    }
    
    footer a {
        padding: 0;
    }
    
    footer .icon {
        width: 2.5em;
        height: 2.5em;
    }
    
    footer .icon:nth-of-type(1) {
        padding-right: 1em;
    }
    
    footer .icon:nth-of-type(2) {
        padding-left: 1em;
    }
    
    footer .icon:hover {
        transform: scale(1.1);
    }
    
    .banner {
        width: 100%;
        object-fit: cover;
    }
    
    .mobile-sized-img {
        max-width: 414px;
        height: auto;
        border-radius: var(--border-radius);
    }
    /* .img-center {
    } */
    
    .img-left {
        object-position: 0 10%;
        /* must have height applied to image for cropping to be applied */
    }
    
    @media only screen and (max-width: 1000px) {
        .banner {
            height: 350px;
        }
    }
    
    @media only screen and (max-width: 425px) {
        .banner {
            height: 150px;
        }
    }
    
    @media only screen and (max-width: 1800px) {
        #about .content-container,
        #recent-projects .project-wrapper {
            width: 90%;
            margin: auto;
        }
    }
    
    @media only screen and (max-width: 1100px) {
        #about .content-container {
            flex-direction: column;
        }
        #about .content-container .col-50 img {
            margin: 2em;
            margin-left: 0;
        }
        #about .content-container .col-50 {
            flex: 0 0 100%;
        }
    }
    
    @media only screen and (max-width: 900px) {
        #recent-projects .content-container {
            flex-wrap: wrap;
        }
        #recent-projects .col-22-5 {
            flex: 0 0 48%;
            padding-bottom: 2em;
        }
    }
    
    @media only screen and (max-width: 425px) {
        #recent-projects .col-22-5 {
            flex: 0 0 95%;
            padding-bottom: 2em;
        }
    }
    
    .error {
        width: 100%;
        min-height: 100vh;
        background: #335271;
        margin: 0;
        padding: 0;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-top: -7em;
        padding: 2em;
    }
    
    .center-wrapper {
        width: 100%;
        height: 100%;
        align-self: center;
    }
    /* just the footer next to the error */
    
    .error+footer {
        margin-top: 0;
    }
    
    .error h1 {
        color: white;
        text-align: center;
        font-size: 6em;
    }
    
    .error h2 {
        color: white;
        text-align: center;
        font-size: 2em;
        font-family: 'akzidenz-grotesk_bqlight', sans-serif;
    }
    
    .btn-wrapper {
        margin-top: 1em;
    }
    
    .error .btn-secondary:hover {
        background: #c5c5c5;
        transition: background-color 0.5s ease-in-out;
    }
    
    .back-wrapper {
        padding-top: 2em;
        padding-left: 2.5em;
        background: #335271;
    }
    
    @media only screen and (max-width: 600px) {
        .error h1 {
            font-size: 5em;
        }
        .error h2 {
            font-size: 1.5em;
        }
    }
    
    @media only screen and (max-width: 320px) {
        .error h1 {
            font-size: 4em;
        }
        .error h2 {
            font-size: 1.25em;
        }
    }
    /* project detail */
    
    .fixed-subnav {
        background-color: #cccccc;
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 1em 0;
        display: none;
        z-index: 999;
        overflow-x: auto;
        white-space: nowrap;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        transition: opacity ease-in-out 0.3s;
    }
    
    .fixed-subnav .btn-link {
        padding-left: 1em;
    }
    
    .fixed-subnav .btn-link:last-child {
        padding-right: 1em;
    }
    
    .project-nav {
        background: white;
    }
    
    .project-nav .right-nav .btn-link {
        color: black;
    }
    
    .content-title {
        margin-top: 2em;
        margin-bottom: 2em;
        text-align: center;
    }
    
    .content-title h1 {
        font-size: 2.5em;
    }
    
    .content-title p {
        font-size: 1.5em;
    }
    
    .section-label {
        margin-left: 2em;
    }
    
    .section-label .btn-link {
        display: block;
        font-size: 1.5em;
        font-family: 'akzidenz-grotesk_bqlight', sans-serif;
        text-align: right;
        padding-right: 1.25em;
    }
    
    .content-technical {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }
    
    .content-technical div {
        padding-bottom: 1em;
        flex: 0 0 100%;
    }
    
    .content-technical div h3 {
        font-size: 1.1em;
    }
    
    #fnc .content-container,
    #obsolete .content-container,
    #away .content-container,
    #educnation .content-container,
    #iat437 .content-container {
        justify-content: space-evenly;
    }
    
    #fnc .col-60 h2,
    #obsolete .col-60 h2,
    #away .col-60 h2,
    #educnation .col-60 h2,
    #iat437 .col-60 h2 {
        padding-bottom: 0.5em;
        font-size: 2em;
        font-family: 'akzidenz-grotesk_bqregular', sans-serif;
    }
    
    #educnation .col-60 h3,
    #iat437 .col-60 h3 {
        padding-bottom: 0.5em;
        font-size: 1.25em;
        font-family: 'akzidenz-grotesk_bqlight', sans-serif;
    }
    
    #away .col-60 h4,
    #iat437 .col-60 h4 {
        padding-bottom: 0.5em;
    }
    
    #fnc .col-20 .section-label,
    #fnc .col-20 .content-technical,
    #obsolete .col-20 .section-label,
    #obsolete .col-20 .content-technical,
    #away .col-20 .section-label,
    #away .col-20 .content-technical,
    #educnation .col-20 .section-label,
    #educnation .col-20 .content-technical,
    #iat437 .col-20 .section-label,
    #iat437 .col-20 .content-technical {
        padding: 0 3em;
    }
    
    .overview-mobile {
        display: none;
    }
    
    #overview-mobile {
        font-size: 2em;
        font-family: 'akzidenz-grotesk_bqregular', sans-serif;
        padding-bottom: 0.5em;
    }
    
    .content-links {
        display: flex;
    }
    
    .content-links .btn:nth-child(1) {
        margin-right: 2em;
    }
    
    .content-links .btn:nth-child(2) {
        margin-left: 2em;
    }
    
    @media only screen and (max-width: 1250px) {
        #fnc .col-20 .section-label,
        #fnc .col-20 .content-technical,
        #obsolete .col-20 .section-label,
        #obsolete .col-20 .content-technical,
        #away .col-20 .section-label,
        #away .col-20 .content-technical,
        #educnation .col-20 .section-label,
        #educnation .col-20 .content-technical,
        #iat437 .col-20 .section-label,
        #iat437 .col-20 .content-technical {
            padding: 0 2em;
        }
    }
    
    @media only screen and (max-width: 1120px) {
        #fnc .col-20 .section-label,
        #fnc .col-20 .content-technical,
        #obsolete .col-20 .section-label,
        #obsolete .col-20 .content-technical,
        #away .col-20 .section-label,
        #away .col-20 .content-technical,
        #educnation .col-20 .section-label,
        #educnation .col-20 .content-technical,
        #iat437 .col-20 .section-label,
        #iat437 .col-20 .content-technical {
            padding: 0 1em;
        }
    }
    
    @media only screen and (max-width: 1000px) {
        #fnc .col-60,
        #obsolete .col-60,
        #away .col-60,
        #educnation .col-60,
        #iat437 .col-60 {
            width: 100%;
        }
        #fnc .col-20 .section-label,
        #obsolete .col-20 .section-label,
        #away .col-20 .section-label,
        #educnation .col-20 .section-label,
        #iat437 .col-20 .section-label {
            display: none;
        }
        #fnc .content-container,
        #obsolete .content-container,
        #away .content-container,
        #educnation .content-container,
        #iat437 .content-container {
            flex-direction: column-reverse;
        }
        #fnc .col-20 .content-technical,
        #fnc .col-60 .written-content,
        #obsolete .col-20 .content-technical,
        #obsolete .col-60 .written-content,
        #away .col-20 .content-technical,
        #away .col-60 .written-content,
        #educnation .col-20 .content-technical,
        #educnation .col-60 .written-content,
        #iat437 .col-20 .content-technical,
        #iat437 .col-60 .written-content {
            flex: 0 0 100%;
            padding: 0 2em;
        }
        .overview-mobile {
            display: block;
        }
        .content-technical {
            flex-direction: row;
            flex-wrap: wrap;
        }
        .content-technical div {
            flex: 0 0 48%;
        }
        .fixed-subnav {
            display: block;
        }
    }
    
    @media only screen and (max-width: 550px) {
        .content-technical {
            flex-direction: column;
        }
        .content-technical div {
            flex: 0 0 100%;
        }
        .content-links {
            flex-direction: column;
        }
        .content-links .btn:nth-child(1) {
            margin-right: 0;
            margin-bottom: 1em;
            max-width: 100%;
        }
        .content-links .btn:nth-child(2) {
            margin-left: 0;
            max-width: 100%;
        }
    }
    
    @media only screen and (max-width: 370px) {
        .fixed-subnav .btn-link {
            padding-left: 0.5em;
            font-size: 0.9em;
        }
    }
    /* this is to fix the gap between the image and the figcaption */
    
    #obsolete img,
    #away img:not(#img-to-show) {
        bottom: -0.3em;
        transform: translateY(0.3em);
    }
    
    .wrapper {
        margin-bottom: 2em;
    }
    
    .project-toggler {
        display: flex;
        justify-content: space-between;
        margin-top: 2em;
        flex-direction: row;
    }
    
    .project-toggler .icon {
        opacity: 0.5;
    }
    
    .project-toggler .flex-fill {
        flex: 99 99 auto;
    }
    
    .project-toggler h4 {
        align-self: flex-end;
        flex: 1
    }
    
    .project-toggler .icon:hover {
        opacity: 1;
        transform: scale(1.1);
    }
    
    .tooltip-left {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        position: relative;
    }
    
    .tooltip-center {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }
    
    .tooltip-right {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: flex-end;
        position: relative;
    }
    
    .project-toggler .tooltip {
        visibility: hidden;
        border: #335271 solid 1px;
        color: black;
        text-align: center;
        border-radius: 5px;
        padding: 0.5em 1em;
        margin-bottom: 0.5em;
        text-decoration: none;
    }
    
    @media only screen and (max-width: 425px) {
        .tooltip {
            visibility: visible;
        }
    }
    
    figure {
        box-shadow: 0px 11px 20px #c5c5c5;
        border-radius: var(--border-radius);
    }
    
    .no-shadow {
        box-shadow: none;
        border-radius: none;
    }
    
    figure img {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    
    figfigcaption {
        background: #cccccc;
        padding: 0.5em;
        margin-bottom: 2em;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    
    .overlay-container {
        position: relative;
        transition: opacity 0.5s;
    }
    
    .coming-soon {
        /* display: block; */
        visibility: hidden;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #335271;
        width: 100%;
        height: 100%;
        text-align: center;
        opacity: 0;
        transition: opacity 0.5s;
        border-radius: var(--border-radius);
        z-index: 999;
    }
    
    .coming-soon h4 {
        color: white;
        z-index: 999;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: 'akzidenz-grotesk_bqregular', sans-serif;
        font-size: 2em;
    }
    
    .projects-card:hover .coming-soon {
        visibility: visible;
        display: block;
        cursor: default;
        opacity: 0.8;
        transition: opacity 0.5s;
    }
    
    .styleguide-link {
        text-align: center;
    }
    
    @keyframes wheelScroll {
        from {
            margin-top: 1em;
            opacity: 1;
        }
        to {
            margin-top: 3em;
            opacity: 0.25;
        }
    }
    
    @keyframes arrowFade {
        from {
            /* margin-top: 1em; */
            opacity: 1;
        }
        to {
            /* margin-top: 3em; */
            opacity: 0;
        }
    }
    
    @keyframes opacityIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    
    @keyframes fadeIn {
        0% {
            opacity: 0;
            margin-top: 5em;
        }
        50% {
            margin-top: 0;
        }
        100% {
            opacity: 1;
        }
    }
    
    .comparison-chart table {
        width: 100%;
        margin-bottom: 3em;
        border-collapse: collapse;
    }
    
    .comparison-chart h4 {
        font-size: 1.1em;
        line-height: 1em;
    }
    
    .comparison-chart tr {
        height: 4em;
    }
    
    .chart-first-col {
        width: 25%;
        margin: 0 auto;
        height: auto;
        vertical-align: top;
        padding-top: 1.5em;
    }
    
    .comparison-chart th,
    .comparison-chart td {
        width: 12.5%;
        padding: 1em;
    }
    
    .comparison-chart img {
        height: 2.5em;
        width: 2.5em;
        margin: 0 auto;
    }
    
    #chart-away-logo {
        height: 4em;
        width: auto;
        padding-top: 1.25em;
    }
    
    .on-condition img,
    .on-condition h4 {
        display: inline-block;
        vertical-align: baseline;
    }
    
    .comparison-chart th:not(:first-child),
    .comparison-chart td:not(:first-child) {
        background: #E3F0F2;
    }
    
    .chart-logo-wrapper {
        margin-bottom: 2em;
    }
    
    .chart-logo-wrapper h4 {
        padding-top: 0.5em;
    }
    
    .chart-logo-wrapper img {
        padding-top: 1.25em;
        height: auto;
    }
    
    @media only screen and (max-width: 1000px) {
        .comparison-chart h4 {
            font-size: 1em;
        }
        .comparison-chart th,
        .comparison-chart td {
            padding: 0 1em;
        }
    }
    
    @media only screen and (max-width: 880px) {
        .on-condition img,
        .on-condition h4 {
            display: block;
        }
        .on-condition img {
            margin-bottom: 0.5em;
        }
        .on-condition h4 {
            font-size: 0.9em;
        }
    }
    
    @media only screen and (max-width: 700px) {
        .comparison-chart {
            overflow-x: scroll;
        }
    }
    
    @media only screen and (max-width: 425px) {
        .comparison-chart h4 {
            font-size: 0.9em;
        }
    }
    
    .blank-image-filler {
        width: 414px;
        height: 20px;
    }
    
    .image-row .full-image,
    #key-paths .blank-image-filler {
        display: inline-block;
    }
    
    .image-container {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        margin-bottom: 2em;
    }
    
    .example-image:first-child {
        margin-right: 2em;
    }
    /* projects */
    
    #projects {
        padding: 3em 6em;
        animation: 0.75s fadeIn linear 1;
    }

    @media (max-width: 768px) {
        #projects {
            padding: 3em;
        }
    }
    
    #project-container {
        animation: 0.75s fadeIn linear 1;
    }