:root {
  --primary-color: #1aad80;
  --secondary-color: #4e95cc;
}

html {
   height: 100%;
}

.header-img {
  width: 100%;
  height: 300px; /* adjust as needed */
  object-fit: cover; /* crops to fit height while preserving aspect ratio */
  display: block;
}

.sidebar-img {
    width: 90%;
    object-fit: cover; /* crops to fit height while preserving aspect ratio */
  display: block;

}

body{
  position: relative;
margin:0;
padding:0;
min-height:100%;
}
.right{
float:left;
}

.left{
float:left;
margin-right:50px !important;
}
.footer{
float:right;
font-size:16px;
	font-family:"Verdana";
color:var(--primary-color);
}


.ondertitel{
color:var(--primary-color);
margin-left:35px;
}

.footer span{
text-align:right;
}
p, .right, .left, .text, strong{
text-align:left;
line-height:1.5;
	font-family:"Verdana";
color: #666666;
font-size:16px;
right:0;
margin-right:10px;
}
strong{
color:var(--primary-color) !important;
}
h1{
	color:var(--secondary-color);
	font-size:1.5em;
}

.wrapper{

padding:20px;
position: absolute;
      overflow: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
border:5px solid var(--secondary-color);

    box-sizing: border-box;
    min-height:100%;

}

.hidden{
 opacity:0!important;   
 visibility:hidden;
 z-index:-1;
}

.img{
	position:absolute;
    opacity:1;
    transition:opacity 0.5s linear;
}

.footer a{
text-decoration: none;
color: #666666;
}
.sidebar{
float:left;

font-family: "Gill Sans MT";
text-decoration: none;
color: #666666;
font-size:19px;
width:300px;
}
.sidebar a{
text-decoration: none;
color: #666666;
font-size:19px;

}

.sidebar ul
{
    list-style-type: none;
}
.sidebar li
{
	margin-bottom:10px;
}
.active, .sidebar a:hover, .footer a:hover{
color:var(--secondary-color) !important;
}

.muted{
    color:#888888;
}


.content{
margin-right:50px;
width:600px;
padding:10px;
margin-left:50px;
   overflow:auto;
    margin-top:20px;
padding-bottom:70px;
z-index:1;
}