@charset "utf-8";

/* ----------------- BASIC & RESET ----------------- */

* {

	font-size: 14px;

	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box; 
    line-height: 150%;
}

body {
	margin: 0;
	padding: 0;
	background-color: white;
}

/* ----------------- TABLES ----------------- */

.tablewrap {
    width: -webkit-fill-available;
    overflow-x: auto;
    max-width: 100vw;
}

/* ----------------- ALGEMEEN ----------------- */
a[target="_blank"],a[target="extern"] {
    background-image: url(/images/external_link_icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    padding-right: 1.5em;
    background-position: right;
    
}
.hidden {
	display: none;
}


.body_bg, .page_bg {
	background-size: cover;
}

.shadow {
	box-shadow:         2px 2px 12px 0px rgba(50, 50, 50, 0.75);		
}

i,b,u,a, em, table, thead, tbody, tr, td, th {
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}

td {
    min-width: 100px;
    vertical-align: top; 
}
td p {
    margin-top: 0;
    margin-bottom: 5px;
}

.white {
    background: white;
}
.honey {
    display: none;
}


a {
    text-decoration: none;
	color: #c12b73;
}

a:hover {
    text-decoration: underline;
}

code {
    font-family: monospace;
    font-size: smaller;
    margin: 0 10px;
    display: inline-block;
}

.datum {
        width: max-content;
}


/* ---------- EDITOR ---------- */

    #inlineditor {
		display: none;
	}


/* ---------- LINKS ---------- */

