@charset "UTF-8";

/* =====================================================
   
   Custom properties

   ===================================================== */

:root {
    --bg: rgb(4 4 4); /* background */
    --fg: rgb(245 245 245); /* foreground */



    --bg: rgb(255 245 245); /* background */
    --fg: rgb(16 16 16); /* foreground */



    --bu: 0.975vw; /* base unit */

    --op: 15px; /* outer padding */
}

        @media (max-width: 1023px) {

            :root {
                --bu: calc(23px / 2);

                --op: 5px;
            }

        }


/* =====================================================
   
   Typography

   ===================================================== */

@font-face {
    font-family: 'authenticsans-90';
    src: url('authenticsans/AUTHENTICSans-90.woff2') format('woff2'),
         url('authenticsans/AUTHENTICSans-90.woff') format('woff'),
         url('authenticsans/AUTHENTICSans-90.otf') format('opentype');
}

html, body {
    background: var(--bg);
    color: var(--fg);
    font-family: 'authenticsans-90', Helvetica, Arial, sans-serif;
    font-size: 0;
    line-height: 0;
}

a,
.is-link {
    color: var(--fg);
    cursor: pointer;
    text-decoration: underline;
}

a:hover,
.is-link:hover {
    text-decoration: none;
}

hr {
    background: var(--fg);
    border: none;
    height: 1px;
    margin: 1.2em 0;
    padding: 0;
}

.txt-xl {
    font-size: 4.25vw;
    line-height: calc(var(--bu) * 5);
    font-family: 'authenticsans-90', Helvetica, Arial, sans-serif;
}

.txt-l {
    font-size: 2.25vw;
    line-height: calc(var(--bu) * 3);
    font-family: 'authenticsans-90', Helvetica, Arial, sans-serif;
}

.txt-m {
    font-size: 1.5vw;
    line-height: calc(var(--bu) * 2);
}

.txt-s {}

.txt-xs {
    font-size: 13px;
    line-height: 16px;
}

.txt-s-mono {
    font-family: Monaco, monospace;
    font-size: 0.85vw;
    line-height: 1.59375;
}

        @media (max-width: 1023px) {
         
             .txt-xl,
            .txt-l,
            .txt-m {
                font-size: 19px;
                line-height: 23px;
            }

            .txt-s-mono {
                font-size: 14px;
                line-height: 23px;
            }
        }


/* =====================================================
   
   lazyload

   ===================================================== */

img.lazyload {
    filter: blur(20px);
}


/* =====================================================
   
   Layout

   ===================================================== */

.container {}

.content {
    margin: 0 var(--op);
}

        @media (max-width: 1023px) {

            .content {
                margin: 0;
            }

        }

.header-main {
    height: calc(1.3 * 1.5vw + var(--op));
    left: 0;
    padding: var(--op);
    padding-bottom: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999;
}

        @media (max-width: 1023px) {

            .header-main {
                background: var(--bg);
                height: auto;
                left: 0;
                padding: var(--op);
                top: 0;
                width: 100%;
            }

            .header-main .inner {
                display: flex;
                justify-content: space-between;
            }

        }

.header-main * {
    color: var(--fg);
    pointer-events: all;
}

.header-main .logo {
    left: 0;
    padding: var(--op);
    position: fixed;
    top: 0;
    z-index: 1;
}

.header-main .logo a {
    display: inline-block;
}

.header-main .title {
    left: 18vw;
    position: fixed;
}

.header-main .link-about {
    position: fixed;
    left: 87vw;
}

.header-main .link-contact {
    position: fixed;
    right: var(--op);
    text-decoration: underline;
}

.header-main .link-contact:hover {
    cursor: pointer;
    text-decoration: none;
}

.header-main {
    text-align: center;
}

