* {padding: 0; margin: 0; font-weight: normal;}
html {font-size: 18px; overflow-x: hidden; overflow-y: scroll;}
html, body {height: 100%;}
body {font-family: 'HelveticaNeue-Light'; color: black; font-size: 0.95rem; line-height: 1.5;}
img {width: 100%;}
.innerbody {display: flex; position: relative; min-height: 100vh;}
body.home {background: #fff;}
div.page {margin: auto; padding: 6rem 4vw 5rem;}
.contact div.page {margin: auto; padding: 6rem 4vw 8rem;}
.projects.ispage .innerbody > div.page {padding: 0; width: 100%; height: 100vh; display: flex;}
.projects.ispage div.page.image {margin: 12rem; padding: 0; height: calc(100% - 24rem); width: calc(100% - 24rem);}
.projects.ispage div.page.image img {display: none;}
.projects.ispage div.page div.page {display: none;}
.projects.ispage div.page div.page.current {display: block;}
.projects.ispage div.page .prevpage {position: fixed; left: 0; top: 0; width: 50%; height: 100%; cursor: w-resize; z-index: 9;}
.projects.ispage div.page .nextpage {position: fixed; left: 50%; top: 0; width: 50%; height: 100%; cursor: e-resize; z-index: 9;}

.projects_old:not(.ispage) ul {width: 70rem; max-width: 92vw; grid-gap: 4rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));}
.projects_old:not(.ispage) ul li {display: flex; justify-content: center; align-items: center;}
.projects_old:not(.ispage) ul li a {display: block; margin: auto; position: relative; max-height: 100%; width: auto;}
.projects_old:not(.ispage) ul li a img {max-width: 100%; max-height: 100%; display: block;}
.projects_old:not(.ispage) ul li.portrait a img {height: 20rem; width: auto; margin: 0 auto;}
.projects_old:not(.ispage) ul li a .overlay {display: none; position: absolute; background: rgba(5, 28, 0, 0.5); width: 100%; height: 100%;}
.projects_old:not(.ispage) ul li a:hover .overlay {display: block;}
.projects_old:not(.ispage) ul li a .overlay span {display: block; color: white;}
.projects_old:not(.ispage) ul li a .overlay span:nth-child(1) {
    text-align: center; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    font-size: 7rem;
    font-family: 'HelveticaNeue-Bold';
}
.projects_old:not(.ispage) ul li a .overlay span:nth-child(2) {
    position: absolute; 
    bottom: 0.5rem;
    left: 0.5rem; 
    line-height: 1.2; 
    font-size: 0.75rem;
}

.home #logo {display: none;}
.home div.page {height: 100vh; width: 100%; padding: 0; display: flex; flex-direction: column; text-align: center; justify-content: center; color: white;}
.home h1 {font-family: 'HelveticaNeue-Bold'; font-size: 6.75rem; line-height: 0.92; padding: 0 3rem 0.8rem;}
.home p {font-size: 1.15rem;}
.home h1 a {color: white;}
.home h1 a::before {content: ""; position: fixed; left: 0; top: 0; width: 100%; height: 100%;}

a {color: black; text-decoration: none;}
li {list-style: none;}
.menu {font-size: 1.15rem;}
.menu {line-height: 2.25;}

.people h1, .people p, 
.people.ispage h1, .people.ispage p, 
.projects.ispage h1, .projects.ispage p, 
.post h1, .post p,
.detailswrapper > div > * {font-size: 0.95rem; line-height: 1.5; max-width: 40rem; margin: 0 auto;}
.people.ispage h1, .projects.ispage h1, .post h1, .people h1 {margin-bottom: 1.5em; font-family: 'HelveticaNeue-Bold';}
.people.ispage table {margin-bottom: 1.5em; border: 0;}
.people.ispage table td {vertical-align: top;}
.people.ispage table td:first-child {padding-right: 1rem;}

body.people .page, body.people.ispage .page, body .page.detailswrapper {padding-top: 8rem;}

.detailswrapper ul {padding-left: 1rem; max-width: 39rem;}
.detailswrapper li {list-style: disc; padding-left: 0.5rem;}
.detailswrapper a {position: relative; z-index: 90;}
.details {display: table; line-height: 1.5;}
dl {display: table-row;}
dt {padding-right: 2rem; display: table-cell; font-family: 'HelveticaNeue-Bold';}
dd {display: table-cell;}

body p, body.post p {margin-bottom: 1.5rem;}

strong, b {font-family: 'HelveticaNeue-Bold';}

#logo {position: fixed; left: 2.5rem; top: 2.25rem; font-family: 'HelveticaNeue-Bold'; font-size: 1.1rem; line-height: 1.4; z-index: 99;}