.pdflink {
	background-image: url(/libs/images/icons/mimetypes/application/pdf.svg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-left: 30px;
	padding-top: 10px;
	padding-bottom: 5px;
}
.emaillink {
	background-image: url(/libs/images/icons/mail.svg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-left: 30px;
	padding-top: 5px;
	padding-bottom: 0px;
}
.externallink {
	background-image: url(/libs/images/icons/external_link.svg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-left: 30px;
}









/* ----------------- HEADER & NAV ----------------- */



    @-webkit-keyframes rotate {
      from {-webkit-transform:rotate(  0deg);}
      to   {-webkit-transform:rotate(360deg);}
    }

    @-moz-keyframes rotate {
      from { -moz-transform:rotate(  0deg);}
      to   { -moz-transform:rotate(360deg);}
    }



.widget.header {
    text-align: center;
    width: 100%;
}
	
/* ----------------- WIDGETS ----------------- */

.homewidget {
	clear: both;
}



.widgets {
	display: block;
	background-color: white;
	float: none;
	width: 100%;
    z-index: 1000;


}
.widget {
	display: inline-block;
	border: 0px solid gray;
	border-radius: 10px;
	float: none;
}

.widget.links {
	clear: both;
}

/* ----------------- TIDBITS & COLORS ----------------- */

tt {
	font-family: 'Courier New', Courier, monospace;
	font-size: 16px;
	color: gray;
}
.link .white a {
 
	height: 50px;
	display: block;
	padding-top: 40%;

}


.marker {
	background-color: cyan;
}


p {
    font-size: 16px;
    line-height: 150%;
    color: inherit;
}

blockquote p {
	font-family: 'Cardo', serif;
	font-size: 24px;
	font-style: italic;
	line-height: 150%;
	border: 1px dashed gray;
	padding: 20px;
}

article a {
	text-decoration: none;
	font-weight: bold;

}
article a:hover {
	text-decoration: underline;
}

#header p.mijnurl {
    display: none;
}

/* ----------------- PAGE ELEMENTS ----------------- */

div.pagina {


	margin: 0;
	width: 100%;
	border-radius: 0;
	min-height: 90%;
	height: auto;
	padding-bottom: 50px;
    background-color: white;
    overflow: visible;
    display: grid;
/*    grid-template-rows: 150px 75px auto auto 100px;*/
    box-shadow: none;
}



div.center {

	background-color: transparent;
	min-height: 100%;
	display: block;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	width:100%;


}


/* ----------------- ARTICLES ----------------- */



article {
	clear: left;
	margin: 0px;
	float: none;
	position: relative;
	z-index: 10;
	width: 100%;
	padding: 0 2%;
    overflow-x: hidden;
}

article .content {
	width: 100%;
	margin: 0 auto;
	float:none;
    max-width: 1000px;
}

/* ----------------- KOPPEN EN FONTSIZES ----------------- */


    h1, h2, h3, h4 {
        font-family: 'Bebas';
        font-weight: 500;

        clear: both;
    }

    h1 {
        font-size: 36px;
        font-size: clamp(2rem,7vw, 3rem);
        color: #006900;
    }

    h1 a, h2 a, h3 a {
        font-weight: inherit;
    }
    h1 a:hover {
        text-decoration: none;
        color: #9ac176;
    }

    h2 {
        clear: both;
        padding-top: 2rem;
        border-bottom: 1px solid #006900;
        font-size: clamp(1.5rem,3vw, 2rem);
        color: #006900;
    }
    
    h2 a:hover {
        text-decoration: none;
        color: #9ac176;
    }


    h2.article_title {
            cursor: pointer;
    }
    h2.article_title:hover {
        text-decoration: underline;
    }

    h3 {
        clear: both;
        padding-top: 2rem;
        font-style: italic; 
        border-bottom: 1px solid lightgray;        
    }

    article, article p, article h3, article span, article div, p, article ul, article li {
        font-size: clamp(1rem, 2vw, 1.5rem);
        font-size: clamp(18px, 2vw, 20px);
    }

    article .evenementen ,  article .evenementen  div , article .evenementen p {

        font-size: clamp(14px, 2vw, 18px);

    }

/* ----------------- IMAGES IN ARTICLES ----------------- */

    article .content img {
	    max-width: 100%;
	    height: auto;
	    margin: 0 auto;
        display: block;
    }

    article .content img.right {
        float: right;
        clear: right;
        margin-left: 1em;
    }
    article .content img.left {
        float: left;
        clear: left;
        margin-right: 1em;
    }
    article .content img.right, article .content img.left {
        width: 45%;
    }
    img.west
    {
        width: 100%;
        max-width: 100%;
    }   


@media (max-width: 799px) {
    article .content img.right, article .content img.left {
        clear: both;
		width: 100%;
        margin: 1em 0 ;
		


	}
}


/* ----------------- TABELLEN ----------------- */

    div.tabel {
        display: grid;

        justify-items: stretch;
        width: 100%;
        grid-gap: 10px 15px;
    }
    div.tabel *, div.tabel h1, div.tabel h2, div.tabel h3  {
        margin: 0;
        padding: 0;
    }
    div.tabel.col2 {
        grid-template-columns: auto auto;
    }
    div.tabel.col3 {
        grid-template-columns: auto auto auto;
    }
    div.tabel.col4 {
        grid-template-columns: auto auto auto auto;
    }
    div.tabel .colhead {
        border-bottom: 2px solid #006900;
        font-weight: bold;
        text-transform: uppercase;
        width: 100%;
        color: #006900;
        cursor: pointer;
    }

/* ----------------- SPECIALS ----------------- */

@media (min-width: 800px) {

	.right.logo, .article_152 img.right {
		max-width: 180px;
	}

}

@media (max-width: 799px) {

	.right.logo, .article_152 img.right {
		max-width: 100%;
		float: none;
		margin: 10px auto;
		padding: 1em 25%;
	}

}

div.omschrijving {
    padding: 15px 0 35px 0;
    display: block;
}
div.omschrijving p {
    padding: 10px 0;
}

.etalage .logo {
    max-width: 200px;
}




/* ----------------- FOOTER ----------------- */


#footer {

	/* margin-top: 10%; */
	clear: both;
	width: 100%;
	font-size: 10px;
	text-align: right;
	float: none;
    background-color: transparent;

	border-radius: 0;	
	color: black;
}

#footer p {
	margin-right: 20px;

}

#footer  * {
	color: inherit; 
	font-size: inherit;
	text-decoration: none;
}

#footer a:hover {
	text-decoration: underline;
	cursor: pointer;
}

.pf {
    margin-top: 150px;
    padding-top: 30px;
    border-top: 2px solid green;
}
.pf p {
    text-align: center;
}
.partners img {
    max-height: 100px;
    max-width: 10vw;
}
.financiers img {
    max-height: 100px;
    max-width: 20vw;
}
.partners, .financiers {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
}


/* ----------------- METATAGS ----------------- */

.metatags {
	display: none;
}





/* ----------------- M I N   W I D T H     8 0 0 ----------------- */

