* {
margin: 0;
padding: 0;
font-size: 14px;
font-family: arial, verdana, sans-serif;
}

body 	{
background: silver;		/*color body */
}

p, h1, h3, h4, h5, ul {
display: block;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}

h1,h3 {
background: #f4eade;				/* color bg headers*/
padding: 20px;
}

h2 {
display: block;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
background: #eee;
padding: 20px;
}

ul li {
list-style-type: square;
}

li {
list-style: disc outside none;
display: list-item;
margin-left: 1em;
}

img.imageblog {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
padding: 3px 2px 3px 0px;
float: left;

}


 						/* header and nav */

.top {

overflow: hidden;
/*overflow: visible; position:fixed; background-color: red; top:0; width: 65.5%; z-index:10; /* michel */
background-color: #2f496e; 		/* #2f496e; color bg top*/
}

.top2 { /* michel for cms*/

overflow: hidden;
overflow: visible; position:fixed; background-color: red; top:0; width: 65.5%; z-index:10; /* michel */
background-color: #2f496e; 		/* #2f496e; color bg top*/
}

.top2 p { /* michel */
float: left;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-variant: small-caps;
color: white;
text-decoration: none;
font-size: 1.2em;
margin-top:8px;
margin-left:5%;
}


.earnings { /* michel */
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-variant: small-caps;
	color:white;
	text-align: right; 
	font-size: 1.2em;
	margin-top:8px;
	margin-right:1%;
}

.top p {
float: left;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-variant: small-caps;
color: white;
text-decoration: none;
font-size: 1.2em;
margin-top:8px;
margin-left:5%;
}

.sidenav {
height: 100%;
width: 0px;
position: fixed;
z-index: 7;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}

.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}

.sidenav a:hover {
color: #f1f1f1;
}

.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

#main {
transition: margin-left .5s;
}

.menuside {
font-size:30px;
cursor: pointer;
}

 					/* header bg and txt*/


div.bgimage {
position: absolute;
z-index:2;
}

div.bgimagetxt {
padding: 15px;
position: absolute;
width:50%;
height:auto;
z-index:3;
text-align: left;
}

p.bgimagetxt01 {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-variant: small-caps;
font-size: 1.6em;
letter-spacing: 0px;
text-align: center;
font-style: normal;
color: white;
padding: 12px;
background:black;
border: 1px inset #d3d3d3;
} 

div.bgimagetxt img {				/* logo */
max-width: 20%;
max-height: 20%;
width: auto;
height: auto;
float: left;
}

div.bgimagetxt p span {
font-family: Noto Sans, sans-serif;
font-variant: small-caps;
font-style: normal;
font-size: 0.7em;
}

img.bgimage {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}


							/* search fields and input */


input[type=text], input[type=file], input[type=password], select, textarea {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #2f496e;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
color: silver;
}

input[type=text], input[type=file]:focus, select, textarea {
border: 3px solid blue;
color: black;
}

input[type=submit].save {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #2f496e;
color: white;
background: blue;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
background-image: url(https://www.juridischwoordenboek.nl/image/save02.png); 
background-repeat: no-repeat;  
background-position: 15px 4px;
}

input[type=submit].save:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
cursor: pointer;
}


input[type=submit].send {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #2f496e;
color: white;
background: green;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
background-image: url(https://www.juridischwoordenboek.nl/image/send02.png); 
background-repeat: no-repeat;  
background-position: 15px 4px;


}

input[type=submit].send:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
cursor: pointer;
}

input[type=submit].reject {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #2f496e;
color: white;
background: red;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
/*background-image: url(https://www.juridischwoordenboek.nl/image/send02.png); */
background-repeat: no-repeat;  
background-position: 15px 4px;


}

input[type=submit].reject:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
cursor: pointer;
}


input[type=submit].return {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #2f496e;
color: white;
background: #66b3ff;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
/*background-image: url(https://www.juridischwoordenboek.nl/image/send02.png); */
background-repeat: no-repeat;  
background-position: 15px 4px;


}

input[type=submit].return:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
cursor: pointer;
}


						

						/* content area */

.sub {
	
text-align: left;
line-height: 1.3em;
background: white;	
margin: 0;
padding:2%;
position: relative;
z-index:4;
margin-top:28%;
}


.searcher {
position:relative;
}

