@charset "UTF-8";


/* @font-face {
    font-family: Clash Grotesk;
    src: url(/_next/static/media/ClashGrotesk-Medium.283db4a8.eot);
    src: url(/_next/static/media/ClashGrotesk-Medium.283db4a8.eot?#iefix) format("embedded-opentype"), url(/_next/static/media/ClashGrotesk-Medium.b2b63e57.woff2) format("woff2"), url(/_next/static/media/ClashGrotesk-Medium.fcc32077.woff) format("woff"), url(/_next/static/media/ClashGrotesk-Medium.54902b94.ttf) format("truetype"), url(/_next/static/media/ClashGrotesk-Medium.13cf3c1a.svg#ClashGrotesk-Medium) format("svg");
    font-weight: 500;
    font-style: normal;
    font-display: swap
} */


 @font-face {
    font-family: Clash Grotesk;
    src: url(ClashGrotesk-Regular.eot);
    src: url(ClashGrotesk-Regular.eot?#iefix) format("embedded-opentype"), 
    url(ClashGrotesk-Regular.woff2) format("woff2"), 
    url(ClashGrotesk-Regular.woff) format("woff"), 
    url(ClashGrotesk-Regular.ttf) format("truetype"), 
    url(ClashGrotesk-Regular.svg#ClashGrotesk-Regular) format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

/*@font-face {
    font-family: Clash Grotesk;
    src: url(./fonts/ClashGrotesk-Semibold.ff3b2300.eot);
    src: url(./fonts/ClashGrotesk-Semibold.ff3b2300.eot?#iefix) format("embedded-opentype"), url(/_next/static/media/ClashGrotesk-Semibold.6a1b6b9c.woff2) format("woff2"), url(/_next/static/media/ClashGrotesk-Semibold.f7bd49e9.woff) format("woff"), url(/_next/static/media/ClashGrotesk-Semibold.de7b38ed.ttf) format("truetype"), url(/_next/static/media/ClashGrotesk-Semibold.a9b177dc.svg#ClashGrotesk-Semibold) format("svg");
    font-weight: 600;
    font-style: normal;
    font-display: swap
} */

:root {
    --green: #0ac2a7;
    --blue: #027ef2;
    --purple: #71427b;
    --orange: #fe653e;
    --white: #fff;
    --grey: #757575;
    --light-grey: #dbdbdb;
    --black: #0f1010;
    --faded-green: #d3efea;
    --faded-blue: #027ef226;
    --faded-purple: #e2d8e4;
    --faded-orange: #ffdfd7;
    --background-grey: #f7f7f6;
    --color-000000: #0f1010;
    --font-family-clash-grotesk: "Clash Grotesk";
    --font-style-normal: normal;
    --font-weight-600: 600;
    --font-weight-normal: normal;
    --font-weight-medium: medium;
    --font-size-16: 16px;
    --font-size-17: 17px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-25: 25px;
    --font-size-30: 30px;
    --font-size-35: 35px;
    --font-size-40: 40px;
    --font-size-45: 45px;
    --font-size-60: 60px;
    --font-size-75: 75px;
    --font-size-80: 80px;
    --font-size-22-5: 22.5px;
    --character-spacing-0: 0px;
    --line-spacing-25: 25px;
    --line-spacing-30: 30px;
    --line-spacing-35: 35px;
    --line-spacing-40: 40px;
    --line-spacing-45: 45px;
    --line-spacing-55: 55px;
    --line-spacing-65: 65px;
    --line-spacing-75: 75px;
    --line-spacing-95: 95px;
    --line-spacing-32-5: 32.5px
}

body,
html {
    padding: 0;
    margin: 0;
    font-family: var(--font-family-clash-grotesk);
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-17);
    line-height: var(--line-spacing-25);
    letter-spacing: var(--character-spacing-0);
    color: var(--color-000000);
    background-color: var(--background-grey)
}

.body-grey {
    color: var(--grey)
}

.body-grey,
.body-white {
    font-family: var(--font-family-clash-grotesk);
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-17);
    line-height: var(--line-spacing-25);
    letter-spacing: var(--character-spacing-0)
}

.body-white {
    color: var(--white)
}

h1 {
    font-family: var(--font-family-clash-grotesk);
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-600);
    font-size: var(--font-size-35);
    line-height: var(--line-spacing-45);
    letter-spacing: var(--character-spacing-0);
    color: var(--black)
}

h2 {
    font-size: var(--font-size-30);
    line-height: var(--line-spacing-55)
}

h2,
h3 {
    font-family: var(--font-family-clash-grotesk);
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--character-spacing-0);
    color: var(--black)
}

h3 {
    font-size: var(--font-size-22-5);
    line-height: var(--line-spacing-45)
}

h4 {
    font-family: var(--font-family-clash-grotesk);
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-600);
    font-size: var(--font-size-18);
    line-height: var(--line-spacing-30);
    letter-spacing: var(--character-spacing-0);
    color: var(--black)
}

h5 {
    line-height: var(--line-spacing-35)
}

