﻿@font-face {
    font-family: 'FFScala';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/fonts/ff-scala-sans-pro-light.woff2) format('woff2');
}

@font-face {
    font-family: 'FFScala';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/ff-scala-sans-pro-regular.woff2) format('woff2');
}


@font-face {
    font-family: 'Sweet';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/sweet-sans-pro-bold.woff2) format('woff2');
}

@font-face {
    font-family: 'PPMigra';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(/fonts/ppmigra-extralight.woff2) format('woff2');
}

:root {
    --black: #000;
    --white: #fff;
    --brown: #ac583d;
    --beige: #f1efe8;
    --beige-dark: #d1cec5;
    --transition-default: all .3s linear;
}

html {
    font-size: 62.5%;
    height: 100%;
}

body {
    font-family: 'FFScala', sans-serif;
    font-size: 2.2rem;
    line-height: 3.6rem;
    font-weight: 300;
    color: var(--black);
    padding-bottom: 10rem;
    -webkit-backface-visibility: visible !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    body.menu--open {
        overflow: hidden;
    }

main {
    max-width: 100vw;
    overflow: hidden;
    /* temp */
    min-height: 800px;
}

a, button {
    color: var(--black);
    text-decoration: none;
    transition: var(--transition-default);
}

.richtext a {
    color: var(--brown);
    background-image: linear-gradient(var(--black), var(--black));
    background-position: 0 calc(100% - .2rem);
    background-repeat: no-repeat;
    background-size: 0% 2px;
    display: inline-block;
}

    .richtext a:hover {
        background-size: 100% 2px;
    }

.button {
    padding: 1rem;
    border: none;
    border-radius: .5rem;
}

.container,
.row {
    --bs-gutter-x: 0px !important;
}

@media (min-width: 1600px) {
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1520px;
    }
}

@media (min-width: 1800px) {
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1620px;
    }
}

.iframe__container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

    .iframe__container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

h1, h2, h3, h4, h5, h6 {
    line-height: 1;
}

h1 {
    font-family: 'Sweet';
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 0;
}

h2 {
    font-family: 'Sweet';
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 4rem;
}

h3 {
    font-family: 'PPMigra';
    font-size: 6rem;
    font-weight: 100;
    margin-bottom: 6rem;
}

p {
    margin-bottom: 3.6rem;
}

    p:last-of-type {
        margin-bottom: 0;
    }

strong {
    font-weight: 400;
}

.inspiration {
    position: relative;
    z-index: 0;
}

    .inspiration .container {
        position: relative;
    }

.inspiration__bg {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-color: var(--brown);
    overflow: hidden;
}

.blobs {
    width: 100%;
    height: 100%;
    filter: blur(5rem);
}

.blob {
    border-radius: 40% 50% 30% 40%;
    opacity: .7;
    position: absolute;
}

.blob-1 {
    background: rgba(141, 63, 35, 1);
    height: 20vw;
    width: 20vw;
    left: 5vw;
    top: 10vw;
    transform: rotate(-180deg);
    animation: transform 5s ease-in-out infinite both alternate, movement_one 10s ease-in-out infinite both;
    z-index: 1;
}

.blob-2 {
    background: rgba(217, 154, 132, .8);
    height: 15vw;
    width: 20vw;
    left: 20vw;
    top: 40vw;
    transform: rotate(-180deg);
    animation: transform 8s ease-in-out infinite both alternate, movement_two 15s ease-in-out infinite both;
    z-index: 2;
}

.blob-3 {
    background: rgba(217, 154, 132, 1);
    height: 5vw;
    width: 10vw;
    left: 0;
    top: 10vw;
    transform: rotate(-180deg);
    animation: transform 8s ease-in-out infinite both alternate, movement_three 8s ease-in-out infinite both;
    z-index: 3;
}

@keyframes transform {
    0%, 100% {
        border-radius: 33% 67% 70% 30% / 30% 40% 70% 70%;
    }

    20% {
        border-radius: 37% 63% 51% 49% / 37% 35% 35% 63%;
    }

    40% {
        border-radius: 36% 64% 64% 36% / 64% 48% 52% 26%;
    }

    60% {
        border-radius: 37% 63% 51% 49% / 30% 30% 70% 73%;
    }

    80% {
        border-radius: 40% 60% 42% 58% / 51% 51% 49% 59%;
    }
}


