/*00000000 0000000000000000000     0000 00000000000    000000     00000000                  
               00    000 00   000   00  000       00   000     0000    000   0000     0000                
              0000     0 0    000    0  000       00   000       000   000  0000       0000               
               000000         000       000       00   000        000  000  000         0000              
                 0000000      000       000       00   000        000  000  000          000              
                    00000     000       000       00   000        000  000  000          000              
              00      000     000       000       00   000       000   000  0000        000               
              0000    000     000       0000    000    000     0000    000   00000    0000                
               000000000     000000       00000000    00000000000    000000    000000000                  
                                      
  0000000000     000000 000000000000  0000000000     00000000000    000000    000000000  000000   000000  
   000   000000    000   0000    000   000   000000    000  00000    000    00000   0000  000       000   
   000       000   000   0000      00  000       000   000    0000   000   000        00  000       000   
   000        000  000   0000    0     000        000  000    000    000  000          0  000       000   
   000        000  000   000000000     000        000  000000000     000  000             0000000000000   
   000        000  000   0000    0     000        000  000  0000     000  000             000       000   
   000       000   000   0000       0  000       000   000   0000    000  0000         0  000       000   
   000     0000    000   0000     000  000     0000    000    0000   000   0000000 00000  000       000   
  00000000000    000000 0000000000000 00000000000    000000    00000000000   000000000   000000   000000  
                                      www.studiodiedrich.com                                          */



/* ##############   PRESETS   ############## */
*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    --sd_c-black: #000;
    --sd_c-white: #fafafa;
    --sd_c-cream: #EBF0DC;
    --sd_c-grey-900: #141414;
    --sd_c-grey-800: #5A5A5F;
    --sd_c-grey-700: #A5A5A5;
    --sd_c-grey-600: #E1E1E1;
    --sd_c-grey-600-40: rgba(225, 225, 225, .4);
    --sd_c-grey-500: #F5F5F5;
    --sd_c-grey-900-80: rgba(20, 20, 20, .8);
    --sd_f-size-h1: 65px;
    --sd_f-size-h1-serif: 70px;
    --sd_f-size-h2: 45px;
    --sd_f-size-h3: 35px;
    --sd_f-size-h3-serif: 40px;
    --sd_f-size-p-xl: 45px;
    --sd_f-size-p-l: 30px;
    --sd_f-size-p-l-serif: 35px;
    --sd_f-size-p-m: 22px;
    --sd_f-size-p-s: 16px;
    --sd_f-line-height-h1: 1.1;
    --sd_f-line-height-h1-serif: .9;
    --sd_f-line-height-h2: 1.1;
    --sd_f-line-height-h3: 1;
    --sd_f-line-height-h3-serif: .85;
    --sd_f-line-height-p-xl: 1.1;
    --sd_f-line-height-p-l: 1.1;
    --sd_f-line-height-p-l-serif: .9;
    --sd_f-line-height-p-m: 1.1;
    --sd_f-line-height-p-s: 1;
    --sd_space-xxxxs: 5px;
    --sd_space-xxxs: 8px;
    --sd_space-xxs: 10px;
    --sd_space-xs: 15px;
    --sd_space-s: 20px;
    --sd_space-m: 25px;
    --sd_space-l: 40px;
    --sd_space-xl: 50px;
    --sd_space-xxl: 60px;
    --sd_space-xxxl: 75px;
    --sd_space-xxxxl: 100px;
    --sd_space-xxxxxl: 150px;
    --sd_space-xxxxxxl: 200px;
    --sd_margin-y: 25px;
    --sd_padding-y: 50px;
    --sd_max-width: 2200px;
    --sd_app-height: 100vh;
    --sd_dyn-app-height: 100vh;
    --sd-nav-height: 100px;
    --sd_transition-normal: all .3s ease-in-out;
    --sd_transition-short: all .2s ease-in-out;
    --sd_transition-very-short: all .1s ease-in-out;
    --sd_transition-lazyload: filter .3s ease-in-out .3s, opacity .3s ease-in-out;
    --sd_border-radius-xl: 150px;
    --sd_border-radius-l: 50px;
    --sd_border-radius-m: 25px;
    --sd_border-radius-s: 15px;
    --sd_border-radius-xs: 10px;
    --sd_border-radius-xxs: 5px;
}

