/*
 *
 * Theme Name:
 * Author:
 *
 * DO NOT CHANGE BELOW THIS LINE
 *---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/
    * {
        outline: none;
        border: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    *,
    *::before,
    *::after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

/*  1.5 Fontello fix
    -------------------------------------------------------------- */
    [class^="icon-"]::before,
    [class*=" icon-"]::before {
        margin-right: 0;
        margin-left: 0;
        width: auto;
        display: block;
        line-height: inherit;
        text-shadow: none;
    }

/*  1.6 vars
    -------------------------------------------------------------- */
    :root {
        --font-main: Arial, san-serif;
        --font-weight: 300;
        --row-width: 1280px;
        
        /* colors */
        --color-black: #000000;
        --color-white: #ffffff;
        --color-grey: #cccccc;		
        --color-grey-70: #707070;
        
        /* percentages*/
        --percentage-50: 50%;
        --percentage-minus50: -50%;
    }    

/*  1.7 Font base
    -------------------------------------------------------------- */
    body, h1, h2, h3, h4, h5, h6, p, ul, ol, label, .button, button, input, textarea, address {
		font-family: var(--font-main);
        font-weight: var(--font-weight);
        font-style: normal;
    }

/*  =================================================================
    3.0 Standards
================================================================== */
    html,
    body {
        color: var(--color-black);
        margin: 0;
        padding: 0;
        min-height: 100%;
    }

    html.noScroll,
    body.noScroll {
        overflow-y: hidden;
        height: 100%;
    }

	.large-only,
    .hidden,
	.hide-for-mobile,
	.scroll-only {
        display: none !important;
    }

    p,
    ul,
    ol,
    ul li,
    ol li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    figure {
        margin: 0;
        padding: 0;
    }

    h1,
    h1 span,
    h1 small,
    h2,
    h2 span,
    h2 small,
    h3,
    h3 span,
    h3 small,
    h4,
    h4 span,
    h4 small,
    h5,
    h5 span,
    h5 small,
    h6,
    h6 span,
    h6 small {
        display: block;
    }

    h1 small {
        margin-top: -10px;
    }

    .clear:after {
        clear: both;
    }

    .text-left,
    .text-small-left {
        text-align: left;
    }
    .text-xsmall-center,
    .text-small-center,
    .text-medium-center,
    .text-center,
    .text-large-left,
    .text-large-right {
        text-align: center;
    }
    .text-right {
        text-align: right;
    }
    .text-justify {
        text-align: justify;
    }

/*  3.0.1 Text wrap fix
    -------------------------------------------------------------- */
    .hdrIMG figcaption h2,
	.hdrIMG figcaption p,
    .producten figure h3 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    ul,
    ol {
        list-style: none;
    }

    button,
    select,
    select:focus,
    a,
    a:active,
    a:visited,
    a:focus {
        outline: none !important;
        outline: 0 !important;
        text-decoration: none;
    }

    .evContainer {
        display: none;
    }
    .evContainer.showed {
        display: block;
    }
    .panel {
        position: relative;
        width: 100%;
        float: left;
    }

/*  3.1 Rows 
    -------------------------------------------------------------- */
    .row {
        width: 100%;
        position: relative;
        max-width: var(--row-width);
        margin-right: auto;
        margin-left: auto;
    }
    .row.xl {
        max-width: none;
    }
    .row::before, .floated::before,
    .row::after, .floated::after {
        display: table;
        content: '';
    }
    .row::after, .floated::after {
        clear: both;
    }

    .row .row {
        margin-bottom: 0;
    }
    .row .row .padded {
        padding: 0;
    }
    .row.collapsed .row {
        margin-left: 0;
        margin-right: 0;
    }
    .row.padded {
        padding-left: 10px;
        padding-right: 10px;
    }

