html *{
margin:0px;               
padding:0px;
border:none;
} 
body {
background-color: #fff;
}
audio{
display:block;
width:100%;
max-width:300px;
height:30px;
margin:0 0 10px 0;
}
 h2.audio{
font-family:Lato, Arial;
font-size:14px;
text-transform:none;
font-weight:bold;
margin:0;
padding:5px;
}
.pageunder{
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100%;
background-image: url(../images/background/landscape.jpg);
background-position: 0 25%;
background-repeat: no-repeat;
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover;
background-size: cover;
}
.container{
display:flex;
flex-flow:row wrap;
justify-content:flex-start;
align-content:flex-start;
width:100%;
min-height:100%;
margin:0 auto 40px auto;
padding:0;
background-image: url('../images/transparent.gif');
background-position: 0 0;
background-repeat: repeat;
}
#toggle{
display:none;
}
.containernav{
position:fixed;
top:0;
left:0;
z-index:15;
width:100%;
height:50px;
margin:0;
background: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8));
background: -webkit-linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)); 
background: -o-linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8));    
background: -moz-linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8));
}
nav{
width:auto;
margin:5px auto 0 auto;
}
nav ul{ 
display:flex;
justify-content:space-around;
width:auto;
height:auto;
list-style-type:none;
margin: auto;
padding:0;
}
nav ul li{
width:auto;
height:auto;
margin:0;
padding:5px 0 0 0; 
}                                         
nav ul li a, nav ul li a:link, nav ul li a:visited, nav ul li a:active{ 
font-family: Lato, Arial;
font-size:1.2em;
font-weight:bold; 
margin:0;
padding:5px 0 0 0;
color:#fff;
text-decoration:none;  
outline-style:none; 
}   
nav ul li a:hover,    
nav ul li a.current, nav ul li a:link.current, nav ul li a:visited.current, nav ul li a:active.current{  
color:#ff0000; 
font-weight:bold; 
margin:0;
padding:5px 0 0 0;
text-decoration:none;  
outline-style:none;    
}   
header{
width:100%;
height:auto;
margin:0;
}
.picheader{
width:100%;
margin:0;
}
.caption{
position:absolute;
left:2%;
width:auto;
height:auto;
z-index:1;
font-family:Lato,Arial;
font-size:4em; 
color:#fff;
margin:-100px auto 0 auto;
text-shadow:5px 5px 5px #000;
}
.textheader{
display:flex;
flex-flow:row wrap;
justify-content:center;
width:100%;
height:auto;
}
h2.headerunder{
font-family:Lato, Arial;
font-size:4em;
color:#000;
text-transform:uppercase;
text-shadow: 2px 2px 3px #000;
}
.logounder{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
align-items:center;
width:100%;
height:auto;
}
.logo{
width:100%;
max-width:650px;
height:auto;
/*margin:-20px 0 0 0;*/
margin:0;
}
.helaas{
width:100%;
max-width:650px;
height:auto;
margin:0 auto;
}
main{
display:flex;
flex-flow:row wrap;
justify-content:center;
align-items:flex-start;
width:100%;
margin:0 auto;
padding:10px;
}
.textleft{
flex:0 1 70%;
/*width:70%;*/
font-family:Lato, Arial;
font-size:1.2em;
color:#000;
padding:20px;
}
.textright{
flex:0 1 25%;
/*width:25%;*/
font-family:Lato, Arial;
font-size:1em;
color:#000;
padding:20px auto 20px auto;
margin:0 auto;
}
a.in, a:link.in, a:visited.in, a:active.in{
font-family:Lato, Arial;
font-weight:normal;
font-size: 1em;
color:#000;
text-decoration:none;
outline-style:none;
}
a:hover.in{
color:#ff0000;
}
.teldesktop{
display:inline-block;
}
.telmobiel{
display:none;
}
.kopadres{
display:inline-block;
height:auto;
font-family:Lato, Arial;
font-size:1.2em;
font-weight:bold;
color:#000;
margin:20px 0 0 0;
padding:0 0 10px 20px;
}
.adres{
margin:0;
padding:0;       
list-style-type:none; 
}
ul.adrescenter{
font-family:Lato,Arial;
font-size:1rem;
width:auto;
color:#000;
margin:0;   
padding:0;   
list-style-type:none;                                  
}
li.one1{
background-image: url(../images/picto/t1.png);
background-position: 0 5px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 15px;
}
li.two1{
background-image: url(../images/picto/m1.png);
background-position: 0 5px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 15px;
}
li.three1{
background-image: url(../images/picto/e1.png);
background-position: 0 5px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 15px;
}
li.agenda{
padding:0 0 5px 0;
}
.date{
display:block;
font-weight:bold;
}
ol{
margin:0 0 0 20px;
}
.backtop a{
position:fixed;
right:2%;
bottom:3%;
width:50px;
height:50px;
z-index:10;
background-image: url('../images/nav/backtop.png');
background-position: 0 0;
background-repeat: no-repeat;
text-decoration:none;  
outline-style:none; 
cursor:pointer;
}
.backtop a:hover{
background-image: url('../images/nav/backtophover.png');
background-position: 0 0;
background-repeat: no-repeat;
}
/*hr.separate{
width:100%;
max-width:230px;
margin:20px auto 10px 0;
border-top:4px double #3c667a;
}*/
.footernav{
align-self:flex-end;
width:100%;
height:auto;
margin:0;
padding: 0 0 10px 0;
}
.footernav ul{ 
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-around;
align-items:center;
width:auto;
height:auto;
list-style-type:none;
margin:0;
padding:0;
}
.footernav ul li{
width:auto;
height:auto;
margin:0;
padding:0;
}                                         
.footernav ul li a, .footernav ul li a:link, .footernav ul li a:visited, .footernav ul li a:active{ 
font-family: Lato, Arial;
font-size:1em;
font-weight:bold; 
margin:0 ;
padding:0 5px 5px 0;
color:#000;
text-decoration:none;  
outline-style:none; 
}   
.footernav ul li a:hover,
.footernav ul li a.current, .footernav ul li a:link.current, .footernav ul li a:visited.current, .footernav ul li a:active.current{  
color:#ff0000;  
font-weight:bold; 
margin:0;
padding:0 5px 5px 0;
text-decoration:none; 
}      
 h2{
font-family:Lato, Arial;
font-size:1.2em;
font-weight:bold;
color:#99ccff;
margin:10px 0 15px 0;
padding:5px;
}
h2.datum{
font-family:Lato,Arial;
font-size:0.9rem;
font-weight:bold;
font-style:italic;
color:#000;
margin:10px 0 5px 5px;
padding:0;
}
span{    
display:block;
position:absolute;
font-family:Lato,Arial;
font-size:12px;
font-weight:bold;
font-style:italic;
color:#000;
padding:0;
margin:-10px 0 0 10px; 
}
.imgbox{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:flex-start;
margin:auto;
padding:0;
}
img.bd{
width:100%;
max-width:250px;
margin:15px 5px 5px 5px;
border:3px double #3c6674;
} 
img.centered{
display: block;
margin:0 auto 5px auto;
padding: 5px;
border:3px double #3c6674;
-webkit-border-radius:5px 25px 5px 25px;
-moz-border-radius:5px 25px 5px 25px;
border-radius:5px 25px 5px 25px;
}
img.alignright{
display:inline;
margin: 0 0 0 5px;
border:3px double #3c6674;
-webkit-border-radius:5px 25px 5px 25px;
-moz-border-radius:5px 25px 5px 25px;
border-radius:5px 25px 5px 25px;
}
img.alignleft{
display:inline;
margin: 0 5px 0 0;
padding:0;
border:3px double #3c6674;
-webkit-border-radius:5px 25px 5px 25px;
-moz-border-radius:5px 25px 5px 25px;
border-radius:5px 25px 5px 25px;
}
.alignright{
float:right;
}
.alignleft{
float:left;
} 
.hiddencontainer{
display:none;
} 
h4.foto{
font-family:Lato, Arial;
font-size:12px;
margin:0;
padding:5px;
}
.loginbox{
display:inline-block;
width:auto;
margin:20px auto auto auto;
padding:0 40px 0 10px;
background: -webkit-linear-gradient(rgba(60,102,116,0.1),rgba(60,102,116,0.1)); 
background: -o-linear-gradient(rgba(60,102,116,0.1),rgba(60,102,116,0.1));  
background: -moz-linear-gradient(rgba(60,102,116,0.1),rgba(60,102,116,0.1));      
background: linear-gradient(rgba(60,102,116,0.1),rgba(60,102,116,0.1)); 
border:4px double  #3c6674;
}
h2.login{
font-family:Lato, Arial;
font-size:1.2em;
color:#3c6674;
margin:auto;
}
table{
width:100%;
font-family:Lato, Arial;
font-size:1rem;
}
::-webkit-input-placeholder {
color:#000;
font-weight:normal;
}
:-moz-placeholder { /* Firefox 18- */
color:#000;
font-weight:normal;
}
::-moz-placeholder {  /* Firefox 19+ */
color:#000; 
font-weight:normal;
}
:-ms-input-placeholder {  
color:#000; 
font-weight:normal;
}
input{
width:100%;
max-width:250px; 
height:30px;
font-family:Lato,Arial;
font-size:0.9rem;
font-weight:normal;
color:#000;
background:transparent;
background-image: url('../images/transparent.gif');
background-position: 0 0;
background-repeat: repeat;
padding:0 0 0 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid rgb(60,102,116);
}
input:invalid + span::after {
content: '\2613';
color: red;
margin:auto auto auto 3px;
}
input:valid + span::after {
content: '\2713';
color: green;
}
input:focus,textarea:focus{
background-color: #ffffcc;
}
input.submit{
width:85px;
height:20px;
text-align:center;
margin:10px auto;
padding:0 0 5px 0;
border:1px solid #3c6674;
cursor: pointer;
}
input.submit:hover{
width:85px;
height:20px;
border:1px solid #ff0000;
}
/*video*/
.videobox{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
margin:auto;
padding:20px 0 0 0;
}
.spanyt{
position:absolute;
z-index:10;
width:auto;
height:auto;
font-weight:bold;
font-size:0.8rem;
font-style:italic;
text-align:center;
color:#000;
margin:-20px auto 0 20px;
}
img.yt{
width:100%;
max-width:350px;
height:auto;
margin:0 auto;
padding:0 2px 0 0;
}
.ytbox{
width:100%;
max-width:350px;
height:auto;
margin:20px auto 45px auto;
}
img.bekijken{
position:absolute;
width:100%;
max-width:190px;
height:auto;
margin:0;
padding:0;
}
.bekijken{
position:absolute;
z-index:15;
width:100%;
max-width:190px;
height:auto;
margin:-48px auto 0 auto;
}
/*end video*/

