@charset "UTF-8";*,:after,:before,html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none
}

body,html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    -ms-scroll-chaining: none;
    overflow: hidden
}

main {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh,1vh) * 100)
}

@media (display-mode:fullscreen) {
    body,html {
        height: 100vh
    }
}

.fullheight-min {
    min-height: 100vh;
    min-height: calc(var(--vh,1vh) * 100)
}

body {
    font-family: Helvetica,Arial,sans-serif,"Helvetica Bold",Icons;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    color: #fff;
    background-color: #000
}

.nobar {
    scrollbar-width: none!important
}

.nobar::-webkit-scrollbar {
    width: 0!important;
    height: 0!important;
    display: none
}

a {
    color: inherit;
    text-decoration: none
}

html ::-webkit-scrollbar {
    width: 0
}

html ::-webkit-scrollbar-track {
    background-color: #000
}

html ::-webkit-scrollbar-thumb {
    background-color: #000
}

canvas,img,picture,svg,video {
    display: block;
    max-width: 100%
}

.t1 {
    font-size: 10px;
    opacity: .7;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .1em
}

.t2 {
    font-size: 14px;
    opacity: .7;
    margin-bottom: 8px
}

.p {
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 20px
}

.ls-1 {
    letter-spacing: .1rem
}

hr {
    margin-top: 15px;
    margin-bottom: 5px;
    opacity: 0
}

.group {
    margin-bottom: 20px;
    display: block
}

.small {
    font-size: 90%
}

.faded {
    opacity: .6
}

#background {
    min-width: 100%;
    height: 100%;
    overflow: hidden;
    visibility: visible;
    pointer-events: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

#background video {
    min-width: 100%;
    min-height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    opacity: 0;
    z-index: -100;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s
}

#background video.loaded {
    opacity: 1;
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
    transition: opacity 2s
}

.object-fit_contain {
    -o-object-fit: contain;
    object-fit: contain
}

.cover {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .1;
    pointer-events: none;
    -webkit-transition: opacity .85s cubic-bezier(.86,0,.07,1) .1s;
    -o-transition: opacity .85s cubic-bezier(.86,0,.07,1) .1s;
    transition: opacity .85s cubic-bezier(.86,0,.07,1) .1s
}

[data-current-page=about] .cover,[data-current-page=booking] .cover,[data-current-page=faq] .cover,[data-current-page=gallery] .cover,[data-current-page=jobs] .cover,[data-current-page=shop] .cover {
    opacity: .7;
    background-color: #000
}

#about-container,#faq-container,#shop-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    overflow-y: scroll;
    z-index: 501;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    -ms-scroll-chaining: none;
    -ms-content-zooming: none;
    -ms-overflow-style: none;
    opacity: 0;
    pointer-events: none
}

#booking-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    height: 100%;
    overflow-y: scroll;
    z-index: 502;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

#about-container:after,#background:after,#faq-container:after,#gallery-container:after,#jobs-container:after,#shop-container:after {
    bottom: 0;
    background: -webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.8)),to(rgba(0,0,0,0)));
    background: -o-linear-gradient(bottom,rgba(0,0,0,.8),rgba(0,0,0,0));
    background: linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0));
    -webkit-transition: opacity .2s,-webkit-transform .5s;
    transition: opacity .2s,transform .5s,-webkit-transform .5s;
    -o-transition: opacity .2s,transform .5s;
    pointer-events: none
}

#nav-container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    z-index: 602;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: 1;
    pointer-events: all;
    -webkit-transition: opacity .3s linear .3s,-webkit-transform .53s .3s;
    transition: opacity .3s linear,transform .53s,-webkit-transform .53s;
    -o-transition: opacity .3s linear .3s,transform .53s .3s;
    transition-delay: .3s
}

[data-current-page=about] #nav-container,[data-current-page=booking] #nav-container,[data-current-page=faq] #nav-container,[data-current-page=gallery] #nav-container,[data-current-page=jobs] #nav-container,[data-current-page=shop] #nav-container {
    pointer-events: none;
    -webkit-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
    transition: opacity .3s linear;
    opacity: 0
}

.close-btn {
    -webkit-transform: translate(0,100px,0);
    -ms-transform: translate(0,100px,0);
    transform: translate(0,100px,0)
}