::selection {
    color: var(--sd_c-grey-900);
    background: var(--sd_c-cream);
}

@font-face {
    font-family:'Acid-Grotesk';
    src: url('../fonts/FFF-AcidGrotesk-Regular.woff2') format('woff2'),
         url('../fonts/FFF-AcidGrotesk-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:'Keroine-Pro';
    src: url('../fonts/KeroinePRO-IntenseLegere.woff2') format('woff2'),
         url('../fonts/KeroinePRO-IntenseLegere.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html, body {
    min-height: 100%;
}

html {
    font-family: "Acid-Grotesk", sans-serif;
    background: var(--sd_c-white);
    overflow-x: hidden;
}

body {
    font-family: "Acid-Grotesk", sans-serif;
    font-weight: 400;
    font-style: normal;
    background: var(--sd_c-white);
    font-size: var(--sd_f-size-p-m);
    color: var(--sd_c-grey-900);
    line-height: var(--sd_f-line-height-p-m);
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    font-family: "Acid-Grotesk", sans-serif;
    font-style: normal;
    font-size: var(--sd_f-size-p-m);
    color: var(--sd_c-grey-900);
    line-height: var(--sd_f-line-height-p-m);
}

.p-s {
    font-size: var(--sd_f-size-p-s);
    line-height: var(--sd_f-line-height-p-s);
}
.p-m {
    font-size: var(--sd_f-size-p-m);
    line-height: var(--sd_f-line-height-p-m);
}
.p-l {
    font-size: var(--sd_f-size-p-l);
    line-height: var(--sd_f-line-height-p-l);
}
.p-l-serif {
    font-family: "Keroine-Pro", serif;
    font-size: var(--sd_f-size-p-l-serif);
    line-height: var(--sd_f-line-height-p-l-serif);
}
.p-xl {
    font-size: var(--sd_f-size-p-xl);
    line-height: var(--sd_f-line-height-p-xl);
}

h1, h2, h3 {
    font-family: "Acid-Grotesk", sans-serif;
    font-style: normal;
    font-weight: normal;
}

h1 {
    font-size: var(--sd_f-size-h1);
    line-height: var(--sd_f-line-height-h1);
}

h2 {
    font-size: var(--sd_f-size-h2);
    line-height: var(--sd_f-line-height-h2);
}

h3 {
    font-size: var(--sd_f-size-h3);
    line-height: var(--sd_f-line-height-h3);
    color: var(--sd_c-grey-800);
}

h3.h3-serif {
    font-family: "Keroine-Pro", serif;
    font-size: var(--sd_f-size-h3-serif);
    line-height: var(--sd_f-line-height-h3-serif);
}

a {
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    color: var(--sd_c-grey-900);
}

a,
a p,
p a,
.link-hover,
.link-hover a,
.link-hover p {
    transition: var(--sd_transition-normal);
}

p a:hover,
.link-hover:hover,
a.link-hover:hover,
.link-hover:hover p,
a.link-hover:hover p {
    color: var(--sd_c-grey-800);
}

.sd_button,
.sdn-inner {
    transition: var(--sd_transition-normal);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    background-color: var(--sd_c-grey-900-80);
}

.sd_button {
    border-radius: var(--sd_border-radius-xs);
    padding: calc(var(--sd_space-xs) + 2px) var(--sd_space-m);
}

.sd_button p {
    transition: var(--sd_transition-normal);
    color: var(--sd_c-grey-500);
}

.sd_button.light {
    background-color: var(--sd_c-white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.sd_button.light p {
    color: var(--sd_c-black);
}

.sd_button:hover:not(.no-hover) {
    background-color: var(--sd_c-white);
}

.sd_button.light:hover:not(.no-hover) {
    background-color: var(--sd_c-grey-900-80);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}

.sd_button:hover:not(.no-hover) p {
    color: var(--sd_c-grey-800);
}

.sd_button.light:hover:not(.no-hover) p {
    color: var(--sd_c-grey-500);
}

.ta-left {
    text-align: left;
}

.ta-center {
    text-align: center;
}

.ta-right {
    text-align: right;
}

p.grey-800,
.grey-800 {
    color: var(--sd_c-grey-800);
}

.bg-cream {
    background-color: var(--sd_c-cream);
}

.bg-black {
    background-color: var(--sd_c-black);
}

.bg-white {
    background-color: var(--sd_c-white);
}

.hidden {
    display: none !important;
}

img {
    vertical-align: bottom;
    width: 100%;
}

.img-wrapper {
    overflow: hidden;
}

li {
    list-style: none;
}

.mobile-only {
    display: none !important;
}

.swiper-pagination-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 50px 0 !important;
}

.swiper-scrollbar {
    background: var(--sd_c-middlegrey) !important;
    height: 2px !important;
    border-radius: 10px;
    max-width: 600px;
    position: relative !important;
    width: 100% !important;
    transform-origin: left center;
    left: 0 !important;
    right: 0 !important;
}

.swiper-scrollbar-drag {
    background: var(--sd_c-darkgrey) !important;
}

.lazy-image {
    width: 100%;
    height: auto;
    filter: blur(10px);
    transition: var(--sd_transition-lazyload);
    opacity: 0;
}

.lazy-image.loaded {
    filter: blur(0);
    opacity: 1;
}

/* ##############   PRESETS   ############## */

/* ##############   GENERAL   ############## */

.main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-height: var(--sd_app-height);
}


/* ------[ SD NAV ]------ */

.sd_nav {
    padding: 0 var(--sd_margin-y);
    z-index: 99;
    position: fixed;
    top: var(--sd_margin-y);
    width: 100%;
    max-width: 500px;
}

.sdn-inner {
    padding: var(--sd_space-xxs) var(--sd_space-xxs) var(--sd_space-xxs) var(--sd_space-s);
    display: flex;
    gap: var(--sd_space-xxl);
    width: 100%;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--sd_border-radius-s);
}

.hd-logo {
    width: 100%;
    max-width: 180px;
}

.hd-logo svg {
    width: 100%;
}

/* ---^--- SD NAV ---^--- */

/* ##############   GENERAL   ############## */

.content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.sd_module,
.block,
.m-w {
    max-width: var(--sd_max-width);
    width: 100%;
}

.sd_block:not(.full),
.m-around {
    margin: var(--sd_margin-y);
}

.block:not(.no-fade), 
.sd_nav:not(.no-fade), 
.rect-layer:not(.no-fade), 
.sd_module:not(.no-fade) {
    opacity: 0;
    transition: all 0.8s ease;
}

.block.fade-in,
.sd_nav.fade-in,
.rect-layer.fade-in,
.sd_module.fade-in {
    opacity: 1;
}

.rect-layer:not(.no-fade) {
    transition: all 2s ease;
}

.sd_nav {
    transform: translateY(-100px);
}

.sd_nav.slide-in {
    transform: translateY(0px);
}


/* ------[ MODULES ]------ */

.bubble-layer {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: var(--sd_margin-y);
}

.rect-layer {
    width: 100%;
    height: 100%;
    border-radius: var(--sd_border-radius-xl);
}

.blur-layer {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--sd_c-grey-600-40);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    filter: blur(10px);
    -webkit-filter: blur(10px);
    border-radius: var(--sd_border-radius-m);
}

