/*  =================================================================
    0.0 :ROOT ~ overwrites or extras (if needed)
================================================================== */
    :root {
        --row-width: 1170px; /* max-width */
        --font-main: 'Nunito', sans-serif;
        --font-weight: 400;
    }

/*  =================================================================
    1.0 STANDARDS
================================================================== */
    html, body {		
		color: #282828;
	}
    section {
        padding: 26px 0;
    }
    section:last-of-type {
        padding-bottom: 36px;
    }

/*  1.1 Grid Rework
    -------------------------------------------------------------- */
    .gridFrame {
        grid-gap: 20px;
        padding: 0 4%;
        padding-right: calc(4% + 86px);
    }
	.gridFrame.noGap {
        grid-gap: 0;
    }

/*  1.2 Clearfix
    -------------------------------------------------------------- */
    .clear, .clearall, .clearfix {
        clear: both;
    }

/*  1.3 Colors
    -------------------------------------------------------------- */
    .bgGrey, .bgGrey:before, .bgGrey:after {
        background-color: #e4e4e6;
    }

/*  1.4 Panel stylings
    -------------------------------------------------------------- */
	.panel {
		display: block;
		margin: 0 auto;
		background-color: var(--color-grey_dd);
		border: 2px solid var(--color-grey_cc);
		padding: 14px;
		padding-bottom: 13px;
		font-size: 16px;
		line-height: 23px;
		margin-bottom: 20px;
	}
	.panel a {
		text-decoration: underline;
	}
	.panel.alert, 
    .panel.notice, 
    .panel.success {
		text-align: center;
	}
	

/*  =================================================================
    2.0 NAV
================================================================== */
    nav {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        z-index: 998;
        background-color: #fff;
        -webkit-transition: box-shadow .3s ease-out;
                transition: box-shadow .3s ease-out;
        /* -- CHANGE AFTER THIS FOR CUSTOM -- */
        padding: 0;
        overflow: hidden;
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    }
    nav .gridFrame {
        grid-gap: 0;
        padding-right: 0;
    }
    nav a {
        color: #54565b;
    }
    nav .bgGrey {
        position: relative;
        height: 100%;
    }
    nav .bgGrey:after {
        content: '';
        position: absolute;
        left: 100%;
        top: 0;
        height: 100%;
        width: 100vw;
    }


/*  2.2 Logo Link
    -------------------------------------------------------------- */
    .logo-link,
    .logo-link img {
        width: 100%;
        display: block;
        height: auto;
        float: left;
    }
    .logo-link {
        max-width: calc(100% - 86px);
        padding: 19px 0;
    }
    .logo-link img {
        width: auto;
        height: 48px;
    }
    .tel {
        position: relative;
        display: block;
        float: right;
        width: 100%;
        max-width: 86px;
        padding-bottom: 86px;
        overflow: hidden;
        background-color: #f1f1f2;
    }
    .tel i {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
        font-size: 22px;
        color: #54565b;
    }

/*  x.x mainNav (menu buttons)
    -------------------------------------------------------------- */
	nav ul {
		width: auto;
		padding: 5px 0;
		text-align: left;
        font-size: 0;
        line-height: 0;
        padding: 20px;
        position: absolute;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
	}
    nav ul li {
        display: inline-block;
        margin-right: 20px;
    }    
    nav ul li:last-of-type {
        margin-right: 0;
    }
    nav ul a {
        font-size: 18px;
        line-height: 22px;
        /* font-size: 20px;
        line-height: 30px;*/
        font-weight: 700;
        float: left;
    }
	

/*  =================================================================
    4.0 HEADER
================================================================== */


/*  =================================================================
    x.0 CONTENT
================================================================== */
    #siteContainer {
        padding-top: 86px;
    }

    hr {
        position: relative;
        display: block;
        height: 1px;
        border: 0;
        margin: 1em auto;
        padding: 0;
        background-color: #ccc;
        width: 100%;
        max-width: 50%;
    }

    .wired .grid-item {
        border: 1px solid #ccc;
        border-radius: 5px;
    }


/*  =================================================================
    x.0 FOOTER
================================================================== */
    aside {
        position: fixed;
        right: 0;
        top: 0;
        width: auto;
        height: 100vh;
        overflow: hidden;
        min-width: 86px;
        z-index: 99;
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    }
    aside .overlay {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 86px;
        height: 100%;
        padding-top: /*172px*/100px;
        background-color: #1d1d1b;
        overflow: hidden;
    }
    aside .overlay a {
        position: relative;
        float: left;
        width: 100%;
        padding-bottom: 100%;
        background-color: #454545;
        border-bottom: 1px solid #efefef;
        overflow: hidden;
    }
    aside .overlay a i {
        display: block;
        position: absolute;
        left: 50%;
        top: 35%;
        font-size: 24px;
        color: #efefef;
        -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
    }
    aside .overlay a label {
        display: block;
        position: absolute;
        left: 50%;
        top: 75%;
        font-size: 30px;
        color: #efefef;
        -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
        font-size: 14px;
        line-height: 16px;
        text-align: center;
    }


    .temp .row:not(.showed),
    .qForm:not(.showed), .qForm .aanvraag:not(.showed),
    .qForm:not(.showed), .qForm .retour:not(.showed),
    .hide {
        display: none;
    }

    .subGroup a {
        position: relative;
        display: block;
        width: 100%;
        padding-bottom: 100%;
    }
    .subGroup a i {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        font-size: 24px;
        color: #1d1d1b;
        -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
    }

    .qForm form {
        padding: 0 4%;
        padding-right: calc(86px + 4%);
    }
    .qForm form input,
    .qForm form textarea,
    .qForm form button {
        display: block;
        width: 100%;
        line-height: 24px;
        padding: 8px 10px;
        font-size: 15px;
        background-color: #e4e4e6;
        color: #54565b;
        margin-bottom: 10px;
    }
    .qForm form textarea {
        line-height: 16px;
        padding: 12px 10px;
        height: 120px;
    }
    .qForm form button {
        background-color: #d70073;
        max-width: 200px;
        color: #fff;
        font-weight: 500;
    }


/*  =================================================================
    x.0 FOOTER
================================================================== */
    footer {
        padding-top: 42px;  
        background-color: #373737;
        box-shadow: inset 0px 12px 0px 0px #ebebeb;
        color: #dcdcdc;
    }

/*  =================================================================
    HOVER STATES
================================================================== */
@media (any-hover: hover) { }


/*  =================================================================
    MEDIA QUERIES
================================================================== */
/* MOBILE */
@media only screen and (min-width: 572px) { }

@media only screen and (min-width: 572px) and (orientation: landscape) { }

/* IPADS portrait */
@media only screen and (min-width: 768px) and (min-height: 600px) { }

/* IPADS landscape AND mini laptops */
@media only screen and (min-width: 960px) {
    
    #siteContainer {
        min-height: 100vh;
        padding-bottom: 325px;
    }
    nav .gridFrame {
        padding: 0 4%;
    }
    
    .w33 {
		max-width: 33.33333%;
	}	
    .w67 {
		max-width: 66.66667%;
	}    
    
}

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

/* 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) { }