@keyframes movement_one {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: translate(50%, 20%) rotateY(10deg) scale(1.5);
    }
}

@keyframes movement_two {
    0%, 100% {
        transform: translate(-30%, 0);
    }

    50% {
        transform: translate(50%, 20%) rotate(-200deg) scale(1.3);
    }
}

@keyframes movement_three {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: translate(50%, 20%) rotate(-200deg) scale(1.3);
    }
}

.inspiration .container .row {
    position: relative;
    z-index: 1;
}

.inspiration__logo {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    font-family: 'Sweet';
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--white);
    padding-top: 15rem;
}

    .inspiration__logo img {
        width: 53%;
        height: auto;
        margin-bottom: 18%;
    }

.inspiration__imagetop img {
    width: 100%;
    height: auto;
}

.inspiration__imagebottom {
    display: flex;
    justify-content: flex-end;
}

    .inspiration__imagebottom img {
        width: calc(100% - 10rem);
        height: auto;
    }

.inspiration__text {
    background-color: var(--beige);
    padding: 0 10rem;
    display: flex;
    flex-flow: column;
    justify-content: center;
    position: relative;
}

    .inspiration__text:after {
        content: "";
        width: 100vw;
        height: 300%;
        position: absolute;
        bottom: 0;
        right: -100vw;
        background-color: var(--beige);
    }

.inspiration__gallery {
    margin-top: 10rem;
}

    .inspiration__gallery ul {
        position: absolute;
        bottom: 2rem;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }

        .inspiration__gallery ul li::marker {
            content: none;
        }

        .inspiration__gallery ul button {
            width: 4rem;
            height: 4rem;
            border: none;
            outline: none;
            padding: 0;
            background-color: transparent;
            text-indent: -9000px;
            position: relative;
        }

            .inspiration__gallery ul button:after {
                content: "";
                width: 1rem;
                height: 1rem;
                border-radius: 50%;
                position: absolute;
                top: calc(50% - .5rem);
                left: calc(50% - .5rem);
                background-color: var(--black);
            }

        .inspiration__gallery ul .slick-active button:after {
            background-color: var(--brown);
        }

    .inspiration__gallery img {
        width: 100%;
        height: auto;
    }