.loop {
height: 28px;
position: absolute;
left: 92%;
left: 90%; /*michel*/
top: 30%;
}

								/* Open Modal */

/* The Modal (background) */
.modal {
display: none; 
position: fixed; 
z-index: 1; 
padding-top: 200px; /* Location of the box */
left: 0;
top: 0;
width: 100%; 
height: 100%; 
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

							/* Modal Content */
.modal-content {
position: relative;
background-color: white;
text-align: center;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0} 
to {top:0; opacity:1}
}

@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}

/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: red;
text-decoration: none;
cursor: pointer;
}

.modal-header {
padding: 16px 16px;
background: #2f496e;
color: white;

}

.modal-body {
padding: 2px 16px;
}

.modal-footer {
padding: 16px 16px;
background: #2f496e;
color: white;
}


						/* button */

button {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
z-index:3;
}

button:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}

button.active:after {
content: "\2212";
}

						/* accordeon*/
						

.accordeon1, #panel1 {background:#FDC6CE;}
.accordeon1:hover {background:#FCA3B0;}

.accordeon2, #panel2 {background:#F2C8FB;}
.accordeon2:hover {background:#E9A0F8;}

.accordeon3, #panel3  {background:#D2C8FB;}
.accordeon3:hover {background:#AD9AF8;}

.accordeon4, #panel4  {background:#C8E0FB;}
.accordeon4:hover {background:#98C6F8;}

.accordeon5, #panel5  {background:#C8FBED;}
.accordeon5:hover {background:#9CF8DE;}

.accordeon6, #panel6  {background:#DFFBC8;}
.accordeon6:hover {background:#C4F898;}

.accordeon7, #panel7  {background:#F5FBC8;}
.accordeon7:hover {background:#EAF78E;}

.accordeon8, #panel8  {background:#FBEAC8;}
.accordeon8:hover {background:#F7D58E;}

.accordeon9, #panel9  {background:#E8DFDD;}
.accordeon9:hover{background:#D0BDB9;}
						





									/* panel */
.panel {
margin-top:1em;    
background-color: white;
max-height: 0;
overflow: hidden;
z-index:2;
transition: max-height 0.2s ease-out;
}


									/* popup */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 250px;
    background-color: #555;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 3;
    bottom: 50%;
    left: 50%;
    margin-left: 0px;
}

div.popup img {
position: relative;
top: 22px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -96px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}


						

							/* content area flags */

.flag {
height: 15px;
width: 15px;
border-radius: 50%;
} 

							/* content area img */
.defimage {
width:400px; 
height:550px; /* Michel */
float: none;
}

* {
box-sizing: border-box;
}


div.sub img {
cursor: help;
} 

							/* content area reference */

span.reference {
cursor: help;
text-decoration: underline;
}

p.reference {
background: #f4eade;
color: black;
padding: 10px;
}

						/* content area attribution */
img.citation {
height: 55px;
/*width: 55px;*/
float: left;
}



							/* table split webpage */
table {
border: 0;
border-collapse: collapse;
width: 100%;
}


td {
padding: 0px 15px 0px 15px;
text-align: left;
vertical-align: top;
width:50%;
}

						/*footer */

.notices {
background: #2f496e; 			
text-align : center;
padding: 20px;
position: relative;
}
	
.notices p, .notices p a	{
text-decoration: none;
font-size: 12px;
color: white;				
text-decoration: none;
padding: 3px;
}

.notices p a:hover {
transition-duration: 0.5s;
color: #2f496e;
background: #f4eade;			
padding: 4px 6px 4px 6px;
text-decoration: underline;
}

								/* Meet the team */
.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 100%;
margin: 20px;

}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
    padding: 2px 16px;
}

								

								/*@media Desktop */

@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

.desktop-only {
display: block !important;
position: relative;
}
.mobile-only {
display: none !important;
}
	
.canvas {
max-width: 1251px; /* max width of bg image */
margin:auto;
text-align: center;
position:relative;
z-index:5;
}

table { 
display: table; 
}

tr {
display: table-row; 
}

td { 
display: table-cell;
}

.img-magnifier-container {
position: relative;
}

.img-magnifier-glass {
position: absolute;
border: 3px solid #000;
border-radius: 50%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: 100px;
height: 100px;
}

.link {
width:11.1%;
}

form img {
display: none;
display: inline; /* anders zijn de icoontjes niet zichtbaar */
}


}

/* oorspronkelijke stijlen JW.NL */

.input_container 
	{
		
		/* dit gaat over het vak waarin de zoekterm wordt ingevuld */
		height: 24px;
		width: 100%;
		padding: 0px;
		margin-left: 0px;
		border: 0px solid #06002b; /* de oranje van Filip */
		background-color: white;
		border-radius: 0px
		background: white;
		z-index: 7;
	}
.input_container tekst 
	{
		
		/* deze lijkt niet gebruikt te worden */
		
		color: rgb(205, 102, 1); /* de oranje van Filip */	
		
		
		width: 100%;
		
		padding: 25px;
	}
.input_container input 
	{
		
		/* dit gaat over het invoervak */
		
		height: 36px;
		width:100%;
		padding: 2px 2px 2px 5px;
		margin-left : -2px;
		margin-top: -1px;
		border: 1px solid #06002b; /*grijs*/
		border-radius:0px;
		/*border-radius: 0; /*de ronding van de hoeken*/
		/*border-radius: 0px; */
		font-size: 12px;/*tekstgrootte van de zoekterm*/
		z-index: 17;
	}

input:focus 
	{ 
		outline: none !important;
		border-color: rgb(205, 102, 1);
		border-color: #06002b;
		
	}

.sel {
		background: #ffeecc;
		color: rgb(205, 102, 1); 	
		background: white;
		color: #2f496e;		
}
	
	
.input_container ul 
	{
		
		/* dit gaat over het het neerklapvenster */
		
		
		width: 306px; /* deze moet 6 px breder zijn dan die van input_container input */
		width: 59.5%;
		border: 0px solid rgb(205, 102, 1); /*de rand van het uitklapvenster*/
		border: 2px solid black; /*de rand van het uitklapvenster*/
		position: absolute;
		margin-left : 0px; /* waar het vak begint ten opzichte van het invoervak */
		padding: 10px 2px 10px 5px;
		
		z-index: 9; /*volgorde van element (zodat deze bovenop komt) */
		
		color: white;
		background: #2f496e;
		
		list-style: none;
		border-radius: 3px; 
		font-family : 'Lato', verdana, Arial, Helvetica, sans-serif;		
		font-size: 0.9em; /*tekstgrootte van de tekst in het uitklapvenster*/
		/*letter-spacing: auto;*/
		/*opacity: 0.90;*/
		cursor:pointer;
	}
.input_container ul li 
	{
		padding: 2px;
		list-style-type: none;
	}
.input_container ul li:hover 
	{
		
		background: white;
		color: #2f496e;
	} 
 




								/*@media Mobile */

@media only screen and (max-width: 768px) {
  /* Add your Mobile Styles here */
		
.desktop-only {
display: none !important;
}

.mobile-only {
display: block !important;
}

							/* header and nav */

.top .search-container {
float: none;
}

.top a, .top input[type=text], .top .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}

.top input[type=text] {
border: 1px solid #ccc;  
}

.top .search-container {
float: right;
width:100%;
}

.sidenav {
padding-top: 15px;
}

.sidenav a {
font-size: 18px;
}



							/* header bg and txt*/

div.bgimagetxt span {
font-family: Noto Sans, sans-serif;
font-variant: small-caps;
font-size: 2em;
font-style: normal;
} 

div.bgimagecolor {
display: none;
}

div.bgimagetxt {
position: absolute;
z-index:3;
text-align: left;
padding: 0px;
border:0;
width:100%;
}

p.bgimagetxt01 {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-variant: small-caps;
font-size: 1.3em;
font-style: normal;
color: white;
background: black;
border: none;
padding: 4px;
left: 0%;
top:0%;
} 

div.bgimagetxt img {				/* logo */
max-width: 20%;
max-height: 20%;
width: auto;
height: auto;
float: left;
}

							/* content area */

.sub {
line-height: 1.5em;
margin-top:42%;
}

table {
/* display: block; dit was de fout */
width: 100%;
padding: 5px;

}

tr, td {
display: block;
width: 100%;
padding: 5px;

}




.defimage, .ad {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
float: none;
}

form img {
position: absolute;
margin-left: -2.7em;
margin-top: 1.1em;  
width:33px; 
height:33px;
}

.loop {
position: absolute;

left: 86%;
top: 30%;
}


}