[data-current-page=about] .close-btn,[data-current-page=booking] .close-btn,[data-current-page=faq] .close-btn,[data-current-page=gallery] .close-btn,[data-current-page=jobs] .close-btn,[data-current-page=shop] .close-btn {
    pointer-events: all;
    opacity: 1;
    -webkit-transition: opacity .3s linear .6s;
    -o-transition: opacity .3s linear .6s;
    transition: opacity .3s linear .6s;
    -webkit-transform: translate(0,0,0);
    -ms-transform: translate(0,0,0);
    transform: translate(0,0,0)
}

#gallery-container,#jobs-container {
    -webkit-overflow-scrolling: touch;
    -ms-scroll-chaining: none;
    -ms-content-zooming: none;
    -ms-overflow-style: none;
    opacity: 0;
    pointer-events: none;
    overflow-y: scroll;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

#gallery-container {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start
}

#booking-container {
    -webkit-overflow-scrolling: touch;
    -ms-scroll-chaining: none;
    -ms-content-zooming: none;
    -ms-overflow-style: none;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity .2s linear;
    -o-transition: opacity .2s linear;
    transition: opacity .2s linear
}

[data-current-page=about] #about-container,[data-current-page=booking] #booking-container,[data-current-page=faq] #faq-container,[data-current-page=gallery] #gallery-container,[data-current-page=jobs] #jobs-container,[data-current-page=shop] #shop-container {
    pointer-events: all;
    visibility: visible
}

#about-container.animate-in,#booking-container.animate-in,#faq-container.animate-in,#gallery-container.animate-in,#jobs-container.animate-in,#shop-container.animate-in {
    opacity: 1;
    -webkit-transition: opacity .2s linear .8s;
    -o-transition: opacity .2s linear .8s;
    transition: opacity .2s linear .8s;
    pointer-events: all
}

#about-container.animate-out,#booking-container.animate-out,#faq-container.animate-out,#gallery-container.animate-out,#jobs-container.animate-out,#shop-container.animate-out {
    opacity: 0;
    -webkit-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
    transition: opacity .3s linear;
    pointer-events: none
}

#cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999
}

#cursor-inner {
    width: 50px;
    height: 100px;
    position: absolute;
    -webkit-transform-origin: 25px 0;
    -ms-transform-origin: 25px 0;
    transform-origin: 25px 0;
    background-image: url(../img/arrow_1.svg);
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
    -webkit-transform: translate3d(-300px,0,0);
    transform: translate3d(-300px,0,0)
}

.is-hover #cursor-inner {
    background-image: url(../img/arrow_2.svg)
}

.central-logo {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1rem;
    text-align: center;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    -webkit-transform: translateX(0) translateY(40vh) scale(1);
    -ms-transform: translateX(0) translateY(40vh) scale(1);
    transform: translateX(0) translateY(40vh) scale(1);
    z-index: 5;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    mix-blend-mode: difference
}

.central-logo.anim {
    -webkit-transition: -webkit-transform .95s cubic-bezier(.86,0,.07,1);
    transition: transform .95s cubic-bezier(.86,0,.07,1);
    -o-transition: transform .95s cubic-bezier(.86,0,.07,1);
    transition: transform .95s cubic-bezier(.86,0,.07,1),-webkit-transform .95s cubic-bezier(.86,0,.07,1)
}

.central-logo .inner {
    width: 100%;
    padding: 0 30px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto
}

[data-current-page=about] .central-logo,[data-current-page=booking] .central-logo,[data-current-page=faq] .central-logo,[data-current-page=gallery] .central-logo,[data-current-page=jobs] .central-logo,[data-current-page=shop] .central-logo {
    top: 0;
    -webkit-transform: translateX(0) translateY(0) scale(.8);
    -ms-transform: translateX(0) translateY(0) scale(.8);
    transform: translateX(0) translateY(0) scale(.8);
    z-index: 5
}

.is-scrolled[data-current-page=about] .central-logo,.is-scrolled[data-current-page=faq] .central-logo,.is-scrolled[data-current-page=gallery] .central-logo,.is-scrolled[data-current-page=jobs] .central-logo,.is-scrolled[data-current-page=shop] .central-logo {
    -webkit-transform: translateX(0) translateY(-350px) scale(.8);
    -ms-transform: translateX(0) translateY(-350px) scale(.8);
    transform: translateX(0) translateY(-350px) scale(.8);
    z-index: 5;
    -webkit-transition: -webkit-transform .35s ease-in;
    transition: transform .35s ease-in;
    -o-transition: transform .35s ease-in;
    transition: transform .35s ease-in,-webkit-transform .35s ease-in
}