/*  3.2 Column setup
    -------------------------------------------------------------- */
    .col {
        position: relative;
        display: block;
        float: left;
        margin: 0;
        width: 100%;
        padding: 15px;
    }
    .row.collapsed .col {
        padding: 0;
    }
    .row.collapseHor .col {
        padding-left: 0;
        padding-right: 0;
    }
    .col.centered {
        float: none;
        margin: 0 auto;
    }/*
    .col.w25 {
        max-width: 25%;
    }
    .col.w50 {
        max-width: 50%;
    }
    .col.w75 {
        max-width: 75%;
    }*/

/*  3.3 Blocks
    -------------------------------------------------------------- */
    #siteContainer,
    nav,
    header,
    section,
    footer,
    iframe,
    hgroup,
    .block {
        position: relative;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
    }
    #siteContainer {
        min-height: 100%;
        overflow: hidden;
    }
	pre {
		margin: 20px;
		padding:20px;
		border:2px solid #000;
		background-color:#999;
		color:#fff;"
	}

/*  3.4 Figure Tags
    -------------------------------------------------------------- */
    figure {
        position: relative;
        overflow: hidden;
        width: 100%;
    }
    figure a {
        display: block;
    }
    img {
        width: 100%;
    }
    figure img {
        float: left;
    }

/*  3.6 Box
    -------------------------------------------------------------- */
    .pBox {
        position: absolute;
        width: 100%;
        padding: 0 30px;
        top: var(--percentage-50);
        left: var(--percentage-50);
        -webkit-transform: translate(var(--percentage-minus50), var(--percentage-minus50));
        transform: translate(var(--percentage-minus50), var(--percentage-minus50));
        z-index: 10;
    }

/*  3.7 Responsive Video Embed
    -------------------------------------------------------------- */
    .flex-frame {
        position: relative;
        height: 0;
        margin: 0;
        padding-bottom: 75%;
        overflow: hidden;
    }
    .flex-frame iframe,
    .flex-frame object,
    .flex-frame embed,
    .flex-frame video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .flex-frame.widescreen {
        padding-bottom: 56.25%;
    }
    .flex-frame.panorama {
        padding-bottom: 31.64062%;
    }

/*  3.12 form fixes
    -------------------------------------------------------------- */
    input,
    textarea,
    select,
    button {
        outline: none !important;
        resize: none;
        border-radius: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        box-shadow: none;
    }
    select {
        background: url('../img/triangle.png') center right no-repeat;
    }
    select::-ms-expand { 
        display: none;
    }
    @media screen and (min-width:0\0) {
        select {
            background:none\9;
            padding: 5px\9;
        } 
    }
	input[type="email"] {
		text-transform: lowercase !important;
	}

    input::-webkit-input-placeholder,
    select::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
        color: var(--color-grey-70);
        opacity: 1.0;
    }
    input::-moz-placeholder,
    select::-moz-placeholder,
    textarea::-moz-placeholder {
        color: var(--color-grey-70);
        opacity: 1.0;
    }
    input:-ms-input-placeholder,
    select:-ms-input-placeholder,
    textarea:-ms-input-placeholder {
        color: var(--color-grey-70);
        opacity: 1.0;
    }
    input:-moz-placeholder,
    select:-moz-placeholder,
    textarea:-moz-placeholder {
        color: var(--color-grey-70);
        opacity: 1.0;
    }

/*    3.13 Page Fader
    -------------------------------------------------------------- */
    .fade-in {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        z-index: 99999;
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
        animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
        pointer-events: none;
    }
    @-webkit-keyframes fadeIn {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }
    @keyframes fadeIn {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }


/*  =================================================================
    4.0 CSS GRID BUILD ~ NOT FOR PUSSIES or IE11
================================================================== */
/*  4.1 CSS GRID BUILD
 *
 * 4.1.1 GRID MAIN LAYER
    -------------------------------------------------------------- */
    .gridFrame {
        display: grid;
        grid-template-columns: repeat(2, minmax(100px, 1fr));
        grid-gap: 20px;
    }
    .gridFrame.xsmall_3 {
        grid-template-columns: repeat(3, minmax(10px, 1fr));
    }
	
    .grid-item {        
        position: relative;
        display: block;
    }	
	.grid-item.xs1-2,
	.grid-item._xs1-3 {
		grid-column: span 1;
	}
	.grid-item,
	.grid-item._xs2-3 {
		grid-column: span 2;
	}
	.gridFrame.xsmall_3 .grid-item.full,
	.grid-item._xs3-3 {
		grid-column: span 3;	
	}

