/* CSS RESET (https://meyerweb.com/eric/tools/css/reset/) */
    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;
        line-height: 1.33;
        vertical-align: baseline;
    }
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    a {
        cursor: pointer;
    }

/* FONT DEFINITIONS */
    body {
        min-width: 800px;
        max-width: 2560px;
        color: #4c4c4c;
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        font-size: 12pt;
        margin: 180px 0 0;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
    body, nav {
        min-width: auto;
    }
}

    a {
        text-decoration: none;
        color: #4c4c4c;
    }

    h1 {
        font-weight: 300;
        font-size: 3.25em;
    }
    h2 {
        font-weight: 400;
        font-size: 2.5em;
    }
    h3 {
        font-weight: 400;
        font-size: 2em;
    }
    h4 {
        font-weight: 700;
        font-size: 1.2em;
        text-transform: lowercase;
    }
    h5,h6 {
        font-weight: 400;
        font-size: 1em;
    }
    blockquote {
        font-weight: 300;
        font-size: 2.25em;
    }
    input, textarea, button {
        font-family: 'Roboto', sans-serif;
        font-size: 1em;
    }
    footer, .attribution {
        font-size: 0.8125em;
    }

/* HEADER */
    nav {
        min-width: 800px;
        max-width: 2560px;
        font-weight: 300;
        text-transform: uppercase;
        background: transparent url('../img/background/nav.png?210130') no-repeat fixed 0 0;
        z-index: 100;
        display: block;
        width: 100%;
        height: 120px;
        position: fixed;
        top: 0;
        text-align: right;
    }
    nav .current {
        font-weight: 700;
    }
    nav img.logo {
        float: left;
        margin: 34px 0 0 80px;
    }
    nav li {
        padding: 0 32px;
        display: inline-block;
        line-height: 102px;
        height: 102px;
        position: relative;
    }
    .about .about, .work .work, .detail .work, .contact .contact {
        font-weight: 700;
    }

    nav li ul {
        position: absolute;
        top: 80px;
        display: none;
    }
    nav li:hover ul {
        display: block;
        box-shadow: 4px 9px 9px #c7c7c7, -4px 9px 9px #c7c7c7;
    }
    nav li li {
        display: block;
        width: 200px;
        height: auto;
        font-weight: 300;
        text-transform: none;
        line-height: 1.5;
        padding: 12pt 22px;
        background-color: #fff;
        border-bottom: 1px solid #c7c7c7;
        text-align: left;
    }
    nav li li:hover {
        background-color: #4c4c4c;
    }
    nav li li:hover a {
        color: #eff3f6;
    }

@media only screen and (min-width: 800px), only screen and (-webkit-max-device-pixel-ratio: 1), only screen and (max-resolution: 192dpi) {
    .home nav {
        top: auto;
        bottom: 0px;
        height: 160px;
        background: #4c4c4c url('../logo/dk-large.svg') no-repeat 40px center;
    }
    .home nav li {
        line-height: 60px;
        height: 60px;
    }
    .home nav a {
        color: #fff;
    }
    .home nav img { visibility: hidden; }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px), only screen and (min-resolution: 192dpi) and (max-width: 800px) {
    body {
        min-width: auto;
        margin: 0;
    }
    nav {
        min-width: auto;
        height: auto;
        position: relative;
        background-position-y: 30px;
        background-attachment: scroll;
        padding-bottom: 30px;
        margin-bottom: 30px;
    }
    nav img.logo {
        margin-left: 40px;
    }
    nav li {
        height: auto;
        display: block;
        line-height: 2;
    }

}
/* FOOTER */
    footer {
        margin-top: 80px;
        background-color: #272727;
        color: #eff3f6;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 80px 300px 200px 1fr;
        grid-template-areas:
            ". . . logo"
            ". location instagram logo"
            ". phone linkedin logo"
            ". email . logo"
            ". . . logo"
            ". . . logo"
            ;
    }
    footer a {
        color: #eff3f6;
    }
    footer .location { grid-area: location; }
    footer .phone { grid-area: phone; }
    footer .email { grid-area: email; }
    footer .instagram { grid-area: instagram; }
    footer .linkedin { grid-area: linkedin; }
    footer .logo {
        grid-area: logo;
        background-color: #6a6a6a;
        text-align: right;
        padding: 32px 80px 24px 0;
    }
    footer .logo p { margin-top: 12px;}