[data-current-page=about] .logo-title,[data-current-page=booking] .logo-title,[data-current-page=faq] .logo-title,[data-current-page=gallery] .logo-title,[data-current-page=jobs] .logo-title,[data-current-page=shop] .logo-title {
    visibility: hidden;
    opacity: 0;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s
}

@media all and (max-width: 723px) {
    [data-current-page=about] .central-logo,[data-current-page=booking] .central-logo,[data-current-page=faq] .central-logo,[data-current-page=gallery] .central-logo,[data-current-page=jobs] .central-logo,[data-current-page=shop] .central-logo {
        top:0;
        -webkit-transform: translateX(0) translateY(0) scale(.7);
        -ms-transform: translateX(0) translateY(0) scale(.7);
        transform: translateX(0) translateY(0) scale(.7);
        z-index: 5
    }

    .is-scrolled[data-current-page=about] .central-logo,.is-scrolled[data-current-page=faq] .central-logo,.is-scrolled[data-current-page=gallery] .central-logo,.is-scrolled[data-current-page=jobs] .central-logo,.is-scrolled[data-current-page=shop] .central-logo {
        -webkit-transform: translateX(0) translateY(-350px) scale(.7);
        -ms-transform: translateX(0) translateY(-350px) scale(.7);
        transform: translateX(0) translateY(-350px) scale(.7);
        z-index: 5;
        -webkit-transition: -webkit-transform .35s ease-in;
        transition: transform .35s ease-in;
        -o-transition: transform .35s ease-in;
        transition: transform .35s ease-in,-webkit-transform .35s ease-in
    }

    .central-logo {
        -webkit-transform: translateX(0) translateY(30vh) scale(1);
        -ms-transform: translateX(0) translateY(30vh) scale(1);
        transform: translateX(0) translateY(30vh) scale(1)
    }

    .is-mobile .logo-inner {
        font-size: 80px;
        white-space: nowrap
    }
}

.logo-title {
    display: block;
    margin-bottom: 15px;
    -webkit-transition: opacity .5s cubic-bezier(.86,0,.07,1);
    -o-transition: opacity .5s cubic-bezier(.86,0,.07,1);
    transition: opacity .5s cubic-bezier(.86,0,.07,1);
    -webkit-transition-delay: .93s;
    -o-transition-delay: .93s;
    transition-delay: .93s
}

.logo-subtitle {
    text-align: center;
    text-transform: uppercase;
    display: block;
    margin-top: 15px;
    -webkit-transition: opacity .4s cubic-bezier(.86,0,.07,1);
    -o-transition: opacity .4s cubic-bezier(.86,0,.07,1);
    transition: opacity .4s cubic-bezier(.86,0,.07,1);
    -webkit-transition-delay: .9s;
    -o-transition-delay: .9s;
    transition-delay: .9s
}

.logo-inner {
    width: 100%
}

.container {
    width: 100%;
    text-align: center;
    margin: auto;
    position: relative
}

.container>* {
    display: block
}

#about-container .container {
    padding: 1rem 1rem 150px;
    max-width: 420px
}

#faq-container .container,#gallery-container .container,#jobs-container .container,#shop-container .container {
    padding: 1rem 2rem 150px;
    max-width: 420px
}

.spacer {
    display: block;
    height: 100px;
    width: 100%;
    background: red
}

.close-btn {
    position: fixed;
    bottom: 16px;
    text-align: center;
    left: 50%;
    z-index: 800;
    padding: 20px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.ff-avenir {
    font-family: Helvetica,sans-serif
}

.mb-s {
    margin-bottom: 20px
}

.mb-l {
    margin-bottom: 40px
}

.btn {
    text-decoration: none;
    font-size: 11px;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: .1rem;
    text-align: center;
    height: auto;
    display: inline-block;
    cursor: pointer;
    border-radius: 8px;
    padding: 8px 12px 6px;
    margin-left: 5px;
    margin-right: 5px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.16);
    background-color: rgba(0,0,0,.16);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
}

.btn--white {
    color: #000;
    background-color: #fff
}

[data-video-mute=on] .icon {
    background-image: url(../img/icon-unmute.svg)
}

[data-video-mute=off] .icon {
    background-image: url(../img/icon-mute.svg)
}

.icon {
    display: block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: contain
}

.icon.--close {
    background-image: url(../img/close.svg);
    width: 15px;
    height: 15px
}

.icon.--ig {
    background-image: url(../img/icon-ig.svg)
}