.pink-fade {
    background: linear-gradient(90deg, rgb(255, 158, 214), rgb(245, 221, 241));
}

/* ---^--- MODULES ---^--- */


/* ------[ BLOCKS ]------ */

/* ------[ TEXT-BLOCK ]------ */

.sd_text-block,
.sdtb-text-head,
.sdtb-th-text {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.sd_text-block {
    padding: var(--sd_space-xxxxxxl) var(--sd_padding-y) var(--sd_space-xxxxxxl) var(--sd_padding-y);
}

.sdtb-text-head {
    gap: var(--sd_space-xxxxxxl);
    max-width: 1300px;
}

.sdtb-th-text {
    gap: var(--sd_space-xl);
}

.sdtb-text-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sd_space-xxxxl);
}

.sdtb-text-col {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--sd_space-m);
    line-break: normal;
}

.sdtb-text-col.half {
    grid-column: span 1;
}

.sdtb-text-col.space-bottom {
    margin-bottom: var(--sd_space-xxxxxxl);
}


/* ---^--- TEXT-BLOCK ---^--- */

/* ------[ CIRCULAR-BLOCK ]------ */

.sd_circular-block {
    display: flex;
    position: relative;
    min-height: 80vh;
    padding: var(--sd_padding-y);
}

.sdib-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sd_space-xl);
    align-items: center;
    min-height: 100%;
    width: 100%;
    z-index: 1;
    padding-top: var(--sd_space-xl);
}

