@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;400;500;600&display=swap');

:root {
    /* kleuren */
    --text: #000F21;
    --text2: #898C91;
    --blue: #269EEA;
    --blue2: #269EEA;
    --light-blue: #699AB9;
    --orange: #E94F34;
    --darkblue: #004E8C;
    --gray: #EAECEF;
    --light-gray: #F1F4F8;
    --dark-gray: #D6D8DB;
    --gray-text: #AEB2B8;
    --icon-stabu: #0D6664;
    --icon-fps: #70bf4a;
    --icon-raw: #FF5151;
    --icon-komo: #013765;
    --icon-nlsfb: #606060;
    --icon-c3a: #267326;
    /* afmetingen */
    --max-width: 1270px;
    /* fonts */
    --Lexend-deca: 'Lexend Deca', sans-serif; /* fonts */
}

* {
line-height: 26px;
font-size: 15px;
color: var(--darkblue);
}

body {
    padding: 0;
    margin: 0;
    font-family: var(--Lexend-deca);
    overflow-x: hidden;
}

#bg-top {
border:1px solid red;
width:100%;
position:relative;
}

#banner2 {
border: 0px solid blue;
width: 100%;
position: relative;
float: left;
min-height: 250px;
background-repeat: no-repeat !important;
background-position: center center !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
-webkit-filter: contrast(200%) grayscale(100%);
filter: contrast(200%) grayscale(100%);
}

#banner_fabrikant, #banner_page {
border: 0px solid blue;
width: 100%;
position: relative;
float: left;
min-height: 400px;
}

#banner_page {
min-height:300px;
}
    
#banner_fabrikant .bg-layer, #banner_page .bg-layer {
position: absolute;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: black;
background: linear-gradient(90deg, rgba(0,78,140,0.4446779395351891) 48%, rgba(0,212,255,0.12366953617384457) 100%);
}

#banner_fabrikant .fab-bg-image, #banner_page .default-bg-image {
position: absolute;
z-index: 9998;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat !important;
background-position: center center !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}

#banner_page .default-bg-image {
z-index: 9990;
background-image: url(https://zeeboer.nl/wp-content/uploads/Bouwimpex-Mea.jpg);
} 
   
#banner_fabrikant .branche-bg-image, #banner_page .branche-bg-image {
position: absolute;
z-index: 9997;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat !important;
background-position: center center !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
-webkit-filter: contrast(200%) grayscale(100%);
filter: contrast(200%) grayscale(100%);
}

#banner_fabrikant .fab-name {
border: 0px solid red;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 80px;
z-index: 9999;
background: var(--darkblue);
background: linear-gradient(90deg, rgba(0,78,140,0.8) 60%, rgba(0,212,255,0.22366953617384457) 100%);
}

@media screen and (max-width: 750px) {
#banner_fabrikant .fab-name {
height:auto;
text-align:center;
}
}

#banner_fabrikant .fab-name content {
position: relative;
margin: auto;
left: 0;
right: 0;
width: 100%;
max-width: var(--max-width);
display: table;
border: 0px solid red;
}

#banner_fabrikant .fab-name content h1 {
color: white;
margin-top: 25px;
}

@media screen and (max-width: 750px) {
#banner_fabrikant .fab-name content h1 {
color: white;
margin-top: 14px;
line-height: 29px;
font-size: 22px;
}
}
#banner-layer-left {
position: absolute;
top: 75px;
left: 0;
width: 50%;
height: 250px;
background: linear-gradient(90deg, rgba(101,152,184,1) 0%, rgba(0,212,255,0) 100%);
opacity: 0.6;
z-index: 9999;
}

#banner-layer-right {
position: absolute;
top: 75px;
right: 0;
width: 100%;
height: 250px;
background: #102B45;
opacity: 0.7;
z-index: 9998;
}

section {
width: 100%;
position: relative;
float: left;
border: 0px solid green;
background: var(--white);
}

section.content {
padding-bottom:60px;
padding-top:10px;

}

section.slogan {
text-align:center;
}

    section.slogan h3 {
        font-size: 30px;
        color: var(--darkblue);
        

    }