.header-main .link-work {
    margin: -0.5vw 0 0 0;
    opacity: 1;
}

        @media (max-width: 1023px) {

            .header-main .logo,
            .header-main .title,
            .header-main .link-about,
            .header-main .link-contact {
                position: static;
                text-align: left;
                width: auto;
            }

            .header-main .logo {
                padding: 0;
            }

            .header-main nav {
                display: flex;
            }

            .header-main .link-contact {
                margin-left: 10px;
            }    

            .header-main .link-work {
                display: none;
            }

        }

.content {
    padding-top: var(--op);
}

.content .header-content {
    position: relative;
    width: 81vw;
    z-index: 2;
}

.content .header-content .text {
    color: var(--fg);
    display: block;
    margin-left: calc(18vw - var(--op));
    margin-top: calc(var(--bu) * 2);
}

.content .header-content .text a {
    color: var(--fg);
    display: inline-block;
}

.content .header-content .text div,
.content .header-content-repeated div {
    display: inline;
}

        @media (max-width: 1023px) {

            .content .header-content .text {
                padding: var(--op);
            }

        }


/* =====================================================

   page-template-frontpage

   ===================================================== */

/*body.page-template-frontpage .header-main:hover {
    background: var(--bg);
}*/

/*body.page-template-frontpage .header-main:hover::after {
    background: linear-gradient(180deg, var(--bg), transparent);
    content: ' ';
    display: block;
    height: var(--op);
    left: 0;
    position: absolute;
    top: 100%;
    width: 100%;
}*/

/*body.page-template-frontpage h1 a,
body.page-template-frontpage .link-work {
    color: var(--fg);
    pointer-events: none;
    text-decoration: none;
}*/

body.page-template-frontpage h1 a {
    color: #5403e4;
    pointer-events: none;
    text-decoration: none;
}

body.page-template-frontpage .link-work {
    display: none;
}

body.page-template-frontpage .content {
    /*padding-top: calc(var(--op) + 9 * var(--bu));*/
    padding-top: calc(var(--op) + 7 * var(--bu))
}

body.page-template-frontpage .projects {
    margin: calc(-1 * var(--op)) calc(-1 * var(--op)) 0 calc(-1 * var(--op));
}

        @media (max-width: 1023px) {

            body.page-template-frontpage .content {
                padding-top: calc(2 * var(--op) + 23px);
            }

            body.page-template-frontpage .projects {
                margin: 0;
            }

        }

body.page-template-frontpage .tags {
    display: none;
}

body.page-template-frontpage .projects .project {
    display: none;
}

body.page-template-frontpage .projects .project.is-current-tag {
    display: block;
    padding-bottom: calc(4 * var(--bu));
}

        @media (max-width: 1023px) {

            body.page-template-frontpage .projects .project.is-current-tag {
                padding-bottom: 0;
            }

        }

body.page-template-frontpage .projects .project a {
    display: block;
    position: relative;
    text-decoration: none;
}

body.page-template-frontpage .projects .project .inner {
    display: grid;
    position: relative;
}

body.page-template-frontpage .projects .project .col {
    display: flex;
    overflow: hidden;
    position: relative;
}

body.page-template-frontpage .projects .project .caption {
    order: 1;
}

        @media (min-width: 1024px) {

            body.page-template-frontpage .projects .project .caption {
                display: block;
                padding: var(--bu) 0 0 var(--op);
                width: 50%;
            }

            body.page-template-frontpage .projects .project .caption::before {
                left: var(--op);
                top: auto;
            }

            body.page-template-frontpage .projects .project .caption h3 {
                text-indent: var(--op);
            }

        }

        @media (max-width: 1023px) {

            body.page-template-frontpage .projects .project .col {
                display: block;
            }

            body.page-template-frontpage .projects .project .caption {
                font-size: 13px;
                line-height: 16px;
                text-indent: 0;
                width: 100%;
            }

            body.page-template-frontpage .projects .project .caption h3 {
                text-indent: 15px;
            }

            body.page-template-frontpage .projects .project .caption h3::after {
                display: none;
            }

        }

