@font-face {
  font-family: 'Arvo';
  src: local('Arvo'), url(/fileadmin/Template/arvo.woff) format('woff');
}

html,body {
  margin: 0px;
  padding: 0px;
  width:100%;
  height:100%;
  font-family: helvetica, arial, sans-serif;
  font-size: 10pt;
}

.bg {
  width:50%;
  height:100%; 
  z-index:-1;
  position: fixed;
  top: 0px;
  display:block;
  overflow:hidden;
}

.left {
  left:0px;
}

.right {
  right:0px;
  text-align:right;
}

.right > img {
  position: absolute;
  right: 0px;
}

.stretch {
   height:100%;
}

.center {
  margin:0px;
  margin-left:auto;
  margin-right:auto;
  padding:0px;
  width:874px;
  background:#fff;
}

h1 {
  margin:0px;
  margin-bottom:6px;
  color: #3fA633;
  font-family: 'Arvo', helvetica, arial, sans-serif;
/*  text-transform: uppercase; */
}

h2 {
  color: #3fA633;
  margin:0px;
  margin-bottom:6px;
  font-weight:bold;
  font-size:10pt;
}

.content {
  margin:0px;
  padding:0px;
  background: #f2f2f2;
  position:relative;
  min-height:100%;
  overflow-y:hidden;
}

.leftcontainer {
  position:relative;
  display:block;
  top:0px;
  left:0px;
  padding:12px;
  width: 425px;
  min-height:100%;
}

.rightcontainer {
/*  float: right; */
  position:absolute;
  top:0px;
  right:0px;
  padding:12px;
  width: 425px;
}

.fullcontainer {
  padding:12px;
}

.header {
  width:100%;
  padding:0px;
  margin:0px;
}

.fotoheader {
  position:relative;
  width:100%;
  height:201px;
}

.fotoheadercontent {
  position:absolute;
  background-color: #ffaa00;
  left:24px;
  top:0px;
  right:24px;
  bottom:0px;
  overflow:hidden;
  align: center;
  margin-left:auto;
  margin-right:auto;
}

.fotoheader img {
  position:absolute;
  /*width:100%;*/
  height:100%;
}

.login {
  position: absolute;
  bottom:0px;
  right:0px;
  color:#fff;
  
  padding-left:12px;
  padding-right:12px;
  line-height: 48px;
}

.login:hover {
  background-color: #32512F;
}

.login .expand {
  display: none;
  position: relative;
  line-height: normal;
}

.login input:checked ~ .expand {
  display: block;
  position: fixed;
  left:50%;
  top:50%;
  z-index:11;
}

.login input:checked ~ label {
  position: fixed;
  z-index:10;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: -100px;
  background: #000000;
  opacity: 0.4;
}

.login input:not(:checked) ~ label {
  cursor: pointer;
}

.login a {
  cursor: pointer;
}

.loginbox {
  position: absolute;
  z-index: 15;
  padding: 15px;
  background-color: #5EAA2E;
  border:1px solid #32512F;
  box-shadow: 2px 2px 50px #000;

  top: -50px;
  right: -166px;
  width: 300px;
 /* height: 80px; */
}

.loginbox input {
  width:270px;
  margin-bottom:2em;
  padding: 10px 15px;
  border:0px;
}

.loginbox input[type=submit] {
  background-color: #32512F;
  color: #fff;
  width:300px;
  margin-bottom:0;
}

/*
.login:hover .expand {
  display:block;
}
*/

.menu {
  position:relative;
  background-color: #5EAA2E;
  width:100%;
  margin-top:16px;
}

.menu label, #hamburger {
  display: none;
  color: #fff;
}

.menu input[type=checkbox] {
  display: none;
}

.login label {
  display: block;
}

.menu img {
  height:16px;
}

.menu a {
  color:#fff;
  text-decoration:none;
}

/* In fixed-size two column layout, wide blocks and normal blocks are identical */
.block, .wideblock {
  padding:12px;
  margin:12px;
  border:1px solid #aaa;
  background: #fff;
  box-shadow: 0px 0px 4px #BBB;

/*  min-height:100%; */

  float:left;
  width:375px;
}

.block img, .wideblock img {
    max-width:100%;
}

.inversemargin {
  margin:-12px;
}

.fillimg {
  /* margin:-12px; */
  padding:0px;
}

.fillimg .csc-textpic .csc-textpic-imagewrap .csc-textpic-image {
  margin-bottom:0px;
}

