/*-- COLORS --*/
/*-- header --*/
.stick{
    position:fixed;
    width:100%;
    z-index:9999;
}
.bg_black{
    background-color:#000;}
.bg_transp{
    background-color:rgba(0,0,0,0.5);}
.bg_transp:hover{
    background-color:rgba(0,0,0,0.8);}
.bg_orange{
    background-color:#fa0;}
/*-- main --*/
.bg_light_gray{
    background-color:#ddd;}
/*-- footer --*/
.bg_dark_gray{
    background-color:#777;}

/*-- LAYOUT --*/
header{
    min-height:120px;
    border-bottom:1px solid #aaa;}
header #top{
    margin:auto 5px;}
    header .blok_logo{
        flex:2 0 auto;
        min-height:0px;
/*        background-color:rgba(240,240,240,0.2);*/}
        header .blok_logo .logo{
            max-height:120px;
            margin:20px 20px 0 20px;}
        header .blok_logo .nologo{
            min-height:40px;}
        header .blok_logo h1 a{
/*            font-size:1.8em;*/
            text-decoration: none;
            text-transform: uppercase;
            color:#fff;
            display:block;
            margin: 20px 10px;}
        header .blok_logo .slogan{
            color: #fff;
            font-size:0.9em;
            font-weight:400;
            font-style: italic;
/*            text-transform: uppercase;*/
            margin:0 20px 20px;}
    header .blok_assets{
        flex:1 0 auto;
        min-width:150px;
        position:relative;
/*        background-color:rgba(240,240,240,0.3);*/}
        header .blok_assets .talen{
            position:absolute;
            right:10px;
            top:10px;}
            header .blok_assets .talen li{
                display:inline-block;}
                header .blok_assets .talen li a{
                    display:block;
                    width:25px;
                    height:25px;
                    background-color:#fff;
                    border-radius:20%;
                    text-align:center;
                    line-height:23px;
                    font-family: 'Ubuntu Condensed', sans-serif;
                    font-size:0.8em;
                    text-decoration:none;
                    color:orange;
                    border:1px solid #fff;}
                header .blok_assets .talen li a.active{
                    background-color: darkorange;
                    color:white;
                    border:1px solid #fff;}
                header .blok_assets .talen li a:hover{
                    border:1px solid darkorange;}
        header .blok_assets .socials{
            position:absolute;
            right:10px;
            bottom:-40px;}
            header .blok_assets .socials li{
                display:inline-block;}
                header .blok_assets .socials li a{
                    display:block;}
                    header .blok_assets .socials li a .fa{
                        font-size:1.8em;
                        color:white;}
@media (min-width : 600px) {
    header #top{
        margin:auto 35px;}
    header .blok_assets .socials{
        bottom:20px;}
}
        header .navigatie{
/*            background-color:rgba(240,240,240,0.4);*/}
            header .navigatie .barbutton{
                display:block;
                text-align: left;
                padding:15px 0;}
                header .navigatie .barbutton .fa{
                    font-size:1.7em;
                    color:#fff;
                    margin-left:10px;
                    cursor:pointer;}
            header .navigatie .menubar{
                display:none;
/*                background-color:rgba(0,0,0,0.2);*/
                padding-bottom:10px;}
                header .navigatie .menubar li{
                    display:block;}
                    header .navigatie .menubar li a{
                        display:block;
                        position:relative;
                        padding:8px 10px;       
                        font-family: 'Ubuntu Condensed', sans-serif;
                        font-size:1.0em;
                        font-weight: 500;
                        color:#ccc;
                        text-decoration:none;
                        text-transform:uppercase;}
                    header .navigatie .menubar li a.active{
                        color:#fff;
                        font-weight:700;}
                    header .navigatie .menubar li a:hover{
                        color:#aaa;}

/*-- BEGIN MEDIAQUERY NAV --*/
@media (min-width : 600px) {
    header .navigatie .barbutton{
        display:none;}
    header .navigatie .menubar{
        display:block !important;
        text-align: left;
        padding-bottom:0;}
        header .navigatie .menubar li{
            display:inline-block;
            padding:15px 0;
            text-align: center;}
            header .navigatie .menubar li a{
                padding:0 10px;
                font-size:1.2em;}
                header .navigatie .menubar li a:hover{
                    background:none;}
}
/*-- EINDE MEDIAQUERY NAV --*/

section{
/*    min-height:150px;*/}
section .clear_150{
    height:150px;}
section .home{
    flex-direction: column-reverse;}
section .home .clear_150{
    height:50px;}
aside.nieuws{
    clear:both;}
@media (min-width : 800px) {
    section .home{
        flex-direction: row;}
    section .home .clear_150{
        height:150px;}
}
    section .slider{
/*
        max-width:1200px;
        max-height:400px;
*/
    }
        section .slider li{
/*            height:400px;*/
            background-position:center;
            background-repeat:no-repeat;
            background-size:cover;}
            section .slider li h1{
                position:absolute;
                left:5%;
                bottom:5%;
                margin-right:25px;
                line-height:1.6;
                color:#fff;}
                section .slider li h1 span{
                    background-color:rgba(255,255,255,0.5);
                    padding:0 8px;}
    section blockquote{
        max-width:900px;
        margin:auto;
        padding:50px 0;
        text-align:center;
        display:relative;
		color:#709cbc;}
        section blockquote h1:before,
        section blockquote h1:after{
            font-family:"fontAwesome";
            color:#709cbc;
            margin:0 10px;
            display:inline-block;
            vertical-align: super;
            font-size:70%;}
        section blockquote h1:before{
            content:"\f10d";}
        section blockquote h1:after{
            content:"\f10e";}
    section .intro{
        background-color:rgba(0,0,0,0.02);
        flex:1 0 50%;
/*        min-width:300px;*/
        padding-right:20px;
        text-align: justify;}
    section .nieuws,
    section .galerie{
        background-color:rgba(0,0,0,0.04);
        flex:1 0 50%;
        min-width:300px;}
    section .product_menu{
        flex:1 0 25%;
        min-width:200px;}
        section .nieuws figure{
            width:100%;
            height:100vh;
            margin:0;
            border:0px solid #aaa;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;}
        section .galerie figure{
            width:100%;
            height:250px;
            margin:10px 0;
            border:1px solid #aaa;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;}
        section .product_menu figure{
            width:calc(100% - 40px);
            margin:10px auto;
            border:1px solid #aaa;}
            section .product_menu figure img{
                object-fit:contain;
                display:block;
                width:100%;}
.gallery_pic{
    text-decoration:none;}

/*
@media (min-width : 600px) {
    section .product_menu figure{
        width:calc(50% - 44px);
        display: inline-block;
        max-height:220px;
        overflow: hidden;
        margin:20px;}
    section .product_menu figure img{
        width: 100%;
        object-fit:none;
        object-position: center;}
}
@media (min-width : 1000px) {
    section .product_menu figure{
        width:calc(100% - 40px);
        display:block;}
    section .product_menu figure img{
        object-fit:contain;
        display:block;
        width:100%;}
}
*/

    section .product_menu{
        background-color:rgba(0,0,0,0.04);
        flex:1 0 25%;
        min-width:200px;}
        section .product_menu ul{
            margin:20px;
            border-top:1px solid #aaa;}
            section .product_menu ul li{
                display:block;
                border-bottom:1px solid #aaa;}
                section .product_menu ul li a{
                    display:block;
                    padding:10px 5px;
                    font-size: 0.9em;
                    font-weight:700;
                    color:#333;
                    text-decoration:none;
                    font-family: 'Ubuntu Condensed',sans-serif;
                    text-transform: uppercase;}
                section .product_menu ul li a:hover{
                    background-color:#eee;}
                section .product_menu ul li a.active{
                    background-color:#eee;
                    position:relative;}
                section .product_menu ul li a.active:after{
                    font-family: "fontAwesome";
                    content:"\f0da";
                    font-size:1.2em;
                    color:#333;
                    position:absolute;
                    right:3px;}
    section .product_overview,
    section .product_detail{
        background-color:rgba(0,0,0,0.0);
        flex:2 0 75%;}
    section .works_overview{
        flex:1 0 100%;
        max-width:1400px;
        margin:0 auto;}
        section .product_overview .products,
        section .works_overview .works{
            margin:20px -10px;
            justify-content: flex-start;
            align-content: flex-start;}
/*
@media (min-width : 800px) {
    section .product_overview .products{
        margin:40px;}
}
*/
            section .product_overview .products .product,
            section .works_overview .works .work{
                flex:1 0 12%;
                padding:0px;
                margin:0 10px 20px 10px;
                min-width:150px;
                max-width:250px;
}


/*
@media (min-width : 800px) {
    section .works_overview .works .work{
       min-width:170px;
    }
}
*/



.column {
    float: left;}
.grids[data-columns]::before {
    content: '1 .column.size-1of1';
}
@media (min-width : 450px) {
    .grids[data-columns]::before {
        content: '2 .column.size-1of2';
    }
}
@media (min-width : 800px) {
    .grids[data-columns]::before {
        content: '3 .column.size-1of3';
    }
}
@media (min-width : 1000px) {
    .grids[data-columns]::before {
        content: '4 .column.size-1of4';
    }
}
@media (min-width : 1200px) {
    .grids[data-columns]::before {
        content: '5 .column.size-1of5';
    }
}
.column.size-1of1{
    width: 100%;}
.column.size-1of2{
    width: 50%;}
.size-1of3{
    width: 33.333%;}
.size-1of4{
    width: 25%;}
.size-1of5{
    width: 20%;}

/*
.grid-sizer,
.grid_item { width: 100%; }
@media (min-width : 450px) {
    .grid-sizer,
    .grid_item { width: 50%; }
}
@media (min-width : 800px) {
    .grid-sizer,
    .grid_item { width: 33.333%; }
}
@media (min-width : 1000px) {
    .grid-sizer,
    .grid_item { width: 25%; }
}
@media (min-width : 1200px) {
    .grid-sizer,
    .grid_item { width: 20%; }
}
*/

.grids .grid_item a,
.grids .grid_item a img{
    display:block;
}
.grids .grid_item a img{
/*    width:100%;*/
}
.grids .grid_item a{
    padding:0 20px 20px 0;
}
                section .product_menu figure,
                section .product_overview .products .product a,
                section .works_overview .works .work a,
                section .product_overview .products .product figure{
                    position:relative;
                    cursor:pointer;
                    border:10px solid #fff;}
@media (min-width : 800px) {
    section .works_overview .works .work a{
        border:15px solid #fff;}
}
                section .product_overview .products .product a,
                section .works_overview .works .work a,
                section .product_overview .products .product a img,
                section .works_overview .works .work a img{
                    display:block;}
                section .product_menu figure:hover:after,
                section .product_overview .products .product figure:hover:after,
                section .works_overview .works .work a:hover:after{
                    position:absolute;
                    font-family: "fontAwesome";
                    content:"\f00e";
                    font-size:1em;
                    color:#ddd;
                    mix-blend-mode: difference;
/*                    mix-blend-mode: overlay;*/
                    bottom:10px;
                    right:10px;}
                section .product_overview .products .product .product_more{
                    display:block;
                    background-color:#efefef;
                    border:1px solid #bbb;
                    border-radius:5px;
                    padding:5px 0;
                    margin:10px 0;
                    font-family:'Ubuntu Condensed',sans-serif;
                    text-decoration:none;
                    text-align:center;
                    color:#333;}

        section .product_detail article,
        section .product_detail figure{
            flex:1 0 calc(50% - 80px);
            vertical-align: top;
            min-width:300px;}
        section .product_detail figure{
            padding:70px 0 30px 0;}
            section .product_detail figure a{
                max-width: calc(50% - 24px);
                margin:10px;
                display:inline-block;
                border:1px solid #ddd;}
            section .product_detail figure a:first-of-type{
                width:100%;
                max-width: calc(100% - 24px);}

section .container .formulier,
section .container .map{
    flex:1 0 calc(50% - 80px);
    vertical-align: top;
    min-width:380px;
}
#contactmap{
    width:100%;
    height: 400px;
    margin-top:88px;
}

#contact_form{
    margin:0;
    padding:0;
    min-width: 300px;}
#contact_form fieldset{
    padding:0;
    display:inline-block;
    border:none;
    margin:0 -2px 15px 0;
    box-sizing:border-box;
    vertical-align: top;
text-align: left;}
#contact_form fieldset.field_50{
    width:50%;}
#contact_form fieldset.field_80{
    width:70%;}
#contact_form fieldset.field_20{
    width:30%;}
#contact_form fieldset.field_100{
    width:100%;}
#contact_form .form_error{
    margin:0;
    padding:0 0 0 5px;
    font-size:0.85em;
    font-weight:500;
    color: crimson;
    line-height:1.3em;
    display:none;}
#contact_form fieldset input[type=text],
#contact_form fieldset textarea{
    color: #fff;
    padding:5px;
    margin:0;
    font-size:0.85em;
    font-weight:400;
    box-sizing:border-box;
/*    border-radius:3px;*/
    border:0px solid #ddd;
    border-bottom:1px solid #ddd;
    background-color: transparent;}
#contact_form fieldset input[type=text]{
    width:calc(100% - 10px);
    height:35px;}
#contact_form fieldset textarea{
    width:calc(100% - 8px);
    min-height:100px;
    resize:vertical;}
textarea:focus, input:focus{
    outline:none;}
#contact_form .submit_row{
    text-align: right;
    min-height:170px;}
#contact_form .g-recaptcha{
    display:inline-block;
    float:left;
}
#contact_form fieldset input[type=submit]{
    padding:7px 10px;
    margin:0 7px 0 0;
    font-size:0.85em;
    font-weight:400;
    box-sizing:border-box;
    border-radius:3px;
    border:1px solid #ddd; 
    background-color: #ddd;}
.required{
	height:0px !important;
    padding:0;
    margin:0 !important;
	overflow:hidden;}
::-webkit-input-placeholder{
   font-style: italic;}
:-moz-placeholder{
   font-style: italic;}
::-moz-placeholder{
   font-style: italic;}
:-ms-input-placeholder{  
   font-style: italic;}

#contact_form.gelukt{}
#contact_form.gelukt fieldset{
    margin:0 -2px 0 0;}
#contact_form.gelukt p i{
    display:block;
    color:#aaa !important;}

.contact_pic{
    background-size: cover;
}


    section .blok_1,
    section .blok_2,
    section .blok_3{
        flex:1 0 33.33%;
        min-width:300px;}
    section .blok_1{
        background-color:rgba(0,0,0,0.06);}
    section .blok_2{
        background-color:rgba(0,0,0,0.08);}
    section .blok_3{
        background-color:rgba(0,0,0,0.1);}


footer{}
    footer .blok_adres{
        flex:1 0 80%;
        padding:40px;}
    footer .blok_logo{
        flex:1 0 20%;
        text-align: right;}
        footer .blok_logo .logo{
            max-width:100px;
            margin:10px 40px;}

.flex_container{
    display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;}
.flex_item{
    -webkit-flex: 1 auto;
    flex: 1 auto;
    vertical-align: top;}
.container{
    width:100%;
    max-width:1400px;
    margin:auto;}

/*-- MISCELLANEOUS --*/
article{
    margin:30px 10px;}
@media (min-width : 600px) {
    article{
        margin:40px;}
}
.nomargin{
    margin:0px;}
.clear_10{
    display:block;
    clear:both;
    height:10px}
.clear_20{
    display:block;
    clear:both;
    height:20px}
.clear_30{
    display:block;
    clear:both;
    height:30px}

/*-- TYPO --*/
h1,h2,h3,h4,h5,h6{
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    color:#fff;}
p{
    font-family: 'Ubuntu', sans-serif;
    color:#fff;}
h1{
    font-size: 7.1vw;
    text-align: center;
}
@media (min-width : 600px) {
    h1{
        font-size:1.8em;
        text-align: left;}
}
article h1{
    font-size:1.7em;}
article h2{
    font-size:1.5em;}
article h3{
    font-size:1.3em;}
.gallery_pic h3{
    font-size:0.9em;
    padding:10px 0;
}
h4.gelukt{
    color:greenyellow !important;}
h4.mislukt{
    color:crimson !important;}
article p,
.product p{
    font-size:0.85em;
    font-weight:300;
    margin:5px 0 10px 0;
    line-height:2;}
article.adres p{
    margin:10px 0;
    line-height:normal;}
article p a{
    color:#fff;}
h1 .fromtill,
h3 .fromtill{
    font-family: 'Ubuntu Condensed', sans-serif;
    color:#ccc;
/*    color:greenyellow;*/
    font-weight:bold;}
article p.intro_text{
    font-size:0.95em;
    font-weight:300;
    margin:5px 0 10px 0;
    line-height:2;}
section .product_menu h2{
    margin:20px;
    font-size:1.6em;}
section blockquote h1{
    font-family:'georgia';
    font-weight:normal;
    color:#709cbc;
    font-size:2em;
    line-height:1.8;}
footer{
    font-family: 'Ubuntu Condensed', sans-serif;
    font-size:0.85em;
    font-weight:300;}
footer .blok_adres p{
    color:#fff;}