/*  4.1.2 GRID SUB LAYER
    -------------------------------------------------------------- */
    .grid-item.nested {
        display: grid;
        grid-template-columns: repeat(2, minmax(100px, 1fr));
        grid-gap: 20px;
        margin-bottom: 0;
    }
    .grid-item.nested .grid-item {
        grid-column: span 2;
        position: relative;
        display: block;
    }


/*  =================================================================
    7.0 General
================================================================== */
/*  7.1 Sections
    -------------------------------------------------------------- */
    section {
        padding: 20px 15px;
    }

/*  7.2 Buttons
    -------------------------------------------------------------- */
    .button, button {
        display: inline-block;
        margin: 0;
        width: auto;
        cursor: pointer;
        font-weight: 400;
        padding: 5px 20px;
        text-align: center;
    }

/*  7.4 Spacers
    -------------------------------------------------------------- */
    .spacer_35 {
        height: 35px;
    }
    .spacer_50 {
        height: 50px;
    }
    .spacer_75{
        height: 75px;
    }
    .spacer_100 {
        height: 100px;
    }


/*  =================================================================
    HOVER STATES
================================================================== */
@media (any-hover: hover) {
    .scroll-only {
		display: block !important;
	}
	
	a, button {
        cursor: pointer;
        -webkit-transition: all 200ms ease-in;
                transition: all 200ms ease-in;
    }
    
}


/*  =================================================================
    MEDIA QUERIES
================================================================== */
/* MOBILE */
@media only screen and (min-width: 572px) {
	
	.grid-item._s1-2,
    .grid-item.nested .grid-item {
        grid-column: span 1;
    }	
    
}
@media only screen and (min-width: 572px) and (orientation: landscape) {
    
    /*.grid-item {
        grid-column: span 1;
    }*/
    .grid-item.full	{
        grid-column: span 2;
    }
}

/* IPADS portrait */
@media only screen and (min-width: 768px) and (min-height: 600px) {    
    
	.hide-for-mobile {
		display: block !important;
	}
	
    .gridFrame {
        grid-template-columns: repeat(4, minmax(100px, 1fr));
    }
    .grid-item.nested {
        grid-template-columns: repeat(2, minmax(100px, 1fr));
    }
    
    .grid-item._m1-4,
    .grid-item.nested .grid-item {
        grid-column: span 1;
    }
    .grid-item._m2-4,
    .grid-item {
        grid-column: span 2;
    }
    .grid-item._m3-4 {
        grid-column: span 3;
    }
    .grid-item._m4-4,
    .grid-item.full {
        grid-column: span 4;
    }
    
    .hdrIMG {
        height: 290px;
    }
    .hdrIMG figcaption {
        top: var(--percentage-50);
        -webkit-transform: translateY(var(--percentage-minus50));
        transform: translateY(var(--percentage-minus50));
        height: auto;
        padding: 20px;
    }
    
}

