/* HOME */
/* groen: rgb(43,162,68) 1,75,50 */
/* grijs: rgb(217,217,217) 219,219,221 */
/* rood: rgb(223,56,63) */

p { color: black;
    background-color: rgb(43,162,68);
    font-size: 1em;
    text-align: center;
	}
/* p.kop { font-weight: bold;
h2 { font-weight: bold;
    font-size: 18px;
		} */
div.updates div.update_date h2 { 
                display:flex;
                flex-direction: column;
                font-weight: bold;
				font-size: 18px;
                }
div.updates div.update_text h2 { 
                display:flex;
                flex-direction: column;   
                font-weight: bold;
				font-size: 18px;
                }
div.ToDo h2 { 
            display:flex;
            flex-direction: column;   
            font-weight: bold;
            font-size: 18px;
            }
/* ========= Tekst centreren ============= */
div.centreren {text-align: center;
			font-size: 110%;
			}
/* ========= Weergave blokken tekst ============  */
div.info-blokken{ 
			display: flex;
			flex-direction: row;
            justify-content: center;
            }

@media (max-width: 999px){
	div.blok1 { display: none;}
	div.blok2 { display: none;}
	div.blok3 { display: none;}
	div.blok4 { display: none;}
}

/* Alle 4 de blokken */
@media (min-width: 1000px){
	div.blok1 { position: relative;
				margin-left: 8%;
				float: left;
				width: 20%;
				height: 250px;
				background: rgb(43,162,68);
				border: 1px solid black;
				border-radius: 10px;
				font-size: 1.1em;
				text-align: center; 
	}
	div.blok2 { position: relative;
				margin-left: 2%;
				float: left;
				width: 20%;
				height: 250px;
				background: rgb(43,162,68);
				border: 1px solid black;
				border-radius: 10px;
				font-size: 1.1em;
				text-align: center;
	}
	div.blok3 { position: relative;
				margin-left: 2%;
				float: left;
				width: 20%;
				height: 250px;
				background: rgb(43,162,68);
				border: 1px solid black;
				border-radius: 10px;
				font-size: 1.1em;
				text-align: center;
	}
	div.blok4 { position: relative;
				margin-left: 2%;
				float: left;
				width: 20%;
				height: 250px;
				background: rgb(43,162,68);
				border: 1px solid black;
				border-radius: 10px;
				font-size: 1.1em;
				text-align: center;
	}
}
    html body div.body-container div.content_mv form fieldset div.zoek_kolom4 div.in_sort { /* radio buttons */
        width: 15vw;
        margin-top: 10px;
    }
    html body div.body-container div.content_mv form fieldset div.zoek_kolom4 div.in_sort div.in_sort-oms {
        /*margin-left: 10%;
        margin-top: -8%;*/
    }
/*********************************************************/
/*****************   HOOFDPAGINA UPDATES   ***************/
/*********************************************************/
p1 {	color: black;
		background-color: rgb(223,56,63);
		font-size: 1em;
		text-align: center;
	}
@media all and (max-width:64em){ /* SMARTPHONE + TABLET - 1200px */
	div.updates div.update_date { display: none;}
	div.updates div.update_text { display: none;}
    div.updates { display: none;}
}
@media all and (min-width: 64em){ /* LAPTOP - 1200px */
    html body div.updates {
        display: flex;
		border: 2px solid rgb(223,56,63);
		border-radius: 10px;
    }
	html body div.updates div.update_date { 
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
		width: 25%;
        margin-left: 5%;
		background: none;	/* red */

		font-size: 1.2em;
        text-align: right;
		padding: 10px;
	}
	html body div.updates div.update_text { 
		display: flex;
		flex-direction: column;
        justify-content: flex-start;
        margin-left: 0%;
		width: 65%;
		background: none; /* silver */
		font-size: 1.2em;
   		padding: 10px;
	}
}
/***************************************************************/
/*******************    HOOFDPAGINA PLANNING    ****************/
/***************************************************************/
/*******************  SMARTPHONE - 767px        ****************/
@media (max-width: 48em){ div.ToDo { display: none;}
}
@media (min-width: 48em){ /* SMARTPHONE + 767px */
	div.ToDo {	
        display: flex;
        flex-direction: column;
        position: relative;
		margin-left: 20%;
		width: 50%;
		background: rgb(43,162,68);
		border: 1px solid black;
		border-radius: 25px;
		text-align: center;
		padding-bottom: 1%;
		}
}
body {      color: black; 
			background-image: linear-gradient(to right, green, yellow), url(pics/achtergrond-logo8.png);
			background-color: white;
			background-repeat: repeat;
			background-position: top center;
			margin-right: 5%;
			margin-left: 5%;
			font-size: 1.1em;
			display: flex;
			flex-direction: column;
            font-family: Helvetica, Arial, sans-serif;
			}