.icon.--mute {
    background-image: url(../img/icon-mute.svg);
    width: 15px;
    height: 15px
}

.icon.--unmute {
    background-image: url(../img/icon-unmute.svg);
    width: 15px;
    height: 15px
}

.mute-btn {
    position: fixed;
    bottom: 26px;
    left: 20px;
    z-index: 605
}

@media all and (max-width: 400px) {
    .central-logo {
        font-size:11px;
        line-height: 1;
        letter-spacing: .1rem
    }

    .btn {
        margin-left: unset;
        margin-right: unset
    }

    .container {
        width: 100%;
        padding: 70px 10px 10px
    }

    #about-container .container {
        padding: 1rem 1rem 100px
    }

    #nav-container {
        -ms-flex-pack: distribute;
        justify-content: space-around
    }
}

@media all and (max-width: 300px) {
    #nav-container {
        -webkit-box-orient:vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: .2rem
    }
}

.typeform-formembed {
    position: fixed;
    top: 130px;
    left: 150px;
    right: 150px;
    bottom: 60px;
    margin: 0;
    padding: 0;
    visibility: hidden;
    pointer-events: none;
    display: none;
    overflow: hidden;
    border-radius: 1rem
}

[data-current-page=booking] .typeform-formembed {
    display: block
}

.animate-in .typeform-formembed {
    visibility: visible;
    pointer-events: all
}

.typeform-widget {
    width: 100%;
    height: 100%
}

@media all and (max-width: 724px) {
    .typeform-formembed {
        top:130px;
        left: 10px;
        right: 10px;
        bottom: 70px
    }
}

@media all and (max-width: 400px) {
    .typeform-formembed {
        top:calc(50px + 20vw);
        left: 20px;
        right: 20px;
        bottom: 55px
    }
}

@media all and (max-width: 200px) {
    .typeform-formembed {
        top:0;
        left: 5px;
        right: 5px;
        bottom: 55px
    }
}

.typeform-widget iframe {
    -webkit-overflow-scrolling: touch
}

iframe .inmboj {
    background-color: red!important
}

.site-loading #nav-container {
    -webkit-transform: translateY(200px);
    -ms-transform: translateY(200px);
    transform: translateY(200px);
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease
}

[data-audio=off] .sound-toggler .off {
    display: block!important
}

[data-audio=off] .sound-toggler .on,[data-audio=on] .sound-toggler .off {
    display: none!important
}

[data-audio=on] .sound-toggler .on {
    display: block!important
}

.ig-btn {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color: transparent;
    width: 40px;
    height: 40px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 800;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer
}

.sound-toggler {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background-color: transparent;
    width: 40px;
    height: 40px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 800;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer
}

.ig-btn>*,.sound-toggler>* {
    margin: auto;
    pointer-events: none
}

@media all and (max-width: 400px) {
    .btn {
        margin-left:unset;
        margin-right: unset
    }

    .ig-btn,.sound-toggler {
        bottom: unset;
        top: 0
    }

    .sound-toggler {
        left: 0
    }

    .ig-btn {
        left: 30px
    }
}

.loader {
    position: absolute;
    width: 100px;
    height: 100px;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.loader>div {
    margin: auto
}

.dot-flashing {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #a7a7a7;
    color: #a7a7a7;
    -webkit-animation: 1s linear .5s infinite alternate dot-flashing;
    animation: 1s linear .5s infinite alternate dot-flashing
}

.dot-flashing::after,.dot-flashing::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0
}

.dot-flashing::before {
    left: -15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #a7a7a7;
    color: #a7a7a7;
    -webkit-animation: 1s infinite alternate dot-flashing;
    animation: 1s infinite alternate dot-flashing
}

.dot-flashing::after {
    left: 15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #a7a7a7;
    color: #a7a7a7;
    -webkit-animation: 1s 1s infinite alternate dot-flashing;
    animation: 1s 1s infinite alternate dot-flashing
}

@-webkit-keyframes dot-flashing {
    0% {
        background-color: #fff
    }

    100%,50% {
        background-color: #a7a7a7
    }
}

@keyframes dot-flashing {
    0% {
        background-color: #fff
    }

    100%,50% {
        background-color: #a7a7a7
    }
}

.jobs-list {
    position: relative;
    padding-left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: .9rem
}

.gallery-grid {
    position: relative;
    display: -ms-grid;
    display: grid;
    padding: 1rem;
    gap: 1rem;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr
}