html, body{
height:100%;
} 
@media only screen and (min-width: 1680px) and (max-width: 2560px){
main{
width:70%;
}
}
@media only screen and (min-width: 1024px) and (max-width: 1440px){
main{
width:90%;
}
}
@media only screen and (min-width: 640px) and (max-width: 1024px){
h2.headerunder{
font-size:3.5em;
}
.textleft{
flex:100%;
}
.textright{
flex:100%;
padding:20px;
margin:0 auto 0 0;
}
}
@media only screen and (min-width: 240px) and (max-width: 640px){
nav{
display:none;
}
header{
width:100%;
height:auto;
margin:0;
}
.picheader{
width:100%;
margin:0;
}
h2.headerunder{
font-size:2.5em;
}
.containernav{
/*position:relative;*/
position:fixed;
top:0;
left:0;
z-index:20;
width:100%;
height:50px;
padding:0;
margin:0!important;
/*background:none;*/
background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6));
background: -webkit-linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)); 
background: -o-linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6));    
background: -moz-linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6));
}
#toggle{
display:inline-block;
position:absolute;
right:10px;
top:5px;
z-index:10;
width:80px;
height:auto;
font-family:Lato, Arial;
font-size:1rem;
font-weight:bold;
color:#000;
margin:0;
padding:5px; 
cursor: pointer; 
/*background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6));
background: -webkit-linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)); 
background: -o-linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6));    
background: -moz-linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6));*/
}
/*#toggle:hover{
color:#ff0000;
}*/
#toggle::before{
position:absolute;
right:5px;
content:'menu';
color:#fff;
}
#toggle:hover::before{
position:absolute;
content:'menu';
color:#ff0000;
}
#toggle:hover::after{
position:absolute;
top:15px;
right:2px;
content:'-------';
color:#ff0000;
}
nav{
position:relative;
top:50px;
right:0;
width:100%;
height:auto;
margin:0;
padding:5px 0 10px 0;
/*background-color: #000;*/
background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6));
background: -webkit-linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6));
background: -o-linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6));  
background: -moz-linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6));
}   
nav ul{
flex-direction:column;
margin:0;  
padding:0;
text-align:center;
list-style-type:none;
}
nav ul li{
margin:0;
padding:0;
}
nav li a, nav li a:link, nav li a:visited, nav li a:active{  
display:block!important;
font-family: Lato, Arial;
font-size:1.2em;
font-weight:bold; 
margin:0 10px 0 0;
padding:0;
color:#fff!important; 
text-decoration:none;  
outline-style:none;  
}   
nav li a:hover,
nav li a.current, nav li a:link.current, nav li a:visited.current, nav li a:active.current{
display:block!important;
color:#ff0000!important; 
margin:0 10px 0 0;
padding:0;
}
.caption{
font-size:2em; 
margin:-50px auto 0 auto;
}
.textleft{
flex:100%;
}
.textright{
flex:100%;
padding:20px;
margin:auto;
}
footer{
margin:20px auto 0 auto;
}
.telmobiel{
display:inline-block;
}
.teldesktop{
display:none;
}
h2.login{
font-size:1em;
}
.backtop a{
position:fixed;
right:2%;
bottom:1%;
width:25px;
height:25px;
z-index:10;
background-image: url('../images/nav/backtopmob.png');
background-position: 0 0;
background-repeat: no-repeat;
text-decoration:none;  
outline-style:none; 
cursor:pointer;
}
.backtop a:hover{
background-image: url('../images/nav/backtophovermob.png');
background-position: 0 0;
background-repeat: no-repeat;
}
html, body{
height:100%;
}  
}

@media only screen and (min-width: 240px) and (max-width: 360px){
.footernav{
width:auto;
height:auto;
margin:0;
padding: 0;
}
.footernav ul{ 
display:flex;
flex-direction:column;
width:auto;
height:auto;
list-style-type:none;
margin:0;
padding:0;
}
.footernav ul li{
width:auto;
height:auto;
margin:0;
padding:0;
}                                         
.footernav ul li a, .footernav ul li a:link, .footernav ul li a:visited, .footernav ul li a:active{ 
font-family: Lato, Arial;
font-size:1em;
font-weight:bold; 
margin:0 ;
padding:0 0 5px 0;
color:#000;
text-decoration:none;  
outline-style:none; 
}   
.footernav ul li a:hover,
.footernav ul li a.current, .footernav ul li a:link.current, .footernav ul li a:visited.current, .footernav ul li a:active.current{  
color:#ff0000;  
font-weight:bold; 
margin:0;
padding:0 0 5px 0;
text-decoration:none; 
}  
}