body.page-template-frontpage .projects .project img {
    height: 100vh;
    width: auto;
}

body.page-template-frontpage .projects .project img.ar-bigger {
    height: auto;
    width: 100%; 
}

body.page-template-frontpage .projects .project:first-of-type {
    width: 50%;
}

body.page-template-frontpage .projects .project:first-of-type .caption {
    width: 100%;
}

body.page-template-frontpage .projects .project:first-of-type img {
    height: auto;
    width: 100%;
}

        @media (max-width: 1023px) {

            body.page-template-frontpage .projects .project:first-of-type {
                width: 100%;
            }

            body.page-template-frontpage .projects .project img {
                height: auto;
                width: 100%;
            }

        }

body.page-template-frontpage .projects .project .text-preview {
    color: red;
    padding-left: var(--op);
    width: calc(75vw - var(--op));
}

body.page-template-frontpage .projects .project.tagged-essay a .text-preview {
    text-decoration: underline;
}

        @media (max-width: 1023px) {

            body.page-template-frontpage .projects .project .text-preview {
                border-bottom: 1px solid var(--fg);
                border-top: 1px solid var(--fg);
                padding: calc(2 * var(--op));
                width: 100%;
            }

        }

        /* mode-grid ============================== */


        @media (min-width: 1024px) {

            body.page-template-frontpage .view-mode-switch {
                padding: var(--op);
                position: fixed;
                right: 0;
                top: 50%;
                transform: translateY(-25%);
                width: calc(26px + calc(2 * var(--op)));
                z-index: 999999;
            }

            body.page-template-frontpage .view-mode-switch .btn {
                border-bottom: 2px solid var(--fg);
                border-right: 2px solid var(--fg);
                cursor: pointer;
                display: grid;
            }

            body.page-template-frontpage:not(.is-mode-grid) .view-mode-switch .btn-rows,
            body.page-template-frontpage.is-mode-grid .view-mode-switch .btn-grid {
                pointer-events: none;
            }

            body.page-template-frontpage.is-mode-grid .view-mode-switch .btn-rows,
            body.page-template-frontpage:not(.is-mode-grid) .view-mode-switch .btn-grid {
                opacity: 0.45;
            }

            body.page-template-frontpage .view-mode-switch .btn:hover {
                opacity: 1;
            }

            body.page-template-frontpage .view-mode-switch .btn div {
                border-left: 2px solid var(--fg);
                border-top: 2px solid var(--fg);
            }

            body.page-template-frontpage .view-mode-switch .btn-rows div {
                height: 1vw;
                width: 100%;
            }

            body.page-template-frontpage .view-mode-switch .btn-grid {
                grid-template-columns: 1fr 1fr 1fr;
                margin-top: 1vw;
            }

            body.page-template-frontpage .view-mode-switch .btn-grid div {
                height: 8px;
            }

            body.page-template-frontpage.is-mode-grid .header-main {
                background: transparent;
            }

            body.page-template-frontpage.is-mode-grid .header-main::after {
                display: none;
            }

            body.page-template-frontpage.is-mode-grid .header-main .logo {
                bottom: 0;
                top: auto;
            }

            body.page-template-frontpage.is-mode-grid .header-main .link-work {
                display: none;
            }

            body.page-template-frontpage.is-mode-grid .content {
                padding-top: 0;
            }

            body.page-template-frontpage.is-mode-grid .tags {
                background: var(--bg);
                box-shadow: 0 0.5vw 0.5vw var(--bg);
                display: block;
                margin: calc(-1 * var(--op));
                padding-bottom: 0;
                padding-left: var(--op);
                padding-right: 17vw;
                padding-top: var(--op);
                position: sticky;
                top: 0;
                width: calc(100% + 2 * var(--op));
                z-index: 99999;
            }

            body.page-template-frontpage.is-mode-grid .tags .tag-topic {
                display: inline-block;
            }

            body.page-template-frontpage.is-mode-grid .projects {
                margin-top: calc(6 * var(--bu));
                position: relative;
                width: 100vw;
            }

            body.page-template-frontpage.is-mode-grid .projects .project {
                padding-bottom: calc(2 * var(--bu));
                width: 24vw;
            }

            body.page-template-frontpage.is-mode-grid .projects .project.has-square-img {
                width: 20vw;
            }

            body.page-template-frontpage.is-mode-grid .projects .project.has-portrait-img {
                width: 18vw;
            }

            body.page-template-frontpage.is-mode-grid .projects .project a:hover::before {
                background: #ff5722;
                border-radius: 100%;
                bottom: auto;
                box-shadow: none;
                content: ' ';
                display: block;
                height: 100%;
                left: 0;
                mix-blend-mode: difference;
                pointer-events: none;
                position: absolute;
                top: 0;
                transform: none;
                width: 100%;
                z-index: 99999;
            }

            body.page-template-frontpage.is-mode-grid .projects .project .inner {
                grid-template-columns: 1fr;
            }

            body.page-template-frontpage.is-mode-grid .projects .project .inner .col {
                display: block;
                overflow: visible;
            }

            body.page-template-frontpage.is-mode-grid .projects .project img {
                height: auto;
                width: 100%;
            }

            body.page-template-frontpage.is-mode-grid .projects .caption {
                padding-left: var(--op);
                padding-right: var(--op);
                width: 100%;
            }

            body.page-template-frontpage.is-mode-grid .projects .project .caption::before {
                left: var(--op);
            }

            body.page-template-frontpage.is-mode-grid .projects .project .text-preview {
                color: var(--fg);
                padding-top: 0;
                width: 100%;
            }

            body.page-template-frontpage.is-mode-grid .projects .project.tagged-essay .caption {
                /*padding-bottom: 0;*/
            }

        }


