@layer reset, external, master, addon, theme, overrides;

@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
    }

    * {
        margin: 0;
    }

    html {
        scroll-behavior: smooth;
        @media (prefers-reduced-motion) {
            scroll-behavior: auto;
        }
    }

    body {
        font-family: var(--font-basic);
        font-size: var(--fontsize);
        color: var(--font-color);
        line-height: var(--lineheight);
        accent-color: var(--form-accent-color);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .bodyContainer {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    a {
        text-decoration: underline;
        color: inherit;
    }
    
    article {
        width: 100%;
        position: relative;
    }

    button {
        background: none;
        border: none;
        cursor: pointer;
    }
    
    img, video, canvas {
        max-width: 100%;
        height: auto;
        display: block;
    }
    svg {
        display: block;
    }

    input, button, textarea, select {
        font: inherit;
    }

    p, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
    }  

    main {
        flex-grow: 1;
    }
    .sr-only {
        border: 0 !important;
        clip-path: inset(50%) !important;
        height: 1px !important;
        margin: -1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        width: 1px !important;
        white-space: nowrap !important;
    }
}

@layer master {
    :root {
        color-scheme: light only;
        
        /*COLORS*/
        --color1:    #f0f8ff;
        --color2:    #c4def4;
        --color3:	 #1E6998;

        --color-dark: #0E1218;
        --color-light: #fff;

        --transition: all 0.4s ease-in-out;
        
        /*DEFAULT FONT*/
        --font-basic:    Fira Sans,sans-serif;
        --font-sub:      Fira Sans,sans-serif;
        --font-color:   #0c0e15;

        /*VIEWPORT*/
        --min-viewport: 48;
        --max-viewport: 100;

        /* XS FONTSIZE */
        --min-xs-fontsize: 0.875;
        --max-xs-fontsize: 1;
        --pref-xs-fontsize: calc(calc(var(--min-xs-fontsize) * 1rem) + (var(--max-xs-fontsize) - var(--min-xs-fontsize)) * ((calc(var(--max-viewport) * 1vw) - calc(var(--min-viewport) * 1rem)) / (var(--max-viewport) - var(--min-viewport))));
        --xs-fontsize: clamp(calc(var(--min-xs-fontsize) * 1rem), var(--pref-xs-fontsize), calc(var(--max-xs-fontsize) * 1rem));
        --xs-lineheight: 1;

        /* S FONTSIZE */
        --min-s-fontsize: 1.125;
        --max-s-fontsize: 1.375;
        --pref-s-fontsize: calc(calc(var(--min-s-fontsize) * 1rem) + (var(--max-s-fontsize) - var(--min-s-fontsize)) * ((calc(var(--max-viewport) * 1vw) - calc(var(--min-viewport) * 1rem)) / (var(--max-viewport) - var(--min-viewport))));
        --s-fontsize: clamp(calc(var(--min-s-fontsize) * 1rem), var(--pref-s-fontsize), calc(var(--max-s-fontsize) * 1rem));
        --s-lineheight: 1;
        
        /* FONTSIZES */
        --min-fontsize: 1.0;
        --max-fontsize: 1.125;
        --pref-fontsize: calc(calc(var(--min-fontsize) * 1rem) + (var(--max-fontsize) - var(--min-fontsize)) * ((calc(var(--max-viewport) * 1vw) - calc(var(--min-viewport) * 1rem)) / (var(--max-viewport) - var(--min-viewport))));
        --fontsize: clamp(calc(var(--min-fontsize) * 1rem), var(--pref-fontsize), calc(var(--max-fontsize) * 1rem));
        --lineheight: 1.25;

        /* M FONTSIZE */
        --min-m-fontsize: 1.5;
        --max-m-fontsize: 1.75;
        --pref-m-fontsize: calc(calc(var(--min-m-fontsize) * 1rem) + (var(--max-m-fontsize) - var(--min-m-fontsize)) * ((calc(var(--max-viewport) * 1vw) - calc(var(--min-viewport) * 1rem)) / (var(--max-viewport) - var(--min-viewport))));
        --m-fontsize: clamp(calc(var(--min-m-fontsize) * 1rem), var(--pref-m-fontsize), calc(var(--max-m-fontsize) * 1rem));
        --m-lineheight: 1;

        /* L FONTSIZE */
        --min-l-fontsize: 2.813;
        --max-l-fontsize: 3.75;
        --pref-l-fontsize: calc(calc(var(--min-l-fontsize) * 1rem) + (var(--max-l-fontsize) - var(--min-l-fontsize)) * ((calc(var(--max-viewport) * 1vw) - calc(var(--min-viewport) * 1rem)) / (var(--max-viewport) - var(--min-viewport))));
        --l-fontsize: clamp(calc(var(--min-l-fontsize) * 1rem), var(--pref-l-fontsize), calc(var(--max-l-fontsize) * 1rem));
        --l-lineheight: 1.2;

        /* XL FONTSIZE */
        --min-xl-fontsize: 4.688;
        --max-xl-fontsize: 5.625;
        --pref-xl-fontsize: calc(calc(var(--min-xl-fontsize) * 1rem) + (var(--max-xl-fontsize) - var(--min-xl-fontsize)) * ((calc(var(--max-viewport) * 1vw) - calc(var(--min-viewport) * 1rem)) / (var(--max-viewport) - var(--min-viewport))));
        --xl-fontsize: clamp(calc(var(--min-xl-fontsize) * 1rem), var(--pref-xl-fontsize), calc(var(--max-xl-fontsize) * 1rem));
        --xl-lineheight: 1.2;


        /* FORMS */
        --form-color:        #bfbfbf;
        --form-accent-color: #d7d7d7;
        --form-focused:      #efefef;
        --form-error:        #ffe8ec;
        --form-description:  #efefef;
        --form-placeholder:  #d7d7d7;
        --form-odd:         #f9f9f9;
        --form-input-size:    16px;
        --form-border-radius: 5px;

        /* OTHER */
        --border-radius:	10px;
        --header-height:	50px;

        /* BUTTON */
        --button-hover:     var(--color3);
        --button-padding:	  16px 24px;
        --button-radius:	  30px;
    }


    @media (max-width: 56em) {
        :root {
            --spacer:          		5vw;
            --section:				96px;
            --gutter:				24px;
            --min-gutter:   		-24px;
            --padding: 				24px;
            --min-padding:   		-24px;
        }
    }


    @media (--max-fablet) {
        :root {
            --spacer:          		5vw;
            --section:				96px;
            --gutter:				24px;
            --min-gutter:   		-24px;
            --padding: 				24px;
            --min-padding:   		-24px;
        }
    }
    @media (min-width: 56em) {
        :root {
            --spacer:          		5vw;
            --section:				120px;
            --gutter:				24px;
            --min-gutter:   		-24px;
            --padding: 				32px;
            --min-padding:   		-32px;
        }
    }
    @media (--min-fablet) {
        :root {
            --spacer:          		5vw;
            --section:				120px;
            --gutter:				24px;
            --min-gutter:   		-24px;
            --padding: 				32px;
            --min-padding:   		-32px;
        }
    }
    @media (min-width: 90em) {
        :root {
            --spacer:          		5vw;
            --section:				144px;
            --gutter:				24px;
            --min-gutter:   		-24px;
            --padding: 				48px;
            --min-padding:   		-48px;
        }
    }
    @media (--min-desktop) {
        :root {
            --spacer:          		5vw;
            --section:				144px;
            --gutter:				24px;
            --min-gutter:   		-24px;
            --padding: 				48px;
            --min-padding:   		-48px;
        }
    }
    @media (min-width: 100em) {
        :root {
            --spacer:          		15vw;
        }
    }
    @media (--min-largescreen) {
        :root {
            --spacer:          		15vw;
        }
    }

    /* playButton + scrollUp animation */
    @keyframes spin {
        from {
            transform: rotate(0deg);
        } to {
            transform: rotate(360deg);
        }
    }

    /* scrollDown animation */
    @keyframes scroll-down {
        0% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(0, 10px);
        }
    }

    /*  submit loader */
    @keyframes button-loader-spinner {
        from {transform: rotate(0turn);}
        to {transform: rotate(1turn);}
    }

}