.sdib-text,
.sdib-img {
    width: 100%;
}

.sdib-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sd_space-xl);
    height: 100%;
}

.sdib-text em {
    font-family: "Keroine-Pro", serif;
    font-style: normal;
}

.sdib-text strong {
    font-weight: normal;
    color: var(--sd_c-white);
}

.sdibt-bottom {
    display: flex;
    flex-direction: column;
    gap: var(--sd_space-xl);
    align-items: start;
    max-width: 650px;
}

.sdib-img {
    position: relative;
    width: 40vw;
    height: 40vw;
    flex-shrink: 0;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.sdib-img img {
    position: absolute;
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: var(--sd_border-radius-s);
    opacity: 0;
    transition: opacity 0.6s ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

@media only screen and (max-width: 1800px) {
    .sdib-img {
        width: 50vw;
        height: 50vw;
    }
    .sdib-img img {
        width: 140px;
        height: 140px;
    }
}
@media only screen and (max-width: 1600px) {
    .sdib-img {
        width: 50vw;
        height: 50vw;
    }
    .sdib-img img {
        width: 130px;
        height: 130px;
    }
}
@media only screen and (max-width: 1300px) {
    .sdib-img {
        width: 55vw;
        height: 55vw;
    }
}
@media only screen and (max-width: 1200px) {

    .sdib-content {
        display: flex;
        flex-direction: column-reverse;
        gap: 0;
        overflow: hidden;
    }
    .sdib-text,
    .sdibt-bottom {
        align-items: center;
        text-align: center;
    }
    .sdib-img {
        grid-row: 1;
        width: 80vw;
        height: 80vw;
        margin: -100px 0;
    }
}
@media only screen and (max-width: 950px) {
    .sdib-img {
        margin: -50px 0;
    }
    .sdib-img img {
        width: 12vw;
        height: 12vw;
        border-radius: var(--sd_border-radius-xs);
    }
}
@media only screen and (max-width: 650px) {
    .sdib-img {
        margin: -95px 0 -45px 0;
        width: 100vw;
        height: 100vw;
    }
    .sdib-img img {
        width: 15vw;
        height: 15vw;
    }
}


/* ---^--- CIRCULAR-BLOCK ---^--- */

/* ---^--- BLOCKS ---^--- */


/* ##############   FOOTER   ############## */

.sd_footer {
    width: 100%;
}

.sdf-inner {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 320px var(--sd_space-xl);
    background-color: var(--sd_c-black);
    border-radius: var(--sd_border-radius-l);
    padding: var(--sd_space-xl);
    align-items: center;
}

.sd_footer h1,
.sd_footer p {
    color: var(--sd_c-white);
}

.sdf-nav {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0;
    grid-column: span 3;
}

.sdf-logo {
    width: 100%;
    max-width: 150px;
    grid-row: 2;
    grid-column: 1 / span 2;
}

.sdf-newsletter {
    display: none;
    grid-column: span 2;
}

.sdf-logo svg {
    width: 100%;
}

.sdf-nl-headline {
    grid-row: 2;
    grid-column: 3 / span 4;
}

.sdf-legal-nav,
.sdf-social-nav {
    grid-row: 3;
    display: flex;
    gap: var(--sd_space-m);
}

.sdf-legal-nav {
    grid-column: 1 / span 3;
}

.sdf-social-nav {
    grid-column: 4 / span 3;
    justify-content: end;
}


/* ##############   FOOTER   ############## */

/* ##############   COOKIE   ############## */

#cookie-banner {
    max-width: 420px;
    border: var(--sd_border);
    position: fixed;
    bottom: 10px;
    left: 10px;
    right: 10px;
    background: var(--sd_c-white);
    padding: var(--sd_space-m);
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--sd_space-m);
    z-index: 1000;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
}
  
/* ##############   COOKIE   ############## */



/* ==============   MOBILE   ============== */


