body {
    font-family: "neue-haas-unica", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.about-open h1, .project-info-open {
    color:var(--black-0-5)
}

.project-info-open polygon {
    fill: var(--black-0-5);
    transition:fill .25s
}

a, .about-open h1, .project-info-open h1 {
    transition:color .25s;
}

a:hover, .about-open:hover h1, .project-info-open:hover h1 {
    color:#FF6235
}

.project-info-open:hover polygon {
    fill:#FF6235
}

.mbh2 {
    margin-bottom:calc(var(--h2) * 1.3)
}

.mbh2-third {
    margin-bottom:calc((var(--h2) * 1.3) / 3)
}

.mbh3 {
    margin-bottom:calc(var(--h3) * 1.3)
}

.mbh3-half {
    margin-bottom:calc((var(--h3) * 1.3) / 2)
}

.h3-gap {
    row-gap:calc(var(--h3) * 1.3)
}

@media (min-width: 640px) {
    .mbh2 {
        margin-bottom:calc(var(--sm-h2) * 1.3)
    }
    
    .mbh2-third {
        margin-bottom:calc((var(--sm-h2) * 1.3) / 3)
    }

    .mbh3 {
        margin-bottom:calc(var(--sm-h3) * 1.3)
    }
    
    .mbh3-half {
        margin-bottom:calc((var(--sm-h3) * 1.3) / 2)
    }
    
    .h3-gap {
        row-gap:calc(var(--sm-h3) * 1.3)
    }
}

@media (min-width: 1028px) {
    .mbh2 {
        margin-bottom:calc(var(--md-h2) * 1.3)
    }
    
    .mbh2-third {
        margin-bottom:calc((var(--md-h2) * 1.3) / 3)
    }

    .mbh3 {
        margin-bottom:calc(var(--md-h3) * 1.3)
    }
    
    .mbh3-half {
        margin-bottom:calc((var(--md-h3) * 1.3) / 2)
    }
    
    .h3-gap {
        row-gap:calc(var(--md-h3) * 1.3)
    }
}

@media (min-width: 1728px) {
    .mbh2 {
        margin-bottom:calc(var(--lg-h2) * 1.3)
    }
    
    .mbh2-third {
        margin-bottom:calc((var(--lg-h2) * 1.3) / 3)
    }

    .mbh3 {
        margin-bottom:calc(var(--lg-h3) * 1.3)
    }
    
    .mbh3-half {
        margin-bottom:calc((var(--lg-h3) * 1.3) / 2)
    }
    
    .h3-gap {
        row-gap:calc(var(--lg-h3) * 1.3)
    }
}

.swiper.home-carousel {
    overflow: visible !important;
}

.scrolltrigger-transitionin div {
    transform:translateY(100%);
    transition: transform .75s, opacity .75s;
    opacity: 0;
}

@media (min-width: 640px) {
    .scrolltrigger-transitionin div {
        transform:translateY(50%);
    }
}

.scrolltrigger-transitionin div.in-view {
    transform:translateY(0);
    opacity: 1;
}

img.lazyload-transition {
    opacity: 0;
    transition: opacity 1000ms cubic-bezier(0.65, 0, 0.35, 1);
}

img.lazyload-transition.lazyloaded {
    opacity: 1;
}