/* =====================================================
   
   single-piece

   ===================================================== */

body.single-piece .header-main .title {
    color: var(--fg);
    left: var(--op);

    text-align: center;
    width: calc(100% - calc(2 * var(--op)));
}

        @media (max-width: 1023px) {

            body.single-piece .header-main .title {
                display: none;
            }
        }

body.single-piece .header-content .text {
    height: calc(7 * var(--bu));
    margin-left: calc(25vw - var(--op));
    text-align: center;
    width: calc(50vw - var(--op));
}

body.single-piece .header-content .text .title {
    display: none;
}

        @media (min-width: 1024px) {

            body.single-piece .header-content {
                position: absolute;
            }
        }

        @media (max-width: 1023px) {

            body.single-piece .header-content {
                position: static;
                width: auto;
            }

            body.single-piece .header-content .text {
                height: auto;
                margin: 0;
                padding: calc(2.4em + 1vw) 1vw 1.2em;
                text-align: left;
                width: auto;
            }

            body.single-piece .header-content .text .title {
                display: block;
                padding-bottom: 1.2em;
            }

        }

body.single-piece .header-content .text .collaborators .join:last-of-type,
body.single-piece .header-content-repeated .collaborators .join:last-of-type {
    display: none;
}

body.single-piece .content .wrapper .images {
    margin: 0 calc(-1 * var(--op));
    margin-top: calc(-1 * var(--op));
}

        @media (max-width: 1023px) {

            body.single-piece .content .wrapper .images {
                margin: 0;
            }

        }

body.single-piece .content .wrapper .image.two-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

        @media (max-width: 1023px) {

            body.single-piece .content .wrapper .image.two-images {
                display: block;
            }

        }

body.single-piece .content .wrapper .image .inner {
    position: relative;
}

body.single-piece .content .wrapper .image .inner {
    overflow: hidden;
}

body.single-piece .content .wrapper .image img {
    cursor: pointer;
    height: auto;
    width: 100%;
}

body.single-piece .content .wrapper .image img.is-square,
body.single-piece .content .wrapper .image img.is-portrait {
    width: 50%;
}