.space__text {
    padding: 0 10rem;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.space__image {
    display: flex;
    justify-content: flex-start;
}

    .space__image img {
        width: calc(100% - 10rem);
        height: auto;
    }

.intuition .container {
    position: relative;
}

.intuition .row {
    position: relative;
    z-index: 1;
}

.intuition__bg {
    width: 50%;
    height: calc(100% - 10rem);
    position: absolute;
    top: 10rem;
    right: 0;
    z-index: 0;
    background-color: var(--brown);
}

.intuition__text {
    padding: 0 10rem 0 0;
}

.intuition__textinner {
    background-color: var(--beige);
    padding: 12rem 20rem 12rem 10rem;
    display: flex;
    flex-flow: column;
    justify-content: center;
    position: relative;
}

    .intuition__textinner:before {
        content: "";
        width: 100vw;
        height: 100%;
        position: absolute;
        top: 0;
        left: -100vw;
        background-color: var(--beige);
    }

.intuition__quote {
    padding: 0 10rem;
    display: flex;
    flex-flow: column;
    justify-content: center;
    color: var(--white);
}

    .intuition__quote blockquote {
        font-family: 'PPMigra';
        font-size: 6rem;
        line-height: 1;
        font-weight: 100;
        margin-bottom: 10rem;
    }

.intuition__image {
    display: flex;
    flex-flow: column;
}

    .intuition__image img {
        width: 100%;
        height: auto;
    }

.intuition__footer {
    background-color: var(--white);
    display: flex;
    padding: 8rem;
}

    .intuition__footer > div {
        width: 50%;
        display: flex;
        align-items: flex-end;
    }

        .intuition__footer > div + div {
            margin-left: 8rem;
        }

    .intuition__footer p {
        transform: translateY(1.2rem);
    }

    .intuition__footer a {
        color: var(--black);
    }

.intuition__footer--mobile {
    display: none;
}

@media(min-width: 992px) and (max-width: 1599px) {
    body {
        font-size: 1.8rem;
        line-height: 2.8rem;
    }

    h2 {
        font-size: 1.6rem;
        margin-bottom: 2rem;
    }

    h3 {
        font-size: 4rem;
        margin-bottom: 3rem;
    }

    p {
        margin-bottom: 2rem;
    }

    .inspiration__imagebottom img {
        object-fit: cover;
    }

    .inspiration__text {
        padding: 4rem 0 4rem 10rem;
    }

    .space__text {
        padding: 4rem 10rem 4rem 0;
    }

    .space__image img {
        object-fit: cover;
    }

    .intuition__textinner {
        padding: 10rem;
    }

    .intuition__image {
        object-fit: cover;
    }

    .intuition__quote {
        padding: 4rem 10rem 4rem 10rem;
    }

        .intuition__quote blockquote {
            font-size: 4rem;
            margin-bottom: 5rem;
        }

    .intuition__footer {
        padding: 4rem;
    }

        .intuition__footer > div {
            width: 40%;
        }

            .intuition__footer > div + div {
                width: 60%;
                margin-left: 4rem;
            }
}

@media(max-width: 1199px) {
	body {
        font-size: 1.6rem;
        line-height: 2.6rem;
    }
}

@media(max-width: 991px) {
    .container {
        max-width: 100% !important;
    }

    h2 {
        font-size: 1.4rem;
        margin-bottom: 2rem;
    }

    h3 {
        font-size: 3.2rem;
        margin-bottom: 4rem;
    }

    p {
        margin-bottom: 2rem;
    }

    .blobs {
        filter: blur(3rem);
    }

    .blob-1 {
        width: 40vw;
        height: 40vw;
        top: 15vw;
        left: 10vw;
    }

    .blob-2 {
        width: 30vw;
        height: 30vw;
        top: 50vw;
        left: 50vw;
    }

    .blob-3 {
        width: 20vw;
        height: 15vw;
    }

    .inspiration__bg {
        width: calc(100vw - 4rem);
        height: 83.82352941176471vw;
        top: 2rem;
        left: 2rem;
    }

    .inspiration__logo {
        height: 83.82352941176471vw;
        padding-top: 3rem;
        font-size: 1.6rem;
    }

        .inspiration__logo img {
            margin-bottom: 5rem;
        }

    .inspiration__imagetop img {
        width: calc(100% - 2rem);
    }

    .inspiration__text {
        order: 0;
        padding: 6rem 4rem;
    }

    .inspiration__imagebottom {
        order: 1;
        position: relative;
    }

        .inspiration__imagebottom:before {
            content: "";
            width: calc(100vw - 2rem);
            height: calc(100% + 4rem);
            position: absolute;
            top: 0;
            left: 0;
            background-color: var(--brown);
            z-index: 0;
        }

        .inspiration__imagebottom img {
            width: calc(100% - 2rem);
            z-index: 1;
        }

    .inspiration__gallery {
        margin-top: 4rem;
    }

        .inspiration__gallery ul {
            bottom: 0;
            margin-bottom: 0;
        }

            .inspiration__gallery ul button {
                width: 3rem;
                height: 3rem;
            }

                .inspiration__gallery ul button:after {
                    width: .6rem;
                    height: .6rem;
                    top: calc(50% - .3rem);
                    left: calc(50% - .3rem);
                }

    .space__text {
        padding: 6rem 4rem;
    }

    .space__image img {
        width: calc(100% - 2rem);
    }

    .intuition__bg {
        width: 100%;
        right: unset;
        left: 0;
        top: 25rem;
    }

    .intuition__text {
        padding: 0 2rem 0 0;
    }

    .intuition__textinner {
        padding: 6rem 4rem;
    }

    .intuition__image img {
        width: calc(100% - 2rem);
    }

    .intuition__footer--desktop {
        display: none;
    }

    .intuition__footer--mobile {
        display: flex;
        flex-flow: column;
        padding: 6rem 4rem;
    }

    .intuition__footer > div + div {
        margin-left: 0;
        margin-top: 4rem;
    }

    .intuition__footer img {
        width: 15rem;
        height: auto;
    }

    .intuition__quote {
        padding: 6rem 6rem 6rem 4rem;
    }

        .intuition__quote blockquote {
            font-size: 3.2rem;
            margin-bottom: 6rem;
        }
}