@font-face {
    font-family: 'Inter';
    src: local('Inter'), local('Inter-Variable'), local('Inter Variable'), url("./font/Inter-VariableFont.woff2") format('woff2');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
    font-display: swap;
}

:root {
    --hero-1: url('./img/bg/hero-image-1.webp');
    --hero-2: url('./img/bg/hero-image-2.webp');
    --hero-3: url('./img/bg/hero-image-3.webp');
    --sidepad: calc(99vw * (158 / 1920));
    --toppad-1: calc(150vw * (160 / 1920));
    --toppad-2: calc(150vw * (360 / 1920));
    --leftpad-1: 10%;
    --headerheight: calc(100vw * (150 / 1920));
    --herosize: 100vh;
    --herosize2: calc(99vw * (1700 / 1920));
    --scrollpicsize: calc(82vw * (1080 / 1920));
    --cont1Bg: url('./img/bg/Block01.svg');
    --cont1bBg: url('./img/bg/Block01b.svg');
    --cont2Bg: url('./img/bg/Block02.svg');
    --cont3Bg: url('./img/bg/Block03.svg');
    --cont3bBg: url('./img/bg/Block03b.svg');
    --cont4Bg: url('./img/bg/Block04.svg');
    --cont4bBg: url('./img/bg/Block04b.svg');
    --cont1size: calc(99vw * (138 / 1920));
    --cont1bsize: calc(99vw * (242 / 1920));
    --cont2asize: calc(97vw * (190 / 1920));
    --cont3size: calc(99vw * (105 / 1920));
    --cont3bsize: calc(99vw * (168 / 1920));
    --cont4size: calc(99vw * (154 / 1920));
    --cont4bsize: calc(99vw * (231 / 1920));
    --textboxsize: calc(99vw * (1000 / 1920));
    --mediumtextboxsize: 60%;
    --largetextboxsize: 80%;
    --textboxlast: 70%;
    --white: #ffffff;
    --swiper-theme-color: #e6e6e6 !important;
}

body {
    margin: 0;
    font-family: 'Inter', serif;
    height: 100vh;
}

#desktop-header {
    position: fixed;
    height: var(--headerheight);
    top: 0;
    width: 100%;
    z-index: 100;
    transition: all .3s ease;
}

#desktop-header.hide {
    top: calc(var(--headerheight) * -1 - 25px);
}

#mobile-header.hide {
    top: calc(var(--headerheight) * -1 - 25px);
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-image: url('./img/menu-bar-bg.svg');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 10px;
    height: var(--headerheight);
    width: 100vw;
    max-width: 100%;
    background-position: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}


.header-logo {
    width: 18vw;
    object-fit: contain;
    object-position: center;
    margin-right: 20px;
}

.header-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.no-scroll {
    position: fixed;
    overflow: hidden;
}

.menu-link {
    text-decoration: none;
    color: black;
}

.text-block p.header-menu-item {
    font: normal normal 600 clamp(0.8rem, 1.5vw, 1.4rem) Inter;
    text-align: center;
    margin-top: 1vw;
    height: 1.8vw;
    line-height: 1.5vw;
}

.header-menu-item.active {
    border-bottom: 3px solid #F05125;
    box-sizing: border-box;
}

.hero-1 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)), var(--hero-1);
}

.hero-2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)), var(--hero-2);
}

.hero-3 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), var(--hero-3);
}

.block {
    padding-left: var(--sidepad);
    padding-right: var(--sidepad);
    text-align: center;
}

.block-title-1 {
    padding-top: var(--toppad-1);
    padding-left: var(--leftpad-1);
    margin: 0 auto;
    text-align: left;
    font: normal normal 800 clamp(2.5rem, 4.5vw, 4.5rem) Inter;
    letter-spacing: 0.1vw;
    color: rgba(255, 255, 255, 0.9);
    opacity: 1;
}

.block-subtitle-1 {
    margin: 0.3rem 0 1.5em;
    padding-left: var(--leftpad-1);
    text-align: left;
    font: normal normal 800 clamp(1.7rem, 2.8vw, 2.8rem) Inter;
    letter-spacing: 0.1vw;
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
}

.block-title-2 {
    padding-top: var(--toppad-2);
    padding-left: var(--leftpad-1);
    margin: 0 auto;
    text-align: left;
    font: normal normal 800 clamp(2.5rem, 4.5vw, 4.5rem) Inter;
    letter-spacing: 0.1vw;
    color: rgba(0, 0, 0, 0.7);
    opacity: 1;
}

.swiper {
    width: 100vw;
    height: 100vh;
}