@media only screen and (max-width: 1100px) {

    :root {
        --sd_f-size-h1: 65px;
        --sd_f-size-h1-serif: 70px;
        --sd_f-size-h2: 35px;
        --sd_f-size-h3: 25px;
        --sd_f-size-h3-serif: 40px;
        --sd_f-size-p-xl: 35px;
        --sd_f-size-p-l: 25px;
        --sd_f-size-p-l-serif: 30px;
        --sd_f-size-p-m: 20px;
        --sd_f-size-p-s: 16px;
        --sd_border-radius-xl: 100px;
        --sd_border-radius-l: 25px;
        --sd_border-radius-m: 20px;
        --sd_border-radius-s: 15px;
        --sd_border-radius-xs: 10px;
        --sd_border-radius-xxs: 5px;
        --sd_margin-y: 20px;
        --sd_padding-y: 30px;
    }

    /* ------[ BLOCKS ]------ */

    /* ------[ CIRCULAR-BLOCK ]------ */
    .sd_circular-block {
        padding-bottom: var(--sd_space-xxxxl);
    }
    /* ---^--- CIRCULAR-BLOCK ---^--- */

    /* ---^--- BLOCKS ---^--- */

    /* ##############   FOOTER   ############## */

    .sdf-inner {
        padding: var(--sd_space-l);
    }

    .sdf-nav {
        grid-column: span 2;
    }

    .sdf-social-nav {
        grid-row: 1;
        grid-column: 3 / span 4;
        justify-content: end;
    }

    /* ##############   FOOTER   ############## */
}

@media only screen and (max-width: 800px) {


    :root {
        --sd_f-size-h1: 40px;
        --sd_f-size-h1-serif: 43px;
        --sd_f-size-h2: 25px;
        --sd_f-size-h3: 25px;
        --sd_f-size-h3-serif: 40px;
        --sd_f-size-p-xl: 25px;
        --sd_f-size-p-l: 20px;
        --sd_f-size-p-l-serif: 25px;
        --sd_f-size-p-m: 20px;
        --sd_f-size-p-s: 16px;
        --sd_margin-y: 15px;
        --sd_padding-y: 10px;
    }

    .sdn-inner {
        gap: var(--sd_space-l);
    }

    /* ------[ MODULES]------ */

    .rect-layer {
        border-radius: var(--sd_border-radius-l);
    }

    .blur-layer {
        filter: blur(5px);
        -webkit-filter: blur(5px);
    }


    /* ---^--- MODULES ---^--- */

    /* ------[ BLOCKS ]------ */
    
    /* ------[ TEXT-BLOCK ]------ */

    .sdtb-text-columns {
        grid-template-columns: 1fr;
        gap: var(--sd_space-xl);
    }

    .sdtb-text-col {
        grid-column: span 1;
    }

    /* ---^--- TEXT-BLOCK ---^--- */

    /* ------[ CIRCULAR-BLOCK ]------ */

    .sd_circular-block {
        padding: var(--sd_space-xxxl) var(--sd_space-m);
        min-height: 0px;
    }
    .sdib-text,
    .sdibt-bottom {
        gap: var(--sd_space-m);
    }
    /* ---^--- CIRCULAR-BLOCK ---^--- */

    /* ---^--- BLOCKS ---^--- */

    

    /* ##############   FOOTER   ############## */

    .sdf-inner {
        padding: var(--sd_space-m);
        gap: 320px var(--sd_space-m);
        gap: var(--sd_space-xl);
    }

    .sdf-nav {
        grid-column: 4 / span 3;
    }
    
    .sdf-logo {
        grid-row: 1;
        grid-column: 1 / span 3;
    }

    .sdf-legal-nav,
    .sdf-social-nav {
        flex-direction: column;
        justify-content: start;
        gap: var(--sd_space-xxxxs);
    }

    .sdf-nl-headline {
        grid-row: 2;
        grid-column: 1 / span 6;
    }

    .sdf-social-nav {
        grid-row: 3;
        grid-column: 1 / span 6;
    }

    .sdf-legal-nav {
        grid-row: 4;
        grid-column: 1 / span 6;
    }

    /* ##############   FOOTER   ############## */

}

@media only screen and (max-width: 550px) {

    /* ##############   FOOTER   ############## */

    /* ##############   FOOTER   ############## */
}

 /* ==============   MOBILE   ============== */