@media only screen and (max-width: 960px) {
    footer {
        display: grid;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr auto;
        grid-template-columns: 80px 300px auto;
            grid-template-areas:
            ". . ."
            ". location instagram"
            ". phone linkedin"
            ". email ."
            ". . ."
            "logo logo logo";
    }

}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px), only screen and (min-resolution: 192dpi) and (max-width: 800px) {
    footer {
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr auto;
        grid-template-columns: 80px auto;
            grid-template-areas:
            ". ."
            ". location"
            ". phone"
            ". email"
            ". instagram"
            ". linkedin"
            ". ."
            "logo logo";
    }
    footer .logo {
        padding-right: 40px;
    }
}

/* BUTTONS, LINKS, INPUTS */
    button, a.button {
        cursor: pointer;
        text-align: left;
        text-transform: uppercase;
        display: inline-block;
        padding: 0.75em 20px;
        background-repeat: no-repeat;
        background-position: 216px center;
        background-color: #272727;
        background-image: url('../img/icon/arrow-dk-bg.png');
        border: 2px solid #272727;
        color:#fff;
    }
    button {
        width: 288px;
        height: 40pt;
    }
    a.button {
        width: 244px;
    }
    button.secondary, a.button.secondary {
        background-color: #fff;
        background-image: url('../img/icon/arrow-lt-bg.png');
        border: 2px solid #e3e3e3;
        color: #4c4c4c;
    }
    button:active, a.button:active {
        border-color: #c4d6e5;
    }
    button:disabled, a.button.disabled {
        cursor: auto;
        background-color: #c7c7c7;
        background-image: url('../img/icon/arrow-lt-bg.png');
        border-color: #c7c7c7;
        color: #6a6a6a;
    }
    button.secondary:disabled, a.button.secondary.disabled {
        background-color: #fff;
        background-image: url('../img/icon/arrow-disabled.png');
        border: 2px solid #e3e3e3;
        color: #c7c7c7;
    }

    .form-entry span {
        position: relative;
        top: 0;
        display: block;
        height: 16pt;
        font-size: 0.8em;
    }
    .form-entry .empty span {
        top: 10pt;
        font-size: 1em;
    }
    .form-entry textarea {
        min-height: 6em;
    }
    .form-entry input, .form-entry textarea {
        width: 100%;
        border: none;
        border-bottom: 1px solid #eaeaea;
        padding: 0.5em 0 0.75em;
    }
    .form-entry .error {
        height: 16pt;
        font-size: 0.9em;
        color: #980606;
        background: url('../img/icon/error.png') no-repeat left 4px;
        padding-left: 16pt;
    }
    .form-entry .error:empty {
        visibility: hidden;
    }

/* OTHER SHARED MODULES */
    .spotlight {
        margin-bottom: 18pt;
    }
    .spotlight .thumb {
        display: block;
        padding-bottom: 100%;
        background-position: center center;
        background-repeat: no-repeat;
        margin-bottom: 10pt;
        position: relative;
    }
    .spotlight h2 {
        float: left;
        padding-right: 18pt;
        line-height: 1.33;
    }
    .spotlight h3 {
        font-size: 1.5em;
    }

    .attribution {
        display: inline-block;
        background-color: #272727;
        color: #eff3f6;
        opacity: 0.6;
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 1em 2em;
    }
    .attribution:empty {
        display: none;
    }
/* GRIDS */
    .content {
        display: grid;
    }