body.single-piece.is-fullscreen-mode .content .wrapper .image img.ar-smaller {
    height: 100vh;
    width: auto; 
}

/*body.single-piece .content .wrapper .image.two-images img,*/
/*body.single-piece.is-fullscreen-mode .content .wrapper .image.two-images img,
body.single-piece.is-fullscreen-mode .content .wrapper .image.two-images img.ar-bigger,
body.single-piece.is-fullscreen-mode .content .wrapper .image.two-images img.ar-smaller {*/
body.single-piece .content .wrapper .image.two-images img,
body.single-piece .content .wrapper .image.two-images img.ar-bigger,
body.single-piece .content .wrapper .image.two-images img.ar-smaller {
    height: auto;
    width: 100%;
}

        @media (max-width: 1023px) {

            body.single-piece .content .wrapper .image img,
            body.single-piece .content .wrapper .image img.ar-bigger,
            body.single-piece .content .wrapper .image img.ar-smaller {
                height: auto;
                width: 100%; 
            }

            body.single-piece .content .wrapper .image img.is-portrait {
                width: 100%;
            }

        }

body.single-piece .content .wrapper .video {
    max-height: 100vh;
    max-width: 100vw;
}

body.single-piece .content .wrapper .fitVids-wrapper {
    position: relative;
}

body.single-piece .content .wrapper .fitVids-wrapper iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

body.single-piece .content .caption {
    padding: calc(0.5 * var(--bu)) var(--op);
    text-indent: 15px;
}

body.single-piece .content .caption::before {
    left: var(--op);
    top: calc(0.35 * var(--bu));
}

body.single-piece .content .statement {
    padding-right: 6vw;
}

        @media (max-width: 1023px) {

            body.single-piece .content .statement {
                padding: 1vw;
            }

        }

body.single-piece .content .statement .bumper {
    background: var(--bg);
    box-shadow: 0 var(--op) var(--op) var(--bg);
    height: calc(2 * var(--bu) + var(--op));
    position: sticky;
    top: 0;
}

        @media (max-width: 1023px) {

            body.single-piece .content .statement .bumper {
                display: none;
            }

        }

body.single-piece .content .wrapper .statement p,
body.single-piece .content .wrapper .statement .is-p {
    display: block;
    padding-bottom: 1.8vw;
}

        @media (max-width: 1023px) {

            body.single-piece .content .wrapper .statement p,
            body.single-piece .content .wrapper .statement .is-p {
                padding-bottom: 23px;
            }

        }

/*body.single-piece .content .wrapper .statement p:first-of-type {*/
body.single-piece .content .wrapper .statement .header-content-repeated {
    padding-top: 30px;
    /*text-indent: 21.5vw;*/
}

body.single-piece .content .statement a {
    color: var(--fg);
}

body.single-piece .content .statement em {
    font-style: italic;
}

body.single-piece .meta {
    display: grid;
    grid-column-gap: var(--op);
    grid-template-columns: 1fr 1fr;
    margin: 5.4vw calc(-1 * var(--op)) 0 calc(-1 * var(--op));
    overflow: hidden;
    padding: 7.2vw var(--op) 0 var(--op);
    position: relative;
}

body.single-piece .meta h3 {
    padding-bottom: 1.8vw;
}