@media (max-width: 799px) {

    /* ----------------- ALGEMEEN mini----------------- */

    .desktop {
        display: none;
    }


    div.pagina {
        display: block;
        box-shadow: none;
    }

    /* ----------------- PAGINA mini----------------- */


   #blad {
        display: block;
    }

    #header {
        display: block;
    }

    #header p {
        display: block;
    }

    
    #header p a {
        display: block;
        width: 100%;
        text-align: center;
    }

    #header p a img {
        max-width: 90vw;
    }

    /* ----------------- ARTICLES mini----------------- */

    #articles, #nieuw, #bedrijven, #footer   {
        display: block;
        padding: 4em 2em 0 2em;
        width: 100%;
        max-width: 100%;

    }

    /* ----------------- NAV mini----------------- */
	#nav, #nav  {
		padding: 0;
		margin: 0;

	}
	#nav li, #nav li {
		display: block;
		overflow: show;
		white-space: nowrap;


	}	
	#nav li a, #nav li a {
		text-align: center;

	}

   #grotenav {

        transition: height 1s, padding 1s;
    }
    #nav {
        height: 0;
        overflow: hidden;

        position: fixed;
        width: 100vw;
        top: 0;
        left: 0;
        background: chartreuse;
        display: grid;
        text-align: center;
        align-content: space-evenly;
        background-color: #e7ffd2eb;
        padding-bottom: 0;
        z-index: 100;
    }

    #nav li {
	    float: none;
	    display: block;
	    width: 100%;
       	clear: both;
        font-size: 5vw;
        font-size: min(8vw,8vh);
    }

    #nav li, #nav li a {
        background-color: transparent;
    }

    #nav li li {
	    width: 90%;
    }



    #navknop {
        display: block;
        height: 48px; 
        width: 100%;


        background-repeat: no-repeat;
        background-size: fit;
        background-position: center center;
    }
    #navknop.dicht {
        background-image: url(/libs/icons/material/ic_menu_48px.svg);
        background-color: white;
    }
    #navknop.open {
        background-image: url(/libs/icons/material/ic_close_48px.svg);

    }
    #navknop.wait {
        background-image: url(/libs/icons/material/ic_autorenew_48px.svg);
     -webkit-animation-name: rotate;
      -webkit-animation-duration:1s;
      -webkit-animation-iteration-count:infinite;
      -webkit-animation-timing-function:linear;
      -moz-animation-name: rotate;
      -moz-animation-duration:1s;
      -moz-animation-iteration-count:infinite;
      -moz-animation-timing-function:linear;   
    }
    #nav * {
        background-color: white;
    }


    #nav li ul {
        border: 0; 
        display: none;
    }
    #nav li:hover {
        background-color: white;
    }
    #nav li:hover a, #nav li:hover li a {
        color: #006900;
    }

   

    /* ----------------- FOOTER mini ---------------- */

    .partners img {
        max-width: 20vw;
    }

    .financiers img {
        max-width: 60vw;
    }

    .partners, .financiers {
        flex-wrap: wrap;
        justify-content: space-evenly;
        column-gap: 5vw;
        margin: 5vw 1vw;

    }

    /* ----------------- TABELLEN mini ----------------- */

    div.tabel.mob1 {
       grid-template-columns: auto; 
    }
    div.tabel.mob2 {
       grid-template-columns: auto auto; 
    }

    .evenementen .colhead {
        display: none;
    }

    .evenementen  a.branche, .evenementen  a.type {

    }

} 
/* ----------------- M I N   W I D T H     8 0 0 ----------------- */

@media (min-width: 800px) {

    .mobile {
        display: none;
    }

	#center {
		padding: 20px;

	}
	.pagina {
		height: auto;
	}

    .widgets {
        background-color: white;
        z-index: 1000;

    }




	.klein {
		display: none;
	}
	.illustratie.klein {
		display: none;

	}
	.illustratie.groot {
		display: block;
	}
	



    #header {
        background-color: transparent;
        display: block;
        float: none;
        height: 100%;
        text-align: center;
        width: 100%;
        z-index: 100;
        border: 0px solid red;

    }
    #header p {
        display: block;
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    #header p a {
        align-items: center;
        display: grid;
        height: 100%;
        justify-items: center;

    }
    #header p a img {
        /*border: 0px solid yellow;
        max-height: min(200px, 25vw);
        max-width: 100%;
		*/
    }

    #nav li {
        line-height: 115%;
    }
}




/* ----------------- M E D I A   P R I N T ----------------- */

@media print {

 
    #navknop {
        display: none;
    }

   #nav, .widget, #slotje, #inlineditor, #nieuw, #bedrijven {
        display: none;
    }

    #articles {      
        display: block;

        left: 0;
        right: 0;
        top: 0;
        z-index: 10000;
        width: 100vw;
        height: auto;
        border: 0px solid red;
        background-color: white;
        max-width: 100vw;
    }

    #articles * {
           color: black;
            font-size: 12pt;
    }

     #articles h2 {
        font-size: 15pt;
    }
     #articles h1 {
        font-size: 20pt;
        border-bottom: 1pt solid black;
    }

}