section content {
position: relative;
margin: auto;
left: 0;
right: 0;
width: 100%;
max-width: var(--max-width);
display: table;
border: 0px solid red;
}

section.top {
border: 0px solid red;
height: 75px;
text-align: center;
}

section.top a {
float: left;
}

@media screen and (max-width: 750px) {
section.top a {
float: unset;
}
}

section.top img {
width: 250px;
margin-top: 8px;
}

#search {
border: 0px solid green;
width: 100%;
position: relative;
}

#search .content {
border: 0px solid red;
width: 100%;
position: relative;
height: 62px;
margin: auto;
left: 0;
right: 0;
z-index: 999999;
background: white;
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
margin-top: 9px;
margin-bottom: 21px;
}

@media screen and (max-width: 750px) {
.top-menu {
display: none;
}
}

.top-menu {
border: 0px solid red;
float: left;
width: calc(100% - 250px);
}

.top-menu div {
float: right;
border: 0px solid green;
height: 25px;
padding: 20px;
padding-top: 25px;
padding-left: 30px;
padding-right: 30px;
cursor: pointer;
}

.top-menu div a {
text-decoration: none;
color: var(--darkblue)
}

    .top-menu div:hover {
        border-bottom: 5px solid var(--blue);
        ;
    }

/*search */
section.search {
background-color: var(--gray);
}

#search content {
border: 0px solid red;
position: relative;
}

#search .content .search-icon {
float: left;
border: 0px solid blue;
width: 60px;
height: 60px;
}

    #search .content .search-icon .fa-magnifying-glass {
        font-size: 27px;
        padding: 20px;
        color: var(--blue);
    }

#search .content .search-box {
float: left;
width: calc(80% - 60px);
}

#search .content .search-btn {
float: left;
width: 20%;
}

#searchInput {
height: 58px;
width: 100%;
border: none;
font-size: 30px;
}

#searchTemp {
background: var(--blue);
width: calc(100% - 6px);
height: 100%;
border: 0;
border-radius: 3px;
margin: 3px;
padding: 19px;
color: white;
cursor: pointer;
font-weight: 700;
}