/* HOME */
    .home .content {
        margin-top: -60px;
    }
    .home .decorator {
        position: fixed;
        width: 100%;
        height: 866px;
        right: 0;
        bottom: 159px;
        background: url('../img/background/home_render.png') no-repeat bottom right;
        background-size: contain;
        z-index: -1;
    }

    .home .content {
        grid-column-gap: 20px;
        column-gap: 20px;
        grid-row-gap: 40px;
        row-gap: 40px;
        padding-left: 80px;
        grid-template-columns: 288px auto;
        grid-template-rows: auto auto 140px auto auto 140px;
        grid-template-areas:
        " h1 h1"
        " h3 h3"
        " .  . "
        " b2 . "
        " b1 . "
        " .  . ";
    }
    .home .content h1 { grid-area: h1; line-height: 2em; }
    .home .content h3 { grid-area: h3; font-size: 1.5em; line-height: 2em; text-transform: uppercase; font-weight: 300; }
    .home .content .button { grid-area: b1; }
    .home .content .secondary { grid-area: b2; }

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
    .home .content h1 { font-size: 2.4em; line-height: 1em; }
    .home .content h3 { font-size: 1.25em; line-height: 1em; }
    .home .content .secondary { display: none; }
    .home .content {
        height: 100%;
        margin: 0 12pt;
        grid-column-gap: 0;
        column-gap: 0;
        grid-row-gap: 40px;
        row-gap: 40px;
        padding-left: 0px;
        grid-template-rows: auto auto 192px auto auto;
        grid-template-columns: 24px 288px auto;
        grid-template-areas:
        " . h1 . "
        " . h3 . "
        " . .  . "
        " . b1 . ";
    }
    .home .decorator {
        position: fixed;
        bottom: 0;
        width: 200%;
        height: 800px;
    }

}
/* ABOUT */

    .about .content {
        max-width: 1900px;
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            " services services "
            " mission mission"
            " founded process "
            " people people"
    }
    .about .content div {
        margin: 2em 4em 2em 8em;
    }
    .about .content h3 {
        font-size: 1.5em;
        text-align: center;
        margin: 1em auto;
    }
    .about .content h4 {
        font-size: 1.5em;
        text-transform: uppercase;
        writing-mode: vertical-lr;
        transform: rotate(180deg);
        text-align: right;
        height: 200px;
        margin: 0 auto -200px -3em;
    }
    .about .content .people h4, .about .content .services h4  {
        text-align: left;
    }

    .about .content .mission { grid-area: mission; }
    .about .content .founded { grid-area: founded; }
    .about .content .process { grid-area: process; }
    .about .content .people { grid-area: people; }
    .about .content .services { grid-area: services; }

    .about .content .services ul { display: flex; flex-flow: column wrap; gap: 80px; height: 560px; }
    .about .content .services li { width: 240px; height: 240px; text-align: center; }
    .about .content .services li:first-child { width: 420px; height: 560px; }
    .about .content .services li img { display: block; }
    .about .content .services li span { text-transform: uppercase; white-space: nowrap; }

    .about .content .people ul { display: flex; justify-content: space-between; align-items: stretch; gap: 12em; }
    .about .content .people li { width: 40%; padding-right: 10%; margin-bottom: 2em; }
    .about .content .people img { display: block; margin: 0 auto 1em 0; }
    .about .content .people h5 { margin: 0 auto 1em; }
    .about .content .people h5 span { white-space: nowrap; }
    .about .content .people h5 span:nth-of-type(2):before {
        content: " - ";
    }

@media only screen and (max-width: 1420px) {

    .about .content .services ul { height: 880px; }
    .about .content .services li:first-child { width: 400px; height: 880px; overflow: hidden; }

}