@layer master {
    body:not(.hasCover) {
        main {
            margin-top: calc(var(--padding) + var(--padding) + var(--header-height));
            section.templateCover:first-of-type {
                padding-top: 0;
            }
        }
    }
    
    .tags {
        display: flex;
        gap: calc(var(--gutter) / 2);
        flex-wrap: wrap;
        .tag {
            display: flex;
            gap: calc(var(--gutter) / 2);
            align-items: center;
            width: auto;

            background: var(--color2);
            line-height: 1;

            padding: 8px 12px;
            border-radius: var(--border-radius);
            svg {
                width: 16px;
                height: 16px;
            }
        }
        .delete {width: auto;}
    }

    .scrollDown {
        position: absolute;
        color: white;
        bottom: var(--padding);
        left: 50%;
        transform: translateX(-50%);
        z-index: 9;
        cursor: pointer;

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(var(--gutter) / 3);
        font-size: 12px;

        .icon {
            width: 15px;
            height: auto;
        }

        @media (max-width: 56em) {
            display: none;
        }

        @media (--max-fablet) {
            display: none;
        }
        &:hover {
            @media (hover: hover) {
                .icon {
                    animation: scroll-down 1s ease-in-out infinite;
                }
            }
        }
    }
    
    .backToTop {
        display: flex;
        position: fixed;
        bottom: 30px;
        z-index: 999;
        right: 30px;
        border: 1px solid rgba(255, 255, 255, 0.75);
        background: rgba(255, 255, 255, 0.5);
        -webkit-backdrop-filter: blur(6px);
                backdrop-filter: blur(6px);
        width: 55px;
        height: 55px;
        border-radius: 100%;
        text-align: center;
        text-decoration: none;
        align-items: center;
        justify-content: center;        
        transition: var(--transition);
        svg {
            color: inherit;
            width: 16px;
            height: 16px;
        }
        @media (max-width: 56em) {
            display: none !important;
        }
        @media (--max-fablet) {
            display: none !important;
        }
        &:after {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            display: block;
            content: "";
            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='%23434343'/%3E%3C/svg%3E"); /*change fill color per project*/
            background-size: 80% auto;
            background-repeat: no-repeat;
            background-position: center;

            animation-name: spin;
            animation-duration: 20s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        @media(hover: hover){
            &:hover {
                background: rgba(255, 255, 255, 0.65);
                &:after {
                    animation-play-state: paused;
                }
            }
        }
    }

    .skiplinks {
        a {
            position: absolute;
            overflow: hidden;
            height: 1px;
            width: 1px;
            clip-path: inset(50%);
            white-space: nowrap;
            &:focus {
                position: static;
                width: auto;
                height: auto;
                clip-path: unset;
            }
        }
    }


    [aria-busy=true] {
        &:after {
            content: '';
            position: absolute;
            display: flex;
            border-radius: 50%;
            background: radial-gradient(farthest-side,var(--font-color) 100%,transparent) top/4px 4px no-repeat, conic-gradient(transparent 30%,var(--font-color));
            -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 4px),var(--font-color) 0);
                    mask: radial-gradient(farthest-side,transparent calc(100% - 4px),var(--font-color) 0);
            width: 20px;
            height: 20px;
            right: var(--form-input-size);
            animation: button-loader-spinner 1s ease infinite;
        }
    }

    .block {
        .footer {
            &:has(a) {
                .button {
                    position: initial;
                    &:after {
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 0;
                        right: 0;
                        bottom: 0;
                    }
                }
            }
        }
    }
    svg.icon {
        width: 24px;
    }
}

@layer master {
    /* set the default background color with section styling */
    section, .themeColor3 {
        background-color: #fff;
    }
    .themeColor1 {
        background-color: var(--color1);
        .block {
            background-color: var(--color2);
            .footer {
                .button:not(.textLink) {
                    &:hover {
                        @media (hover: hover) {
                            background-color: var(--color3);
                        }
                    }
                }
            }
        }
    }

    .themeColor2 {
        background-color: var(--color2);
        .block {
            background-color: var(--color1);
        }
        .buttons {
            .button:not(.textLink) {
                &.primary, &.submit {
                    background-color: var(--color1);
                    &:hover {
                        @media (hover: hover) {
                            background-color: var(--color3);
                            color: #fff;
                        }
                    }
                }
                &.secondary {
                    &:hover {
                        @media (hover: hover) {
                            background-color: var(--color1);
                        }
                    }
                }
            }
        }
    }

    .themeColor3 {
        background-color: var(--color3);
        color: #fff;
        .block {
            background-color: var(--color2);
            .footer {
                .button:not(.textLink) {
                    &:hover {
                        @media (hover: hover) {
                            background-color: var(--color3);
                        }
                    }
                }
            }
        }
        .buttons {
            .button {
                &.primary, &.submit {
                    &:hover {
                        @media (hover: hover) {
                            background-color: var(--color1);
                            color: var(--font-color);
                        }
                    }
                }
                &.secondary {
                    background-color: var(--color1);
                    color: var(--font-color);
                    &:hover {
                        @media (hover: hover) {
                            background-color: var(--color2);
                        }
                    }
                }
            }
        }
    }

    section {
        .block {
            background-color: var(--color1);
            color: var(--font-color);
        }
    }

    .themeColor1:not(.templateHomepageCover, .templateCover, .templateBackground) + .themeColor1:not(.templateBackground),
    .themeColor2:not(.templateHomepageCover, .templateCover, .templateBackground) + .themeColor2:not(.templateBackground),
    .themeColor3:not(.templateHomepageCover, .templateCover, .templateBackground) + .themeColor3:not(.templateBackground) {
        padding-top: 0; 
    }
}