.swiper-slide {
    flex: 0 0 100vw;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.swiper-pagination-bullet-active {
    background-color: #fff !important;
    width: 10px !important;
    height: 10px !important;
}

.swiper-button-prev, .swiper-button-next {
    padding: 2%;
}

.hero-picture {
    height: 100%;
}

.featured-picture-1 {
    width: 100%;
    height: var(--herosize2);
    background-size: 100%;
    margin-bottom: 2em;
}

.scroll-picture {
    margin: 6vw var(--sidepad);
    width: auto;
    height: var(--scrollpicsize);
    background-size: 100%;
}

.container-text {
    width: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-bottom: 2em;
}

.cont1 {
    height: var(--cont1size);
    background-image: var(--cont1Bg);
    margin: 0;
}

.cont1b {
    height: var(--cont1bsize);
    background-image: var(--cont1bBg);
}

.cont2a {
    height: var(--cont2asize);
    padding: 0 !important;
}

.cont2 {
    margin: 0;
    background-image: var(--cont2Bg);
}

.cont3 {
    height: var(--cont3size);
    margin: 0;
    background-image: var(--cont3Bg);
}

.cont3b {
    height: var(--cont3bsize);
    background-image: var(--cont3bBg);
}

.cont4 {
    height: var(--cont4size);
    margin: 0;
    background-image: var(--cont4Bg);
}

.cont4b {
    height: var(--cont4bsize);
    background-image: var(--cont4bBg);
}

.text-block {
    padding: 2rem var(--sidepad);
    width: var(--textboxsize);
    /*max-width: 850px;*/
    text-align: left;
    font: normal normal 300 clamp(1rem, 1.2vw, 2rem) Inter;
    line-height: clamp(1rem, 1.8vw, 2.5rem);
    color: black;
    margin-bottom: 1.7em;
}

.text-block.large {
    width: var(--largetextboxsize);
    margin-bottom: 0;
}

.text-block.medium {
    width: var(--mediumtextboxsize);
    margin-bottom: 0;
}

.black {
    background-color: #000;
}

.yellow {
    background-color: #FBECAA;
}

.light-blue {
    background-color: #EFF8FF;
}


.text-block.last {
    width: var(--textboxlast);
}

.text-block p {
    margin: 0 0 1.5em 0;
}

.text-block p.footer-white {
    font: normal normal 300 clamp(0.65rem, 1.2vw, 1.5rem) Inter;
    color: white;
    margin: 0;
}

.text-block h2 {
    font: normal normal 750 clamp(1.7rem, 2.8vw, 2.8rem) Inter;
    letter-spacing: 0;
    color: #F05125;
    opacity: 1;
    margin-bottom: 20px;
}

.text-block h2.h2-blue {
    font: normal normal 700 clamp(1.2rem, 1.8vw, 1.8rem) Inter;
    color: #1F82C5;
}

.text-block h2.h2-white {
    font: normal normal 600 clamp(1.2rem, 1.8vw, 1.8rem) Inter;
    line-height: clamp(1.2rem, 2vw, 2.8rem);
    color: #fff;
}

.text-block h3 {
    font: normal normal 700 clamp(1rem, 1.6vw, 1.6rem) Inter;
    margin-bottom: 0;
}

.text-block h3.h3-nonlink {
    font: normal normal 400 clamp(1rem, 1.6vw, 1.6rem) Inter;
    margin-bottom: 0;
}

.text-block h3.h3-link a {
    color: black;
    text-decoration: none;
    text-decoration-color: #F05125;
    margin-bottom: 0;
}

.text-block h3.h3-link a:hover {
    text-decoration: underline;
    text-decoration-color: #1F82C5;
}

.text-block h3.h3-orange {
    color: #F05125;
}

.text-block h3.h3-orange a {
    color: #F05125;
    text-decoration: underline;
    text-decoration-color: #F05125;
}

.text-block h3.h3-orange a:hover {
    text-decoration-color: #1F82C5;
}

.text-block blockquote {
    font: normal normal 250 clamp(1.2rem, 2vw, 2rem) Inter;
    font-variation-settings: 'slnt' -12;
    color: black;
    margin: 0;
}

.text-block.post-largequote {
    margin: 0;
    padding-top: 0;
}

.text-block blockquote.large {
    font: normal normal 250 clamp(1.8rem, 2.6vw, 4rem) Inter;
    font-variation-settings: 'slnt' -12;
    line-height: 3.5vw;
    color: black;
    margin: 0;
}

.author {
    margin-top: 2rem;
    display: flex;
    align-items: center;
}

.author-picture {
    height: clamp(3rem, 6.5vw, 6.5rem);
    width: clamp(3rem, 6.5vw, 6.5rem);
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    margin-right: 10px;
}

.author-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-height: 6.5rem;
}

.author-name {
    font: normal normal 600 clamp(0.8rem, 1.2vw, 1.2rem) Inter;
    color: black;
}