@media only screen and (max-width: 1080px) {

    .about .content {
        grid-row-gap: 40px;
        row-gap: 40px;
        grid-template-rows: auto;
        grid-template-columns: auto;
        grid-template-areas:
            "services"
            "mission"
            "founded"
            "process"
            "people"
    }

    .about .content .services ul { flex-flow: row wrap; width: 512px; gap: 32px; height: auto; }
    .about .content .services li:first-child { width: 512px; height: auto; }

    .about .content .people ul { display: block; }
    .about .content .people li { width: auto; margin-bottom: 2em; }
    .about .content .people img { margin: 0 0 1em; }

}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1000px), only screen and (min-resolution: 192dpi) and (max-width: 1000px) {
    .about .content {
        background: #fff;
        padding-left: 20px;
        grid-template-rows: auto;
        grid-template-columns: auto;
        grid-template-areas:
            "mission"
            "founded"
            "people"
            "process"
            "services"
    }
    .about .content div {
        margin: 2em 2em 2em 5em;
    }
    .about .content h4 {
        margin: 0 auto -200px -2.5em;
    }

}

/* CONTACT */
    .contact .content {
        margin-left: 74px;
        grid-template-rows: auto;
        grid-template-columns: 192px 302px 16px auto;
        grid-template-areas:
            "head  head  . map"
            "links links . map"
            "first last  . map"
            "email email . map"
            "message message . map"
            "button button . map";
        grid-gap: 24px;
        gap: 24px;
    }
    .contact .content .head { grid-area: head; }
    .contact .content .links { grid-area: links; }
    .contact .content .first-name { grid-area: first; }
    .contact .content .last-name { grid-area: last; }
    .contact .content .email-address { grid-area: email; }
    .contact .content .message { grid-area: message; }
    .contact .content .send { grid-area: button; }
    .contact .content .map { grid-area: map; align-self: end; }
    .contact .content .map img { display: block; }

    .contact .links a {
        display: block;
    }
    .contact .links span {
        display: inline-block;
        padding-right: 1ex;
        min-width: 6ex;
    }

    .contact .content p {
        margin-bottom: 20px;
    }
@media only screen and (max-width: 1080px) {
    .contact .content {
        grid-template-columns: 192px 302px;
        grid-template-areas:
            "head  head"
            "links links"
            "map   map"
            " .     . "
            "first last"
            "email email"
            "message message"
            "button button";
    }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1000px), only screen and (min-resolution: 192dpi) and (max-width: 1000px) {
    .contact .content {
        margin: 0 20px;
        grid-template-rows: auto;
        grid-template-columns: auto;
            grid-template-areas:
            "head"
            "links"
            "map"
            " . "
            "first"
            "last"
            "email"
            "message"
            "button";
        grid-gap: 24px;
        gap: 24px;
        background: none;
    }
    .contact .content .map img { display: none; }
    .contact .content .map {
        background: url('../img/office_location.png') no-repeat;
        width: 100%;
        padding-bottom: 100%;
        background-position: center center;
        background-size: contain;
    }
}

/* WORK */
    .work .content {
        margin: 0 80px;
        max-width: 1306px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-gap: 23px;
        gap: 23px;
    }

    .work .content h1  {
        grid-column: 1 / span 3;
        grid-row: 1 / 1;
    }