body.single-piece .meta .related-projects,
body.single-piece .meta .tagged {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

body.single-piece .meta .related-projects {
    align-self: end;
}

body.single-piece .meta .related-projects article {
    display: grid;
    grid-column-gap: var(--op);
    grid-template-columns: 1fr 3fr;
}

body.single-piece .meta .related-projects article a:last-child {
    align-self: end;
    color: var(--fg);
    font-size: 1.1vw;
    padding-bottom: 1vw;
}

body.single-piece .meta .related-projects article img {
    height: auto;
    margin-left: calc(-1 * var(--op));
    width: calc(100% + var(--op));
}

body.single-piece .meta .tagged {
    padding-bottom: 1vw;
    padding-right: 3vw;
}

body.single-piece .meta .tagged li[data-slug="selected-works"] {
    display: none;
}

        @media (max-width: 1023px) {

            body.single-piece .meta {
                display: block;
                margin: 0;
                padding: 40px 1vw 0;
            }

            body.single-piece .meta h3 {
                padding-bottom: 1.2em;
                padding-top: 2.4em;
            }

            body.single-piece .meta .related-projects article {
                grid-column-gap: 1vw;
                grid-template-columns: 1fr 1fr;
            }

            body.single-piece .meta .related-projects article a:last-child {
                font-size: 13px;
                line-height: 16px;
                padding-bottom: 0;
            }

            body.single-piece .meta .related-projects article img {
                margin-left: -1vw;
                width: calc(100% + 1vw);
            }

        }

body.single-piece.is-mode-images .header-main *,
body.single-piece.is-mode-images .header-content {
    visibility: hidden;
}

body.single-piece.is-mode-images .header-main h1.title {
    visibility: visible;
}

body.single-piece.is-mode-images .content .statement {
    display: none;
}

body.single-piece.is-mode-images .content .wrapper .image img {
    height: auto;
    max-height: none;
    max-width: none;
    width: 100%;
}


/* =====================================================

   single-post

   ===================================================== */

body.single-post .title {
    color: blue;
}

body.single-post .header-main .title {
    left: 50%;
    transform: translateX(-50%);
}

body.single-post .header-main .link-work {
    display: none;
}

        @media (max-width: 1023px) {

            body.single-post .header-main .title {
                display: none;
            }

        }

body.single-post .content .text {
    margin: 0 auto;
    padding-top: calc(10 * var(--bu));
    width: 49vw;
}

body.single-post .content .text {
    color: red;
}

body.single-post .content .text .title {
    display: none;
}

        @media (max-width: 1023px) {

            body.single-post .content .text {
                padding: calc(4 * var(--bu) + var(--op)) var(--op);
                width: 100%;
            }

            body.single-post .content .text .title {
                display: block;
                padding: var(--bu) 0 calc(4 * var(--bu)) 0;
            }

        }

body.single-post .content .text .bumper {
    background: var(--bg);
    box-shadow: 0 20px 20px var(--bg);
    height: calc(2.3vw + 1vw);
    left: -3vw;
    position: fixed;
    top: 0;
    width: 80vw;
}

body.single-post .content .text h2 {
    /*color: red;*/
    /*color:  var(--fg);*/
    padding-bottom: calc(2 * var(--bu));
    padding-top: calc(2 * var(--bu));
    text-align: center;
}

body.single-post .content .text p {
    padding-bottom: calc(2 * var(--bu));
}

body.single-post .content .text > p:first-of-type {
    text-indent: 21.5vw;
}

        @media (max-width: 1023px) {

            body.single-post .content .text > p:first-of-type {
                text-indent: 0;
            }

        }

body.single-post .content .text a {
    color: var(--fg);
    color: red;
}

body.single-post .content .text em {
    font-style: italic;
}

body.single-post .content .text blockquote {
    padding-bottom: calc(2 * var(--bu));
}

body.single-post .content .text blockquote p {
    border-left: 2px solid;
    font-style: italic;
    padding: 0 0 0 var(--op);
}

        @media (max-width: 1023px) {

            body.single-post .content .text blockquote p {
                padding: 0 0 0 var(--op);
            }

        }

body.single-post .content .text img {
    height: auto;
    margin-left: calc(-1 * var(--op));
    width: calc(100% + calc(2 * var(--op)));
}

body.single-post .content .wrapper .fitVids-wrapper {
    height: 0 !important;
    padding-top: 56.25% !important;
    position: relative;
    width: 100% !important;


    margin-left: calc(-1 * var(--op));
    width: calc(100% + calc(2 * var(--op))) !important;
}

body.single-post .content .wrapper .fitVids-wrapper iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

body.single-post .content .text hr {
    margin-left: calc(-1 * var(--op));
    width: calc(100% + calc(2 * var(--op)));
}


/* =====================================================

   page-template-info

   ===================================================== */

body.page-template-info .header-main .link-about {
    color: blue;
    left: 50%;
    pointer-events: none;
    text-decoration: none;
    transform: translateX(-50%);
}

        @media (max-width: 1023px) {

            body.page-template-info .header-main .link-about {
                transform: none;
            }

        }

body.page-template-info .header-main .logo,
body.page-template-info .header-content .logo {
    margin-right: 0.65vw;
}

body.page-template-info .content {
    padding-bottom: 3.6vw;
}

body.page-template-info .content .header-content {
    width: 93vw;
}

body.page-template-info .content .header-content .text {
    color: var(--fg);
    margin-left: 0;
    margin-top: calc(8 * var(--bu));
}

        @media (max-width: 1023px) {

            body.page-template-info .content .header-content {
                width: 100%;
            }

            body.page-template-info .content .header-content .text {
                margin-top: calc(5 * var(--bu));
            }

        }

body.page-template-info .content .header-content .text p {
    padding-bottom: 1.2em;
}

body.page-template-info .content .header-content .text a {
    color: var(--fg);
}

body.page-template-info .content .section-nav {
    background: var(--bg);
    box-shadow: 0 20px 20px var(--bg);
    margin-bottom: calc(4 * var(--bu));
    padding: calc(4 * var(--bu)) 0 var(--bu) 0;
    position: sticky;
    top: 0;
    z-index: 2;
}

body.page-template-info .content .section-nav ul {
    border-bottom: 1px solid red;
    border-top: 1px solid red;
    display: flex;
    justify-content: space-between;
    padding: var(--bu) 0;


/*    display: grid;
    grid-template-columns: repeat(8, 1fr);*/
}

body.page-template-info .content .section-nav ul li {
    color: #000;
    cursor: pointer;
    text-decoration: underline;
}

body.page-template-info .content .section-nav ul li:hover,
body.page-template-info .content .section-nav ul li.is-selected {
    text-decoration: none;
}

body.page-template-info .content .section-nav ul li.is-selected {
    color: #ff5722;
}

        @media (max-width: 1023px) {

            body.page-template-info .content .section-nav,
            body.page-template-info .content .section-nav::before {
                display: none;
            }

            body.page-template-info .content .section-nav ul {
                align-items: center;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            body.page-template-info .content .section-nav ul li {
                color: var(--fg);
            }

        }

body.page-template-info .content .cv-table h2 {
    color: var(--fg);
    padding: calc(2 * var(--bu)) 0 calc(2 * var(--bu)) 8vw;
}

body.page-template-info .content .cv-table h3 {
    position: absolute;
    z-index: 1;
}

        @media (max-width: 1023px) {

            body.page-template-info .content .cv-table {
                padding: 0 1vw;
            }

            body.page-template-info .content .cv-table h2 {
                padding: 1.2em 0;
            }

            body.page-template-info .content .cv-table h3 {
                position: static;
            }

        }

body.page-template-info .content .cv-table li {
    padding-left: 8vw;
    position: relative;
}

body.page-template-info .content .cv-table li::before {
    content: '–';
    left: 5.25vw;
    position: absolute;
}

        @media (max-width: 1023px) {

            body.page-template-info .content .cv-table li {
                padding-left: 25px;
            }

            body.page-template-info .content .cv-table li::before {
                left: 1vw;
            }

        }

body.page-template-info .content .cv-table .no-dashes li::before {
    display: none;
}

body.page-template-info .content .cv-table a {
    color: var(--fg);
}

body.page-template-info .content .cv-table a:hover {
    color: var(--fg);
}

body.page-template-info .content .cv-table .note {
    background: var(--fg);
    border-radius: 4px;
    color: var(--bg);
    font-size: 13px;
    line-height: 1em;
    padding: 2px;
    vertical-align: top;
}


/* =====================================================
   
   tags

   ===================================================== */

.tags {
/*    display: inline-flex;
    flex-wrap: wrap;*/
}

.tag {
    border: 2px solid;
    border-radius: 2vw;
    cursor: pointer;
    display: inline-block;
    margin: 0 -2px 5px 0;
    opacity: 0.5;
    padding: 0.2vw 0.7vw 0;
    text-decoration: none;
    white-space: nowrap;
}

.tag:hover,
.tag.is-selected {
    border-color: var(--fg);
    color: var(--fg);
    opacity: 1;
}

.tags .tag-topic {
    display: none;
}

.tags.has-topics .tag-topic,
.show-all-tags .tags .tag-topic {
    display: inline-block;
}

        @media (max-width: 1023px) {

            .tags {
                box-shadow: none;
                margin: 0;
            }

            .tags .tag-topic {
                display: inline-block;
            }

            .tag {
                border-radius: 20px;
                line-height: 28px;
                padding: 3px 5px;
            }
        }


/* =====================================================

   caption

   ===================================================== */


.caption {
    /*padding: calc(0.5 * var(--op)) calc(var(--op) + 12px) calc(0.5 * var(--op));*/
    position: relative;
}

.caption a {
    color: var(--fg);
}

.caption::before {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 8px solid var(--fg);
    content: '';
    display: block;
    height: 0;
    left: var(--op);
    position: absolute;
    /*top: calc(0.5 * var(--op) - 1px);*/
    width: 0;
}

        @media (max-width: 1023px) {

            .caption {
                padding: 5px;
                text-indent: 15px;
            }

            .caption::before {
                left: 4px;
                top: 3px;
            }
        }


/* =====================================================

   inline-page

   ===================================================== */

.inline-page {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: 0.3s;
    transform: scale(0);
    visibility: hidden;
    width: 100%;
    z-index: 9999999;
}

.inline-page .btn-close {
    cursor: pointer;
    height: 100vh;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.inline-page .inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    position: relative;
    text-align: center;
    z-index: 2;
}


/* =====================================================

   inline-page-contact

   ===================================================== */

.inline-page-contact .inner {
    background: #fff;
    border-radius: 100%;
    height: 100vh;
    width: 100%;
}

.inline-page-contact .headline {
    color: var(--fg);
}

.inline-page-contact p {
    padding-bottom: var(--bu);
}

.inline-page-contact span,
.inline-page-contact a,
.inline-page-contact div {
    color: var(--fg);
}

body.has-inline-page-contact .inline-page-contact {
    pointer-events: all;
    transform: scale(1);
    visibility: visible;
}

body.has-inline-page-contact .header-main .link-contact {
    pointer-events: none;
    text-decoration: none;
}


/* =====================================================

   inline-page-newsletter

   ===================================================== */

.inline-page-newsletter {}

.inline-page-newsletter .inner {
    background: var(--fg);
    border-radius: 100%;
    color: var(--bg);
    height: 100vh;
    padding: 3vw;
    width: 100vh;
}

.inline-page-newsletter .inner form input[type=text],
.inline-page-newsletter .inner form input[type=submit] {
    background: var(--bg);
    border: none;
    border-radius: 0.5vw;
    box-sizing: border-box;
    margin-top: 0.5vw;
    padding: 3px;
    text-align: center;
    width: 100%;
}

.inline-page-newsletter .inner form input[type=submit] {
    background: blue;
    color: var(--bg);
    cursor: pointer;
    width: auto;
}

body.has-inline-page-newsletter .inline-page-newsletter {
    pointer-events: all;
    transform: scale(1);
    visibility: visible;
}

    body.has-inline-page-newsletter .inline-page-contact {
        pointer-events: none;
        transform: scale(0);
    }

body.has-inline-page-newsletter .header-main .link-newsletter {
    pointer-events: none;
    text-decoration: none;
}