/* Basis tekst */
body div.content {
		/* position: relative ;*/
		display: flex;
		background-position: top left;
        width: 80%;
		margin-left: 1%;
/*		font-size: 1em;*/
/*		border: 2px;  */
		}


/* Mooie manier van centreren:  margin-right: auto; margin-left: auto; */
/* h2 { font: bold "Times New Roman"; color: rgb(223,56,63); }*/
/****************************************************/
/***************    HOOFDPAGINA TITEL    ************/
/****************************************************/
h1.SiteName {	font-size: 3em;			/* 300% of 3em, is hetzelfde */
				font-family: verdana;
				color: rgb(223,56,63);
				text-align: center;
				/* background-image: linear-gradient(to right, green, yellow), url(pics/achtergrond-logo8.png); */
				background-repeat: repeat;
				margin-right: 5%;
				margin-left: 5%;
				background-color: rgb(217,217,217); /* groen */
				font-variant: small-caps;  /* Alles in hoofdletters, de "echte" hoofdletters zijn echter groter */
				}
/************************************************/
/* ==== Dit zijn de koppen van de pagina's ==== */
/************************************************/
@media all and (max-width: 48em){ /* Smartphone - 767px */
	h1.title { display: none;}
}
@media all and (min-width: 48em) { /* TABLET + LAPTOP - 1024px */
	h1.title {	color: rgb(43,162,30); /* Letters groen */
				text-align: center;
				font-size: 2em;
				background: rgb(217,217,217); /* achtergrond grijs */
				border: 2px double rgb(223,56,63); /* red */
				width: 80% ;
                margin-left: 0%;
            }
    div.update {
		font-size: 0.5em;
		position: relative;
		float: right;
		}
}
@media all and (min-width: 64em){ /* LAPTOP - 1024px */
	h1.title {	color: rgb(43,162,68); /* letters groen */
				text-align: center;
				font-size: 2em;
				background: rgb(217,217,217) url(pics/smile.gif) no-repeat left;
				border: 2px double rgb(223,56,63); /* red */
				width: 100% ;
	}
	div.update {
			font-size: 0.5em;
            position: relative;
			float: right;
			}
}
h1.tekstvet {	font-size: 0.9em;
				text-align: left;
				}

/******************************************************************/
/*               Instellingen TOP navigatie          **************/
/******************************************************************/

div.TopNav {
	text-align: center;
}
@media all and (min-width: 64em) { /* LAPTOP - 1024px */
    .navbar {
        overflow: hidden;
        font-family: Arial, Helvetica, sans-serif;
        background: rgb(217,217,217) url(pics/zo_eigen_als_logo8.jpg) no-repeat right;
        padding: 10px 10px; /* Nodig voor de weergave afbeelding*/
        border: 2px double rgb(223,56,63);
        font-size: 1.4em;
        margin: 0 auto;
        }
}
@media all and (max-width: 64em) { /* SMARTPHONE + TABLET - 1200px Zonder logo */
    .navbar {
        overflow: hidden;
        background-color: #333;
        font-family: Arial, Helvetica, sans-serif;
        background: rgb(217,217,217) ;
        border: 2px double rgb(223,56,63);
        font-size: 1.4em;
        width: 75vw;
    }
}
.navbar a {
    float: left;
    font-size: 18px;
	color: rgb(43,162,68); /* Groene letters */
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 18px;    
    border: none;
    outline: none;
  	color: rgb(43,162,68);
    padding: 12px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
    color: white;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
	border: 2px double rgb(223,56,63);
}

.dropdown-content a {
    float: none;
    color: rgb(43,162,68);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: red;
    color: white;
}

.dropdown:hover .dropdown-content {
    display: block;
}

#wrd_vet {font-weight: bold;
}


/*******************************************************************/
/* ***********    ZOEKEN OP HOOFDPAGINA    *************************/
/*******************************************************************/

html body div.content_mv form fieldset {
        display: flex;
        justify-content: space-between;
        margin: 2%;
        border-radius: 6px;
}

legend {
	font-size: 1.25em;
	padding: 0 .25em;
	}