/* IPADS landscape AND mini laptops */
@media only screen and (min-width: 960px) {
	
    .large-only {
        display: block !important;
    }
    .hide-for-large {
        display: none !important;
    }
        
    .col.w25 {
        max-width: 25%;
    }
    .col.w33 {
        max-width: 33.33333%;
    }
    .col.w50 {
        max-width: 50%;
    }
    .col.w75 {
        max-width: 75%;
    }
	
    .gridFrame.medium_6,
    .gridFrame {
        grid-template-columns: repeat(6, minmax(100px, 1fr));
    }
    .grid-item.nested {
        grid-template-columns: repeat(4, minmax(100px, 1fr));
    }
    .grid-item.nested._m2 {
        grid-template-columns: repeat(2, minmax(80px, 1fr));
    }
	.gridFrame._mCenter .grid-item {
		align-self: center;
	}
    .medium_6 ._m1-6,
    .grid-item._m1-6,
    .grid-item.nested._m2 .grid-item {
        grid-column: span 1;
    }
    .grid-item,
    .grid-item.nested .grid-item {
        grid-column: span 2;
    }    
    .grid-item._m3-6 {
        grid-column: span 3;
    }       
    .grid-item._m4-6,
    .grid-item._m2-3,
	.grid-item._m1-2 {
        grid-column: span 4;
    }       
    .grid-item._m5-6 {
        grid-column: span 5;
    }       
    .grid-item._m6-6 {
        grid-column: span 6;
    }
    
}

/* SMALL SCREENS */
@media only screen and (min-width: 1280px) {
    
    .gridFrame.large_8,
    .gridFrame {
        grid-template-columns: repeat(8, minmax(100px, 1fr));
    }
    .grid-item.nested._nl4 {
        grid-template-columns: repeat(4, minmax(50px, 1fr));
    }
    .grid-item.nested._nl6 {
        grid-template-columns: repeat(6, minmax(50px, 1fr));
    }
    .grid-item.nested._nl8 {
        grid-template-columns: repeat(8, minmax(50px, 1fr));
    }
    .grid-item._m2-3 {
        grid-column: span 6;
    }
    .grid-item.nested .grid-item {
        grid-column: span 2;
    }
	
	.grid-item._l1-8 {
		grid-column: span 1;
	}
	.grid-item._l3-8 {
		grid-column: span 3;
	}
	.grid-item._l4-8 {
		grid-column: span 4;
	}
	.grid-item._l5-8 {
		grid-column: span 5;
	}
	.grid-item._l6-8 {
		grid-column: span 6;
	}
	.grid-item._l7-8 {
		grid-column: span 7;
	}
    .grid-item.full,
	.grid-item._l8-8 {
		grid-column: span 8;
	}
    
}

/* WEIRD HEADER TEXT BREAKPOINT ~ must be paddings or margins *//*
@media only screen and (min-width: 1340px) { }

/* SMALL SCREENS */
@media only screen and (min-width: 1440px) { }

@media only screen and (min-width: 1600px) {
    .gridFrame.xLarge_12 {
        grid-template-columns: repeat(12, minmax(50px, 1fr));
    }
    .xLarge_12 .grid-item.nested._nxl8 {
        grid-template-columns: repeat(8, minmax(30px, 1fr));
    }
    .xLarge_12 .grid-item._xl1-12 {
		grid-column: span 1;
	}
    .xLarge_12 .grid-item._xl2-12{
		grid-column: span 2;
	}
    .xLarge_12 .grid-item._xl3-12 {
		grid-column: span 3;
	}
    .xLarge_12 .grid-item._xl4-12,
    .xLarge_12 .grid-item.nested .grid-item._xl4-8  {
		grid-column: span 4;
	}
    .xLarge_12 .grid-item._xl5-12 {
		grid-column: span 5;
	}
    .xLarge_12 .grid-item._xl6-12 {
		grid-column: span 6;
	}
    .xLarge_12 .grid-item._xl7-12 {
		grid-column: span 7;
	}
    .xLarge_12 .grid-item._xl8-12 {
		grid-column: span 8;
	}
    .xLarge_12 .grid-item._xl9-12 {
		grid-column: span 9;
	}
    .xLarge_12 .grid-item._xl10-12 {
		grid-column: span 10;
	}
    .xLarge_12 .grid-item._xl11-12 {
		grid-column: span 11;
	}
    .xLarge_12 .grid-item.full,
    .xLarge_12 .grid-item._xl12-12 {
		grid-column: span 12;
	}
}