.gallery-grid img {
    height: calc(33.333vh - 1rem);
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.list {
    list-style-type: "– ";
    -webkit-padding-start: 2ch;
    padding-inline-start:2ch;line-height: 1.5
}

details summary::-webkit-details-marker {
    display: none
}

details {
    position: relative;
    border-radius: 8px;
    margin-bottom: 5px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.16);
    background-color: rgba(0,0,0,.16);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    text-align: left;
    -webkit-transition: background .3s;
    -o-transition: background .3s;
    transition: background .3s
}

summary {
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 1rem;
    font-size: 1.2rem;
    color: #fff
}

details .content {
    padding: 1rem 1rem 2rem;
    border-top: 1px solid rgba(255,255,255,.16)
}

details .content p {
    line-height: 1.5
}

details .content .btn {
    -ms-flex-item-align: end;
    align-self: flex-end
}

details summary:hover::before,details[open]>summary::before {
    background-color: #fff;
    color: #000
}

details summary::before {
    content: "+";
    position: absolute;
    width: 16px;
    height: 16px;
    top: calc(50% - 8px);
    right: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 11px;
    text-align: center;
    padding: 4px;
    border-radius: 4px;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    color: #fff;
    background-color: rgba(0,0,0,.16)
}

details[open]>summary::before {
    content: "-";
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0)
}

details summary::marker {
    content: ""
}

.w-100 {
    width: 100%
}

