body{
    background-image: url('fotos/achtergrond.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
    font-family: sans-serif;
}

h3{
    margin-left: -100px;
    font-size: 25pt;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: sans-serif;
}

h4{
  font-size: 20px; 
  text-align: left; 
  margin-bottom:-10px;
  margin-left: 5px;
  margin-top: 5px;
}
h5{
  font-size: 16px; 
  text-align: left; 
  margin-bottom: 0px;
  margin-left: 5px;
  margin-top: 5px;
  font-style: italic;
}

p{
    font-size: 16px; 
    line-height: 1.4;
    margin-left: 5px;
}
p.bolt {font-size: 18px; font-weight:bold;}


div.menu{
	height: 100%;
	width:	200px;
	top: 15px;
	left: 30px;
	position: fixed;	
}

ul.mainmenu{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul.submenu{
	list-style-type: none;
	margin: 0;
	padding: 0;
}


ul.mainmenu a{
color: #000000;
  text-decoration: none;
background-color: #7cc875;
  font-family: Arial;
  font-style:italic;
  width: 130px;
  padding: 2px 6px;
  margin-bottom: 3px;
  display: block;
  border: 2px solid black;
}
ul.mainmenu a:hover{
  background-color: #5cde50;
}

ul.submenu li {
  font-size: 11pt;
}
ul.submenu a{
  color: #000000;
  text-decoration: none;
  background-color: #e3b75d;
  font-family: Arial;
  font-size: 10pt;
  font-style:italic;
  width: 130px;
  padding: 2px 4px;
  margin-bottom: 2px;
  display: block;
  border: 2px solid #784201;
}
ul.submenu a:hover{
  background-color: #ffd23eba;
}

table {
  border-collapse: collapse;
  border: 2px solid black;
} 

th,td {
  border: 1px solid black;
}

div.main {
  left: 200px;	

  width: calc(100vw - 225px);	
  position: absolute;	
/*  background: #ffffff2b;*/
}

div.paragraph {
  float: left;	
  margin-top: 5px;
}

div.text {
    width: calc(100% - 315px);
    float: left;
    padding-right: 10px;
    font-family: sans-serif;
    background: #ffffff78;
    min-width: 300px;
}	


div.text img {
  	 width: 95%;
	border: 2px solid black;
}

div.main div.tabel{
	position: absolute;
	left:0px;
	top:200px;
	
}
caption{
	font-weight:bold;
	font-size: 25px;
}
div.tabel table.vlinders {
	table-layout: auto;
	width: 390px; 
	font-size: 20px; 
}
div.tabel table.planten{
	position: absolute;
	left:400px;
	top:0px;
	table-layout: auto;
	width: 390px; 
	font-size: 20px; 
}
div.fotos{
	float: left;
	width:300px;
}

td.fotoshor{
	float: none;
}

div.foto{
	float: left;
	width:300px;
        margin-left: 5px;
}

td.fotoshor div.foto{
        margin-left: 0px;
        margin-right: 10px;
}


div.foto img{
	width:300px;
	margin-bottom:2px;
	border: 2px solid #3c3b3b;
}

p.plaatjetext{
	margin-left:10px;
	margin-top:0px;
	font-style:italic;
	margin-bottom: 0px;
}


/* image div:*/

.img-modal{z-index:3;display:none;
         position:fixed;
         left: calc((100% - 800px)/2);
         top:100px;
/*         width:300px;
         height:100%;*/
         overflow:auto;
         background-color:rgb(0,0,0);
         background-color:rgba(0,0,0,0.4);
         border: 1px solid black;
}
.img-modal-content{
    margin:auto;
    background-color:#fff;
    position:relative;
    padding:0;
    outline:0;
    max-width:800px;
    max-height:600px;
    height: auto;
    width:auto;
    cursor: zoom-out;
}
.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.3s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}

.thumbnail:hover {
    border: 2px solid blue;
}

img.imglarge {
    max-width: 795px;
    width: calc(vw - 450px);
}    

div.legenda {
    margin-top: -1px;
    margin-bottom: 5px;
    font-size:  small;
}

table.main {
  border-collapse: separate;
  border: none;
} 

table.main td {
  border: none;
} 

table.main td.text{
  background: #ffffff78;
  vertical-align: top;
  min-width: 300px;
}