@import url("https://use.typekit.net/azv1ewe.css");
@import url("all.min.css");

html,
body {
    width: 100%;

}

html,
html * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
}

html {
    font-size: 3.950617vw;
}

@media (min-width: 640px) {
    html {
        font-size: 2.222vw;
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 1vw;
    }
}

@media (min-width: 1920px) {
    html {
        font-size: 0.8333vw;
    }
}


:root {
    --script-font: "tangier", serif;
    --body-font: "mr-eaves-xl-modern", sans-serif;
    --light-gray: #8f8c80;
    --mid-gray: #797566;
    --dark-gray: #201800;
    --page-height: 75vh;
    --wrapper-width: 77.8125rem;
    --gutter: 0.9375rem;
}

@media (min-width: 640px) and (max-width: 1023px) {
    :root {
        --gutter: 1.875rem;
    }
} 

body {
    font-family: var(--body-font);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.875rem;
    color: #201800;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
}

body.hide {
    opacity: 0;
}

body:not(.hide) {
    transition: opacity 0.75s ease;
    opacity: 1;
}

h1 {
    text-align: center;
    font-size: 3.5625rem;
    line-height: 2.8125rem;
}
h1, h2, h3 {
    color: var(--light-gray);
}
h1, h3 {
    font-family: var(--script-font);
    font-weight: 100;
}

h1 span {
    display: block;
    font-family: var(--body-font);
}

@media (min-width:640px) {
    h1 {
        font-size: 5.0625rem;
        line-height: 5.625rem;
    }

    h2 {
        font-size: 2.25rem;
        line-height: 2.8125rem;
    }

    h3 {
        font-size: 1.5rem;
    }
}

a {
    text-decoration: none;
    color: var(--mid-gray);
}
[class*=fa] span {
    display: none;
}

/* Header */
header {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
    min-height: var(--page-height);
    position: relative;
    width: 100%;
    max-width: var(--wrapper-width);
}

header::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 20%) scale(0.25);
    transform-origin: top center;
    display: block;
    width: 1rem;
    height: 100%;
    background-image: radial-gradient(circle at 1rem, #b1aea6 16.667%, rgba(255,255,255,0) 0%);
    background-position: center;
    background-size: 2rem 2rem;
    background-repeat: repeat-y;
}

@media (max-height: 479px) {
    header::after {
        height: 50%;
        transform: translate(-50%, 80%) scale(0.25);
    }
}

header h1 span {
    display: none;
}

header h1 img {
    width: 12.1875rem;
}

/* nav */
nav {
    margin-top: 1rem;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li + li {
    margin-left: 1rem;
}

nav ul li a {
    font-size: 1.5rem;
    transition: color 0.35s ease, transform 0.35s ease;
}

nav ul li a:hover {
    color: var(--dark-gray);
    animation: bounce 0.5s forwards infinite;
}

@keyframes bounce {
    0%{
        transform: translateY(0rem);
    }
    50% {
        transform: translateY(-0.25rem);
    }
    100% {
        transform: translateY(0rem);
    }
}

/* Main */
main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    max-width: var(--wrapper-width);
    padding: 1.875rem;
    min-height: 80vh;
}

main article {
    min-height: var(--page-height);
    width: 100%;
    opacity: 0;
    transition: opacity 0.75s 0s ease;
}

main article.show {
    opacity: 1;
    transition-delay: 0.35s;
}

main figure {
    overflow: hidden;
}

@media (min-width: 1024px) {
    main {
        padding: 0;
    }
}

/* Gallery */
main article.gallery h1 {
    position: relative;
    font-size: 3.5625rem;
    line-height: 2.8125rem;
}