/***********************************************************/
/*                           INVOER VELDEN in CONTENT_MV   */
/***********************************************************/
/******************** TABLET + LAPTOP - 1200px  ************/

@media (min-width: 75em) {
    html body div.content_mv {	/* Zoeken op */
        display: flex;
        flex-direction: row;
        /* justify-content: space-between;*/
        width: 92%;
        margin-left: 2%;
    }
    label {
        display: flex;
        width: 13vw;
        justify-content: flex-end;
	   padding: .2em 0 .2em 0;
    }
}
/********************************************************/ 
/***********************   SMARTPHONE - MAX 1200px **********/
@media (max-width: 75em) {
    label {
        display: flex;
        width: 25vw;
        justify-content: flex-end;
        padding: .2em 0 0em 0;
    }
    html body div.content_mv {	/* Zoeken op */
        display: flex;
        flex-direction: row;
        width: 100%;
    }
    html body div.content_mv form fieldset div.zoek_kolom1 {
        display: flex;
        flex-direction: column;
        width: 30%;
	}
    html body div.content_mv form fieldset div.zoek_kolom1 ok {
        padding-top: .2em;
	}
    html body div.content_mv form fieldset div.zoek_kolom1 label { margin: .2em 0em .1em 0em }
    
    html body div.content_mv form fieldset div.zoek_kolom2 {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 1%;
        height: 50%;
    }
    html body div.content_mv form fieldset div.zoek_kolom2 div.in_oms2 {        margin: .3em 0em .2em 0em  }
    html body div.content_mv form fieldset div.zoek_kolom2 div.in_uitg {        margin: .2em 0em .2em 0em  }
    html body div.content_mv form fieldset div.zoek_kolom2 div.in_gvg_viltnr {  margin: .2em 0em .2em 0em  }
    html body div.content_mv form fieldset div.zoek_kolom2 div.in_type {        margin: .2em 0em .2em 0em  }
    html body div.content_mv form fieldset div.zoek_kolom2 div.in_bier {        margin: .2em 0em .2em 0em  }
    html body div.content_mv form fieldset div.zoek_kolom2 div.in_glas {        margin: .2em 0em .2em 0em  }
    html body div.content_mv form fieldset div.zoek_kolom2 div.in_mat {         margin: .2em 0em .2em 0em  }
}
/************************************************************/ 
/***********************   LAPTOP - MIN 1200px     **********/

@media (min-width: 75em) {
    html body div.content_mv form fieldset div.zoek_kolom1 {
        display: flex;
        flex-direction: column;
        width: 14vw;
	}
    html body div.content_mv form fieldset div.zoek_kolom1 ok {
        padding-top: .2em;
	}
    html body div.content_mv form fieldset div.zoek_kolom1 label { margin: 0em 0em .1em 0em }

    html body div.content_mv form fieldset div.zoek_kolom2 {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 0%;
        width: 32vw;
        height: 50%;
    }
    html body div.content_mv form fieldset div.zoek_kolom2 div.in_oms2 {        margin: .5em 0em .4em 0em  }
    html body div.content_mv form fieldset div.zoek_kolom2 div.in_uitg {        margin: .2em 0em .2em 0em  }
    html body div.content_mv form fieldset div.zoek_kolom2 div.in_gvg_viltnr {  margin: .2em 0em .2em 0em  }
    html body div.content_mv form fieldset div.zoek_kolom2 div.in_type {        margin: .2em 0em .2em 0em  }
    html body div.content_mv form fieldset div.zoek_kolom2 div.in_bier {        margin: .2em 0em .2em 0em  }
    html body div.content_mv form fieldset div.zoek_kolom2 div.in_glas {        margin: .2em 0em .2em 0em  }
    html body div.content_mv form fieldset div.zoek_kolom2 div.in_mat {         margin: 0em 0em .2em 0em  }
    
    html body div.content_mv form fieldset div.zoek_kolom3 {
       display: flex;
       flex-direction: column;
	   width: 12vw;
    }
    html body div.content_mv form fieldset div.zoek_kolom4 {
        display: flex;
        flex-direction: column;
        margin-left: 2%;
        width: 25vw;
    }
    html body div.content_mv form fieldset div.zoek_kolom4 div.export-button {
	   display: flex;
        flex-direction: row;
        margin: .2em 0em .4em 0em 
    }
    html body div.content_mv form fieldset div.zoek_kolom4 div.in_jr_van {
        display: flex;
        flex-direction: row;
        padding-top: 5px;
    }
    html body div.content_mv form fieldset div.zoek_kolom4 div.in_logo {
        display: flex;
        padding-top: 5px;
    }
    html body div.content_mv form fieldset div.zoek_kolom4 div.in_lf {
        display: flex;
        padding-top: 3px;
    }
    html body div.content_mv form fieldset div.zoek_kolom4 div.in_sort { /* radio buttons */
        width: 15vw;
        margin-top: 10px;
    }
    html body div.content_mv form fieldset div.zoek_kolom4 div.in_sort div.in_sort-oms {
        /*margin-left: 10%;
        margin-top: -7%;*/
    }
    html body div.content_mv form fieldset div.zoek_kolom4 div.content_pic {  /* weergave bordje */
                display: flex;
                justify-content: flex-end;
                margin-top: -50%;
                transform: rotate(-45deg);
                }
}