@media screen and (max-width: 750px) {
    #searchTemp {
    display:none;
    }
}

    section.branches {
        background-color: var(--gray);
        padding-bottom: 10px;
    }

    .branche-item {
        background: white;
        color: var(--darkblue);
        border-radius: 3px;
        padding: 9px;
        padding-right: 9px;
        padding-left: 9px;
        margin: 2px;
        float: left;
        cursor: pointer;
        padding-left: 12px;
        padding-right: 12px;
        border: 1px solid var(--darkblue);
    }

    section.branches.fabrikant .branche-item {
        display: none;
        float: right;
        margin-top: 8px;
    }

    .branche-item:hover {
        background: var(--darkblue);
        color: white;
    }

    .branche-item.selected {
        background: var(--darkblue);
        color: white;
    }

    .branche-item:hover {
        box-shadow: 0 10px 16px 0 rgba(0,96,241,0.2),0 6px 20px 0 rgba(0,96,241,0.19) !important;
    }

    textarea:focus, input:focus {
        outline: none;
    }

    .result-list {
        border: 0px solid green;
        position: relative;
        margin: auto;
        left: 0;
        right: 0;
        width: 100%;
        max-width: var(--max-width);
        display: table;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .fab-result {
        display: none;
        border: 0px solid red;
        position: relative;
        float: left;
        width: calc((100% / 4) - 30px);
        margin-right: 15px;
        margin-bottom: 15px;
        cursor: pointer;
        box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
    }

        .fab-result:hover {
            background: var(--blue);
            box-shadow: 0 10px 16px 0 rgba(0,96,241,0.4),0 6px 20px 0 rgba(0,96,241,0.5) !important;
        }

        .fab-result .logo {
            border: 0px solid red;
            text-align: left;
            padding-top: 15px;
            padding-left: 20px;
        }

            .fab-result .logo img {
                width: 60%;
                mix-blend-mode: multiply;
            }

        .fab-result .icon, .fabhits, #filter {
            display: none;
        }

        .fab-result .description {
            padding: 23px;
            padding-top: 5px;
        }

            .fab-result .description h2 {
                margin: 0;
                height: 50px;
            }

            .fab-result .description h3 {
                margin: 0;
            }

            .fab-result .description hr {
                color: var(--gray-text);
            }

            .fab-result .description .intro {
                color: var(--gray-text);
                font-size: 13px;
                line-height: 18px !important;
                min-height: 170px;
            }

        .fab-result:hover .description span, .fab-result:hover .description hr, .fab-result:hover .description h2 {
            color: white;
        }

    h2.search-result, h2.search-result-title {
        margin-top: 30px;
        margin-bottom: 20px;
    }

    .fabrikant-content h1 {
        margin-top: 50px;
    }

    .fabrikant-content .intro {
        width: 65%;
        float: left;
        border: 1px solid var(--gray);
        position: relative;
        padding-top: 80px;
        padding-right: 80px;
        font-weight: bold;
        background: white;
        border-radius: 15px;
        margin-right: 1%;
    }

        .fabrikant-content .intro img {
            width: 30%;
        }

    .fabrikant-content .btn {
        width: 21%;
        float: left;
        border: 1px solid var(--gray);
        position: relative;
        padding-top: 80px;
        padding-right: 80px;
        font-weight: bold;
        background: var(--gray);
        border-radius: 15px;
    }


    .fabrikant-content .naw {
        width: 30%;
        float: right;
        border: 0px solid green;
        position: relative;
        padding-top: 80px;
        background: white;
        border-radius: 15px;
    }

    #page-main {
        border: 0px solid blue;
        width: 100%;
        position: relative;
        float: left;
        min-height: 400px;
    }

    .footer {
        border: 0px solid red;
        width: 100%;
        position: relative;
        float: left;
        background: var(--darkblue);
    }

        .footer content {
            border: 0px solid red;
            position: relative;
            margin: auto;
            left: 0;
            right: 0;
            display: table;
            width: 100%;
            max-width: var(--max-width);
        }

            .footer content div {
                position: relative;
                width: 50%;
                float: left;
                color: white;
                padding-top: 30px;
                padding-bottom: 30px;
            }
			
			.footer content div a {
				color: white;
			}

    @media screen and (max-width: 750px) {
        .footer content div {
            width: 100%;
            padding: 20px;
            text-align: center;
        }
    }

    .p-logos {
        border: 0px solid red;
        width: 100%;
        position: relative;
        float: left;
    }

        .p-logos content {
            border: 0px solid red;
            position: relative;
            margin: auto;
            left: 0;
            right: 0;
            display: table;
            width: 100%;
            max-width: var(--max-width);
        }

            .p-logos content div {
                width: calc(100% / 4);
                position: relative;
                float: left;
                text-align: center;
            }

    @media screen and (max-width: 750px) {
        .p-logos content div {
            width: 100%;
        }
    }

    .p-logos content div img {
        max-width: 130px;
        margin: 20px;
        cursor: pointer;
    }

    .fabrikant.grid {
        margin: 0;
        padding: 0;
        max-width: var(--max-width);
        min-height: 600px;
        display: grid;
        gap: 1.5vw;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "desc desc desc desc logo logo"
            "desc desc desc desc url url"
            "naw naw mockup mockup url url"
            "naw naw mockup mockup url url"
            "extra extra extra extra extra extra";
    }

    @media screen and (max-width: 1280px) {
        .fabrikant.grid {
            margin: 10px;
            grid-template-columns: repeat(4, 1fr);
            grid-template-areas:
                "desc   desc   logo   logo"
                "naw naw url url"
                "mockup mockup mockup mockup"
                "extra extra extra extra";
        }
    }

    @media screen and (max-width: 750px) {
        .fabrikant.grid {
            margin: 10px;
            grid-template-columns: repeat(2, 1fr);
            grid-template-areas:
                "logo logo"
                "desc desc"
                "naw naw"
                "url url"
                "extra extra"
                "mockup mockup"
                "mockup mockup";
        }
    }

    .fabrikant.grid .item {
        border: 0px solid #464545;
        border-radius: 5px;
        background: white;
        padding: 20px;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        color: var(--text2);
    }

        .fabrikant.grid .item h2 {
            color: #646A78;
        }

        .fabrikant.grid .item.description {
            grid-area: desc;
        }

            .fabrikant.grid .item.description .branche-list {
                text-align: left;
                margin-left: -47px;
            }



                .fabrikant.grid .item.description .branche-list li {
                    display: inline-block;
                    margin-left: 5px;
                    color: var(--darkblue);
                }



                    .fabrikant.grid .item.description .branche-list li::after {
                        content: " | ";
                    }

                    .fabrikant.grid .item.description .branche-list li:last-child::after {
                        content: "";
                    }

        .fabrikant.grid .item.logo {
            grid-area: logo;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .fabrikant.grid .item:nth-child(2) img {
            width: 80%;
            bottom: 0;
        }

        .fabrikant.grid .item.naw {
            grid-area: naw;
            background: var(--darkblue);
            color: white;
        }

            .fabrikant.grid .item.naw h2, .fabrikant.grid .item.naw span, .fabrikant.grid .item.naw a {
                color: white;
            }

        .fabrikant.grid .item.branches {
            grid-area: branches;
        }

            .fabrikant.grid .item.branches li {
                margin-left: -20px;
            }

        .fabrikant.grid .item.mockup {
            grid-area: mockup;
            min-height: 280px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            position: relative;
            padding: 0;
            background-image: url('https://files.utopis-platform.net/zeeboer-nl/image?file=files/public/images/bouwspex-mockups/getimage().contains(bouwspex_)&noimage=transparant');
        }

            .fabrikant.grid .item.mockup ul {
                position: absolute;
                left: -20px;
                right: 0;
                margin: auto;
                bottom: 15px;
                text-align: center;
                border: 0px solid red
            }

            .fabrikant.grid .item.mockup li {
                display: inline-block;
                color: white;
                padding: 3px;
                padding-left: 10px;
                padding-right: 10px;
                border-radius: 3px;
                box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            }

                .fabrikant.grid .item.mockup li.icon-stabu {
                    background: var(--icon-stabu);
                }

                .fabrikant.grid .item.mockup li.icon-raw {
                    background: var(--icon-raw);
                }

                .fabrikant.grid .item.mockup li.icon-fps {
                    background: var(--icon-fps);
                }

                .fabrikant.grid .item.mockup li.icon-komo {
                    background: var(--icon-komo);
                }

                .fabrikant.grid .item.mockup li.icon-c3a {
                    background: var(--icon-c3a);
                }

                .fabrikant.grid .item.mockup li.icon-nlsfb {
                    background: var(--icon-nlsfb);
                }

            .fabrikant.grid .item.mockup .fab-mockup {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 5px;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
                position: relative;
            }

        .fabrikant.grid .item.icons {
            grid-area: icons;
        }

            .fabrikant.grid .item.icons li {
                margin-left: -20px;
            }

        .fabrikant.grid .item.urls {
            grid-area: url;
        }

            .fabrikant.grid .item.urls #fpslist {
                display: none !important;
            }

            .fabrikant.grid .item.urls #komolist {
                display: none !important;
            }

            .fabrikant.grid .item.urls .button {
                background: white;
                border: 2px solid var(--darkblue);
                width: calc(100% - 26px);
                clear: left;
                color: var(--darkblue);
                border-radius: 30px;
                padding: 13px;
                margin: 2px;
                float: left;
                cursor: pointer;
                padding-left: 12px;
                padding-right: 12px;
                text-align: left;
                text-transform: uppercase;
                text-align: center;
            }

                .fabrikant.grid .item.urls .button:hover {
                    background: var(--darkblue);
                    color: white;
                }

        .fabrikant.grid .item.extra {
            grid-area: extra;
        }

    /* uitgelicht */
    .uitgelicht.grid {
        border: 0px solid red;
        margin: 0;
        padding: 0;
        max-width: var(--max-width);
        min-height: 300px;
        display: grid;
        gap: 1.5vw;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "desc desc desc desc image image "
            "desc desc desc desc logo logo ";
    }

    @media screen and (max-width: 1280px) {
        .uitgelicht.grid {
            margin: 10px;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: auto;
            grid-template-areas:
                "desc desc desc image"
                "desc desc desc logo";
        }
    }

    @media screen and (max-width: 750px) {
        .uitgelicht.grid {
            margin: 10px;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: auto;
            grid-template-areas:
                "image image"
                "desc desc"
                "logo logo";
        }
    }

    .uitgelicht.grid .item {
        border: 0px solid #464545;
        border-radius: 5px;
        background: white;
        padding: 20px;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

        .uitgelicht.grid .item.image {
            grid-area: image;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            min-height: 280px;
            background-image: url('https://files.utopis-platform.net/zeeboer-nl/image?file=files/public/images/bouwspex-mockups/getimage().contains(bouwspex_)&noimage=transparant');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
        }

            .uitgelicht.grid .item.image .fab-mockup {
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 5px;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
                cursor: pointer;
            }

        .uitgelicht.grid .item.description {
            grid-area: desc;
            color: var(--text2);
        }

            .uitgelicht.grid .item.description h2 {
                color: #646A78;
                font-size: 20px;
            }

            .uitgelicht.grid .item.description .btn {
                background: white;
                border: 2px solid var(--darkblue);
                clear: left;
                color: var(--darkblue);
                border-radius: 30px;
                padding: 13px;
                margin: 2px;
                float: left;
                cursor: pointer;
                padding-left: 12px;
                padding-right: 12px;
                text-align: center;
                text-decoration: none;
                text-transform: uppercase;
            }

                .uitgelicht.grid .item.description .btn:hover {
                    background: var(--darkblue);
                    color: white;
                }

        .uitgelicht.grid .item.logo {
            grid-area: logo;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .uitgelicht.grid .item.logo img {
                width: 100%;
                max-width: 250px;
            }

    /* rss */
    .rss.grid {
        margin: 0;
        padding: 0;
        display: grid;
        gap: 1.5vw;
        grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
        grid-template-rows: auto;
        justify-content: space-between;
    }

    @media screen and (max-width: 1280px) {
        .rss.grid {
            margin: 10px;
            grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        }
    }

    @media screen and (max-width: 750px) {
        .rss.grid {
            margin: 10px;
            grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        }
    }

    .rss.grid ul {
        width: 100%;
        padding: 0;
    }

    .rss.grid .item {
        border: 0px solid #464545;
        border-radius: 5px;
        background: white;
        padding: 20px;
        border: 0px solid red !important;
        position: relative;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        color: var(--text2);
    }

        .rss.grid .item h2 {
            color: #646A78;
            font-size: 20px;
        }

        .rss.grid .item a {
            color: var(--blue);
        }
    /* search */
    .search.grid {
        margin: 0;
        padding: 0;
        display: grid;
        gap: 1.5vw;
        grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
        grid-template-rows: auto;
        justify-content: space-between;
    }

    @media screen and (max-width: 1280px) {
        .search.grid {
            grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
        }
    }

    @media screen and (max-width: 750px) {
        .search.grid {
            margin: 10px;
            grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        }
    }

    .search.grid .item.search-result {
        border: 0px solid #464545;
        border-radius: 5px;
        background: white;
        padding: 20px;
        border: 0px solid red !important;
        position: relative;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

        .search.grid .item.search-result.hidden {
            display: none;
        }

        .search.grid .item.search-result .logo {
            text-align: center;
        }

            .search.grid .item.search-result .logo img {
                width: 80%;
            }

        .search.grid .item.search-result .description {
            padding-bottom: 60px;
        }

            .search.grid .item.search-result .description h2 {
                padding-left: 7px;
                padding-right: 7px;
                color: #646A78;
                height: 36px;
            }

            .search.grid .item.search-result .description .intro {
                padding: 7px;
                color: var(--text2);
            }

        .search.grid .item.search-result .icons {
            border: 1px solid red;
            display: none;
        }


        .search.grid .item.search-result .fab-page-btn a {
            position: absolute;
            bottom: 10px;
            width: calc(100% - 65px);
            background: white;
            border: 2px solid var(--darkblue);
            clear: left;
            color: var(--darkblue);
            border-radius: 30px;
            padding: 13px;
            margin: 2px;
            float: left;
            cursor: pointer;
            padding-left: 12px;
            padding-right: 12px;
            text-align: center;
            text-decoration: none;
            text-transform: uppercase;
        }

            .search.grid .item.search-result .fab-page-btn a:hover {
                background: var(--darkblue);
                color: white;
            }


    .partner.grid {
        margin: 0;
        padding: 0;
        display: grid;
        gap: 1.5vw;
        grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
        grid-template-rows: auto;
        justify-content: space-between;
    }

    @media screen and (max-width: 1280px) {
        .partner.grid {
            grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        }
    }

    @media screen and (max-width: 750px) {
        .partner.grid {
            margin: 10px;
            grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        }
    }

    .partner.grid .item {
        border: 0px solid #464545;
        border-radius: 5px;
        background: white;
        padding: 20px;
        border: 0px solid red !important;
        position: relative;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    .partner img {
        border: 0px solid red;
        filter: grayscale(100%);
    }

        .partner img:hover {
            border: 0px solid red;
            filter: grayscale(0%);
        }

    .product.grid {
        margin: 0;
        padding: 0;
        display: grid;
        gap: 1.5vw;
        grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
        grid-template-rows: auto;
        justify-content: space-between;
    }

    @media screen and (max-width: 1280px) {
        .product.grid {
            grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
        }
    }

    @media screen and (max-width: 750px) {
        .product.grid {
            margin: 10px;
            grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        }
    }

    .product.grid .item {
        border: 0px solid #464545;
        border-radius: 5px;
        background: white;
        padding: 20px;
        border: 2px solid var(--darkblue);
        position: relative;
        cursor: pointer;
    }

        .product.grid .item:hover {
            background: var(--darkblue);
            color: white;
        }

        .product.grid .item h2 {
            color: var(--darkblue);
            margin: 0;
            margin-bottom: 5px;
        }

        .product.grid .item:hover h2 {
            color: white;
        }

        .product.grid .item .image {
            position: relative;
            min-height: 120px;
            width: 100%;
            border: 0px solid red;
            border-radius: 5px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            margin-bottom: 10px;
        }

    section .filter {
        border: 0px solid red;
        border-radius: 5px;
    }

        section.filter div {
            background: white;
            color: var(--darkblue);
            border-radius: 3px;
            padding: 9px;
            padding-right: 9px;
            padding-left: 9px;
            padding-right: 9px;
            padding-left: 9px;
            margin: 2px;
            float: left;
            cursor: pointer;
            padding-left: 12px;
            padding-right: 12px;
            border: 1px solid var(--darkblue);
        }

            section.filter div:hover {
                background: var(--darkblue);
                color: white;
                box-shadow: 0 10px 16px 0 rgba(0,96,241,0.2),0 6px 20px 0 rgba(0,96,241,0.19) !important;
            }


            section.filter div.active {
                background: var(--darkblue);
                color: white;
            }


    .counters {
        border: 0px solid red;
        position: relative;
        top: 30px;
        float: left;
        width: 100%;
        border-radius: 5px;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        background-image: url("https://zeeboer.nl/wp-content/uploads/Grond-weg-en-waterbouw.jpg");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

        .counters .bg-layer {
            position: absolute;
            width: 100%;
            height: 100%;
            background: var(--darkblue);
            opacity: 0.8;
            border-radius: 5px;
        }




        .counters .item {
            position: relative;
            float: left;
            width: calc(50% - 60px);
            text-align: center;
            padding: 30px;
            padding-top: 70px;
            padding-bottom: 70px;
            border: 0px solid green;
        }

    @media screen and (max-width: 750px) {
        .counters .item {
            width: 87%;
        }
    }

    .counters .item.counter {
        width: calc(25% - 60px);
    }

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

        .counters .item.counter {
            width: 87%;
        }
    }




    #counters_1, #counters_2 {
        border-bottom: 3px solid white;
    }

        #counters_1 div, #counters_2 div {
            color: white;
            font-size: 50px;
            padding: 20px;
            padding-bottom: 30px;
        }

    .counters .item h2 {
        margin: 0;
        color: white;
        margin-top: 20px;
        font-size: 20px;
    }


    .counters .item h3 {
        margin: 0;
        color: white;
        margin-top: 20px;
        font-size: 30px;
        margin-bottom: 40px;
    }

    .counters .item .btn {
        border: 2px solid white;
        clear: left;
        color: white;
        border-radius: 30px;
        padding: 13px;
        padding-right: 13px;
        padding-left: 13px;
        margin: 2px;
        cursor: pointer;
        padding-left: 12px;
        padding-right: 12px;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
    }

        .counters .item .btn:hover {
            background: white;
            color: var(--darkblue);
        }



    #fpsData {
        display: none;
    }

    /*lightbox */
    #lightbox-bg {
        position: fixed;
        z-index: 99999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        opacity: 0.8;
        display: none;
    }

    #lightbox-close {
        position: fixed;
        z-index: 999999;
        top: 4%;
        left: 0;
        right: 0;
        margin: auto;
        width: 70%;
        height: 50px;
        text-align: right;
        display: none;
        color: var(--blue);
        font-weight: 600;
        font-size: 30px;
        cursor: pointer;
    }


    #lightbox-content {
        position: fixed;
        z-index: 999999;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 70%;
        height: 80%;
        background: white;
        display: none;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        border-radius: 5px;
        overflow-y: scroll;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

        #lightbox-content iframe {
            min-height: 750px
        }

		#lightbox-content .fps-row {
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            border-radius: 5px;
            padding: 20px;
            margin: 20px;
            color: white;
            background: var(--icon-fps);
        }

            #lightbox-content .fps-row .concept_name {
                font-weight: 600;
                margin-bottom: 15px;
				color: white;
            }

			#lightbox-content .fps-row .concept_version {
				color: white;
            }
			
			#lightbox-content .fps-row .concept_urls .concept_url .concept_url_link {
				color: white;
            }

            #lightbox-content .fps-row .concept_link {
                text-decoration: underline;
                margin-top: 10px;
                cursor: pointer;
				color: white;
            }

                #lightbox-content .fps-row .concept_link:hover {
                    text-decoration: none;
                }

            #lightbox-content .fps-row iframe {
                width: calc(100% - 40px);
                background: white;
                border-radius: 5px;
                padding: 20px;
                margin-top: 5px;
                display: none;
            }


    fps_content.details .concept_name {
        font-weight: 600;
        margin-bottom: 15px;
        display: none;
    }

    fps_content.details .concept_version {
        margin-bottom: 15px;
    }

    fps_content.details .concept_url {
        text-transform: uppercase;
    }

    fps_content.details .concept_content * {
    }


    .komo-row {
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        border-radius: 5px;
        padding: 20px;
        margin: 20px;
        color: white;
        background: var(--darkblue);
    }

		.komo-row .concept_name {
			color: white;
		}
		
		.komo-row .concept_link a {
			color: white;
		}

    .komo-btn {
        background: white;
        border: 2px solid var(--darkblue);
        clear: left;
        color: var(--darkblue);
        border-radius: 30px;
        padding: 13px;
        padding-right: 13px;
        padding-left: 13px;
        margin: 2px;
        float: left;
        cursor: pointer;
        padding-left: 12px;
        padding-right: 12px;
        text-align: left;
        text-transform: uppercase;
        text-align: center;
        text-decoration: none;
        margin-left: 20px;
    }

        .komo-btn:hover {
            background: var(--darkblue);
            color: white;
        }