.ma {
    margin: auto
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.pull-right {
    float: right
}

.noise {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none
}

.modal-open .noise:after {
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

.noise:after {
    content: "";
    width: calc(100% + 20rem);
    height: calc(100% + 20rem);
    background-image: url(../img/noise-full.png);
    background-position: 50%;
    position: absolute;
    left: -10rem;
    top: -10rem;
    will-change: transform;
    -webkit-animation: 1s steps(2) infinite noise;
    animation: 1s steps(2) infinite noise;
    opacity: .1
}

@-webkit-keyframes noise {
    0% {
        -webkit-transform: translate3d(0,9rem,0);
        transform: translate3d(0,9rem,0)
    }

    10% {
        -webkit-transform: translate3d(-1rem,-4rem,0);
        transform: translate3d(-1rem,-4rem,0)
    }

    20% {
        -webkit-transform: translate3d(-8rem,2rem,0);
        transform: translate3d(-8rem,2rem,0)
    }

    30% {
        -webkit-transform: translate3d(9rem,-9rem,0);
        transform: translate3d(9rem,-9rem,0)
    }

    40% {
        -webkit-transform: translate3d(-2rem,7rem,0);
        transform: translate3d(-2rem,7rem,0)
    }

    50% {
        -webkit-transform: translate3d(-9rem,-4rem,0);
        transform: translate3d(-9rem,-4rem,0)
    }

    60% {
        -webkit-transform: translate3d(2rem,6rem,0);
        transform: translate3d(2rem,6rem,0)
    }

    70% {
        -webkit-transform: translate3d(7rem,-8rem,0);
        transform: translate3d(7rem,-8rem,0)
    }

    80% {
        -webkit-transform: translate3d(-9rem,1rem,0);
        transform: translate3d(-9rem,1rem,0)
    }

    90% {
        -webkit-transform: translate3d(6rem,-5rem,0);
        transform: translate3d(6rem,-5rem,0)
    }

    to {
        -webkit-transform: translate3d(-7rem,0,0);
        transform: translate3d(-7rem,0,0)
    }
}

@keyframes noise {
    0% {
        -webkit-transform: translate3d(0,9rem,0);
        transform: translate3d(0,9rem,0)
    }

    10% {
        -webkit-transform: translate3d(-1rem,-4rem,0);
        transform: translate3d(-1rem,-4rem,0)
    }

    20% {
        -webkit-transform: translate3d(-8rem,2rem,0);
        transform: translate3d(-8rem,2rem,0)
    }

    30% {
        -webkit-transform: translate3d(9rem,-9rem,0);
        transform: translate3d(9rem,-9rem,0)
    }

    40% {
        -webkit-transform: translate3d(-2rem,7rem,0);
        transform: translate3d(-2rem,7rem,0)
    }

    50% {
        -webkit-transform: translate3d(-9rem,-4rem,0);
        transform: translate3d(-9rem,-4rem,0)
    }

    60% {
        -webkit-transform: translate3d(2rem,6rem,0);
        transform: translate3d(2rem,6rem,0)
    }

    70% {
        -webkit-transform: translate3d(7rem,-8rem,0);
        transform: translate3d(7rem,-8rem,0)
    }

    80% {
        -webkit-transform: translate3d(-9rem,1rem,0);
        transform: translate3d(-9rem,1rem,0)
    }

    90% {
        -webkit-transform: translate3d(6rem,-5rem,0);
        transform: translate3d(6rem,-5rem,0)
    }

    to {
        -webkit-transform: translate3d(-7rem,0,0);
        transform: translate3d(-7rem,0,0)
    }
}

iframe {
    scrollbar-width: none;
    -ms-overflow-style: -ms-autohiding-scrollbar
}

iframe ::-webkit-scrollbar {
    width: 0!important;
    height: 0!important;
    scrollbar-width: none!important;
    display: none!important
}

.flow>*+* {
    margin-top: 1em
}

.flow>*+.btn,.flow>*+.t1 {
    margin-top: 3em
}

.credits-logo {
    display: inline-block
}

details .t2 {
    font-size: 1.1rem;
    line-height: 1.25;
    word-wrap: break-word;
    width: calc(100% - 2rem);
    display: block;
    margin-bottom: 0
}

.product-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.gift-cards {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border: 2px solid transparent;
    background: -o-linear-gradient(19deg,#080509,#1a171c,#080509);
    background: linear-gradient(71deg,#080509,#1a171c,#080509);
    background-clip: padding-box;
    border-radius: 10px;
    display: -ms-grid;
    display: grid;
    place-items: center;
    overflow: hidden
}

@supports not (aspect-ratio) {
    .gift-cards {
        padding-top: 56%;
        height: 0
    }
}

.gift-card-logo {
    background-image: url(../img/ink-district-logo.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%,50%;
    width: 150px;
    height: 90px;
    position: absolute
}

.gift-cards::after {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: -1px;
    content: "";
    z-index: -1;
    border-radius: 10px;
    background: -o-linear-gradient(19deg,#0d1212,#313131,#0d1212);
    background: linear-gradient(71deg,#0d1212,#313131,#0d1212)
}

.product-images {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 8px
}

.product-images>img {
    position: absolute;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0
}

.product-images:hover>img:nth-child(2),.product-images>img:nth-child(1) {
    opacity: 1
}

.basicLightbox {
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(0,0,0,.8);
    opacity: .01;
    -webkit-transition: opacity .4s;
    -o-transition: opacity .4s;
    transition: opacity .4s;
    z-index: 1000;
    will-change: opacity;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh,1vh) * 100)
}

.basicLightbox--visible {
    opacity: 1
}

.basicLightbox__placeholder {
    max-width: 100%;
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
    -webkit-transition: -webkit-transform .4s;
    transition: transform .4s;
    -o-transition: transform .4s;
    transition: transform .4s,-webkit-transform .4s;
    z-index: 1;
    will-change: transform
}

.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    max-width: 95%;
    max-height: 95%
}

.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child {
    pointer-events: auto
}

.basicLightbox--iframe .basicLightbox__placeholder,.basicLightbox--img .basicLightbox__placeholder,.basicLightbox--video .basicLightbox__placeholder {
    width: 100%;
    height: 100%;
    pointer-events: none
}

.basicLightbox--visible .basicLightbox__placeholder {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.slider {
    position: absolute;
    left: 0;
    width: 100vw;
    height: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.slider::-webkit-scrollbar {
    display: none
}

.slider.is-mobile {
    overflow-x: scroll;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory
}

.slider.is-mobile .item {
    scroll-snap-align: center;
    scroll-snap-stop:always}

.slider.is-mobile .inner-slider {
    padding-left: 1rem;
    padding-right: 1rem
}

.inner-slider {
    position: absolute;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
    height: 100%;
    will-change: transform
}

.item {
    position: relative;
    width: 300px;
    height: 400px;
    background-color: #a7a7a7;
    border-radius: 1rem;
    overflow: hidden
}

.item img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 1rem
}

@-webkit-keyframes flash {
    from {
        -webkit-filter: brightness(5);
        filter: brightness(5)
    }

    to {
        -webkit-filter: brightness(1);
        filter: brightness(1)
    }
}

@keyframes flash {
    from {
        -webkit-filter: brightness(5);
        filter: brightness(5)
    }

    to {
        -webkit-filter: brightness(1);
        filter: brightness(1)
    }
}

.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.is-desktop .basicLightbox__placeholder>img:first-child:last-child,.is-desktop .basicLightbox__placeholder>video:first-child:last-child {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}