@layer master {

    :root {

        --symbol:			"theme";
        --symbol-size:		18px;
    }
    
    @font-face {
        font-family: 'theme';
        font-display: swap;
        src: url('fonts/theme.woff2') format('woff2'),
            url('fonts/theme.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

    .symbol	{
        display: block;
        font-family: var(--symbol);
        font-size: var(--symbol-size);
        
        &.functieniveau {&:before {content: "\e901";}}
        &.salaris		{&:before {content: "\e902";}}
        &.vakgebied		{&:before {content: "\e903";}}
        &.werkervaring	{&:before {content: "\e905";}}
        &.werklocatie	{&:before {content: "\e90a";}}
        &.werkweek		{&:before {content: "\e90b";}}

        &.print			{&:before {content: "\e954";}}
        &.share 		{&:before {content: "\e80d";}}
        &.share2 		{&:before {content: "\e916";}}

        &.facebook	{&:before {content: "\e900";}}
        &.instagram	{&:before {content: "\e904";}}
        &.linkedin	{&:before {content: "\e906";}}
        &.pinterest {&:before {content: "\e908";}}
        &.tiktok	{&:before {content: "\e90d";}}
        &.x	        {&:before {content: "\e909";}}
        &.vimeo		{&:before {content: "\e90c";}}
        &.youtube	{&:before {content: "\e918";}}
        &.whatsapp 	{&:before {content: "\e917";}}
        &.messenger	{&:before {content: "\e907";}}
        &.rss		{&:before {content: "\e0e5";}}

        &.car	{&:before {content: "\e531";}}
        &.bus	{&:before {content: "\e530";}}
        &.bike	{&:before {content: "\e52f";}}
        &.walk	{&:before {content: "\e536";}}
        &.distance	{&:before {content: "\e0b2";}}
        &.duration	{&:before {content: "\e8b5";}}

        &.plus		{&:before {content: "\e145";}}
        &.minus		{&:before {content: "\e15b";}}
        &.delete	{&:before {content: "\e91c";}}

        &.arrow-left	{&:before {content: "\e5c4";}}
        &.arrow-right	{&:before {content: "\e5c8";}}
        &.arrow-top		{&:before {content: "\e5d8";}}
        &.arrow-bottom	{&:before {content: "\e5db";}}

        &.arrow-small-left		{&:before {content: "\e314";}}
        &.arrow-small-right		{&:before {content: "\e315";}}
        &.arrow-small-top		{&:before {content: "\e316";}}
        &.arrow-small-bottom	{&:before {content: "\e313";}}

        &.menu-close:before {content: "\E313"; transform:scaleY(-1);}
        &.menu-open::before {content: "\E313"; }
        
        &.open::before {content: "\E313"; }
        &.close	 {&:before {content: "\E91C";}}
        &.filter {&:before {content: "\E91D";}}

        &.list-view	{&:before {content: "\E5D3";}}
        &.grid-view	{&:before {content: "\E5D3";}}
        &.map-view	{&:before {content: "\e8b4";}}

        &.star		    {&:before {content: "\e91a";}}
        &.star.active	{&:before {content: "\e91b";}}
        &.heart		    {&:before {content: "\e87e";}}
        &.heart.active  {&:before {content: "\e87d";}}
        
        &.play		{&:before {content: "\e037";}}
        &.show		{&:before {content: "\e56b";}}
        
        &.warning 	{&:before {content: "\26A0";}}
        &.info		{&:before {content: "\e88f";}}
        &.ics		{&:before {content: "\e916";}}
        
        /* formicons */
        &.user		{&:before {content: "\e7fd";}}
        &.email		{&:before {content: "\e0e1";}}
        &.phone		{&:before {content: "\e0cd";}}
        &.pin		{&:before {content: "\e8b4";}}
        &.upload	{&:before {content: "\e226";}}
        
        &.search	{&:before {content: "\e8b6";}}
        &.calendar	{&:before {content: "\E919";}} 
        &.check	{&:before {content: "\e5ca";}}

        &.dropdown		{&:before {content: "\e5c5";}}
        &.dropup		{&:before {content: "\e5c7";}}

    }
}

@layer master {
    
    .title,
    .subTitle,
    h1,
    h2,
    h3,
    h4 {
        margin: 0;
        padding: 0;
        font-family: var(--font-sub);
    }

    .title {
        color: var(--font-color);
        font-family: var(--font-sub);
        font-weight: bold;
        font-size: var(--l-fontsize);
        line-height: var(--l-lineheight);
        text-wrap: balance;
        @media (max-width: 56em) {
            -webkit-hyphens: auto;
                    hyphens: auto;
        }
        @media (--max-fablet) {
            -webkit-hyphens: auto;
                    hyphens: auto;
        }
    }
    .subTitle {
        color: var(--font-color);
        font-family: var(--font-sub);
        font-weight: normal;
        display: block;
        font-size: var(--m-fontsize);
        line-height: var(--m-lineheight);
    }
}

@layer master {

    .button {
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        column-gap: calc(var(--gutter) / 2);

        padding: var(--button-padding);
        border-radius: var(--button-radius);
        border: 0;

        font-family: var(--font-basic);
        font-size: var(--fontsize);
        line-height: 1;
        text-decoration: none;
        cursor: pointer;

        transition: var(--transition);
        

        &:hover {
            @media (hover: hover) {
                background-color: var(--button-hover);
                color: #fff;
            }
        }

        @media (max-width: 56em) {
            &:not(.textLink) {
                width: 100%;
            }
        }

        @media (--max-fablet) {
            &:not(.textLink) {
                width: 100%;
            }
        }
        
        &.primary, &.submit {
            background-color: var(--color2);
            color: var(--font-color);

            &:hover {
                @media (hover: hover) {
                    background-color: var(--button-hover);
                    color: #fff;
                }
            }
        }

        &.secondary {
            background-color: var(--color3);
            color: #fff;

            &:hover {
                @media (hover: hover) {
                    background-color: var(--color2);
                    color: var(--font-color);
                }
            }
        }
        
        &.outline, &.cancel {
            background: none;
            box-shadow: inset 0 0 0 1px var(--color3);
            color: var(--font-color);
            &:hover {
                @media (hover: hover) {
                    background-color: var(--button-hover);
                    box-shadow: inset 0 0 0 1px var(--button-hover);
                    color: #fff;
                }
            }
        }

        &.textLink {
            padding: 0;

            background: none;
            color: var(--font-color);
            border-radius: 0;

            &:hover {
                @media (hover: hover) {
                    background: none;
                    color: var(--button-hover);
                }
            }
        }

        &.delete {
            padding: 0;
            text-decoration: underline;
            text-underline-offset: 6px;
            background: none;
            color: var(--font-color);
            &:hover {
                @media (hover: hover) {
                    color: var(--button-hover);
                }
            }
        }
    }
}

@layer master {
    fieldset {
        display: flex;
        flex-direction: column;
        gap: calc(var(--gutter) / 3);
        border: none;
        padding: 0;
    }
    legend {
        float: left;
        font-size: var(--m-fontsize);
        line-height: var(--m-lineheight);
    }
}

@layer master {

    input,
    select,
    textarea {
        box-shadow: none;
        border-radius: var(--form-border-radius);
        border: 1px solid var(--form-color);
        background-color: #fff;
        width: 100%;
        padding: var(--form-input-size);
        line-height: 30px;
        font-family: var(--font-basic);
        font-size: var(--fontsize);
        color: var(--font-color);
        transition: var(--transition);
        min-height: 30px;

        &::placeholder {
            opacity: 1;
            color: var(--form-placeholder);
        }

        @media (hover: hover) {
            &:hover {
                border: 1px solid var(--form-focused);
            }
        }

        &:invalid {
            border: 1px solid var(--form-error);
            ~ .error {display: block;}
        }

        &[type=file] {
            min-height: calc(var(--form-input-size) * 2 + 30px);
            position: relative;
            &::file-selector-button {
                position: absolute;
                right: var(--form-input-size);
                top: 50%;
                transform: translateY(-50%);
                padding: 10px var(--form-input-size);
                margin: 0;
                border-radius: var(--form-border-radius);
                background: var(--form-color);
                color: var(--font-color);
                border: 0;
                font-size: var(--xs-fontsize);
                transition: var(--transition);
            }
            &:hover {
                @media (hover: hover) {
                    &::file-selector-button {
                        color: #fff;
                        background: var(--form-accent-color);
                    }
                }
            }
        }

        &[type=checkbox],
        &[type=radio] {
            margin-right: 10px;
            position: relative;
            appearance: none;
            border: 1px solid var(--form-color);
            padding: 0;
            width: 30px;
            line-height: normal;
            &:hover {
                @media (hover: hover) {
                    border-color: var(--form-focused);
                }
            }
        }
        
        &[type=checkbox] {
            &:after {
                content: "";
                inset: 4px;
                position: absolute;
                -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9IiMwMDAiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+IDxwYXRoIGQ9Ik01IDEybDUgNWwxMCAtMTAiLz48L3N2Zz4=") no-repeat center / contain;
                        mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9IiMwMDAiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+IDxwYXRoIGQ9Ik01IDEybDUgNWwxMCAtMTAiLz48L3N2Zz4=") no-repeat center / contain;
            }
            &:checked {
                border-color: var(--form-focused);
                &:after {
                    background: var(--form-focused);
                }
            }

            &[role=switch] {
                display: grid;
                place-content: center start;
                width: 50px;
                border-radius: 30px;
                -webkit-mask: none;
                        mask: none;
                border-width: 2px;
                background: var(--form-color);
                &:after {
                    background: #fff;
                    -webkit-mask: none;
                            mask: none;
                    border-radius: 100%;
                    height: 24px;
                    inset: unset;
                    position: static;
                    width: 24px;
                    transform: translateX(0);
                    transition: transform 0.3s ease;
                }
                &:hover {
                    @media (hover: hover) {
                        border-color: var(--form-color);
                    }
                }
                &:checked {
                    border-color: var(--form-focused);
                    background: var(--form-focused);
                    &::after {
                        transform: translateX(21px);
                    }
                    
                }
            }
        }

        &[type=radio] {
            border-radius: 100%;
            &:after {
                content: "";
                inset: 6px;
                position: absolute;
                border-radius: 100%;
            }
            &:checked {
                border-color: var(--form-focused);
                &:after {
                    background: var(--form-focused);
                }
            }
        }
    }

    .select {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: calc(var(--gutter) / 3);
        select {
            appearance: none;
        }
        &:after {
            position: absolute;
            display: block;
            content: '';
            width: 10px;
            height: 10px;
            top: 50%; 
            right: calc(var(--form-input-size) + 5px);
            margin-top: -3px;
            border-bottom: 2px solid var(--form-color);
            border-right: 2px solid var(--form-color);
            transform-origin: 50% 0;
            transform: rotate(45deg) translateY(-50%);
            transition: transform .4s ease-in-out, margin-top .4s ease-in-out;
            pointer-events: none;
        }
    }

    input {
        border-color: var(--form-color);
    }

    @supports (appearance: base-select) {
        .select {
            ::picker(select) {
                appearance: base-select;
                border: 1px solid var(--form-color);
                border-radius: 8px;
            }
            &:after {
                display: none;
            }

            select {
                width: 100%;
                appearance: base-select;
                align-items: center;
                
                &::picker-icon {
                    position: absolute;
                    display: block;
                    content: '';
                    width: 10px; 
                    height: 10px;
                    top: 50%; 
                    right: calc(var(--form-input-size) + 5px);
                    margin-top: -3px;
                    border-bottom: 2px solid var(--form-color);
                    border-right: 2px solid var(--form-color);
                    transform: rotate(45deg) translateY(-50%);
                    transition: transform .4s ease-in-out, margin-top .4s ease-in-out;
                    transform-origin: 50% 0;
                }
                &:open::picker-icon {
                    margin-top: 3px;
                    transform: rotate(-135deg) translateY(-50%);
                }

                option {
                    display: flex;
                    gap: 0;
                    padding: 10px 20px;
                    transition: 0.4s;
                    background: #fff;
                    border: 0;
                    justify-content: space-between;
                    flex-direction: row-reverse;

                    &::checkmark {
                        content: "";
                    }
                    &:checked {
                        font-weight: bold;
                        &:before {
                            content: "";
                            color: var(--form-focused);
                            position: absolute;
                            top: 50%;
                            right: 20px;
                            width: 14px;
                            height: 8px;
                            border-bottom: solid 2px currentColor;
                            border-left: solid 2px currentColor;
                            margin-top: -2px;
                            transform: rotate(-45deg) translateY(-50%);
                        }
                    }
                    &[hidden] {
                        display: none;
                    }

                    &:nth-of-type(odd) {
                        background: var(--form-odd);
                    }
                    &:hover {
                        @media (hover: hover) {
                            background: var(--form-description);
                        }
                    }
                    &:focus {
                        background-color: var(--form-accent-color);
                    }
                }

                &:hover {
                    @media (hover: hover) {
                        &::picker-icon {
                            color: var(--form-accent-color);
                        }
                    }
                }
            }
        }
    }
}

@layer master {
    label {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        button {
            position: absolute;
            top: 50%;
            right: var(--form-input-size);
            transform: translateY(-50%);
        }
    }
}

@layer master {
    a {
        text-decoration: underline;
        text-underline-offset: 6px;
        &:not(:hover):not(:focus) {
            text-decoration-color: color-mix(in srgb, currentColor, transparent 75%);
        }
    }
}

@layer master {
    ul {
        list-style: disc;
        padding-left: 30px;
        margin-bottom: 1em;
        li {
            &::marker {
                color: currentColor;
            }
        }
        &.check {
            li {
                padding-left: 10px;
                &::marker {
                    content: "\2713";
                }
            }
        }
    }

    ol {
        list-style: decimal-leading-zero;
        margin-bottom: 1em;
        li {
            &::marker {
                color: currentColor;
            }
        }
    }
}

@layer master {
    p {
        margin:0;
        &:not(:last-child) {
            margin-bottom: 1em;
        }
    }
}

@layer master {
    blockquote {
    }

    q {
    }
}

@layer master {
    details {
        background-color: var(--color1);
        width: 100%;
        transition: var(--transition);

        @media (prefers-reduced-motion: no-preference) {
            interpolate-size: allow-keywords;
        }
          
        &::details-content {
            transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
            height: 0;
            overflow: clip;
        }
        
        &[open] {
            background: var(--color2);
            &::details-content {
                height: auto;
            }
            summary {
                .icon {
                    transform: rotate(180deg);
                }
            }
        }

        summary {
            font-size: var(--m-fontsize);
            line-height: var(--m-lineheight);
            font-weight: bold;
            
            display: flex;
            justify-content: space-between;
            cursor: pointer;
            padding: calc(var(--padding) / 2);
            .icon {
                color: var(--font-color);
                transition: all 500ms ease;
            }
            &::-webkit-details-marker,
            &::marker {
                content: '';
            }
        }

        article {
            .block {
                background-color: unset;
                .inner {
                    padding: 0 calc(var(--padding) / 2) calc(var(--padding) / 2) calc(var(--padding) / 2);
                }
            }
        }
    }
}

@layer master {
    html:has(dialog[open]) {
        overflow: hidden;
    }
    dialog {
        max-width: 50%;
        margin: auto;
        
        padding: var(--padding);
        border: 0;
        background-color: #fff;

        overflow: auto;
        overscroll-behavior: contain;
    
        @media (max-width: 56em) {
            max-width: 90%;
        }
    
        @media (--max-fablet) {
            max-width: 90%;
        }

        &[open] {
            display: flex;
            flex-direction: column;
            gap: var(--gutter);
        }

        .header {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: var(--gutter);
            h2 {
                flex-grow: 1;
            }
        }

        .footer {
            display: flex;
            align-items: center;
            gap: var(--gutter);
            margin-top: 1em;
            @media (max-width: 56em) {
                flex-direction: column;
                align-items: center;
            }
            @media (--max-fablet) {
                flex-direction: column;
                align-items: center;
            }
            button {width: 100%;}
        }

        &::backdrop {
            background-color: rgba(0, 0, 0, 0.5);
        }
    }
}

@layer master {
    .media {
        button {
            &.playButton {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            &.pauseButton {
                position: absolute;
                right: var(--padding);
                bottom: var(--padding);
                width: 48px;
                height: 48px;
                background-color: var(--color-light);
                border-radius: var(--button-radius);
                z-index: 99;
                transition: var(--transition);
                .icon {
                    transition: var(--transition);
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%) translateY(-50%);
                    top: 50%;
                    &.play {opacity: 0;}
                }
                &:hover {
                    @media (hover: hover) {
                        background-color: var(--color-light);
                    }
                }
            }
        }
        .templateMedia.video & {
            &:before {
                content: "";
                position: absolute;
                z-index: 1;
                left: 0;
                top: 0;
                display: block;
                background-color: var(--color-dark);
                opacity: 0.2;
                transition: var(--transition);
                width: 100%;
                height: 100%;                
            }
        }
    }

    .playButton {
        display: flex;
        align-items: center;
        justify-content: center;
        
        position: relative;
        z-index: 2;
        width: 120px;
        height: 120px;
        
        background: none;
        border: none;
        text-align: center;
        text-decoration: none;
        padding: 0;
        
        cursor: pointer;
        transition: var(--transition);

        .icon {
            transition: var(--transition);
            position: absolute;
            width: 48px;
            height: 48px;
            padding: 8px;
            background-color: var(--color-light);
            border-radius: var(--button-radius);
            &.pause {opacity: 0;}
        }

        &:after {
            position: absolute;
            top: 50%;
            margin-top: -60px;
            width: 100%;
            height: 100%;
            display: block;
            content: "";
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath  d='M46.3,1.2c-0.4-0.6-1-0.9-2-1L41.5,0l-1,9.7l1.9,0.2l0.4-3.5l0.8,0.1c1,0.1,1.7-0.1,2.2-0.6 c0.5-0.5,0.8-1.2,0.9-2.2C46.8,2.6,46.6,1.8,46.3,1.2L46.3,1.2z M44.7,3.5c0,0.2,0,0.3-0.1,0.5v0c0,0.1-0.1,0.2-0.1,0.4 c-0.1,0.1-0.2,0.2-0.3,0.3s-0.3,0.1-0.5,0.1L43,4.7L43.3,2L44,2c0.2,0,0.3,0.1,0.5,0.2c0.1,0.1,0.2,0.2,0.2,0.4c0,0.2,0,0.3,0,0.4 S44.8,3.3,44.7,3.5z M51.3,11.9L47,10.5l2.9-9.3l1.8,0.6l-2.4,7.6l2.4,0.8L51.3,11.9L51.3,11.9z M54.6,11.8l2,1.1l-0.5,1.5l1.8,1 l2.6-9.7l-1.7-1l-7,7.2l1.8,1L54.6,11.8z M58.2,7.7l-1.1,3.5v0l-1.3-0.7L58.2,7.7z M57.8,15.4L57.8,15.4L57.8,15.4L57.8,15.4z M59,16.5l2.4-2.8l2.5-5.9l1.6,1.4l-1.7,3.2l2.9-2.1l1.6,1.4h0L62.8,15l-2.4,2.8L59,16.5z M64.7,22.7l7-7.1l1.2,1.8L67.7,22l6.3-2.9 l1.2,1.8l0,0l-9.3,3.5L64.7,22.7z M67.2,27l8.9-3.9l0.8,1.8L68,28.8L67.2,27z M69.3,32.8c0.2,0.8,0.7,1.5,1.4,1.8 c0.4,0.2,0.9,0.3,1.5,0.2c0.6-0.1,1.4-0.2,2.5-0.5c1-0.3,1.8-0.5,2.4-0.7l0,0c0.5-0.2,1-0.5,1.2-0.9c0.5-0.7,0.6-1.5,0.4-2.3 l-0.7-2.7l-9.4,2.3L69.3,32.8z M76.8,30.1l0.2,0.7c0.1,0.3,0,0.6-0.2,0.8c-0.3,0.2-1.1,0.5-2.5,0.9h0c-1.5,0.4-2.4,0.5-2.7,0.4 c-0.3-0.1-0.5-0.3-0.6-0.6l-0.2-0.7L76.8,30.1z M70.2,41.2L70.2,41.2L70.2,41.2L70.2,41.2z M70,36.7l9.7-0.4l0.2,4.5l-1.8,0.1 l-0.1-2.5l-2.2,0.1l0.1,2.2l-1.8,0.1l-0.1-2.2l-2.3,0.1l0.1,2.5l-1.7,0.1L70,36.7z M77.5,43.2c-0.6-0.2-1.4-0.3-2.5-0.5 c-1.1-0.2-1.9-0.3-2.5-0.3c-0.6,0-1.1,0.1-1.5,0.4c-0.7,0.4-1.2,1.1-1.3,2c-0.1,0.9,0.1,1.6,0.6,2.3c0.3,0.4,0.8,0.6,1.3,0.8 c0.6,0.2,1.4,0.3,2.5,0.5s1.9,0.3,2.5,0.3c0.6,0,1.1-0.1,1.5-0.4c0.7-0.4,1.2-1.1,1.3-2s-0.1-1.6-0.6-2.3 C78.5,43.7,78.1,43.4,77.5,43.2z M77.3,46.6c-0.4,0.1-1.3,0.1-2.8-0.2S72,46,71.7,45.7c-0.2-0.2-0.3-0.4-0.3-0.7 c0-0.3,0.2-0.5,0.5-0.6c0.4-0.1,1.3-0.1,2.8,0.2c1.5,0.2,2.5,0.5,2.8,0.7c0.2,0.2,0.3,0.4,0.3,0.7C77.7,46.3,77.6,46.5,77.3,46.6z M64.9,57l2.9,2.1l-0.5,0.7c-0.6,0.8-0.8,1.5-0.6,2.2s0.7,1.2,1.5,1.9c0.8,0.6,1.6,0.9,2.2,0.8l0,0c0.7,0,1.3-0.5,1.9-1.3l1.6-2.2 L66,55.5L64.9,57z M68.7,60.7l0.4-0.6l2.2,1.6l-0.4,0.6c-0.1,0.2-0.2,0.3-0.4,0.3c-0.1,0-0.3,0-0.4,0s-0.3-0.1-0.4-0.2 c-0.1-0.1-0.2-0.2-0.4-0.3C69.2,62.1,69,62,69,61.9v0c-0.1-0.1-0.2-0.2-0.3-0.3c-0.1-0.1-0.1-0.3-0.1-0.4S68.6,60.9,68.7,60.7z M62,60.7l6.6,7.1l-1.4,1.3l-5.4-5.8L59.9,65l-1.2-1.3h0L62,60.7z M56.6,65.2l0.5,1.5l-1.9,1.1l-1-1.1l-1.7,1l7.1,7.1l1.6-1 l-2.8-9.6L56.6,65.2z M56.4,69.1l1.3-0.8l1.2,3.5L56.4,69.1z M52.4,67.7L52.4,67.7L52.4,67.7L52.4,67.7z M52.2,71.5l3.9,5.1l-2,0.7 l-2-3l0.4,3.6l-2,0.7l-0.2-6.4l-1.2-3.5l1.8-0.7L52.2,71.5z M50.5,78.6L50.5,78.6L50.5,78.6L50.5,78.6z M42.7,70l2.7,9.6l-2.1,0.1 L41.9,73l-0.7,6.9L39.1,80h0l1.6-9.8L42.7,70z M35.8,69.9l1.9,0.2l-1,9.7l-1.9-0.2L35.8,69.9z M29.4,69.3c-0.4,0.3-0.7,0.7-1,1.2 c-0.2,0.6-0.5,1.3-0.8,2.4c-0.3,1-0.5,1.9-0.6,2.4v0c-0.1,0.6,0,1.1,0.2,1.5c0.4,0.8,1,1.2,1.8,1.5l2.6,0.8l2.7-9.4L31.7,69 C30.8,68.8,30.1,68.9,29.4,69.3z M30.3,76.9l-0.7-0.2c-0.3-0.1-0.5-0.3-0.6-0.6c-0.1-0.3,0.1-1.2,0.5-2.6l0,0c0.4-1.4,0.7-2.3,1-2.5 c0.2-0.2,0.5-0.3,0.8-0.2l0.7,0.2L30.3,76.9z M24,65.7L24,65.7L24,65.7L24,65.7z M27.9,67.7l-4.5,8.6l-4-2.1l0.8-1.6l2.3,1.2l1-2 l-1.9-1l0.8-1.5l1.9,1l1-2l-2.3-1.2l0.8-1.5L27.9,67.7z M21.7,67c0.3-0.5,0.5-1,0.5-1.5c0-0.8-0.3-1.5-1-2.1 c-0.7-0.6-1.5-0.8-2.3-0.6c-0.5,0.1-0.9,0.4-1.4,0.8s-1,1-1.7,1.9c-0.7,0.8-1.2,1.5-1.5,2s-0.5,1-0.5,1.5c0,0.8,0.3,1.5,1,2.1 c0.7,0.6,1.4,0.8,2.3,0.6c0.5-0.1,0.9-0.4,1.4-0.8s1-1,1.7-1.9C20.9,68.2,21.4,67.5,21.7,67z M18.7,67.8c-1,1.2-1.6,1.9-2,2 c-0.3,0.1-0.5,0.1-0.8-0.1c-0.2-0.2-0.3-0.4-0.3-0.7c0.1-0.4,0.6-1.2,1.6-2.4c1-1.2,1.6-1.9,2-2c0.3-0.1,0.5-0.1,0.8,0.1 c0.2,0.2,0.3,0.4,0.3,0.7C20.2,65.8,19.7,66.6,18.7,67.8z M9.6,54.6l-0.3-0.7c-0.4-0.9-1-1.5-1.6-1.6c-0.6-0.2-1.4,0-2.4,0.4 c-0.9,0.4-1.5,0.9-1.8,1.5v0c-0.3,0.6-0.2,1.3,0.2,2.2L4.8,59l8.9-4.1l-0.8-1.8L9.6,54.6z M5.5,56.5l-0.3-0.7 c-0.1-0.2-0.1-0.3-0.1-0.5c0-0.1,0.1-0.3,0.2-0.4c0.1-0.1,0.2-0.2,0.3-0.3s0.2-0.1,0.4-0.2c0.2-0.1,0.3-0.1,0.5-0.2l0,0 c0.1,0,0.2-0.1,0.4-0.1c0.2,0,0.3,0,0.4,0.1s0.2,0.2,0.3,0.4L8,55.3L5.5,56.5z M11.1,48.8l-9.5,2.2l-0.4-1.9l7.8-1.8l-0.6-2.5 l1.7-0.4L11.1,48.8z M10,44.5L10,44.5L10,44.5L10,44.5z M9.8,41.9l-1.5-0.3l0-2.2l1.5-0.3l0-2L0,39.7l0,1.9L9.9,44L9.8,41.9z M2.9,40.6l3.6-0.8l0,1.5L2.9,40.6z M6.5,34.9l-6.3,0.9l0.4-2.1l3.6-0.2l-3.3-1.4L1.2,30h0l5.6,3l3.6,0.7l-0.3,1.9L6.5,34.9z M12.5,27.4L2.8,25l1-1.9l6.6,2.1l-5.7-4l0.9-1.9v0l7.7,6.3L12.5,27.4z M15,23.1l-7.9-5.7l1.1-1.6l7.9,5.7L15,23.1z M18.9,18.4 c0.6-0.6,0.9-1.3,0.9-2.2c0-0.5-0.2-1-0.6-1.4c-0.3-0.5-0.9-1.1-1.7-1.9s-1.4-1.3-1.8-1.7l0,0c-0.5-0.3-0.9-0.5-1.4-0.6 c-0.8-0.1-1.6,0.2-2.2,0.8l-2,1.9l6.8,7L18.9,18.4z M13.3,12.7c0.2-0.2,0.5-0.3,0.8-0.2c0.3,0.1,1,0.7,2,1.8v0 c1.1,1.1,1.6,1.8,1.7,2.1c0.1,0.3,0,0.6-0.2,0.8l-0.5,0.5l-4.4-4.5L13.3,12.7z M25.6,13.3L25.6,13.3L25.6,13.3L25.6,13.3z M21.9,15.7l-5.3-8.2l3.8-2.4l0.9,1.5L19.2,8l1.2,1.9l1.8-1.2l1,1.5l-1.8,1.2l1.2,1.9l2.1-1.4l0.9,1.5L21.9,15.7z M24.5,8.4 c0.4,1,0.8,1.8,1,2.3c0.3,0.5,0.7,0.9,1.1,1.1c0.7,0.4,1.5,0.5,2.3,0.1c0.8-0.3,1.4-0.9,1.6-1.7c0.2-0.5,0.2-1,0-1.6 c-0.1-0.6-0.4-1.4-0.8-2.4c-0.4-1-0.8-1.8-1-2.3c-0.3-0.5-0.7-0.9-1.1-1.1c-0.7-0.4-1.5-0.5-2.3-0.1C24.6,3,24,3.6,23.8,4.4 c-0.2,0.5-0.2,1,0,1.6C23.9,6.5,24.2,7.3,24.5,8.4z M26,4.3c0.3-0.1,0.5-0.1,0.8,0.1c0.3,0.2,0.7,1.1,1.3,2.5 c0.6,1.5,0.8,2.4,0.8,2.7c0,0.3-0.2,0.5-0.5,0.6c-0.3,0.1-0.5,0.1-0.8-0.1c-0.3-0.2-0.7-1.1-1.3-2.5c-0.6-1.5-0.8-2.4-0.8-2.7 C25.6,4.6,25.8,4.4,26,4.3z'/%3E%3C/svg%3E%0A");
            background-size: 80% auto;
            background-repeat: no-repeat;
            background-position: center;
    
            animation-name: spin;
            animation-duration: 10s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            transition: var(--transition);
        }
        &:hover {
            @media (hover: hover) {
                .icon {
                    background: var(--color3);
                }
    
                &:after {		
                    animation-direction: reverse;						
                }
            }
        }
    }

    .playing {
        .playButton {
            opacity: 0;
            .icon {
                &.play {opacity: 0;}
                &.pause {opacity: 1;}
            }
            &:hover {
                @media (hover: hover) {
                    opacity: 1;
                }
            }
            &:after {
                opacity: 0;
            }
        }
    }
}

@layer master {
    .breadcrumb {
        display: block;
        width: 100%;
        ol {
            padding: 0;
            list-style: none;
            li {
                display: inline;
                &+li:before {
                    padding: 0 5px;
                    content: "\00a0";
                }
                a {
                    text-decoration: none;
                    &:hover {
                        @media (hover: hover) {
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }
}

@layer master {
    .formField {
        label {
            margin-bottom: 5px;
        }
        input {
            &:user-invalid {
                ~ .error {
                    display: block;
                }
            }
        }
        .required {
            color: var(--font-color);
            font-weight: normal;
        }
        .hint {
            display: block;
            font-size: var(--xs-fontsize);
            padding: 10px var(--form-input-size) 10px calc(var(--form-input-size) - 5px);
            width: 100%;
            margin-top: 5px;
            position: relative;
            color: var(--font-color);
            &:before {
                content: "";
                position: absolute;
                top: -5px;
                left: 5px;
                width: 0;
                height: 0; 
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                
            }
            &.description {
                background: var(--form-description);
                border-left: 5px solid var(--form-placeholder);
                &:before {
                    border-bottom: 5px solid var(--form-description);
                }
            }
            &.error {
                background: var(--form-error);
                border-left: 5px solid #ff889c;
                &:before {
                    border-bottom: 5px solid var(--form-error);
                }
            }
        }
    }

    .labelsLeft {
        .formField {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            label {
                grid-column: span 4;
            }
            input {
                grid-column: span 8;
            }
            .hint {
                grid-column: 5 / span 8;
            }
        }
    }
}

@layer master {
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--padding);

        .button {
            background-color: var(--color2);
            padding: 8px 12px;
            &:hover {
                background-color: var(--button-hover);
            }
            &:disabled {
                opacity: 0.5;
                pointer-events: none;
            }
        }
    }
}

@layer master {
    article {
        display: flex;
        height: 100%;
        a {
            &.block {
                &:hover {
                    @media (hover: hover) {
                        .footer {
                            .button {
                                color: var(--button-hover);
                            }
                        }
                    }
                }
            }
        }
        .block {
            text-decoration: none;
            display: flex;
            flex-direction: column;
            flex-grow: 1;

            border-radius: var(--border-radius);
            overflow: hidden;
        
            .media {
                overflow: hidden;
                border-radius: 0;
                img, .video {
                    width: 100%;
                    height: auto;
                    display: block;
                    transition: var(--transition);
                }
            }
            .inner {
                display: flex;
                flex-direction: column;
                flex-grow: 1;
                gap: var(--gutter);
                
                padding: var(--padding);
                .header {
                    display: flex;
                    flex-direction: column;
                    gap: var(--gutter);
                    .title {
                        color: var(--font-color);
                        font-family: var(--font-sub);
                        font-weight: normal;
                        display: block;
                        font-size: var(--s-fontsize);
                        line-height: var(--s-lineheight);
                        text-wrap: balance;
                    }
                }
                .content {
                    flex-grow: 1;
                }
        
                .footer {
                    display: flex;
                    gap: calc(var(--gutter) / 2);
                    flex-wrap: wrap;
                }
            }
        }
    }
}

@layer master {
    footer {
        display: grid;
        grid-template-columns: [full-start] minmax(var(--spacer), 1fr) [content-start] min(calc(100% - (var(--spacer) * 2))) [content-end] minmax(var(--spacer), 1fr) [full-end];
        padding: var(--padding) 0;
        position: relative;
        background-color: var(--color3);
        color: #fff;

        .footerContainer {
            grid-column: content-start / content-end;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--gutter);
            justify-content: center;

            a {
                color: var(--color1);
                text-decoration: none;
                &:hover {
                    @media (hover: hover) {
                        color: var(--color2);
                    }
                }
            }

            .footerLeft {
                display: flex;
                flex-wrap: wrap;
                gap: var(--gutter);
                @media (min-width: 56em) {
                    flex: 1;
                    justify-content: flex-start
                }
                @media (--min-fablet) {
                    flex: 1;
                    justify-content: flex-start
                }
            }

            .footerRight {
                display: flex;
                gap: var(--gutter);
                @media (max-width: 56em) {
                    flex-wrap: wrap;
                }
                @media (--max-fablet) {
                    flex-wrap: wrap;
                }
                .social {
                    display: flex;
                    gap: var(--gutter);
                    svg {
                        color: var(--color1);
                        &:hover {
                            @media (hover: hover) {
                                color: var(--color2);
                            }
                        }
                    }
                }
            }
        }
    }
}

@layer master {
    header {
        display: grid;
        grid-template-columns: [full-start] minmax(var(--spacer), 1fr) [content-start] min(calc(100% - (var(--spacer) * 2))) [content-end] minmax(var(--spacer), 1fr) [full-end];
        padding: var(--padding) 0;
        position: absolute;
        width: 100%;
        z-index: 9;

        .headerContainer {
            grid-column: content-start / content-end;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--gutter);
            justify-content: space-between;
        }
    }

    .logo {
        z-index: 9;
        svg {
            width: 250px;
        }
    }
    
    .hamburger {
        cursor: pointer;
        border: 0;
        background-color: var(--color-dark);

        width: 48px;
        height: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
        z-index: 9;       
        
        span {
            position: relative;
            display: block;
            width: 18px;
            height: 2px;
            background-color: var(--color-light);
            transition: background .2s ease-out;
            &:before, &:after {
                background-color: var(--color-light);
                content: '';
                display: block;
                height: 100%;
                position: absolute;
                transition: var(--transition);
                width: 100%;
            }
            &:before {top: -5px;}
            &:after  {top: 5px;}
        }
        
        .menuOpen & {
            span {
                background: transparent;
                &:before, &:after {
                    top:0;
                }
                &:before {transform: rotate(45deg);}
                &:after  {transform: rotate(-45deg);}
            }
        }
        @media (min-width: 56em) {
            display: none;
        }
        @media (--min-fablet) {
            display: none;
        }

    }

    .nav {
        ul {
            display: flex;
            gap: var(--gutter);
            list-style: none;
            padding: 0;
            margin-bottom: 0;
            @media (max-width: 56em) {
                position: relative;
                flex-direction: column;
            }
            @media (--max-fablet) {
                position: relative;
                flex-direction: column;
            }
            li {
                position: relative;
                @media (max-width: 56em) {
                    position: initial;
                    width: 100%;
                }
                @media (--max-fablet) {
                    position: initial;
                    width: 100%;
                }
                
                > a, 
                > button {
                    position: relative;
                    display: flex;
                    justify-content: space-between;
                    color: var(--color-dark);
                    background-color: transparent;
                    border: 0;
                    cursor: pointer;
                    width: 100%;
                    padding: 5px 10px;
                    transition: var(--transition);
                    text-decoration: none;
                    @media (max-width: 56em) {
                        font-size: var(--s-fontsize);
                        padding: 5px 0;
                    }
                    @media (--max-fablet) {
                        font-size: var(--s-fontsize);
                        padding: 5px 0;
                    }
                    @media (min-width: 56em) {
                        .hasCover & {
                            color: var(--color-light);
                        }
                        &[aria-current="page"] {
                            color: var(--color-light);
                            @media (min-width: 56em) {
                                text-decoration: underline;
                                text-underline-offset: 6px;
                            }
                            @media (--min-fablet) {
                                text-decoration: underline;
                                text-underline-offset: 6px;
                            }
                        }
                    }
                    @media (--min-fablet) {
                        .hasCover & {
                            color: var(--color-light);
                        }
                        &[aria-current="page"] {
                            color: var(--color-light);
                            @media (min-width: 56em) {
                                text-decoration: underline;
                                text-underline-offset: 6px;
                            }
                            @media (--min-fablet) {
                                text-decoration: underline;
                                text-underline-offset: 6px;
                            }
                        }
                    }

                    &:hover:not(button) {
                        @media (hover: hover) and (min-width: 56em) {
                            text-decoration: underline;
                            text-underline-offset: 6px;
                        }
                        @media (hover: hover) and (--min-fablet) {
                            text-decoration: underline;
                            text-underline-offset: 6px;
                        }
                    }
                }

                [aria-haspopup] {
                    &:after {
                        content:'';
                        display: block;
                        border-bottom: 2px solid var(--form-color);
                        border-right: 2px solid var(--form-color);
                        transform: rotate(45deg);
                        height: 16px;
                        width: 16px;
                        @media (min-width: 56em) {
                            transition: var(--transition);
                            transform: rotate(90deg);
                        }
                        @media (--min-fablet) {
                            transition: var(--transition);
                            transform: rotate(90deg);
                        }
                    }
                }
                [aria-expanded=true] {
                    &:after {
                        @media (min-width: 56em) {
                            transform: rotate(-90deg);
                        }
                        @media (--min-fablet) {
                            transform: rotate(-90deg);
                        }
                    }
                }

                &.open {
                    @media (min-width: 56em) {
                        a, button {
                            border-bottom: 1px solid var(--color-light);
                        }
                    }
                    @media (--min-fablet) {
                        a, button {
                            border-bottom: 1px solid var(--color-light);
                        }
                    }
                }
                
               &.open {
                    .subMenu {
                        visibility: visible;
                        opacity: 1;
                        transform: translateX(-50%) translateY(0);
                        @media (max-width: 56em) {
                            transform: translateX(0) translateY(0);
                        }
                        @media (--max-fablet) {
                            transform: translateX(0) translateY(0);
                        }
                    }
                }
            }

            .subMenu {
                padding: calc(var(--padding)/2) 0;
                position: absolute;
                top: calc(100% + 10px);
                left: 50%;
                background-color: #fff;
                visibility: hidden;
                opacity: 0;
                transition: var(--transition);
                transform: translateX(-50%) translateY(-16px);
                min-width: 220px;
                @media (max-width: 56em) {
                    top: 0;
                    left: 0;
                    width: calc(100vw - var(--spacer) * 2);                    
                    height: 100vh;
                    background-color: var(--color-dark);
                    transition: var(--transition);
                    z-index: 99;
                    transform: translateX(-100%) translateY(0);
                }
                @media (--max-fablet) {
                    top: 0;
                    left: 0;
                    width: calc(100vw - var(--spacer) * 2);                    
                    height: 100vh;
                    background-color: var(--color-dark);
                    transition: var(--transition);
                    z-index: 99;
                    transform: translateX(-100%) translateY(0);
                }
                li {
                    width: 100%;
                }
                &:before {
                    position: absolute;
                    top: -5px;
                    left: 50%;
                    transform: translateX(-50%);
                    content: "";
                    width: 0;
                    height: 0;
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                    border-bottom: 5px solid var(--color-light);
                    @media (max-width: 56em) {
                        display: none;
                    }
                    @media (--max-fablet) {
                        display: none;
                    }
                }


                .goBack {
                    display: none;
                    color: #fff;
                    margin-bottom: var(--padding);
                    align-items: center;
                    gap: 5px;
                    @media (max-width: 56em) {
                        display: flex;
                    }
                    @media (--max-fablet) {
                        display: flex;
                    }
                }
                .title {
                    display: none;
                    color: #fff;
                    font-size: var(--m-fontsize);
                    margin-bottom: calc(var(--padding) / 2);
                    @media (max-width: 56em) {
                        display: block;
                    }
                    @media (--max-fablet) {
                        display: block;
                    }
                }

                ul {
                    gap: 0;
                    flex-direction: column;

                    li {
                        a, button {
                            display: block;
                            color: var(--font-color);
                            padding: 5px calc(var(--padding) / 2);
                            @media (max-width: 56em) {
                                color: #fff;
                                padding: 5px 0;
                            }
                            @media (--max-fablet) {
                                color: #fff;
                                padding: 5px 0;
                            }
                            &:hover {
                                @media (hover: hover) and (min-width: 56em) {
                                    background: var(--grey1);
                                }
                                @media (hover: hover) and (--min-fablet) {
                                    background: var(--grey1);
                                }
                            }
                        }
                    }
                }
            }
        }

        @media (max-width: 56em) {
            background: var(--color1);
            position: fixed;
            right: -100vw;
            top: 0;
            width: 100%;
            height: 100vh;
            padding: var(--spacer);
            padding-top: calc(var(--padding) + var(--padding) + 44px);
            transition: var(--transition);
        }

        @media (--max-fablet) {
            background: var(--color1);
            position: fixed;
            right: -100vw;
            top: 0;
            width: 100%;
            height: 100vh;
            padding: var(--spacer);
            padding-top: calc(var(--padding) + var(--padding) + 44px);
            transition: var(--transition);
        }

        .menuOpen & {
            display: block;
            right: 0;
        }
    }

    .menuOpen {
        overflow: hidden; 
        height: 100%;
    }
}

@layer master {
    form {        
        .formRow {
            padding: var(--form-row, 15px) 0;
        }
    }
}

@layer master {
    section {
        display: grid;
        grid-template-columns: [full-start] minmax(var(--spacer), 1fr) [content-start] min(calc(100% - (var(--spacer) * 2))) [content-end] minmax(var(--spacer), 1fr) [full-end];
        padding: var(--section) 0;
        position: relative;
    }

    .container {
        grid-column: content-start / content-end;
        display: grid;
        gap: var(--gutter);
        @media (min-width: 56em) {
            grid-template-columns: repeat(12, 1fr);
            .breakOutLeft & {
                grid-column-start: full-start;
            }
            .breakOutRight & {
                grid-column-end: full-end;
            }
        }
        @media (--min-fablet) {
            grid-template-columns: repeat(12, 1fr);
            .breakOutLeft & {
                grid-column-start: full-start;
            }
            .breakOutRight & {
                grid-column-end: full-end;
            }
        }

        .media {
            grid-column: span 12;
            position: relative;

            overflow: hidden;
            border-radius: var(--border-radius);
            img, video, .video-youtube, .video-vimeo {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center center;
            }
        }

        .inner {
            grid-column: span 12;
            display: flex;
            flex-direction: column;
            gap: var(--gutter);
            
            .intro {
                .title + .subTitle {
                    margin-top: calc(var(--gutter) / 2);
                }
                .title + .content {
                    margin-top: var(--gutter);
                }
            }

            .grid {
                display: grid;
                gap: var(--gutter);
                @media (min-width: 56em) {
                    grid-template-columns: repeat(12, 1fr);
                    width: 100%;
                }
                @media (--min-fablet) {
                    grid-template-columns: repeat(12, 1fr);
                    width: 100%;
                }
                .item {
                    display: flex;
                    @media (min-width: 56em) {
                        grid-column: span 4;
                    }
                    @media (--min-fablet) {
                        grid-column: span 4;
                    }
                }
            }
        
            .buttons {
                display: flex;
                gap: var(--gutter);
                flex-wrap: wrap;
                align-items: center;
                @media (max-width: 56em) {
                    flex-direction: column;
                }
                @media (--max-fablet) {
                    flex-direction: column;
                }
            }
        }
    }
}