html, body {
    height: 100%; width: 100%;
    padding: 0; margin: 0;
}

body {

    /* background: #F5F5F5; */
    background-image: url(../storage/system/grass3.png), linear-gradient(#ace0f9, #fff1eb);
    /* background-image: url(../figs/grass3.png), linear-gradient(to bottom, #9be2fe 0%,#67d1fb 100%); */
    background-repeat: repeat-x;
    background-position: bottom left;
    background-attachment: fixed;
    font-family: 'Roboto', sans-serif;
    font-weight:300;
    font-size: 12pt;
    color: #000000;
    margin: 0;
}

.verplicht {
    color:#1C7070;
    font-weight: bold;
    font-size:15pt;
}

h1 {
    vertical-align: bottom;
    display: inline;
    color:#1C7070 !important;
    font-weight:700 !important;
    text-transform:uppercase;
    font:25px lato;
    text-decoration:none;
}

h2 {
    vertical-align: bottom;
    display: inline;
    color:#2B979D;
    font-weight:700;
    text-transform:uppercase;
    font:20px lato;
    text-decoration:none;
}

a:link { color: #39B9BE; }
a:visited { color: #39B9BE; }
a:active { color: #39B9BE; }

p {
    font-family: 'Roboto', sans-serif;
    text-align:left; 
    margin-top: 0px; 
    line-height:150%;
    vertical-align: bottom;
}

label {
    padding-bottom: 12px;
}

.center {
    text-align:center; 
}

/* Donkergroene achtergrond */
.topnav {
    background-color: #2B979D;
    overflow: hidden;
    max-width: 800px;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    font-weight:400;
    font-size: 12pt;
    color:#F1F1F1;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    text-decoration:none;
    text-align: center;
    padding: 20px 15px;
    background: rgba(28, 112, 112, 0); 
    transition: 0.5s;
}

/* Change the color of links on hover */
.topnav a:hover {
    background: rgba(57, 185, 190, 1); 
    color:#FFFFFF;
}

/* Add an active class to highlight the current page */
.topnav a.active {
    background-color: #39B9BE;
    color:#FFFFFF;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* Hide the link that should open and close the topnav on small screens */
.hoofdblok {
    max-width: 740px;
    margin: auto;
    padding: 30px;
    color: #333333;
    background-color:rgba(255,255,255,0.85);
    text-align:left;
}

.blokonder {
    max-width: 760px;
    margin: auto;
    padding: 20px;
    background-color:#3B1F08; opacity: 0.85;
    text-align:right;
}

.infobox-green {
    max-width: 100%;
    border: 1px solid #009900;
    background-color:#EDFEE5;
    padding: 20px;
    text-align:left;
    line-height:150%;
}

.infobox-grey {
    max-width: 100%;
    border: 1px solid #CCCCCC;
    background-color:#F5F5F5;
    padding: 20px;
    text-align:left;
    line-height:150%;
}

.infobox-orange {
    max-width: 100%;
    border: 1px solid #FF6600;
    background-color:#FFF0E1;
    padding: 20px;
    text-align:left;
    line-height:150%;
}

img.banner {
    max-width: 100%;
    /* real height is 255 */
    min-height:230px;
    display: block;
    margin: auto;
    object-fit: cover;
    object-position: right;
}



/* When the screen is less than 750 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 750px) {

    .topnav a {
	display: none;
    }
    #active {
	display: block;
    }
    .topnav a.icon {
	float: right;
	display: block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 750px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
	position: absolute;
	right: 0;
	top: 0;
    }
    .topnav.responsive a {
	float: none;
	display: block;
	text-align: left;
    }
}



img.wieiswie {
    max-width: 100%;
    /* min-width: 120px; */
    height:auto;
    display: block;
    /* margin: auto; */
    float: right;
}

/* Floating column for inputs: 2% width */
.col-2 {
    float: left;
    width: 2%;
    
}

/* Floating column for labels: 25% width */
.col-25 {
    float: left;
    width: 25%;
}

.col-35 {
    float: left;
    width: 32%;
    font-size:11pt;
    padding-right: 5px;
}

.col-35m {
    float: left;
    width: 32%;
    font-size:11pt;
    padding-right: 5px;
    text-align: center;
}

/* Floating column for inputs: 73% width */
.col-65 {
    float: left;
    width: 65%;
}
/* Floating column for inputs: 73% width */
.col-73 {
    float: left;
    width: 73%;
}

/* Floating column for inputs: 100% width */
.col-100 {
    float: left;
    width: 100%;
    margin-top: 6px;
}

.row {
    padding-bottom: 12px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
    .col-35, .col-35m, .col-65, input[type=submit] {
	width: 100%;
	margin-top: 0;
    }
}















/* Style inputs, select elements and textareas */
input[type=text], select, textarea{
    /* width: 100%; */
    padding: 10px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}

.longin {
    width: 100%;
}

.shortin {
    width: 50%;
}

/* Lightbox modal */

.lightbox-row > .lightbox-column {
    max-width: 100%;
    padding: 0% 1% 1% 0%;
}

.lightbox-row:after {
    content: "";
    display: table;
    clear: both;
}

/* Create three equal columns that floats next to eachother */
.lightbox-column {
    float: left;
    width: 32%;
}

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
}

/* Modal Content */
.modal-content {
    position: relative;
    /* background-color: #fefefe; */
    margin: auto;
    padding: 0;
    width: 90%;
    max-width: 1200px;
}

/* The Close Button */
.close {
    color: white;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
    opacity: 1;
}

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

/* Hide the slides by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    opacity: 1;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* Caption text */
.caption-container {
    text-align: center;
    background-color: black;
    padding: 15px;
    color: white;
    font-size:11pt;
}

img.demo {
    max-width: 100%;
    opacity: 0.6;
}

.activemodal,
.demo:hover {
    opacity: 1;
}

img.hover-shadow {
    max-width: 100%;
    transition: 0.3s;
}

.hover-shadow:hover {
    /* border: 2px solid #009900; */
    outline: 4px solid #1C7070;
    outline-offset: -4px;
    opacity: 0.9;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.button {
    background-color: #1C7070;
    border: none;
    color: #FFFFFF;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}