@media (max-width: 75em) { /* SMARTPHONE + TABLET - KOLOM 3 + 4 - 1200px*/
    html body div.content_mv form fieldset div.zoek_kolom3 { display: none; }
    html body div.content_mv form fieldset div.zoek_kolom4 { display: none; }
    html body div.content_mv form fieldset div.zoek_kolom4 div.content_pic { display: none; }
    html body div.content_mv form fieldset div.zoek_kolom4 { display: none; }
    html body div.content_mv form fieldset div.zoek_kolom4 div.export-button { display: none; }
    html body div.content_mv form fieldset div.zoek_kolom4 div.in_jr_van { display: none; }
    html body div.content_mv form fieldset div.zoek_kolom4 div.in_lf { display: none; }
    html body div.content_mv form fieldset div.zoek_kolom4 div.in_sort {  display: none; }
    html body div.content_mv form fieldset div.zoek_kolom4 div.in_sort-oms { display: none; }
}


html body div.content_mv form fieldset div.zoek_kolom1 div.ok {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                margin-top: 10%;
}

html body div.content_mv form fieldset div.zoek_kolom1 div.ok input {
				padding: .5em 1em;
				border-radius: 6px;
				background: green;
				color: white;
}
html body div.content_mv form fieldset div.zoek_kolom1 div.ok a div.r_button {
                display: flex;
                padding: .5em 1em;
				border-radius: 6px;
				background: red;
				color: black;
}


/**************************************************************************************/
/* =========      Weergave zoekresultaten FOTO-weergave op Hoofdpagina       ======== */
/**************************************************************************************/
@media (min-width: 64em){ /* LAPTOP */
	div.foto_container1 { display: flex;
						flex-direction: column;
						width: 15%;
						margin-left: 1%;
						border: 1px solid black;
						border-radius: 10px;
						margin-top: 2px;
						justify-content: center;
	}
}
@media (min-width: 48em) and (max-width: 64em){ /* TABLET */
	div.foto_container1 { display: flex;
						flex-direction: column;
						width: 15%;
						margin-left: -5%;
						border: 1px solid black;
						border-radius: 10px;
						margin-top: 2px;
						justify-content: center;
	}
}
div.seven-container {display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: center;
}
div.seven-container div.foto_container1 div.f_foto { display: flex;
													justify-content: center;
													padding-top: 2%;
													height: 150px;
}
div.seven-container div.foto_container1 div.f_artnr { display: flex;
													justify-content: center;
}
div.seven-container div.foto_container1 div.f_omschr { display: flex;
													justify-content: center;
}
div.seven-container div.foto_container1 div.f_logo { display: flex;
													justify-content: center;
}
div.seven-container div.foto_container1 div.f_jaarv { display: flex;
													justify-content: center;
}
div.f_gevonden {  position: relative;
						float: left;
						clear: left;
                        margin-left: 8%;
}

/***************************************************************************************/
/* =========      Weergave zoekresultaten LIJST-weergave op Hoofdpagina       ======== */
/***************************************************************************************/
span.b { font-weight: bold; }

div.l_container {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                border: 1px solid rgb(223,56,63);
				border-radius: 10px;
				box-sizing: border-box;

				padding: 5px 0 5px 5px;
				overflow: hidden;
				}

div.l_container div.column_left {
                display: flex;
                flex-direction: column;
				width: 14%;
                margin-top: 1%;
				}