.caption {position: absolute; left: 50%; transform: translateX(-50%); bottom: 3rem; font-size: 0.95rem; font-size: 0.70rem; font-style: italic;}
#social {position: absolute; bottom: 2.3rem; left: 50%; transform: translateX(-50%);}
#social a {display: inline-block; margin: 0 0.2rem;}
#social img {width: 2rem;}
.language {position: absolute; right: 2.5rem; bottom: 2.3rem; font-size: 0.95rem; display: none;}
.language a {color: silver; display: inline-block; margin: 0 0 0 0.2rem}
.language a.current {color: black;}

.closelink {position: fixed; top: 2rem; right: 2rem; height: 0; width: 0; padding: 2rem 0 0 2rem; overflow: hidden; display: block; z-index: 99;}
.closelink::after, .closelink::before {content: ""; top: 3rem; right: 2.5rem; display: block; width: 1rem; height: 2px; background: #000; position: fixed; transform-origin: 50% 50%; transform: rotate(-45deg);}
.closelink::before { transform: rotate(45deg);}

.rarr {display: inline-block; position: relative; width: 1rem; min-width: 1rem; height: 1px; background: #000; bottom: 0.35rem; margin: 0 0.5rem 0 0.2rem;}
.rarr::after, .rarr::before {content: ""; bottom: 0px; right: 0; display: block; width: 0.3rem; height: 1px; background: #000; position: absolute; transform-origin: 92% 0%; transform: rotate(-45deg);}
.rarr::before {top: 0px; bottom: auto; transform: rotate(45deg); transform-origin: 92% 100%;}

.post .rarr {bottom: 0.27em; margin: 0 0.4rem 0 0.15rem;}
.posts .rarr {bottom: auto; top: 0.6rem;}

@media only screen and (max-width: 850px) {
    html {font-size: 13px;}
    .projects.ispage div.page div.page:first-child {margin-top: 6rem;}
    div.page {padding: 4rem 4vw 4rem;}
    .projects.ispage div.page.image {margin: 2.5rem 4vw 2.5rem; height: calc(100% - 8rem); width: calc(100% - 8vw);}
    #logo {position: fixed; left: 4vw; top: calc(2rem - 0.4rem); }
    #logo::before {content: ""; position: fixed; top: 0; left: 0; height: 4rem; width: 100%; background: transparent; z-index:-1;}
    .language {right: 4vw; bottom: calc(2rem - 0.4rem);}
    .closelink {top: 0.85rem; right: calc(4vw - 0.85rem); padding: 3rem 0 0 3rem;}
    .closelink::after, .closelink::before {top: calc(2rem + 0.3rem); right: 4vw; width: 1.2rem; height: 2px;}
    .rarr, .rarr::after, .rarr::before {height: 1px;}
    .projects.ispage .innerbody > div.page {height: auto; display: block;}
    .projects.ispage div.page div.page {display: block; position: relative;}
    .projects.ispage div.page.image {height: auto;}
    .caption {bottom: -1.3rem;}
    .projects.ispage div.page.image img {max-width: 100%; display: block;}
    .projects.ispage div.page div.page.detailswrapper {display: flex; justify-content: center;}
    .projects.ispage div.page div.page.current::after,
    .projects.ispage div.page div.page.current::before {content: none;}
    .projects:not(.ispage) ul li.portrait a img {height: auto;}
    body.post .page, body.people.ispage .page, body.people .page {padding-top: 6rem;}
    body .page.detailswrapper {padding-top: 2.5rem; padding-bottom: 2.5rem;}
    h2 {float: none;}
    h2 + p {white-space: normal;}
    h2 + p + h2 {margin-top: 1.5rem;}
    .projects:not(.ispage) ul li a .overlay,
    ul#projects li a:hover .overlay {opacity: 0; display: block; transition: opacity 0.35s ease-in-out;}
    #projects li a img {transition: opacity 0.35s ease-in-out;}
    #projects {margin-bottom: calc(100vh - 30rem);}
    #projects .notintersecting + .intersecting .overlay,
    #projects .intersecting:first-child .overlay {opacity: 1;}
    
}
@media only screen and (max-width: 1250px) {
    .home h1 {padding-left: 4vw; padding-right: 4vw; font-size: 9.5vw;}
}

/* CUSTOM CURSORS */
* {cursor: default; cursor: url(/img/cursor_arrow.png) 12 12, default;}
a, a * {cursor: pointer; cursor: url(/img/cursor_hand.png) 12 12, pointer;}
.projects.ispage div.page .prevpage {cursor: w-resize; cursor: url(/img/cursor_arrowleft.png) 12 12, w-resize;}
.projects.ispage div.page .nextpage {cursor: e-resize; cursor: url(/img/cursor_arrowright.png) 12 12, e-resize;}
.home * {cursor: default; cursor: url(/img/cursor_arrow_diap.png) 12 12, default;}
.home a, .home a * {cursor: pointer; cursor: url(/img/cursor_hand_diap.png) 12 12, pointer;}


@media only screen and (min-width: 520px) and (max-width: 850px) {
    html {font-size: 2.5vw;}
}