@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@900&family=Quicksand:wght@300..700&display=swap");@layer theme {
    @media (prefers-reduced-motion: no-preference) {
        .templateContent .inner .intro .content,
        .templateContent .inner .buttons,
        .templateBlocks.content .inner .intro .title,
        .templateBlocks.content .inner .intro .content,
        .templateBlocks.content .block,
        .templateMedia .inner .intro .title,
        .templateMedia .inner .intro .content,
        .templateMedia .inner .buttons,
        .templateBackground .media,
        .templateBackground .inner .intro .title,
        .templateCollection .inner .intro .title,
        .templateCollection .inner .buttons,
        .templateCollection .grid,
        .filterReview .inner .intro .title,
        .filterReview .inner .intro .content,
        .filterReview .grid {
            opacity: 0;
            transform: translateY(50px);
        }
        
        body.homepage .headerContainer {
            .logo, .nav, .hamburger {
                opacity: 0;
                transform: translateY(-250px);
            }
        }

        .templateMedia .media {
            opacity: 0;
            transform: scale(0.8);
        }

        .templateBlocks.image .splide__slide {
            .media {
                opacity: 0.5;
                transform: translateY(60px);
            }
            .inner {
                opacity: 0;
                transform: translateY(30px);
            }
        }

        @view-transition {
            navigation: auto;
        }

        @keyframes reveal {
            from {
                clip-path: circle(25% at 50% -50%);
            }
            to {
                clip-path: circle(100% at 50% 50%);
            }
        }

        ::view-transition-old(root) {
            animation-name: reveal;
            animation-duration: 1s;
            animation-timing-function: ease-in-out;
        }

        ::view-transition-new(root) {
            animation-name: reveal;
            animation-duration: 1s;
            animation-timing-function: ease-in-out;
        }
    }
}@layer addon {

    .themeColor3 {
        background-color: var(--color-light);
        color: var(--color-dark);
        .intro {
            .title, .subTitle {
                color: var(--color1);
            }
            .content {
                color: var(--color-dark);
            }
        }
    }
    
}@layer addon {

    p, .content {
        font-weight: 600;
    }
    
}@layer addon {

    body {

        main {
            margin-top: 0;
        }
        &:not(.review) {
            background-color: var(--color1);
        }

        &:after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100svh;
            background-image: url("/images/druppelsoverlay_Desktop.png");
            background-size: cover;
            pointer-events: none;
            z-index: 9999;
            @media (max-width: 56em) {
                background-image: url("/images/druppelsoverlay_Mobile.png");
            }
            @media (--max-fablet) {
                background-image: url("/images/druppelsoverlay_Mobile.png");
            }
        }
        @media (min-width: 56em) {
            &.review {
                &:after {
                    background-image: url("/images/druppelsoverlay_Desktop-Detail.png");
                }
            }
            &.hasFilterOrganization {
                &:after {
                    background-image: url("/images/druppelsoverlay_Organization.png");
                }
            }
        }
        @media (--min-fablet) {
            &.review {
                &:after {
                    background-image: url("/images/druppelsoverlay_Desktop-Detail.png");
                }
            }
            &.hasFilterOrganization {
                &:after {
                    background-image: url("/images/druppelsoverlay_Organization.png");
                }
            }
        }
        cursor: url("/images/cursor.png") 12 12, auto;
        &.review {
            cursor: url("/images/cursor-active.png") 12 12, auto;
            footer {
                cursor: url("/images/cursor.png") 12 12, auto;
            }
        }
        /* .templateHomepageCover {
            @media (pointer: fine) {
                cursor: none;
            }
        } */
        footer {
            cursor: url("/images/cursor-active.png") 12 12, auto;
        }
    }

    .backToTop {
        background-color: var(--color1);
        border: 2px solid var(--color2);
        color: var(--color2);
        &:after {
            background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 50 50\'%3E%3Cpath d=\'M26.4 5.5c.5.6 1 .9 1.7 1 1.2.2 1.5-.3 1.6-.6 0-.2 0-.6-1.3-1.2-1.4-.7-2.3-1.6-2-2.9C26.7.7 27.9.1 29.3.3c.9.1 1.8.6 2.3 1.4l-1.2.8c-.2-.4-.7-.8-1.3-.9-1-.2-1.2.3-1.3.5 0 .3-.1.7 1.2 1.2 1.3.6 2.4 1.4 2.2 2.7-.3 1.6-1.9 1.9-3.2 1.7-1.1-.2-1.9-.7-2.6-1.5l1.1-.9-.1.2zm11.7 1.3c0-.8-.3-1.6-1-2.1-1.2-.7-2.5-.2-3.1 1-.7 1.2-.5 2.5.8 3.2.9.5 1.8.4 2.5-.3l1 1c-1.2 1.2-2.9 1.3-4.2.5C32.2 9 31.7 6.8 32.8 5c1-1.7 3-2.7 5.1-1.5 1.2.7 1.9 2 1.8 3.4l-1.6-.1zm.1 6.5-.9-1.2L43 7.7l2.2 2.8c.8 1.1.8 2.5-.2 3.3-.7.6-1.6.6-2.3.3 0 1.1-.7 2-1.6 2.8l-1-1.2c1.2-.9 1.7-1.9.9-2.9l-.8-1-1.9 1.5h-.1zm4.6-3.6-1.6 1.2 1.3 1.6c.4.5 1 .5 1.4.2s.5-1 .2-1.4l-1.3-1.6zm3.8 13.9c-2 .5-4.1-.7-4.6-2.7s.7-4.1 2.7-4.6 4.1.7 4.6 2.7-.7 4.1-2.7 4.6zm-.3-1.5c1.3-.3 2.1-1.6 1.8-2.9-.3-1.2-1.6-2-2.9-1.6-1.3.3-2.1 1.6-1.8 2.8.3 1.2 1.6 2 2.9 1.6v.1zm3.5 5.2-5.8-.6-.3 3.1h-1.4c0-.1.5-4.7.5-4.7l7.2.7-.2 1.5zm-1.6 7-5.3-2.2-1.2 2.9-1.3-.5 1.8-4.2 6.6 2.8-.6 1.2zm-8.7 11.4-3.1-3.4c-1.1-1.2-.9-3 .3-4.1s3-1.2 4.1 0l3.1 3.4-1.1 1-3.1-3.4c-.5-.5-1.4-.6-2.1 0-.7.6-.7 1.5-.2 2.1l3.1 3.4-1 1zm-6.8-4.5 1.4-.5 2.7 6.7-3.3 1.3c-1.3.5-2.6 0-3.1-1.3-.5-1.4.1-2.6 1.4-3.1l1.9-.8-.9-2.3h-.1zm2.1 5.4-.7-1.7-1.9.8c-.6.2-.7.7-.5 1.2.2.4.7.7 1.2.5l1.9-.8zm-11.2-1.7c-.5-.6-1-.9-1.7-1-1.2-.2-1.5.3-1.6.6 0 .2 0 .6 1.3 1.2 1.4.7 2.3 1.6 2 2.9-.3 1.1-1.5 1.7-2.9 1.5-.9-.1-1.8-.6-2.3-1.4l1.2-.8c.2.4.7.8 1.3.9 1 .2 1.2-.3 1.3-.5 0-.3.1-.7-1.2-1.2-1.3-.6-2.4-1.4-2.2-2.7.3-1.6 1.9-1.9 3.2-1.7 1.1.2 1.9.7 2.6 1.5l-1.1.9.1-.2zm-11.7-1.4c0 .8.3 1.6 1 2.1 1.2.7 2.5.2 3.1-1 .7-1.2.5-2.5-.7-3.2-.8-.5-1.8-.4-2.5.3l-1-1c1.2-1.2 2.9-1.3 4.2-.5 1.9 1.1 2.4 3.3 1.3 5.1-1 1.7-3 2.7-5.1 1.5-1.2-.7-1.9-2-1.8-3.4h1.5v.1zm-.1-6.4.9 1.2L7 42.7l-2.2-2.8c-.8-1.1-.8-2.5.2-3.3.7-.6 1.6-.6 2.3-.3 0-1.1.7-2 1.6-2.8l1 1.2c-1.2.9-1.7 1.9-.9 2.9l.8 1 2-1.5zm-4.6 3.5 1.6-1.2-1.3-1.6c-.4-.5-1-.5-1.4-.2s-.5 1-.2 1.4l1.3 1.6zM3.4 26.8c2-.5 4.1.7 4.6 2.7s-.7 4.1-2.7 4.6-4.1-.7-4.6-2.7.7-4.1 2.7-4.6zm.3 1.4c-1.3.3-2.1 1.6-1.8 2.9.3 1.2 1.6 2 2.9 1.6 1.3-.3 2.1-1.6 1.8-2.8-.3-1.2-1.6-2-2.9-1.6v-.1zM.2 23l5.8.6.3-3.1h1.4c0 .1-.5 4.7-.5 4.7L0 24.4.2 23zm1.6-7 5.3 2.2 1.2-2.9 1.3.5L7.8 20l-6.6-2.8.6-1.2zm8.7-11.4L13.6 8c1.1 1.2.9 3-.3 4.1s-3 1.2-4.1 0L6.1 8.7l1.1-1 3.1 3.4c.5.5 1.4.6 2.1 0 .7-.6.7-1.5.2-2.1L9.5 5.6l1.1-1h-.1zm6.9 4.5-1.4.5-2.7-6.7 3.3-1.3c1.3-.5 2.6 0 3.1 1.3.5 1.4-.1 2.6-1.4 3.1l-1.9.8 1 2.3zm-2.2-5.3.7 1.7 1.9-.8c.6-.2.7-.7.5-1.2-.2-.4-.7-.7-1.2-.5l-1.9.8z\' fill=\'%23D0FBFF\'/%3E%3C/svg%3E');
        }
        .review & {
            background-color: var(--color-light);
            border-color: var(--color1);
            color: var(--color1);
            &:after {
                background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 50 50\'%3E%3Cpath d=\'M26.4 5.5c.5.6 1 .9 1.7 1 1.2.2 1.5-.3 1.6-.6 0-.2 0-.6-1.3-1.2-1.4-.7-2.3-1.6-2-2.9C26.7.7 27.9.1 29.3.3c.9.1 1.8.6 2.3 1.4l-1.2.8c-.2-.4-.7-.8-1.3-.9-1-.2-1.2.3-1.3.5 0 .3-.1.7 1.2 1.2 1.3.6 2.4 1.4 2.2 2.7-.3 1.6-1.9 1.9-3.2 1.7-1.1-.2-1.9-.7-2.6-1.5l1.1-.9-.1.2zm11.7 1.3c0-.8-.3-1.6-1-2.1-1.2-.7-2.5-.2-3.1 1-.7 1.2-.5 2.5.8 3.2.9.5 1.8.4 2.5-.3l1 1c-1.2 1.2-2.9 1.3-4.2.5C32.2 9 31.7 6.8 32.8 5c1-1.7 3-2.7 5.1-1.5 1.2.7 1.9 2 1.8 3.4l-1.6-.1zm.1 6.5-.9-1.2L43 7.7l2.2 2.8c.8 1.1.8 2.5-.2 3.3-.7.6-1.6.6-2.3.3 0 1.1-.7 2-1.6 2.8l-1-1.2c1.2-.9 1.7-1.9.9-2.9l-.8-1-1.9 1.5h-.1zm4.6-3.6-1.6 1.2 1.3 1.6c.4.5 1 .5 1.4.2s.5-1 .2-1.4l-1.3-1.6zm3.8 13.9c-2 .5-4.1-.7-4.6-2.7s.7-4.1 2.7-4.6 4.1.7 4.6 2.7-.7 4.1-2.7 4.6zm-.3-1.5c1.3-.3 2.1-1.6 1.8-2.9-.3-1.2-1.6-2-2.9-1.6-1.3.3-2.1 1.6-1.8 2.8.3 1.2 1.6 2 2.9 1.6v.1zm3.5 5.2-5.8-.6-.3 3.1h-1.4c0-.1.5-4.7.5-4.7l7.2.7-.2 1.5zm-1.6 7-5.3-2.2-1.2 2.9-1.3-.5 1.8-4.2 6.6 2.8-.6 1.2zm-8.7 11.4-3.1-3.4c-1.1-1.2-.9-3 .3-4.1s3-1.2 4.1 0l3.1 3.4-1.1 1-3.1-3.4c-.5-.5-1.4-.6-2.1 0-.7.6-.7 1.5-.2 2.1l3.1 3.4-1 1zm-6.8-4.5 1.4-.5 2.7 6.7-3.3 1.3c-1.3.5-2.6 0-3.1-1.3-.5-1.4.1-2.6 1.4-3.1l1.9-.8-.9-2.3h-.1zm2.1 5.4-.7-1.7-1.9.8c-.6.2-.7.7-.5 1.2.2.4.7.7 1.2.5l1.9-.8zm-11.2-1.7c-.5-.6-1-.9-1.7-1-1.2-.2-1.5.3-1.6.6 0 .2 0 .6 1.3 1.2 1.4.7 2.3 1.6 2 2.9-.3 1.1-1.5 1.7-2.9 1.5-.9-.1-1.8-.6-2.3-1.4l1.2-.8c.2.4.7.8 1.3.9 1 .2 1.2-.3 1.3-.5 0-.3.1-.7-1.2-1.2-1.3-.6-2.4-1.4-2.2-2.7.3-1.6 1.9-1.9 3.2-1.7 1.1.2 1.9.7 2.6 1.5l-1.1.9.1-.2zm-11.7-1.4c0 .8.3 1.6 1 2.1 1.2.7 2.5.2 3.1-1 .7-1.2.5-2.5-.7-3.2-.8-.5-1.8-.4-2.5.3l-1-1c1.2-1.2 2.9-1.3 4.2-.5 1.9 1.1 2.4 3.3 1.3 5.1-1 1.7-3 2.7-5.1 1.5-1.2-.7-1.9-2-1.8-3.4h1.5v.1zm-.1-6.4.9 1.2L7 42.7l-2.2-2.8c-.8-1.1-.8-2.5.2-3.3.7-.6 1.6-.6 2.3-.3 0-1.1.7-2 1.6-2.8l1 1.2c-1.2.9-1.7 1.9-.9 2.9l.8 1 2-1.5zm-4.6 3.5 1.6-1.2-1.3-1.6c-.4-.5-1-.5-1.4-.2s-.5 1-.2 1.4l1.3 1.6zM3.4 26.8c2-.5 4.1.7 4.6 2.7s-.7 4.1-2.7 4.6-4.1-.7-4.6-2.7.7-4.1 2.7-4.6zm.3 1.4c-1.3.3-2.1 1.6-1.8 2.9.3 1.2 1.6 2 2.9 1.6 1.3-.3 2.1-1.6 1.8-2.8-.3-1.2-1.6-2-2.9-1.6v-.1zM.2 23l5.8.6.3-3.1h1.4c0 .1-.5 4.7-.5 4.7L0 24.4.2 23zm1.6-7 5.3 2.2 1.2-2.9 1.3.5L7.8 20l-6.6-2.8.6-1.2zm8.7-11.4L13.6 8c1.1 1.2.9 3-.3 4.1s-3 1.2-4.1 0L6.1 8.7l1.1-1 3.1 3.4c.5.5 1.4.6 2.1 0 .7-.6.7-1.5.2-2.1L9.5 5.6l1.1-1h-.1zm6.9 4.5-1.4.5-2.7-6.7 3.3-1.3c1.3-.5 2.6 0 3.1 1.3.5 1.4-.1 2.6-1.4 3.1l-1.9.8 1 2.3zm-2.2-5.3.7 1.7 1.9-.8c.6-.2.7-.7.5-1.2-.2-.4-.7-.7-1.2-.5l-1.9.8z\' fill=\'%233939FF\'/%3E%3C/svg%3E');
            }
        }
    }

    svg.icon {
        &:not(.play){
            width: 24px;
            height: 24px;
        }
    }
    
}@layer addon {
    :root {

        /*COLORS*/
        --color1:    #3939FF;
        --color2:    #D0FBFF;

        --color-dark: #1E1E1E;
        --color-light: #FFF;
        
        /*DEFAULT FONT*/
        --font-basic:    'Quicksand',sans-serif;
        --font-sub:      'Barlow Semi Condensed',sans-serif;
        --font-color:   #1E1E1E;
        
        /* FONTSIZES */
        --min-fontsize: 1; /* 16px */
        --max-fontsize: 1.25; /* 20px */
        --lineheight: 1.25;

        /* S FONTSIZE */
        --min-s-fontsize: 1.375; /* 22px */
        --max-s-fontsize: 1.75; /* 28px */
        --s-lineheight: 1.25;

        /* M FONTSIZE */
        --min-m-fontsize: 1.75; /* 28px */
        --max-m-fontsize: 2.875; /* 46px */
        --m-lineheight: 0.85;

        /* L FONTSIZE */
        --min-l-fontsize: 3.5; /* 56px */
        --max-l-fontsize: 5; /* 80px */
        --l-lineheight: 0.85;

        /* XL FONTSIZE */
        --min-xl-fontsize: 3.75; /* 60px */
        --max-xl-fontsize: 8.75; /* 140px */
        --xl-lineheight: 0.85;

        /* OTHER */
        --small-border-radius:	32px;
        --border-radius:	64px;
        --large-border-radius:	128px;

        /* BUTTON */
        --button-padding:	  16px 24px;
        --button-radius:	  48px;

    }


    @media (max-width: 56em) {
        :root {
            --padding: 				32px;
            --min-padding:   		-32px;
        }
    }


    @media (--max-fablet) {
        :root {
            --padding: 				32px;
            --min-padding:   		-32px;
        }
    }

    @media (min-width: 90em) {
        :root {
            --spacer:               4vw;
            --section:				196px;
            --gutter:				32px;
            --min-gutter:   		-32px;
            --padding:				64px;
            --min-padding:   		-64px;
        }
    }

    @media (--min-desktop) {
        :root {
            --spacer:               4vw;
            --section:				196px;
            --gutter:				32px;
            --min-gutter:   		-32px;
            --padding:				64px;
            --min-padding:   		-64px;
        }
    }
}@layer addon {

    .button {
        font-weight: 700;
        color: var(--color2);
        column-gap: 0;
        :not(.pagination) > & {
            .icon {
                width: 24px;
                opacity: 1;
                margin-left: calc(var(--gutter) / 2);
                transition: var(--transition);
            }
            &:hover {
                @media (hover: hover) {
                    .icon {
                        width: 0;
                        opacity: 0;
                        margin-left: 0;
                    }
                }
            }
        }
        &.primary {
            background-color: var(--color1);
        }

        &.outline, &.cancel {
            background: none;
            box-shadow: inset 0 0 0 2px var(--color2);
        }

        &.textLink {
            color: var(--color1);
            border-bottom: 2px solid var(--color1);
            padding-bottom: 8px;
        }
    }
    
}@layer addon {
    .title {
        text-transform: uppercase;
    }

    .intro {
        &:not(.block &, .themeColor2 &, .themeColor3 &) {
            .title, .subTitle, .content {
                color: var(--color-light);
            }
        }
    }
}@layer addon {

    .pagination {
        .pageCount {
            color: var(--color2);
        }
        .button {
            width: 48px;
            height: 48px;
            color: var(--color1);
            border-radius: var(--border-radius) var(--border-radius) 0 var(--border-radius);
            &:hover {
                background-color: var(--color-light);
            }
        }

    }
    
}@layer addon {
    
    .block {
        @media (min-width: 56em) {
            flex-direction: row;
        }
        @media (--min-fablet) {
            flex-direction: row;
        }
        .title {
            font-size: var(--m-fontsize);
            line-height: var(--m-lineheight);
            color: var(--color1);
        }
        .content {
            flex-grow: unset;
        }
    }
    
}@layer addon {

    footer {
        background-color: var(--color2);
        border-radius: var(--large-border-radius) var(--large-border-radius) var(--large-border-radius) 0;
        .logo {
            svg {
                width: 483px;
                height: auto;
                @media (max-width: 56em) {
                    width: 246px;
                }
                @media (--max-fablet) {
                    width: 246px;
                }
            }
        }
        .footerContainer {
            align-items: flex-end;
            color: var(--color1);
            font-weight: 700;
            gap: var(--padding);
            a {
                &:hover {
                    @media (hover: hover) {
                        text-decoration: underline;
                        color: var(--color1);
                    }
                }
            }
            .footerMiddle {
                gap: var(--gutter);
                line-height: 1;
                flex-direction: column;
                align-items: flex-end;
            }
            .socials {
                display: flex;
                gap: calc(var(--gutter) * 0.75);
            }
            .links {
                display: flex;
                gap: calc(var(--gutter) / 2);
            }
            @media (max-width: 56em) {
                gap: var(--gutter);
                .footerMiddle {
                    text-align: center;
                    align-items: center;
                    .links {
                        flex-direction: column;
                    }
                }
                .socials {
                    gap: var(--gutter);
                }
            }
            @media (--max-fablet) {
                gap: var(--gutter);
                .footerMiddle {
                    text-align: center;
                    align-items: center;
                    .links {
                        flex-direction: column;
                    }
                }
                .socials {
                    gap: var(--gutter);
                }
            }
        }
        .review & {
            background-color: var(--color1);
            .footerContainer {
                .logo svg path {
                    fill: var(--color2);
                    &.label {
                        fill: var(--color1);
                    }
                }
                color: var(--color-light);
                a {
                    color: var(--color-light);
                }
            }
        }
    }
    
}@layer addon {

    header {
        padding: 0;
        .headerContainer {
            grid-column: full-start / full-end;
            position: relative;
            .logo {
                svg {
                    width: 383px;
                    height: auto;
                    @media (max-width: 56em) {
                        width: 264px;
                    }
                    @media (--max-fablet) {
                        width: 264px;
                    }
                }
            }
        }
        &.is-sticky {
            .nav {
                position: fixed;
            }
        }

        .hamburger {
            background: rgba(255, 255, 255, 0.10);
            border: 1px solid rgba(255, 255, 255, 0.20);
            border-radius: 50%;
            margin-right: var(--spacer);
            position: relative;
            overflow: hidden;
            @media (max-width: 56em) {
                position: fixed;
                top: calc(var(--gutter) / 2);
                right: var(--spacer);
                margin-right: 0;
                z-index: 10;
            }
            @media (--max-fablet) {
                position: fixed;
                top: calc(var(--gutter) / 2);
                right: var(--spacer);
                margin-right: 0;
                z-index: 10;
            }
            .menuOpen & {
                background-color: transparent;
                border: none;
                -webkit-backdrop-filter: blur(0px);
                        backdrop-filter: blur(0px);
            }
            &:before {
                -webkit-backdrop-filter: blur(3px);
                        backdrop-filter: blur(3px);
                filter: url("#glass-distortion");
                content: '';
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
            }
            .review & {
                background: rgba(57, 57, 255, 0.10);
                border: 1px solid rgba(57, 57, 255, 0.20);
                span {
                    background-color: var(--color1);
                    &:before, &:after {
                        background-color: var(--color1);
                    }
                    .menuOpen & {
                        background-color: transparent;
                    }
                }
            }
        }
        
        .logo {
            path { fill: var(--color2); }
            position: relative;
            transition: var(--transition);
            .logoColor {
                fill: var(--color1);
            }
            .review & {
                path { fill: var(--color1); }
                .logoColor {
                    fill: var(--color2);
                }
            }
            @media (max-width: 56em) {
                .menuOpen & {
                    opacity: 0 !important;
                    z-index: -1;
                }
            }
            @media (--max-fablet) {
                .menuOpen & {
                    opacity: 0 !important;
                    z-index: -1;
                }
            }
        }

        .nav {
            @media (min-width: 56em) {
                position: absolute;
                left: 0;
                right: 0;
                top: calc(var(--padding) / 2);
                display: flex;
                justify-content: center;
                pointer-events: none;
            }
            @media (--min-fablet) {
                position: absolute;
                left: 0;
                right: 0;
                top: calc(var(--padding) / 2);
                display: flex;
                justify-content: center;
                pointer-events: none;
            }
            @media (max-width: 56em) {
                background: transparent;
                height: auto;
                width: calc(100vw - var(--spacer) * 2);
                padding: 0;
                top: calc(var(--gutter) / 2);
                .menuOpen & {
                    right: var(--spacer);
                }
            }
            @media (--max-fablet) {
                background: transparent;
                height: auto;
                width: calc(100vw - var(--spacer) * 2);
                padding: 0;
                top: calc(var(--gutter) / 2);
                .menuOpen & {
                    right: var(--spacer);
                }
            }

            .menuLevel1 {
                pointer-events: auto;
                overflow: hidden;
                position: relative;
                padding: 24px 48px;
                background: rgba(57, 57, 255, 0.30);
                line-height: 1;
                border-radius: var(--large-border-radius);

                @media (max-width: 56em) {
                    border-radius: var(--border-radius) 0 var(--border-radius) var(--border-radius);
                    background: rgba(57, 57, 255, 0.30);
                    padding: 48px 24px;
                }

                @media (--max-fablet) {
                    border-radius: var(--border-radius) 0 var(--border-radius) var(--border-radius);
                    background: rgba(57, 57, 255, 0.30);
                    padding: 48px 24px;
                }

                > li {
                    width: auto;
                    a,
                    button {
                        color: var(--color-light);
                        font-weight: 700;
                        text-decoration: none;
                        background: none;
                        border: none;
                        padding: 0;
                        font-size: inherit;
                        font-family: inherit;
                        @media (max-width: 56em) {
                            font-size: var(--s-fontsize);
                        }
                        @media (--max-fablet) {
                            font-size: var(--s-fontsize);
                        }
                    }
                }

                &:before {
                    -webkit-backdrop-filter: blur(3px);
                            backdrop-filter: blur(3px);
                    filter: url("#glass-distortion");
                    content: '';
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    pointer-events: none;
                    @media (max-width: 56em) {
                        top: 0;
                    }
                    @media (--max-fablet) {
                        top: 0;
                    }
                }
                &:after {
                    position: absolute;
                    inset: 0;
                    z-index: 2;
                    border-radius: inherit;
                    overflow: hidden;
                    box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.75), inset -1px 0px 4px rgba(255, 255, 255, 0.75);
                    content: '';
                    pointer-events: none;
                    @media (max-width: 56em) {
                        box-shadow: inset 0px 0px 0 rgba(255, 255, 255, 0.75), inset 2px -1px 4px rgba(255, 255, 255, 0.75);
                    }
                    @media (--max-fablet) {
                        box-shadow: inset 0px 0px 0 rgba(255, 255, 255, 0.75), inset 2px -1px 4px rgba(255, 255, 255, 0.75);
                    }
                }
                .review & {
                    background: rgba(57, 57, 255, 0.10);
                    border: 1px solid rgba(57, 57, 255, 0.20);
                    a,
                    button {
                        color: var(--color1);
                    }
                    &:after {
                        box-shadow: inset 2px 0 0 rgba(57, 57, 255, 0.75), inset -1px 0 4px rgba(57, 57, 255, 0.75);
                    }
                }
            }
        }
    }

    @media (max-width: 56em) {
        .menuOpen {
            overflow: auto;
            height: auto;
        }
    }

    @media (--max-fablet) {
        .menuOpen {
            overflow: auto;
            height: auto;
        }
    }

}@layer addon {

    section {
        .inner {
            &:not(.block *, .templateBackground &) {
                align-items: center;
                gap: var(--padding);
                > .intro {
                    @media (min-width: 56em) {
                        &:not(.templateContent &, .templateMedia &) {
                            width: calc(100% / 12 * 8);
                        }
                    }
                    @media (--min-fablet) {
                        &:not(.templateContent &, .templateMedia &) {
                            width: calc(100% / 12 * 8);
                        }
                    }
                    text-align: center;
                    p, .content {
                        font-size: var(--s-fontsize);
                    }
                    .title + .subTitle {
                        margin-top: calc(var(--padding) / 2);
                    }
                    .title + .content {
                        margin-top: var(--padding);
                    }
                }
                @media (max-width: 56em) {
                    gap: calc(var(--gutter) * 2);
                    > .intro {
                        .title + .content {
                            margin-top: calc(var(--gutter) * 2);
                        }
                    }
                }
                @media (--max-fablet) {
                    gap: calc(var(--gutter) * 2);
                    > .intro {
                        .title + .content {
                            margin-top: calc(var(--gutter) * 2);
                        }
                    }
                }
            }
        }
        &.templateBackground:not(.review &) {
            padding: calc(var(--padding) * 2.5) 0;
            min-height: 550px;
            .media {
                border-radius: 256px 256px 0px 256px;
                left: calc(100% / 12 * 1 + var(--spacer));
                width: calc(100% / 12 * 10 - var(--spacer ) * 2);
                &:after {
                    background: linear-gradient(72deg, rgba(0, 0, 0, 0.50) 6.53%, rgba(0, 0, 0, 0.00) 61.77%);
                }
            }
            .inner {
                grid-column: 3 / span 5;
                justify-content: center;
                .intro {
                    text-align: left;
                }
            }
            @media (max-width: 56em) {
                min-height: 450px;
                .media {
                    border-radius: var(--large-border-radius) var(--large-border-radius) 0 var(--large-border-radius);
                    left: var(--spacer);
                    width: calc(100% - var(--spacer ) * 2);
                }
                .inner {
                    grid-column: 2 / span 10;
                    justify-content: flex-end;
                    .title {
                        font-size: calc(var(--l-fontsize) - 0.75rem);
                    }
                }
            }
            @media (--max-fablet) {
                min-height: 450px;
                .media {
                    border-radius: var(--large-border-radius) var(--large-border-radius) 0 var(--large-border-radius);
                    left: var(--spacer);
                    width: calc(100% - var(--spacer ) * 2);
                }
                .inner {
                    grid-column: 2 / span 10;
                    justify-content: flex-end;
                    .title {
                        font-size: calc(var(--l-fontsize) - 0.75rem);
                    }
                }
            }
        }
        &.templateLogoSlider {
            .splide__list {
                align-items: center;
            }
        }
    }

    .templateHomepageCover + .templateContent {
        .inner .intro {
            text-align: left;
        }
    }
    
}