@media (max-width: 48em) { /* Smartphone 787px
	div.l_container div.column_left div.thumb { display: none; } */

	div.l_container div.column_left div.l_foto { 
        display: flex; 
        justify-content: flex-start;
        margin-top: 1%;
    }
	div.l_container div.column_left div.l_artnr {
						display: flex;
						}
}
/*******************************************/
@media (min-width: 48em) and (max-width: 64em) { /* TABLET  - 1024px 
	.thumb:hover {
						position: relative;
						height: auto ;
						width: auto;
						display: flex;
						z-index: 999;
						}*/
	/* div.l_container div.column_left div.thumb {
						position: relative;
						/* height: 110px; 
						padding: 4px;
						background-position: left top;
						}*/

	div.l_container div.column_left div.l_foto {
						display: flex;
                        
						height: 110px;
						padding: 4px;
						background-position: left top;
						}

	div.l_container div.column_left div.l_foto_pdf {
						display: flex;
						height: 50px;
						padding: 4px;
						background-position: left top;
						}
	div.l_container div.column_left div.l_artnr {
						display: flex;
						}
}
/*******************************************/
div.l_container div.column_center {
                    display: flex;
                    flex-direction: column;
					margin-top: 1%;
					width: 35%;
					}

div.l_container div.column_center div.l_mat ul li.b {
						font-weight: bold;
						}
div.l_container div.column_center div.l_bsoort { 
						position: relative;
						clear: left;
						float: left;
						}
div.l_container div.column_center div.l_gsoort { 
						position: relative;
						clear: left;
						float: left;
						}

div.l_container div.column_center div.l_export { 
						position: relative;
						float: left;
						clear: left;
						}
div.l_container div.column_center div.l_logo { 
						position: relative;
						float: left;
						clear: left;
						}
div.l_container div.column_center div.l_toms {
						position: relative;
						float: left;
						clear: left;
						}

/*******************************************/
div.l_container div.column_right {
						display: flex;
						flex-direction: column;
                        margin-top: 1%;
						width: 40%;
						}
div.l_container div.column_right div.l_info {
						position: relative;
						float: left;
						clear: left;
						}
div.l_container div.column_right div.l_uitgave {
						position: relative;
						clear: left;
						float: left;
						}
div.l_container div.column_right div.l_jaar {
						position: relative;
						clear: left;
						float: left;
						}
div.l_container div.column_right div.l_afm {
						position: relative;
						float: left;
						clear: left;
						}
div.l_container div.column_right div.logo_afm {
						position: relative;
						float: left;
						clear: left;
						}
/*****************************************************************************************/
/* =========      Weergave VILTJES zoekresultaten LIJST-weergave op Hoofdpagina ======== */
/*****************************************************************************************/
span.b { font-weight: bold; }


/* VILTJES SMARTPHONE ******************************************/
@media (max-width: 48em) { /* SMARTPHONE  767px  
	div.l_container div.column_vleft div.thumb { display: none; }*/

/*	div.l_container div.column_vleft div.l_vfoto { display: none; }*/
    div.l_container div.column_vleft {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        width: 20%;
						}
    div.l_container div.column_vleft div.l_vartnr {
						display: flex;
                        
						}
}
/** VILTJES TABLET *****************************************/
@media (min-width: 48em) and (max-width: 64em) { /* TABLET 
	div.l_container div.column_vleft thumb {
						position: relative;
						/* height: 110px; 
						padding: 4px;
						background-position: left top;
						} */
/*	.l_container .column_vleft .l_vfoto {
						position: relative;
						height: 110px;
						width: 100%;
						padding: 4px;
						background-position: left top;
						}*/
    div.l_container div.column_vleft {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        width: 20%;
						}
	div.l_container div.column_vleft div.l_v1foto {
                        object-fit: contain;				
                        display: flex;
						height: 110px;
						width: 49%;
						}
	div.l_container div.column_vleft div.l_v2foto {
						object-fit: contain;
                        display: flex;
						clear: right;
						float: right;
						height: 110px;
						width: 49%;
						}
	div.l_container div.column_vleft div.l_vfoto_sm {
						position: relative;
						height: 50px;
						padding: 4px;
						background-position: left top;
						}
	div.l_container div.column_vleft div.l_vartnr {
						position: relative;
						}
}
/** VILTJES LAPTOP *****************************************/
@media (min-width: 64em) {
    /*div.l_container div.column_vleft div.l_v1foto:hover {
                        display: flex;
						height: 100%;
						width: 100%;
						}
	div.l_container div.column_vleft div.l_v2foto:hover {
                        display: flex;
						height: 100%;
						width: 100%;
						}*/
}
@media (min-width: 64em) { /* LAPTOP 1024px */
    div.l_container div.column_vleft {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        width: 25%;
						}
}