@media only screen and (max-width: 1066px) {
    .work .content {
        grid-template-columns: 1fr 1fr;
    }
    .work .content h1  {
        grid-column: 1 / span 2;
        grid-row: 1 / 1;
    }
}
@media only screen and (max-width: 800px) {
    .work .content {
        margin: 0 auto;
        max-width: 420px;
        grid-template-columns: 1fr;
    }
    .work .content h1  {
        grid-column: 1 / 1;
        grid-row: 1 / 1;
    }
}

    .detail .content {
        margin-top: -80px;
        grid-template-columns: 38px 710px 38px 66px 296px 106px;
        grid-column-gap: 16px;
        column-gap: 16px;
        grid-template-rows: 180px auto 1fr auto;
        grid-template-areas:
            "prev photo next . . ."
            "prev photo next . title title"
            "prev photo next . desc desc"
            "project-nav project-nav project-nav project-nav project-nav project-nav"
    }
    .detail .content .photo {
        z-index: 11;
        grid-area: photo;
        margin-top: 28px;
        padding-bottom: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        position: relative;
    }
    .detail .content .prev-photo {
        z-index: 12;
        grid-area: prev;
        align-self: center;
    }
    .detail .content .next-photo {
        z-index: 12;
        grid-area: next;
        align-self: center;
    }
    .detail .content .project-nav {
        grid-area: project-nav;

        position: relative;
        margin: 40px 80px;
    }
    .project-nav img {
        vertical-align: middle;
    }
    .project-nav .prev-link, .project-nav .next-link {
        position: absolute;
        top: 0;
        cursor: pointer;
        border: 2px solid #b4b4b4;
    }
    .project-nav .prev-link {
        left: 0;
    }
    .project-nav .next-link {
        right: 0;
    }
    .project-nav .nav-disabled {
        border-color: #fff;
        cursor: auto;
    }
    .detail .project-links {
        margin: 0 102px;
        text-align: center;
    }

    .detail .content .title { grid-area: title; padding-bottom: 40pt; }
    .detail .content .title .year, .detail .content .title .location {
        display: inline-block;
        font-weight: 700;
        padding-right: 30px;
        text-transform: uppercase;
    }
    .detail .content .desc { grid-area: desc; }

    .detail .project-links a {
        font-size: 32pt;
        display: inline-block;
        padding: 0 16pt;
        height: 62px;
        position: relative;
        text-align: center;
    }
    .detail .project-links a .id {
        font-size: 24pt;
    }
    .detail .project-links a .prefix {
        font-size: 10pt;
        position: absolute;
        bottom: -4pt;
        left: 8pt;
        text-transform: uppercase;
        display: none;
    }

    .current-0 .link-0,
    .current-1 .link-1,
    .current-2 .link-2,
    .current-3 .link-3,
    .current-4 .link-4,
    .current-5 .link-5,
    .current-6 .link-6,
    .current-7 .link-7,
    .current-8 .link-8,
    .current-9 .link-9 {
        font-weight: 700;
        margin-right: 128px;
    }

    .current-0 .link-0 .prefix,
    .current-1 .link-1 .prefix,
    .current-2 .link-2 .prefix,
    .current-3 .link-3 .prefix,
    .current-4 .link-4 .prefix,
    .current-5 .link-5 .prefix,
    .current-6 .link-6 .prefix,
    .current-7 .link-7 .prefix,
    .current-8 .link-8 .prefix,
    .current-9 .link-9 .prefix {
        font-weight: 700;
        margin-right: 128px;
        display: block !important;
    }

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1000px), only screen and (min-resolution: 192dpi) and (max-width: 1000px) {
    .detail .content {
        margin: 0;
        grid-template-columns: 8px auto 8px;
        grid-column-gap: 0;
        column-gap: 0;
        grid-template-rows: auto;
        grid-template-areas:
            "prev photo next"
            ". title ."
            ". desc ."
            "project-nav project-nav project-nav";
    }
    .attribution {
        font-size: 8pt;
    }
    .detail .content .photo {
        margin-top: 0;
    }
    .detail .content .next-photo {
        margin-left: -30px;
    }
    .detail .content .prev-photo {
        margin-right: -30px;
    }
    .detail .content .project-nav {
        margin: 24pt 0;
    }
    .project-nav .prev-link, .project-nav .next-link {
        display: none;
    }
    .detail .project-links {
        margin: 0 0;
        text-align: center;
    }
    .current-0 .link-0,
    .current-1 .link-1,
    .current-2 .link-2,
    .current-3 .link-3,
    .current-4 .link-4,
    .current-5 .link-5,
    .current-6 .link-6,
    .current-7 .link-7,
    .current-8 .link-8,
    .current-9 .link-9 {
        font-weight: 700;
        margin-right: 0;
    }


}