h5,
h6 {
    font-family: var(--font-family-clash-grotesk);
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-16);
    letter-spacing: var(--character-spacing-0);
    color: var(--black)
}

h6 {
    line-height: var(--line-spacing-30)
}

.sub-title {
    font-size: var(--font-size-20);
    line-height: var(--line-spacing-30);
    color: var(--black)
}

.sub-title,
.xl-paragraph {
    font-family: var(--font-family-clash-grotesk);
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--character-spacing-0)
}

.xl-paragraph {
    font-size: var(--font-size-60);
    line-height: var(--line-spacing-75);
    color: var(--color-000000)
}

.paragraph {
    font-weight: var(--font-weight-medium);
    color: var(--black)
}

.input-label,
.paragraph {
    font-family: var(--font-family-clash-grotesk);
    font-style: var(--font-style-normal);
    font-size: var(--font-size-16);
    line-height: var(--line-spacing-32-5);
    letter-spacing: var(--character-spacing-0)
}

.input-label {
    font-weight: var(--font-weight-normal);
    color: var(--grey)
}

.label {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-18);
    color: var(--green)
}

.label,
.price-exemple {
    font-family: var(--font-family-clash-grotesk);
    font-style: var(--font-style-normal);
    line-height: var(--line-spacing-32-5);
    letter-spacing: var(--character-spacing-0)
}

.price-exemple {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-16)
}

.cookies,
.price-exemple {
    color: var(--white)
}

a {
    color: inherit
}

* {
    box-sizing: border-box
}

.blue-background {
    background-color: var(--blue)
}

.green-background {
    background-color: var(--green)
}

.orange-background {
    background-color: var(--orange)
}

.purple-background {
    background-color: var(--purple)
}

.white-background {
    background-color: var(--white)
}

.grey-background {
    background-color: var(--background-grey)
}

.blue-faded-background {
    background-color: var(--faded-blue)
}

.green-faded-background {
    background-color: var(--faded-green)
}

.orange-faded-background {
    background-color: var(--faded-orange)
}

.purple-faded-background {
    background-color: var(--faded-purple)
}

.blue {
    color: var(--blue)
}

.green {
    color: var(--green)
}

.orange {
    color: var(--orange)
}

.purple {
    color: var(--purple)
}

.black,
.black:hover {
    color: var(--black)
}

.white,
.white:hover {
    color: var(--white)
}

.mt-3-3 {
    margin-bottom: 1rem
}

.mt-6-6 {
    margin-bottom: 3rem
}

.m-3-3-6-6 {
    margin: 3rem 0 1rem
}

.divider {
    border: 0;
    border-top: 1px solid #000;
    margin: 0
}

.divider_black {
    border: 0;
    border-top: 2px solid #050606;
    margin: 0
}

.section {
    width: 100%;
    padding: 2rem 1rem 5rem;
    margin: 0
}

.section_box {
    padding-bottom: 5rem
}

.left,
.section-0,
.section_box {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin: 0
}

.left,
.section-0 {
    padding-bottom: 3rem
}

.section-0-0 {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin: 0
}

@media only screen and (min-width:481px) {

    .left,
    .section,
    .section-0,
    .section-0-0 {
        padding-left: 48px;
        padding-right: 48px
    }

    .section_box {
        max-width: calc(35rem + 2rem);
        padding: 0 0 10rem
    }
}

@media only screen and (min-width:1025px) {
    .section {
        padding-left: calc((100vw - 1580px) / 2);
        padding-right: calc(((100vw - 1580px) / 2));
        padding-top: 56px
    }

    .section_box {
        max-width: calc(90rem + 2rem)
    }

    .left {
        padding-left: calc((100vw - 1580px) / 2);
        padding-right: calc((100vw - 500px) / 2);
        padding-bottom: 9.5rem
    }

    .section-0,
    .section-0-0 {
        padding-left: calc((100vw - 1580px) / 2);
        padding-right: calc(((100vw - 1580px) / 2))
    }

    .section-0 {
        padding-bottom: 10rem
    }

    .body-grey,
    .body-white,
    body {
        font-size: var(--font-size-22-5);
        line-height: var(--line-spacing-32-5)
    }

    h1 {
        font-size: var(--font-size-75);
        line-height: var(--line-spacing-95)
    }

    h2 {
        font-size: var(--font-size-60);
        line-height: var(--line-spacing-75)
    }

    h3 {
        font-size: var(--font-size-45);
        line-height: var(--line-spacing-65)
    }

    h4 {
        font-size: var(--font-size-35);
        font-weight: var(--font-weight-normal);
        line-height: var(--line-spacing-45)
    }

    h5 {
        font-size: var(--font-size-25)
    }

    h6 {
        font-size: var(--font-size-22-5)
    }

    .sub-title {
        font-size: var(--font-size-30);
        line-height: var(--line-spacing-40)
    }

    .mt-3-3 {
        margin-bottom: 3.3rem
    }

    .mt-6-6 {
        margin-bottom: 6.6rem
    }

    .m-3-3-6-6 {
        margin: 6.6rem 0 3.3rem
    }
}