/** VILTJES *****************************************/
div.l_container div.column_vcenter {
						margin: 4px 0 5px 0;
						width: 40%;
						}
div.l_container div.column_vcenter div.l_vomschr {
						position: relative;
						clear: left;
						float: left;
					}
div.l_container div.column_vcenter div.l_vmat {
						position: relative;
						clear: left;
						float: left;
						}
div.l_container div.column_vcenter div.l_vmat ul li.b {
						font-weight: bold;
						}
div.l_container div.column_vcenter div.l_vbsoort { 
						position: relative;
						clear: left;
						float: left;
						}
div.l_container div.column_vcenter div.l_vgsoort { 
						position: relative;
						clear: left;
						float: left;
						}

div.l_container div.column_vcenter div.l_vexport { 
						position: relative;
						float: left;
						clear: left;
						}
div.l_container div.column_vcenter div.l_vlogo { 
						position: relative;
						float: left;
						clear: left;
						}
div.l_container div.column_vcenter div.l_vtoms {
						position: relative;
						float: left;
						clear: left;
						}

/**VILTJES*****************************************/
div.l_container div.column_vright {
						margin: 4px 0 5px 0;
						float: right;
						width: 35%;
						}
div.l_container div.column_vright div.l_vinfo {
						position: relative;
						float: left;
						clear: left;
						}
div.l_container div.column_vright div.l_vuitgave {
						position: relative;
						clear: left;
						float: left;
						}
div.l_container div.column_vright div.l_vjaar {
						position: relative;
						clear: left;
						float: left;
						}
div.l_container div.column_vright div.l_vafm {
						position: relative;
						float: left;
						clear: left;
						}
div.l_container div.column_vright div.vlogo_afm {
						position: relative;
						float: left;
						clear: left;
						}


/******************************************************/
/* ===================      INFO       ============== */
/******************************************************/
div.art_auto_kop {
                    position: relative;
					margin-left: 9%;
					float: left;
					width: 90%;
					background: rgb(43,162,68); /*groen*/
					border: 1px solid black;
					border-radius: 5px;
					padding-left: 1%;
					}
div.art_auto_text1 {
                    position: relative;
					margin-left: 9%;
					float: left;
					width: 89%;
					background: none;
					border: 1px solid rgb(223,56,63);
					border-radius: 10px;
					padding-left: 1%;
					padding-right: 1%;
					padding-top: 1%;
					font-size: 110%;
					}
div.art_auto_text2 {
                    position: relative;
					margin-left: 9%;
					float: left;
					width: 89%;
					background: none; /* silver; */
					border: 1px solid rgb(223,56,63);
					border-radius: 10px;
					padding-left: 1%;
					padding-right: 1% ;
					padding-top: 1%;
					padding-bottom: 1%;
					font-size: 110%;
					}

div.art_glas_kop {position: relative;
					margin-left: 9%;
					float: left;
					width: 90%;
					background: rgb(43,162,68); /*groen*/
					border: 1px solid black;
					border-radius: 5px;
					padding-left: 1%;
					font-size: 110%;
					}
div.art_glas_text{position: relative;
					margin-left: 9%;
					float: left;
					width: 90%;
					background: none; /* silver; */
					border: 1px solid rgb(223,56,63);
					border-radius: 10px;
					padding-left: 1%;
					padding-top: 1%;
					font-size: 110%;
					}

div.inhoudsmaten {position: relative;
					margin-left: 9%;
					float: left;
					width: 89%;
					background: none;
					border: 1px solid rgb(223,56,63);
					border-radius: 10px;
					padding-right: 1%;
					padding-left: 1%;
					padding-top: 1%;
					padding-bottom: 1%;
					font-size: 110%;
					}
/*****************************************************/
/* ============    INHOUD instellingen    ========== */
/*****************************************************/
/**************    TABLET + LAPTOP - 767px  **********/
html body div.cont-inhoud { 
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            }
@media (max-width: 48em) { /* Smartphone */
    html body div.cont-inhoud { 
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            }
    html body div.cont-inhoud div.inhoud_row1 div.vet {
            display: flex;
            flex-direction: column;
            font-weight: bold;
            font-size: 18px;
            margin-top: 10%;
            }
    html body div.cont-inhoud div.inhoud_row1 { 
            display: flex;
            flex-direction: column;
            margin-left: 4%;
            width: 40%;
            background: rgb(43,162,68);
            border: 1px solid black;									
            border-radius: 10px;
            text-align: center;
            font-size: 110%;
            }
    html body div.cont-inhoud div.inhoud_row2 { 
            display: flex;
            flex-direction: column;
            margin-left: 4%;
            width: 40%;
            background: rgb(43,162,68);
            border: 1px solid black;									
            border-radius: 10px;
            text-align: center;
            font-size: 110%;
            }
    html body div.cont-inhoud div.inhoud_row2 div.vet {
            display: flex;
            flex-direction: column;
            font-weight: bold;
            font-size: 18px;
            margin: 0;
            margin-top: 10%;
            }
        

    html body div.cont-inhoud div.inhoud_row3{ display: none; }
    html body div.cont-inhoud div.inhoud_row4{ display: none; }
    }