.fillimg  img {
  width:100%;
  height:100%;
}

.hdrimg {
  margin-left:-12px;
  margin-right:-12px;
  margin-top:-12px;
  margin-bottom:8px;
  
  left:0px;
  right:0px;

  height:150px;
  overflow:hidden;
}

.hdrimg img {
  width:100%;
  height:auto;
  margin-top:-15%;
}

.block .bodytext {
  z-index: -1;
}

.leesmeer {
  display:block;
  margin-left:-12px;
  margin-right:-12px;
  margin-bottom:-12px;
  margin-top:-60px;
  padding-top:36px;
  padding-bottom:8px;
  padding-right:12px;
  
  height:20px;
  vertical-align:bottom;
  
  text-align:right;

  background-image: url("/fileadmin/Template/img/transp.png");
  position:relative;
  z-index:10;
}
.iconimg {
  height: 16px;
  position: relative;
  top: 2px;
}


.csc-textpic-caption {
  text-align:center;
  color: #3fA633;
  padding: 2px;
}

.filelist a {
  text-decoration:none;
}

.filelist a:hover {
  text-decoration:underline;
}

.menu ul {
  list-style: none;
  padding:0px;
  margin:0px;
}

.menu > ul {
  line-height:48px;
  margin-left:24px;
  color:#fff;
}

.menu li {
  position: relative;
  display: inline-block;
  padding-left:12px;
  padding-right:12px;
}

.menu li ul li {
  display:block;
  width:15em;
}

.menu li:hover {
  background-color: #32512F;
}

.menu > ul ul {
 float:left;
 position:absolute;
 left:0px;
 top:48px;
 display: none;
 z-index:11;
 background-color: #5EAA2E;
 line-height:2em;
 border:1px solid #32512F;
 box-shadow: 2px 2px 5px #444;
}

.menu li:hover ul {
  display:block;
/*  height:150px; */
}

/* Style The Dropdown Button */
.dropbtn {
  background-color: #5EAA2E;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  width: 100%;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  width: 100%;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #5EAA2E;
  min-width: 160px;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #32512F}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content, .dropdownhover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #32512F;
}

.adres::before {
  content:"@";
}
.adres::after {
  content:".";
}

@media only screen and (min-width:1330px) {
  /* Large enough for fixed-size 3 column layout */
  .center {
    width:1299px;
  }

  .leftcontainer .wideblock {
    /*margin-right:24px;*/
    width:800px;
  }

  .menu > ul { 
    line-height:64px;
    font-size:larger;
  }

  .login {
    line-height:64px;
    font-size:larger;
  }

 
  .leftcontainer {
    width:862px;
  }

  .fotoheader {
    height:300px;
  }
}

@media only screen and (max-width:900px) {
  /* Variable width 2-column layout */
  .center {
    width:100%;
  }

  .block, .wideblock {
    width:auto;
    float:none;
    margin:12px;
    margin-top:24px;
    margin-bottom:24px;
  }

  .rightcontainer {
    width:50%;
    padding:0px;
  }
  .leftcontainer {
    width:50%;
    padding:0px;
  }

  .bg {
    display: none;
  }

  .menu > ul { 
    line-height:32px;
  }
}

@media only screen and (max-width:700px) {
  /* Switch to single column */
  .block, .wideblock {
    margin:12px;
  }

  .rightcontainer {
    position:relative;
    width:auto;
    padding:0px;
  }

  .leftcontainer {
    position:relative;
    width:auto;
    padding:0px;
  }

  .fotoheader {
    display:none;
  }
}


@media screen and (max-width: 768px) {
  /* Show Hamburger */
  .menu label {
    display: inline-block;
    font-style: normal;
    font-size: 2em;
    padding: 10px;
  }

  /* Break down menu items into vertical */
  .menu ul li {
    display: block;
  }
  .menu ul li {
    border-top: 1px solid #fff;
  }

  /* Toggle show/hide menu on checkbox click */
  .menu ul {
    display: none;
  }
  .menu > input:checked ~ ul {
    display: block;
  }

  .menu > input:checked ~ .login {
    display: none;
  }

  .menu ul li ul {
    display:block;
    float:none;
    position: relative;
    top: 0;
    box-shadow:0 0 0;
    border: 0px;
  }

  .login {
    height:100%;
    line-height:normal;
    font-size: 1em;
    padding:0px;
  }
  
  .dropdown {
  position: relative;
  width: 100%;
  display: inline-block;
  height: 400px;
}