.text-block p.author-name {
    margin: 0;
}

.text-block p.author-title {
    font: normal normal 300 clamp(0.8rem, 1.2vw, 1.2rem) Inter;
    color: black;
    margin: 0.5rem 0 0;
}

.footer-logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5vw 0;
}

.footer-logo-link{
    max-height: 60px;
    max-width: 10%;
    object-fit: contain;
    object-position: center;
}

.footer-logo {
    height: 30px;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}

.illustration {
    position: relative;
}

.menu-icon {
    cursor: pointer;
    display: none;
    width: 30px;
    height: 30px;
    z-index: 1;
}

.show {
    display: flex;
}

#jellyfish {
    width: 25vw;
    position: absolute;
    z-index: 1;
    top: -50vw;
    right: -45vw;
}

#noinsectpin {
    width: 25vw;
    position: absolute;
    z-index: 1;
    top: -3vw;
    left: -50vw;
}

#rice {
    width: clamp(5em, 22vw, 22em);
    position: absolute;
    z-index: 1;
    top: -12vw;
    right: -90vw;
}

#oyster {
    width: clamp(5rem, 15vw, 15rem);
    position: absolute;
    z-index: 1;
    top: -8vw;
    left: -50vw;
}

#veggie {
    width: clamp(5em, 23vw, 23em);
    position: absolute;
    z-index: 1;
    top: -13vw;
    right: -100vw;
}

#mushroom-1 {
    width: clamp(10em, 20vw, 20em);
    position: absolute;
    z-index: 1;
    top: -20vw;
    right: 22vw;
}

#mushroom-2 {
    width: clamp(20em, 45vw, 45em);
    position: absolute;
    z-index: 1;
    top: -10vw;
    right: -12vw;
}

#beans {
    width: clamp(15em, 24vw, 24em);
    position: absolute;
    z-index: 1;
    top: -25vw;
    right: 15vw;
}

#scenario {
    padding: 0 0 1.5rem;
}

h2#scenario {
    content: "It all started with an imagined,<br>yet possible scenario.";
}

#taste-the-future {
    padding: 0 0 1.5rem;
    margin: 0;
}

#colored-block-3 {
    padding: 4vw 0 1.5rem;
    margin: 0;
}

#learn-more {
    padding: 2vw 0 0.2rem;
    margin: 0;
}

#footer {
    margin-bottom: -50px;
    padding: 0;
}

#mobile-nav {
    display: none;
}

@media only screen and (min-width: 1025px) {
    #mobile-header {
        display: none;
    }

    #desktop-header {
        display: flex;
    }
}