@media (min-width: 48em) { /* TABLET + LAPTOP - 767px */
    html body div.cont-inhoud { 
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            }

    html body div.cont-inhoud div.inhoud_row1 div.vet {
            display: flex;
            flex-direction: column;
            font-weight: bold;
            font-size: 18px;
            margin-top: 10%;
            }
    html body div.cont-inhoud div.inhoud_row1 { 
            display: flex;
            flex-direction: column;
            margin-left: 4%;
            width: 20%;
            background: rgb(43,162,68);
            border: 1px solid black;									
            border-radius: 10px;
            text-align: left;
            padding-left: 1%;
            font-size: 110%;
            }
    html body div.cont-inhoud div.inhoud_row2 { 
            display: flex;
            flex-direction: column;
            margin-left: 4%;
            width: 25%;
            background: rgb(43,162,68);
            border: 1px solid black;									
            border-radius: 10px;
            text-align: left;
            padding-left: 1%;
            font-size: 110%;
            }
    html body div.cont-inhoud div.inhoud_row2 div.vet {
            display: flex;
            flex-direction: column;
            font-weight: bold;
            font-size: 18px;
            margin: 0;
            margin-top: 10%;
            }
    html body div.cont-inhoud div.inhoud_row3 { 
            display: flex;
            flex-direction: column;
            margin-left: 4%;
            width: 17%;
            background: rgb(43,162,68);
            border: 1px solid black;									
            border-radius: 10px;
            text-align: left;
            padding-left: 1%;
            font-size: 110%;
            }
    html body div.cont-inhoud div.inhoud_row3 div.vet {
            display: flex;
            flex-direction: column;
            font-weight: bold;
            font-size: 18px;
            margin: 0;
            margin-top: 10%;
            }
    html body div.cont-inhoud div.inhoud_row4 { 
            display: flex;
            flex-direction: column;
            margin-left: 4%;
            width: 25%;
            background: rgb(43,162,68);
            border: 1px solid black;									
            border-radius: 10px;
            text-align:left;
            padding-left: 1%;
            font-size: 110%;
            }
    html body div.cont-inhoud div.inhoud_row4 div.vet {
            display: flex;
            flex-direction: column;
            font-weight: bold;
            font-size: 18px;
            margin: 0;
            margin-top: 10%;
            }
}
/*****************************************************/
/* ============    LINKS instellingen    ========== */
/*****************************************************/
div.li_grolsch { position: relative;
						width: 60%;
						margin-left: auto;
						margin-right: auto;
						padding-top: 1%;
						padding-bottom: 1%;
						border: 1px solid rgb(223,56,63);									
						border-radius: 10px;
						font-size: 1em;
						text-align: center;
						font-size: 110%;
}
div.li_verz { position: relative;
						width: 60%;
						margin-left: auto;
						margin-right: auto;
						padding-top: 1%;
						padding-bottom: 1%;
						border: 1px solid rgb(223,56,63);									
						border-radius: 10px;
						font-size: 1em;
						text-align: center;
						font-size: 110%;
}
div.li_bier { position: relative;
						width: 60%;
						margin-left: auto;
						margin-right: auto;
						padding-top: 1%;
						padding-bottom: 1%;
						border: 1px solid rgb(223,56,63);									
						border-radius: 10px;
						font-size: 1em;
						text-align: center;
						font-size: 110%;
}
div.li_markt {position: relative;
						width: 60%;
						margin-left: auto;
						margin-right: auto;
						padding-top: 1%;
						padding-bottom: 1%;
						border: 1px solid rgb(223,56,63);									
						border-radius: 10px;
						font-size: 1em;
						text-align: center;
						font-size: 110%;
}
/*****************************************************/
/***************     Tekst Gastenboek   **************/
/*****************************************************/
@media all and (min-width: 48em) { /* TABLET + LAPTOP 767px*/
	div.gb_content {	
        display: flex;
        flex-direction: column;
		margin-left: auto;
		margin-right: auto;

	}
}
@media all and (max-width: 48em) { /* Smartphone  767px*/
	div.gb_content {	
        display: flex;
        flex-direction: column;
	}
}
div.gb_content div.gb_reactie { 
        display: flex;
        flex-direction: column;
        margin-left: 3%;
		padding-left: 1%;
		padding-bottom: 2px;
		border: 1px solid rgb(223,56,63);
		border-radius: 10px;
		background-color: rgb(43,162,68);
		}
