@import url('https://fonts.googleapis.com/css2?family=Abel&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@layer theme {
    @media (prefers-reduced-motion: no-preference) {
        @view-transition {
            navigation: auto;
        }
    }
}
@layer addon {

    .themeColor1 {
        background-color: var(--color-light);
        .block {
            background-color: var(--color1);
        }
    }

    .themeColor2 {
        background-color: var(--color1);
        .block {
            background-color: var(--color-light);
        }
    }

    .themeColor3 {
        background-color: var(--color4);
        .intro {
            .title, .subTitle, .content {
                color: var(--color-light);
            }
        }
        .footer {
            .textLink {
                color: var(--color-light);
            }
        }
        .block {
            background-color: var(--color-light);
            .title {
                color: var(--color4);
            }
            .subTitle, .content {
                color: var(--font-color);
            }
        }
    }

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

    input, textarea, select {
        font-family: var(--font-form);
    }
    
}
@layer addon {

    :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 addon {
    body:not(.hasCover) {
        main {
            margin-top: 0;
        }
    }
    main {
        section {
            z-index: 2;
        }
    }

    svg.icon {
        height: 24px;
    }
    
}
@layer addon {
    :root {
        /*COLORS*/
        --color1:    #efefef;
        --color2:    #cccccc;
        --color3:    #8c8c8c;
        --color4:    #026CB8;
        
        --grey1:    #cccccc;

        --color-dark: #000000;
        --color-light: #FFFFFF;

        /*DEFAULT FONT*/
        --font-basic:    'Open Sans', sans-serif;
        --font-sub:      'Open Sans', sans-serif;
        --font-form:      'Abel', sans-serif;
        --font-color:    #5c5c5c;

        /* XS FONTSIZE */
        --min-xs-fontsize: 1;
        --max-xs-fontsize: 1;
        --xs-lineheight: 1;

        /* S FONTSIZE */
        --min-s-fontsize: 1.125;
        --max-s-fontsize: 1.25;
        --s-lineheight: 1;

        /* FONTSIZES */
        --min-fontsize: 1;
        --max-fontsize: 1.125;
        --lineheight: 1.5;

        /* M FONTSIZE */
        --min-m-fontsize: 1.25;
        --max-m-fontsize: 1.5;
        --m-lineheight: 1;

        /* L FONTSIZE */
        --min-l-fontsize: 1.75;
        --max-l-fontsize: 2.25;
        --l-lineheight: 1;

        /* XL FONTSIZE */
        --min-xl-fontsize: 2.25;
        --max-xl-fontsize: 3.75;
        --xl-lineheight: 1;

        /* OTHER */
        --border-radius:	5px;

        /* BUTTON */
        --button-radius:    5px;
        --button-padding:   14px 20px;
    }


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


    @media (--max-fablet) {
        :root {
            --section:				64px;
            --padding: 				16px;
            --min-padding:   		-16px;
        }
    }
    @media (min-width: 56em) {
        :root {
            --section:				80px;
            --padding: 				24px;
            --min-padding:   		-24px;
        }
    }
    @media (--min-fablet) {
        :root {
            --section:				80px;
            --padding: 				24px;
            --min-padding:   		-24px;
        }
    }
    @media (min-width: 90em) {
        :root {
            --section:				96px;
            --min-padding:			-32px;
            --padding:				32px;
        }
    }
    @media (--min-desktop) {
        :root {
            --section:				96px;
            --min-padding:			-32px;
            --padding:				32px;
        }
    }
}
@layer addon {

    .button {
        font-weight: 400;
        text-transform: uppercase;
        display: inline-block;
        color: var(--color-light);
        display: inline-flex;
        font-size: calc(var(--xs-fontsize) - .1rem);
        padding: 7px 12px;
        .icon {
            color: var(--color4);
            transition: var(--transition);
            .themeColor3 & {
                color: var(--color-light);
            }
        }

        &.primary {
            background-color: var(--color-dark);

            &:hover {
                @media (hover: hover) {
                    background-color: var(--color4);
                    .icon {
                        color: var(--color-dark);
                    }
                }
            }
        }

        &.secondary {
            background-color: var(--color4);
            .icon {
                color: var(--color-dark);
            }

            &:hover {
                @media (hover: hover) {
                    background-color: var(--color-dark);
                    .icon {
                        color: var(--color4);
                    }
                }
            }
        }

        &.textLink {
            color: var(--color-dark);
            padding: 0;
        }
    }
}
@layer addon {

    .title {
        color: var(--color4);
    }
}
@layer addon {
    .templateCollection, .templateFilter {
        .block {
            .title {
                font-size: var(--m-fontsize);
            }
        }
        &.collectionPage {
            .block {
                justify-content: flex-end;
                .media {
                    height: 450px;
                    img {
                        height: 100%;
                    }
                    &:before {
                        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .8) 100%);
                        content: "";
                        height: 100%;
                        left: 0;
                        position: absolute;
                        top: 0;
                        width: 100%;
                    }
                }
                .inner {
                    width: 100%;
                    .footer {
                        justify-content: flex-end;
                    }
                }
                .media + .inner {
                    position: absolute;
                    .title {
                        color: var(--color-light);
                    }
                }
            }
        }
    }
    
}
@layer addon {

    header {
        position: relative;
        @media (min-width: 56em) {
            padding: 0;
            .headerContainer {
                display: flex;
                gap: var(--gutter);
                grid-column: full-start / full-end;
                .bottomHeader, .topHeader {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    width: 100%;
                }
                .topHeader {
                    padding: var(--gutter) var(--spacer) 0  var(--spacer);
                    .rightItems {
                        display: flex;
                        align-items: center;
                        gap: var(--gutter);
                    }
                }
                .bottomHeader {
                    background-color: var(--color4);
                    padding: calc(var(--gutter) / 2) var(--spacer);
                }
            }
        }
        @media (--min-fablet) {
            padding: 0;
            .headerContainer {
                display: flex;
                gap: var(--gutter);
                grid-column: full-start / full-end;
                .bottomHeader, .topHeader {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    width: 100%;
                }
                .topHeader {
                    padding: var(--gutter) var(--spacer) 0  var(--spacer);
                    .rightItems {
                        display: flex;
                        align-items: center;
                        gap: var(--gutter);
                    }
                }
                .bottomHeader {
                    background-color: var(--color4);
                    padding: calc(var(--gutter) / 2) var(--spacer);
                }
            }
        }
        .bottomHeader {
            display: flex;
        }
        .languageSwitcher {
            display: flex;
            align-items: center;
            gap: calc(var(--gutter) / 2);
            .languageOption {
                line-height: 1;
                font-size: var(--xs-fontsize);
                display: flex;
                align-items: center;
                gap: 4px;
                transition: var(--transition);
                .icon {
                    width: 20px;
                    height: 20px;
                    color: var(--color4);
                    transition: var(--transition);
                }
                &.active {
                    pointer-events: none;
                    cursor: default;
                    color: var(--color-dark);
                    text-decoration-color: var(--color-dark);
                    .icon {
                        display: none;
                    }
                }
            }
            .languageOption:not(.active) {
                padding: 6px 12px;
                border-radius: var(--border-radius);
                color: var(--color-light);
                background-color: var(--color-dark);
                text-decoration: none;
                &:hover {
                    @media (hover: hover) {
                        background-color: var(--color4);
                        .icon {
                            color: var(--color-dark)
                        }
                    }
                }
            }
            @media (max-width: 56em) {
                padding-top: var(--gutter);
                color: var(--color-light);
            }
            @media (--max-fablet) {
                padding-top: var(--gutter);
                color: var(--color-light);
            }
        }

        .nav {
            ul {
                li {
                    &.searchItem {
                        @media (min-width: 56em) {
                            display: none;
                        }
                        @media (--min-fablet) {
                            display: none;
                        }
                    }
                    > a, 
                    > button {
                        border-radius: var(--border-radius);
                        line-height: 1;
                        text-transform: uppercase;
                        font-size: var(--xs-fontsize);
                        color: var(--color-light);
                        @media (min-width: 56em) {
                            padding: 7px 10px;
                            .icon {
                                display: none;
                            }
                        }
                        @media (--min-fablet) {
                            padding: 7px 10px;
                            .icon {
                                display: none;
                            }
                        }
                        @media (max-width: 56em) {
                            align-items: center;
                        }
                        @media (--max-fablet) {
                            align-items: center;
                        }

                        &:hover {
                            @media (hover: hover) and (min-width: 56em) {
                                text-decoration: unset;
                                background-color: var(--color-dark);
                            }
                            @media (hover: hover) and (--min-fablet) {
                                text-decoration: unset;
                                background-color: var(--color-dark);
                            }
                        }
                    }

                    [aria-haspopup] {
                        &:after {
                            display: none;
                        }
                    }

                    &.open {
                        @media (min-width: 56em) {
                            a, button {
                                border-bottom: unset;
                                background-color: var(--color-dark);
                            }
                        }
                        @media (--min-fablet) {
                            a, button {
                                border-bottom: unset;
                                background-color: var(--color-dark);
                            }
                        }
                        > a, 
                        > button {
                            border-bottom-left-radius: 0;
                            border-bottom-right-radius: 0;
                        }
                    }
                }
                .subMenu {
                    @media (min-width: 56em) {
                        background-color: var(--color-dark);
                        padding: 5px 0;
                        top: 100%;
                        left: 0;
                        transform: translateX(0) translateY(-5px);
                        border-bottom-left-radius: var(--border-radius);
                        border-bottom-right-radius: var(--border-radius);
                    }
                    @media (--min-fablet) {
                        background-color: var(--color-dark);
                        padding: 5px 0;
                        top: 100%;
                        left: 0;
                        transform: translateX(0) translateY(-5px);
                        border-bottom-left-radius: var(--border-radius);
                        border-bottom-right-radius: var(--border-radius);
                    }

                    .open & {
                        @media (min-width: 56em) {
                            visibility: visible;
                            opacity: 1;
                            transform: translateX(0) translateY(0);
                            a, button {
                                background-color: unset;
                            }
                        }
                        @media (--min-fablet) {
                            visibility: visible;
                            opacity: 1;
                            transform: translateX(0) translateY(0);
                            a, button {
                                background-color: unset;
                            }
                        }
                        @media (max-width: 56em) {
                            right: calc(-1 * (var(--spacer)));
                        }
                        @media (--max-fablet) {
                            right: calc(-1 * (var(--spacer)));
                        }
                    }
                    @media (max-width: 56em) {
                        transition: right 0.4s ease-in-out;
                        transform: unset !important;
                        background-color: var(--color4);
                        padding: 0 var(--spacer);
                        width: 100vw;
                        right: -100%;
                        left: auto;
                        top: -2px;
                        .menuLevel2 {
                            gap: calc(var(--gutter) / 2);
                        }
                    }
                    @media (--max-fablet) {
                        transition: right 0.4s ease-in-out;
                        transform: unset !important;
                        background-color: var(--color4);
                        padding: 0 var(--spacer);
                        width: 100vw;
                        right: -100%;
                        left: auto;
                        top: -2px;
                        .menuLevel2 {
                            gap: calc(var(--gutter) / 2);
                        }
                    }
                    
                    &:before {
                        display: none;
                    }

                    ul {
                        li {
                            a, button {
                                display: block;
                                color: var(--color-light);
                                border-radius: 0;
                                @media (max-width: 56em) {
                                    padding: 5px 0;
                                }
                                @media (--max-fablet) {
                                    padding: 5px 0;
                                }
                                &:hover {
                                    @media (hover: hover) and (min-width: 56em) {
                                        background: var(--color4);
                                    }
                                    @media (hover: hover) and (--min-fablet) {
                                        background: var(--color4);
                                    }
                                }
                            }
                        }
                    }
                }
            }
            @media (max-width: 56em) {
                background-color: var(--color4);
                padding-top: calc(var(--section) + calc(var(--padding) * 2));
            }
            @media (--max-fablet) {
                background-color: var(--color4);
                padding-top: calc(var(--section) + calc(var(--padding) * 2));
            }
        }
        search {
            position: relative;
            @media (min-width: 56em) {
                input {
                    position: relative;
                    z-index: 999;
                    opacity: 0;
                    width: 50px;
                    transition: all 1s;
                    cursor: pointer;
                    &:focus {
                        width: 300px;
                        z-index: 9;
                        opacity: 1;
                        cursor: auto;
                    }
                }
            }
            @media (--min-fablet) {
                input {
                    position: relative;
                    z-index: 999;
                    opacity: 0;
                    width: 50px;
                    transition: all 1s;
                    cursor: pointer;
                    &:focus {
                        width: 300px;
                        z-index: 9;
                        opacity: 1;
                        cursor: auto;
                    }
                }
            }
            .symbol {
                position: absolute;
                top: 0;
                right: 0;
                padding: var(--form-input-size);
                line-height: 30px;
                font-size: 1.5rem;
                z-index: 9;
                text-decoration: none;
            }
        }
        .topHeader {
            .rightItems {
                @media (max-width: 56em) {
                    display: none;
                }
                @media (--max-fablet) {
                    display: none;
                }
            }
        }
    }
    
}
@layer addon {

    footer {
        background-color: var(--color4);
        border-top: 1px solid var(--color-light);
        .footerLeft {
            gap: var(--gutter);
            span {
                text-transform: uppercase;
            }
            hr {
                height: 20px;
                color: var(--color-light);
                border-style: solid;
            }
        }
        .footerRight {
            gap: calc(var(--gutter) * 2);
            .certificate {
                svg {
                    width: 45px;
                }
            }
            .social {
                gap: calc(var(--gutter) / 2);
            }
        }
    }
    
}
@layer addon {

    section:not(.templateContent, .templateCover) {
        .intro {
            @media (min-width: 56em) {
                width: 75%;
            }
            @media (--min-fablet) {
                width: 75%;
            }
        }
    }

}
html { 
    scroll-behavior: smooth;
}