html, body {
background: linear-gradient(to right, #f0f0f0 0%, #72e645
50%, #72e645 50%, #f0f0f0 100%);
color: black;
font-family: 'GT Alpina Standard Light';
}

img {
max-width: 100%;
}
h1, h2, h3 {
font-size: 1em;
display: inline-block;
margin: 0;
}
figure {
margin: 0;
}
body {
margin: 0 0.5em;
}
/* COLORS */

.skyblue,
.skyblue a {
color: black;
font-family: 'GT Alpina Standard Light';
}
a.project.brand:hover {
background: #e6e6e6;

outline: 1px solid black;
color: black;
}
.beige,
.beige a {
color:#9ed3f7;
color: black;
}
a.project.design:hover {
background: #e6e6e6;
font-family: helvetica;
color:black;
outline: 1px solid black;

}
.lime,
.lime a {
color: #72e645;
text-decoration: none;
}
.four-up.photos {
transition: 0.25s ease all;
}
/* TYPOGRAPHY */

@font-face {

font-family: "GT Alpina Standard Light";
src: url('../fonts/GT-Alpina-Standard-Light.ttf') format('truetype'),
url('../fonts/GT-Alpina-Standard-Light.woff2') format('woff2'),
url('../fonts/GT-Alpina-Standard-Light.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.brand,
.design,
.phone {
cursor: pointer;
}
/* GRID */

.everything {
max-width: 1300px;
margin: 1em auto 0.5em;
}
.two-up {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1px;
background: #1A1919;
}
.two-up.project-individual {
display: flex;
background: #1A1919;
}
.two-up div.figures {
background: white;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
/* border-radius: 12px; */
padding: 1em;
width: calc(50% - .5px);
}
.two-up div.metadata {
background: white;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
/* border-radius: 12px; */
padding: 0.75em 1em;
width: calc(50% - .5px);
}
.metadata .info {
font-size: 0.85em;
}
.metadata {
line-height: 1.25;
}
.metadata h2 {
    font-family: "helvetica";
    font-size: 20px;
}
.metadata a {
color: black;
text-decoration: none;
transition: 0.25s ease opacity;
}
.metadata a:hover {
    /* text-decoration: underline; */
    color: #5e5e5e;
}
.metadata .text {
position: sticky;
top: 1em;
/* margin-bottom: 3.5em; */
}

.metadata {
position: relative;
}
nav.lateral {
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-top: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr;
background: #1A1919;
grid-gap: 1px;
}
nav.lateral a {
display: block;
padding: 1em;
text-align: center;
background: white;
transition: 0.25s ease all;
}
nav.lateral a:hover {
opacity: 1;
background: #e6e6e6;
color: black;
text-decoration: none;
}

nav.lateral.test {
    left: calc(50% + 0.5px);
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
}
nav.lateral.test a {
        color: black;
        text-decoration: none;
    }
.two-up div.figures figure {
    margin-bottom: 0.5em;
}
.two-up div.figures figure figcaption {
font-family: sans-serif;
font-size: 0.65em;
font-weight: 600;
margin-top: 0.25em;
margin-bottom: 1.5em;
color: #5e5e5e;
/* opacity: 0.45; */
}
.image-medium {
max-width: 500px;
margin: 0 auto;
}
.image-small {
max-width: 350px;
margin: 0 auto;
}
figure.image-medium,
figure.image-small {
margin-top: 2em;
margin-bottom: 2em !important;
}
figure.image-medium:first-of-type,
figure.image-small:first-of-type {
margin-top: 0;
}
.double {
display: grid;
grid-template-columns: 1fr 1fr;

grid-gap: 0.75em;
}
.four-up {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
margin: 1.4em 0;
}
.two-up.project-individual {
/* grid-gap: 2em; */
position: sticky;
}
hr {
height: 1em;
margin-bottom: 2em;
border: 0;
border-bottom: 1px solid black;
}
hr.invisible {
border: 0;
}

/* HEADER */

header {
    position: relative;
    font-size: 1.65em;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 1.75em;
}

header .intro,
header .extra {
    padding: 0 1em;
    max-width: 925px;
    color: black;
    font-family: 'GT Alpina Standard Light';
}

header .extra {
    font-size: 0.85em;
    padding-left: 1.25em;
    margin-top: 1em;
}

header h1 {
    font-weight: normal;
}
header nav {
padding: 0;
position: absolute;
top: 0;
right: 0;
width: 60px;
text-align: right;
cursor: pointer;
}
header a {
/* color: #72e645; */
color: black;
text-decoration: none;
transition: 0.25s ease color;
}
header a:hover {
    /* background: black; */
    /* color: white; */
    /* text-decoration: underline; */
    /* border-bottom: 1px solid black; */
    color: #5e5e5e;
    /* opacity: 0.35; */
}

.extra {
    display: none;
}

.extra.visible {
    display: block;
}

/* MAIN */

a.project {
font-family: "helvetica";
font-size: 20px;
display: inline-block;
background: #f0f0f0;
color: black;
border-radius: 0;
padding: 0.8em 1em;
text-decoration: none;
position: relative;
outline: 1px solid black;

transition: 0.25s ease all;
}
a.project.design{
color: black;
background-color: #f0f0f0;
}
.type {
position: absolute;
top: 0.8em;
right: 1em;
opacity: 0;
font-family: 'GT Alpina Standard Light';
transition: 0.25s ease all;
}
a.project:hover .type {
opacity: 1;
}
a.project h2 {
margin-bottom: 0.75em;
}
.project-individual,
.photos {
color: #1A1919;
font-family: "GT Alpina Standard Light";
font-size: 1.25em;
}
.photos {
background: white;
border: 1px solid black;
padding: 1em;

}
/* FOOTER */

footer {
font-size: 1.15em;
line-height: 1.4;
font-weight: 500;
}
footer .outro {
position: relative;
margin-top: 3.75em;
margin-bottom: 1.5em;
}
footer .outro .right {
position: absolute;
right: 0;
top: 0;
}
footer a {
color: black;
transition: 0.25s ease color;
text-decoration: none;
}
footer a:hover {
 color: #5e5e5e;
/* text-decoration: underline; */
}
/* MEDIA QUERIES */

@media screen and (max-width: 1100px) {
    nav.open {
    display: none;
    }
    header .intro, header .extra {
        padding-right: 100px;
    }
    footer .link.second {
        display: none;
    }
    .four-up {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin: 1.4em 0;
        gap: 1em;
    }
    .two-up div.figures {
        border-bottom: 0;
    }
}
@media screen and (max-width: 768px) {
    .two-up.project-individual {
    flex-direction: column-reverse;
    }
    .two-up div.figures,
    .two-up div.metadata {
    width: calc(100% - 2em);
    }
    header {
        font-size: 1.35em;
        line-height: 1.3;
    }
    a.project h2,
    .metadata h2 {
        font-size: 0.9em;
    }
    .two-up div.metadata {
        border-left: 1px solid black;
    }
    .two-up div.figures {
        border-right: 1px solid black;
    }
    .two-up div.metadata {
        border-bottom: 0;
    }
    .two-up div.figures {
        border-top: 0;
    }
    body {
        padding: 0 0.5em;
    }
    header nav {
        display: none;
    }
    header .intro, header .extra {
        padding-right: 1em;
    }
    a.project:hover .type {
        display: none;
    }
    footer .link.first {
        display: none;
    }
    header a {
        /* border-bottom: 2px dotted black; */
        text-decoration: underline;
        text-decoration-style: dotted;
        text-underline-offset: 3px;
    }
    footer a,
    footer a:hover,
    .metadata a,
    .metadata a:hover {
        color: black;
        text-decoration: underline;
        text-decoration-style: dotted;
        text-underline-offset: 2px;
    }
    .metadata .lateral a,
    .metadata .lateral a:hover {
        text-decoration: none;
    }
    header a:hover {
        color: black;
    }
    .double {
        display: block;
    }
    .double figure {
        max-width: 350px;
        margin: 0 auto;
    }
    .four-up {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 1.4em 0;
    }
    nav.lateral.test {
        left: 0;
        position: relative;
        order: 1;
        left: 1px;
        border-top: 0;
    }
    .two-up div.metadata {
        order: 4;
    }
    .two-up div.figures {
        order: 2;
    }
}
@media screen and (max-width: 500px) {
    .two-up {
        grid-template-columns: 1fr;
    }
    .four-up {
        display: grid;
        grid-template-columns: 1fr;
        margin: 1.4em 0;
    }
}