div.gb_content div.gb_bericht { 
        display: flex;
        flex-direction: column;
        border: 1px ;
		border: 1px solid rgb(223,56,63);
		border-radius: 10px;
		padding-left: 1%;
		padding-bottom: 2px;
        margin-top: 1%;
		}
div.gb_datum { margin-top: 0%;}

span.gb_naamv { 
        font-weight: bold;
		font-size: 20px;
		}
div.fill_gb {
        display:flex;
        flex-direction: column;
        margin-left: 0;
        margin-right: auto;
		}
div.fill_gb form fieldset {
        display: flex;
        flex-direction: column ;
        justify-content: flex-start;
}
html body div.fill_gb form fieldset div.kolom1_gb div.i_naam {
        display: flex;
        justify-content: flex-end;
        margin-top: 1%;
		}
html body div.fill_gb form fieldset div.kolom1_gb div.i_email {
        display: flex;
        margin-top: 1%;
        justify-content: flex-end;
		}
 html body div.fill_gb form fieldset div.kolom1_gb div.i1_bericht {
        display: flex;
        justify-content: flex-end;
        margin-top: 1%;
        }
html body div.fill_gb form fieldset {
        display: flex;
        flex-direction: row;
        }
html body div.fill_gb form fieldset div.kolom1_gb div.ok {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                margin-top: 15%;
}
html body div.fill_gb form fieldset div.kolom1_gb div.ok input {
				padding: .5em 1em;
				border-radius: 6px;
				background: green;
				color: white;
				}
html body div.fill_gb form fieldset div.kolom1_gb div.ok a div.r_button {
                display: flex;
                padding: .5em 1em;
				border-radius: 6px;
				background: red;
				color: white;
				}

@media all and (min-width: 48em) { /* TABLET + LAPTOP 767px*/

    html body div.fill_gb form fieldset div.kolom1_gb {
        display: flex;
        flex-direction: column;
        width: 20em;
        justify-content: flex-start;
        }
    html body div.fill_gb form fieldset div.kolom1_gb div.i_spam {
       display: flex;
	   margin-top: 14%;
       justify-content: flex-end;
	   }
    html body div.fill_gb form fieldset div.kolom2_gb {
        display: flex;
        flex-direction: column;
        width: 40em;
        margin-left: 1%;
        }
	div.i2_bericht {
        display: flex;
		}
	div.i3_bericht { 
        display: flex;
		}
}
@media all and (max-width: 48em) { /* Smartphone 767px*/
    html body div.fill_gb form fieldset div.kolom2_gb {
        display: flex;
        flex-direction: column;
        width: 40em;
        margin-left: 1%;
        }
    html body div.fill_gb form fieldset div.kolom1_gb div.i_spam {
       display: flex;
	   margin-top: 20%;
       justify-content: flex-end;
	   }
    div.i1_bericht {
        display: flex;
        padding-top: 2%;
		}
	div.i2_bericht {
        display: flex;
		margin-top: 0%;
						}
	div.i3_bericht { 
        display: flex;
		}
}

div.i_submit {position: relative ;
						clear: left;
						float: left;
						padding-top: 1%;
						}
div.i_reset {position: relative ;
						float: left;
						padding-top: 1%;
						}

/*****************************************************/
/* ===========    FOOTER instellingen    =========== */
/*****************************************************/
#footer { position: relative;
					font-size: 80%; clear: both;
					color: #999;
					border-top: 2px dotted #CCC;
					margin-top: 20em;
				  }
span.footer {position: relative;
				 left: 300px;
				 }
				
/* test met RELATIVE, ABSOLUTE en FIXED */

div.foto {position: relative ;
			 margin: 0px auto;
			 left: 0%;  right: 40%;
			 padding-right: 5px; 
			 background: silver;
			 border: 2px double rgb(223,56,63);
			 }
/*****************************************************/
/* ===========    INFO LOGO's            =========== */
/*****************************************************/