main article.gallery h1::before,
main article.gallery h1::after {
    content: "";
    position: absolute;
    left: 0%;
    top: 50%;
    transform: translate(0%, -50%) scale(0.5);
    transform-origin: center left;
    display: block;
    width: 6rem;
    height: 1rem;
    background-image: radial-gradient(circle at 0.5rem, #b1aea6 16.667%, rgba(255,255,255,0) 0%);
    background-position: center;
    background-size: 1rem 1rem;
    background-repeat: repeat-x;
}

@media (min-width: 640px) {
    main article.gallery h1::before,
    main article.gallery h1::after {
        width: 16rem;
    }
}

main article.gallery h1::after {
    left: auto;
    right: 0;
    transform-origin: center right;
}

main article.gallery section {
    transform: translate3d(0,0,0);
    padding: 3.75rem 0;
    display: grid;
    grid-gap: 0 var(--gutter);
    grid-template-columns: 2.8125rem 2.8125rem 2.8125rem 2.8125rem 2.8125rem 2.8125rem;
    grid-template-rows: 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
}
main article.gallery section figure {
    cursor: pointer;
}

main article.gallery section figure::before {
    content: "\f065";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: flex;
    background-color: rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
    line-height: 1;
    box-sizing: border-box;
    padding: 0.9375rem;
    justify-content: flex-end;
    align-items: flex-end;
    align-content: flex-end;
    color: rgba(255,255,255,0.5);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.75s ease;
}

main article.gallery section figure:hover::before {
    opacity: 1;
}

main article.gallery section figure figcaption {
    display: none;
}

main article.gallery section figure img {
    transition: filter 0.75s ease, transform 0.75s ease;
    filter: grayscale(0%) blur(0rem);
    transform: translate3d(0,0,0);
}

main article.gallery section figure:hover img {
    filter: grayscale(100%) blur(0.1875rem);
    transform: translate3d(0,0,0) scale(1.1);
}

main article.gallery section > [class*=p] {
    background-size: cover;
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    position: relative;
}

main article.gallery section > [class*=p] > img {
    display: block;
    position: absolute;
    object-position: center;
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.p5, .p10, .p17, .p18 {
    background-color: #e5e5e5;
}

.p1 {
    grid-area: p1;
    grid-column: 4/7;
    grid-row: 1/11;
}
.p2 {
    grid-area: p2;
    grid-column: 1/4;
    grid-row: 1/15;
}
.p3 {
    grid-area: p3;
    grid-column: 3/7;
    grid-row: 16/27;
}
.p4 {
    grid-area: p4;
    grid-column: 4/7;
    grid-row: 28/39;
}
.p5 {
    grid-area: p5;
}
.p6 {
    grid-area: p6;
    grid-column: 5/7;
    grid-row: 12/15;
}
.p7 {
    grid-area: p7;
    grid-column: 4/5;
    grid-row: 12/15;
}
.p8 {
    grid-area: p8;
    grid-column: 1/5;
    grid-row: 40/63;
}
.p9 {
    grid-area: p9;
    grid-column: 1/3;
    grid-row: 16/31;
}
.p10 {
    grid-area: p10;
}
.p11 {
    grid-area: p11;
    grid-column: 1/4;
    grid-row: 32/39;
}
.p12 {
    grid-area: p12;
    grid-column: 5/7;
    grid-row: 40/51;
}
.p13 {
    grid-area: p13;
    grid-column: 1/3;
    grid-row: 64/70;
}
.p14 {
    grid-area: p14;
    grid-column: 3/4;
    grid-row: 28/31;
}
.p15 {
    grid-area: p15;
    grid-column: 5/7;
    grid-row: 52/63;
}
.p16 {
    grid-area: p16;
    grid-column: 3/7;
    grid-row: 64/70;
}
.p17 {
    grid-area: p17;
}
.p18 {
    grid-area: p18;
}

.p5, .p10, .p17, .p18 {
    display: none;
}
@media (min-width: 640px) {
    main article.gallery section {
        padding: 3.75rem 0;
        display: grid;
        grid-gap: 0 var(--gutter);
        grid-template-columns: auto;
        grid-template-rows: 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem 1.875rem;
    }
}
@media (min-width: 1024px) {
    
    main article.gallery h1::before,
    main article.gallery h1::after {
        width: 52.5rem;
    }

    main article.gallery section {
        padding-top: 6.5625rem;
        grid-template-columns: 5.625rem 5.625rem 5.625rem 5.625rem 5.625rem 5.625rem 5.625rem 5.625rem 5.625rem 5.625rem 5.625rem 5.625rem;
        grid-template-rows: 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
    }
    main article.gallery section > [class*=p] {
        transition: opacity 0.75s 0s ease, transform 0.75s 0s ease;
        opacity: 0;
        transform: translateY(2rem);
    }
    main article.gallery section > [class*=p].show {
        transition-delay: 0.35s, 0.35s;
        opacity: 1;
        transform: translateY(0rem);
    }
    .p5, .p10, .p17, .p18 {
        display: block;
    }
    .p1 {
        grid-column: 1/4;
        grid-row: 1/13;
    }
    .p2 {
        grid-column: 4/7;
        grid-row: 3/29;
    }
    .p3 {
        grid-column: 7/11;
        grid-row: 1/20;
    }
    .p4 {
        grid-column: 11/13;
        grid-row: 3/15;
    }
    .p5 {
        grid-column: 1/2;
        grid-row: 17/23;
    }
    .p6 {
        grid-column: 2/4;
        grid-row: 15/21;
    }
    .p7 {
        grid-column: 11/13;
        grid-row: 17/23;
    }
    .p8 {
        grid-column: 7/9;
        grid-row: 22/42;
    }
    .p9 {
        grid-column: 1/2;
        grid-row: 24/37;
    }
    .p10 {
        grid-column: 9/10;
        grid-row: 24/30;
    }
    .p11 {
        grid-area: p11;
        grid-column: 10/13;
        grid-row: 24/37;
    }
    .p12 {
        grid-column: 2/4;
        grid-row: 26/46;
    }
    .p13 {
        grid-column: 4/5;
        grid-row: 31/44;
    }
    .p14 {
        grid-column: 5/7;
        grid-row: 34/47;
    }
    .p15 {
        grid-column: 9/10;
        grid-row: 34/47;
    }
    .p16 {
        grid-column: 10/12;
        grid-row: 39/45;
    }
    .p17 {
        grid-column: 1/2;
        grid-row: 39/45;
    }
    .p18 {
        grid-column: 12/13;
        grid-row: 39/45;
    }

}

main article.about {
    display: flex;
    flex-direction: column;
    align-content: center;
}

main article.about > * {
    order: 2;
}

main article.about figure {
    grid-area: a1;
}

main article.about figure figcaption {
    transform: translateY(-100%);
    z-index: -1;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
main article.about figure img {
    display: block;
    max-width: 100%;
}

main article.about h1 {
    grid-area: a2;
    text-align: left;
    align-self: stretch;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    order: 1;
}

main article.about h1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    flex-grow: 1;
    transform: translate(-50%, -1rem) scale(0.25);
    transform-origin: top center;
    width: 1rem;
    height: calc(400% - 5em);
    background-image: radial-gradient(circle at 1rem, #b1aea6 16.667%, rgba(255,255,255,0) 0%);
    background-position: center;
    background-size: 2rem 2rem;
    background-repeat: repeat-y;
}

main article.about section {
    grid-area: a3;
    position: relative;
    margin-top: 2rem;
    width: calc(100% - 4rem);
    align-self: center;
}

main article.about section::before,
main article.about section::after {
    font-family: var(--script-font);
    font-size: 5.0625rem;
    line-height: 3.75rem;
    color: var(--light-gray);
    position: absolute;
    top: 0;
}

main article.about section::before {
    content: "\201c";
    right: 100%;
    text-indent: -2.8125rem;
}

main article.about section::after {
    content: "\201d";
    left: 100%;
}

main article.about nav {
    grid-area: a4;
    justify-self: end;
    margin-top: 3rem;
}
main article.about nav ul {
     justify-content: center;
}
footer {
    padding: 0.9375rem 1.875rem;
    width: 100%;
    text-align: center;
}

@media (min-width: 1024px) {
    main article.about {
        min-height: calc(100vh - 20rem);
        display: grid;
        padding: 0 6.5625rem;
        margin-top: 8.4375rem;
        margin-bottom: 6.5625rem;
        grid-gap: 3.75rem var(--gutter);
        grid-template-columns: 5.625rem 5.625rem 5.625rem 5.625rem 5.625rem 5.625rem 5.625rem 5.625rem 5.625rem 5.625rem;
        grid-template-rows: 16.875rem 16.875rem;
        grid-template-areas:
            "a1  a1  a1  a1  .   a2  a2  a2  a2  a2  "
            ".   .   a4  a4  .   a3  a3  a3  .   .   "
        ;
    }
    main article.about > * {
        opacity: 0;
        transform: translateY(2rem);
        transition: opacity 0.75s 0s ease, transform 0.75s 0s ease;
    }

    main article.about.show > * {
        opacity: 1;
        transform: translateY(0rem);
        transition-delay: 0.35s, 0.35s;
    }

    main article.about.show > *:nth-child(2n) {
        transition-delay: 0.7s, 0.7s;
    }

    main article.about.show > *:nth-child(3n) {
        transition-delay: 1s, 1s;
    }

    main article.about.show h1 {
        transform: translateY(1rem);
        margin-bottom: 0;
    }

    main article.about section {
        grid-area: a3;
        position: relative;
        margin-top: 0;
        width: auto;
        align-self: flex-start;
    }

    main article.about nav {
        margin-top: 0;
    }

    footer {
        padding: 0.9375rem 7.5rem;
    }
}

/* Lightbox */
#lightbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: stretch;
    align-items: stretch;
    position: fixed;
    background-color: rgba(0,0,0,0.9);
    color: #fff;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#lightbox.open {
    visibility: visible;
    opacity: 1;
}

#lightbox .image {
    flex-grow: 1;
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
}

#lightbox .caption {
    padding: 0.9375rem 4rem;
    text-align: center;
    background-color: #000;
}

#lightbox button {
    position: absolute;
    bottom: 0;
    background: none;
    border: none;
    font-size: 2rem;
    margin: 0.75rem 2rem;
    cursor: pointer;
    color: #fff;
    opacity: 0.6;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

#lightbox button:hover {
    opacity: 1;
    transform: scale(1.2);
}

#lightbox .previous{
    left: 0;
}

#lightbox .next {
     right: 0; 
}

#lightbox .close {
    top: 1rem;
    bottom: auto;
    font-size: 1.5rem;
    right: 0;
}

#lightbox .hide {
    opacity: 0 !important;
    pointer-events: none;
}