@media only screen and (max-width: 1024px) {
    :root {
        --hero-1: url('./img/bg/m-hero-image-1.webp');
        --hero-2: url('./img/bg/m-hero-image-2.webp');
        --hero-3: url('./img/bg/m-hero-image-3.webp');
        --sidepad: calc(99vw * (30 / 390));
        --toppad-1: calc(150vw * (100 / 390));
        --toppad-2: calc(150vw * (100 / 390));
        --leftpad-1: 10%;
        --headerheight: calc(100vw * (92 / 390));
        --herosize2: calc(99vw * (1700 / 1920));
        --scrollpicsize: calc(82vw * (1080 / 1920));
        --cont1Bg: url('./img/bg/M-Block01.svg');
        --cont1bBg: url('./img/bg/M-Block01b.svg');
        --cont2Bg: url('./img/bg/M-Block02.svg');
        --cont3Bg: url('./img/bg/M-Block03.svg');
        --cont3bBg: url('./img/bg/M-Block03b.svg');
        --cont4Bg: url('./img/bg/M-Block04.svg');
        --cont4bBg: url('./img/bg/M-Block04b.svg');
        --cont1size: calc(99vw * (240 / 390));
        --cont1bsize: calc(99vw * (213 / 390));
        --cont2asize: calc(99vw * (100 / 390));
        --cont3size: calc(99vw * (125 / 390));
        --cont3bsize: calc(99vw * (145 / 390));
        --cont4size: calc(99vw * (152 / 390));
        --cont4bsize: calc(99vw * (128 / 390));
        --textboxsize: calc(99vw * (335 / 390));
        --mediumtextboxsize: 80%;
        --largetextboxsize: 80%;
        --textboxlast: 80%;
        --white: #ffffff;
        --swiper-theme-color: #e6e6e6 !important;
        --swiper-navigation-size: 25px !important;
    }

    .author {
        flex-direction: column;
    }

    .author-picture {
        height: clamp(5rem, 25vw, 20rem);
        width: clamp(5rem, 25vw, 20rem);
        object-fit: cover;
        object-position: center;
        border-radius: 50%;
        margin-right: 10px;
    }

    .text-block {
        padding: 2rem var(--sidepad);
        width: var(--textboxsize);
        text-align: left;
        font: normal normal 300 clamp(1rem, 1.2vw, 2rem) Inter;
        line-height: clamp(1rem, 1.5rem, 2rem);
        color: black;
        margin-bottom: 1.7em;
    }

    .author-info, .author-name {
        text-align: center;
        align-items: center;
        padding-top: 0.5rem;
    }

    header {
        background-image: url('./img/m-menu-bar-bg.svg');
        padding: 0;
    }

    .header-logo {
        width: 45vw;
        object-fit: contain;
        object-position: center;
        position: relative;
        z-index: 1;
    }

    .header-menu {
        width: 100%;
        padding-left: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .menu-icon {
        float: right;
        padding: 0 2rem 1rem 0;
        display: none;
    }

    .header-menu p {
        display: none;
    }

    .menu-icon {
        display: block;
    }

    .menu-icon__line {
        height: 2px;
        width: 30px;
        background-color: #000;
        margin: 5px 0;
        display: block;
        transition: 0.5s ease-in-out;
    }

    .menu-icon.close {
        right: 100px;
        position: inherit;
    }

    .menu-icon.close .menu-icon__line:first-child {
        transform: rotate(-45deg) translate(0, 8px);
        position: absolute;
    }

    .menu-icon.close .menu-icon__line:last-child {
        transform: rotate(45deg) translate(0, -9px);
        position: absolute;
    }

    .menu-icon.close .menu-icon__line:nth-child(2) {
        opacity: 0;
        transition: 0s ease-in-out;
    }

    .menu-icon__separator {
        height: 2px;
        width: 100%;
        background-color: #DF5C37;
        margin: 5px 0;
        border: none;
        display: block;
    }

    .text-block blockquote.large {
        line-height: 2.5rem;
    }

    .cont2 {
        margin-top: 50vw;
    }

    .cont3 {
        margin: 30vw 0 0 !important;
    }

    .cont3b {
        margin-bottom: 25vw;
    }

    .text-block h2.h2-white {
        line-height: clamp(1.4rem, 7vw, 1.8rem);
    }

    .footer-logos {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        padding: 15vw 0;
    }

    .footer-logo-link{
        max-height: 60px;
        max-width: 70%;
        padding: 8vw 0;
    }

    .footer-logo {
        height: 10vw;
        max-height: 60px;
        max-width: 100%;
        width: 40vw;
        object-fit: contain;
        object-position: center;

    }

    .text-block p.footer-white{
        text-align: center;
        line-height: 1rem;
    }

    #taste-the-future {
        padding-top: 50px;
    }

    #the-live-event {
        padding-top: 50px;
    }

    #mobile-header {
        position: fixed;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: var(--headerheight);
        top: 0;
        width: 100%;
        z-index: 100;
        transition: all .3s ease;
    }

    #desktop-header {
        display: none;
    }

    #mobile-nav {
        background-color: rgb(255, 245, 221);
        position: fixed;
        top: 0;
        bottom: 0;
        right: -100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.5s ease-in-out;
        overflow: hidden;
    }

    #mobile-nav.show {
        right: 0;
    }

    #mobile-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 80%;
    }

    #mobile-nav li {
        margin: 20px 0;
    }

    #mobile-nav a {
        color: #000; /* black text */
        font-size: 24px;
        text-align: center;
        text-decoration: none;
    }

    #MobileSpacing1 {
        padding-bottom: -5vw;
    }

    #colored-block-3 {
        padding: 15vw 0 1.5rem;
        margin: 0;
    }

    #jellyfish {
        width: 75vw;
        top: 50vw;
        right: -45vw;
    }

    #noinsectpin {
        width: 90vw;
        top: -45vw;
        left: -80vw;
    }

    #rice {
        width: 65vw;
        top: -42vw;
        right: -60vw;
    }

    #oyster {
        width: 45vw;
        top: -8vw;
        left: -50vw;
    }

    #veggie {
        width: 90vw;
        top: -5vw;
        right: -17vw;
        rotate: -90deg;
    }

    #mushroom-1 {
        width: clamp(10em, 20vw, 20em);
        z-index: 1;
        top: -20vw;
        right: 22vw;
    }

    #mushroom-2 {
        width: clamp(20em, 45vw, 45em);
        z-index: 1;
        top: -10vw;
        right: -12vw;
    }

    #beans {
        width: 80vw;
        position: absolute;
        z-index: 1;
        top: 0;
        right: 10vw;
        transform: scaleX(-1);
    }

    #pre-footer {
        margin-top: 115vw;
    }

    #learn-more {
        padding-top: 10vw;
    }
}