html *{
margin:0;               
padding:0;
border:none;
}  
 body{     
color:#000; 
margin:0;
padding:0;
background-color:#fff; 
}
#toggle{
display:none;
}
.containernav{
position:fixed;
top:0;
left:0;
z-index:15;
width:100%;
height:55px;
margin:0;
background: -webkit-linear-gradient(rgba(243,243,243,0.9),rgba(243,243,243,0.9)); 
background: -o-linear-gradient(rgba(243,243,243,0.9),rgba(243,243,243,0.9));      
background: -moz-linear-gradient(rgba(243,243,243,0.9),rgba(243,243,243,0.9));     
background: linear-gradient(rgba(243,243,243,0.9),rgba(243,243,243,0.9)); 
}
nav{ 
width:auto;
margin:15px 0 0 0;
}
nav ul{ 
display:flex;
justify-content:space-around;
align-items:center;
width:auto;
height:auto;
list-style-type:none;
margin:0 auto;
padding:0;
}
nav ul li{
width:auto;
height:auto;
margin:0;
padding: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:1rem;
font-weight:normal;
font-style:normal;
text-transform: uppercase;
color:#000;
margin:0 ;
padding:3px 5px 17px 5px;
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:#c6144c;  
margin:0;
padding:3px 5px 17px 5px;
text-decoration:none;  
outline-style:none;  
border-bottom:4px solid #c6144c;
}
.container{
display:flex;
flex-flow:row wrap;
width:100%;
height:100vh;
margin:0 auto 0 auto;
padding:0;
}
.top{
display: flex;
flex-flow:row wrap;
justify-content:center;
align-items: center;/* zorgt voor juiste schaling picture bij chrome */
width:100%;
max-width:90rem;
height:auto;
font-family:Lato;
font-size:2.5rem;
font-weight:bold;
text-align:center;
color:#646464;
margin:80px auto 20px auto;
}
header{
display:flex;
flex-flow:row wrap;
align-items: center;/* zorgt voor juiste schaling picture bij chrome */
width:100%;
max-width:90rem;
height:auto;
margin:0 auto 0 auto;
}
.headerleft{
display:flex;
flex-flow:row wrap;
justify-content:center;
width:30%;
height:100%;
color:#c6144c;
margin:0 auto 0 auto;
padding:0;
}
.headerlefttop{
display:flex;
align-items: center;/* voor IE 11*/
width:100%;
height:50%;
margin:auto;
}
.imglogo{
width:100%;
max-width:250px;
height:auto;
margin:auto;
}
.headerleftbottom{
display:flex;
justify-content:space-around;
align-items:center;
width:100%;
height:50%;
font-family:Lato;
font-size:2rem;
font-weight:bold;
color:#c6144c;
margin:auto;
}
.headerright{
width: 65%;
max-width:850px;
margin:0 auto 0 auto;
padding:0;
}
.picheader{
display:flex;
justify-content:center;
width:100%;
max-width:850px;
margin:5px auto auto auto;
-webkit-border-radius:50px 0 50px 0;
-moz-border-radius:50px 0 50px 0;
border-radius:50px 0 50px 0;
}
main{
width:100%;
max-width:90rem;
height:auto;
margin:20px auto 20px auto;
padding:0;
}
.text{
width:90%;
font-family:Lato,Arial;
font-size:1.2rem;
color:#000;
line-height:25px;
margin:0 auto;
padding:20px 0 20px 0;
} 
.koptext{
width:80%;
font-family:Lato,Arial;
font-size:1.2em;
font-weight:normal;
font-style:italic;
line-height:25px;
color:#000;
margin:0 auto;
padding:20px;
background:#eee;
border-left:3px solid #c6144c;
}
.textintext{
width:auto;
color:#000;
margin:20px auto auto auto;
padding:10px 5px 20px 5px;
background:#eee;
} 
.kopintext{
font-family:Lato, Arial;
font-size:1.2rem;
font-weight:bold;
color:#000;
margin:10px 0 10px 0;
padding:0 0 0 20px;
}
p{
line-height:10px;
}
.onecontact{
display:inline-block;
background-image: url(../images/picto/e.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 25px;
}
.twocontact{
display:inline-block;
background-image: url(../images/picto/t.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 15px;
}
.threecontact{
display:inline-block;
background-image: url(../images/picto/pv.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 25px;
}
a.adrescontact, a:link.adrescontact, a:visited.adrescontact, a:active.adrescontact{  
font-family:Lato,Arial;
font-size:1.2rem;            
color:#000; 
text-decoration:none;
outline-style:none;
margin:0;
}          
 a:hover.adrescontact{
color:#c6144c;
text-decoration:none;
outline-style:none;
}
/* news */
.news{
width:100%;
display:flex;
flex-flow:row wrap;
align-items:center;
}
.leftnews,.rightnews{
width:50%;
align-self:center;
margin:auto;
padding:10px 0 10px 0;
}
img.picnews_left{
width:100%;
max-width:350px;
height:auto;
margin:auto;
-webkit-border-radius:50px 0 50px 0;
-moz-border-radius:50px 0 50px 0;
border-radius:50px 0 50px 0;

-moz-animation: moveleft 3s; /* Firefox */
-ms-animation: moveleft 3s; /* Internet Explorer */
-o-animation: moveleft 3s; /* Opera */
-webkit-animation: moveleft 3s;  /*Safari and Chrome */
animation: moveleft 3s;
}
 @keyframes moveleft {
from { 
  -webkit-transform: translate(-15em,-10em);
    -moz-transform: translate(-15em,-10em);
    -o-transform: translate(-15em,-10em);
    -ms-transform: translate(-15em,-10em);
    transform: translate(-15em,-10em);
}
to { 
  -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
}
}

@-moz-keyframes moveleft {
from { 
  -webkit-transform: translate(-15em,-10em);
    -moz-transform: translate(-15em,-10em);
    -o-transform: translate(-15em,-10em);
    -ms-transform: translate(-15em,-10em);
    transform: translate(-15em,-10em);
}
to { 
  -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
}
}

@-webkit-keyframes moveleft {
from { 
  -webkit-transform: translate(-15em,-10em);
    -moz-transform: translate(-15em,-10em);
    -o-transform: translate(-15em,-10em);
    -ms-transform: translate(-15em,-10em);
    transform: translate(-15em,-10em);
}
to { 
  -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
}
}

@-ms-keyframes moveleft {
from { 
  -webkit-transform: translate(-15em,-10em);
    -moz-transform: translate(-15em,-10em);
    -o-transform: translate(-15em,-10em);
    -ms-transform: translate(-15em,-10em);
    transform: translate(-15em,-10em);
}
to { 
  -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
}
}

@-o-keyframes moveleft {
from { 
  -webkit-transform: translate(-15em,-10em);
    -moz-transform: translate(-15em,-10em);
    -o-transform: translate(-15em,-10em);
    -ms-transform: translate(-15em,-10em);
    transform: translate(-15em,-10em);
}
to { 
  -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
}
}

img.picnews_right{
width:100%;
max-width:350px;
height:auto;
margin:auto;
-webkit-border-radius:50px 0 50px 0;
-moz-border-radius:50px 0 50px 0;
border-radius:50px 0 50px 0;

-moz-animation: moveright 3s; /* Firefox */
-ms-animation: moveright 3s; /* Internet Explorer */
-o-animation: moveright 3s; /* Opera */
-webkit-animation: moveright 3s;  /*Safari and Chrome */
animation: moveright 3s;
}
 @keyframes moveright {
from { 
  -webkit-transform: translate(15em,-10em);
    -moz-transform: translate(15em,-10em);
    -o-transform: translate(15em,-10em);
    -ms-transform: translate(15em,-10em);
    transform: translate(15em,-10em);
}
to { 
  -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
}
}

@-moz-keyframes moveright {
from { 
  -webkit-transform: translate(15em,-10em);
    -moz-transform: translate(15em,-10em);
    -o-transform: translate(15em,-10em);
    -ms-transform: translate(15em,-10em);
    transform: translate(15em,-10em);
}
to { 
  -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
}
}

@-webkit-keyframes moveright {
from { 
  -webkit-transform: translate(15em,-10em);
    -moz-transform: translate(15em,-10em);
    -o-transform: translate(15em,-10em);
    -ms-transform: translate(15em,-10em);
    transform: translate(15em,-10em);
}
to { 
  -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
}
}

@-ms-keyframes moveright {
from { 
  -webkit-transform: translate(15em,-10em);
    -moz-transform: translate(15em,-10em);
    -o-transform: translate(15em,-10em);
    -ms-transform: translate(15em,-10em);
    transform: translate(15em,-10em);
}
to { 
  -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
}
}

@-o-keyframes moveright {
from { 
  -webkit-transform: translate(15em,-10em);
    -moz-transform: translate(15em,-10em);
    -o-transform: translate(15em,-10em);
    -ms-transform: translate(15em,-10em);
    transform: translate(15em,-10em);
}
to { 
  -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
}
}	
	
.imgzoombordernews{
width:100%;
max-width:400px;
height:100%;
margin:auto;
overflow:hidden;
-moz-border-radius:50px 0 50px 0;
border-radius:50px 0 50px 0;
}
.overlaynews{
position:relative;
width:100%;
max-width:350px;
height:auto;
z-index:2;
margin:0;
padding:0;
}
.titlenews{
display:flex;
justify-content:center;
align-items:center;
position:absolute;
top:0;
left:0;
right:0;
z-index:5;
width:auto;
height:98%;
font-family:Lato;
font-size:1rem;
font-weight:bold;
color:#fff;
margin: 0 auto;
text-shadow:2px 2px 5px #000;
} 
.titlenews:hover{
width:100%;
max-width:350px;
opacity: 0.8; 
font-size:1rem;
color:#000;
background-color:#fff; 
-moz-border-radius:50px 0 50px 0;
border-radius:50px 0 50px 0;
cursor:pointer;
}
h2.newskop{ 
font-family:Lato, Arial;
font-size:1rem;
font-weight:bold;
text-align:center;
color:#000;
margin:10px 0 5px 0;
}
.textnews{
flex:0 1 90%;
height:auto;
font-family:Lato, Arial;
font-size:1rem;
line-height:25px;
text-align:center;
color:#000;
margin:auto;
padding:10px;
}
.linksnews{
width:100%;
height:auto;
text-align:center;
margin:10px auto auto auto;
}
a.kliknews, a:link.kliknews, a:visited.kliknews, a:active.kliknews{
display:inline-block;
width:auto;
font-family:Lato,Arial;
font-size:0.8rem;      
font-weight:bold;  
color:#fff;
text-transform: uppercase;
margin: 0 auto;
padding:5px 25px 5px 25px;
text-decoration:none;
outline-style:none;
background-color: #c6144c;
-webkit-border-radius:0 20px 0 20px;
-moz-border-radius:0 20px 0 20px;
border-radius:0 20px 0 20px;
}
a:hover.kliknews{
color:#fff;
margin: 0 auto;
padding:5px 25px 5px 25px;
background-color: #646464;
}
a:hover.kliknews::after{
content:'>';
position:absolute;
margin:0 0 0 10px;
}
/* end news */

.mainunder{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
align-items:center;
width:100%;
font-family:Lato, Arial;
font-size:1.2rem;
font-weight:bold;
margin:20px auto auto auto;
}
img.imglogo{
width:100%;
max-width:200px;
}
a.in, a:link.in, a:visited.in, a:active.in{
display:inline-block;
font-family:Lato,Arial;
font-size:1em;
padding:0;
margin:0;
color:#000;
text-decoration:undeline;
outline-style:underline;
}
a:hover.in{
margin:0;
color:#c6124c;
text-decoration:none;
outline-style:none;
}
footer{
/*display:flex;
flex-flow:row wrap;
justify-content:space-around;
align-content:center;*/
width:100%;
height:auto;
margin:auto auto 0 auto;
padding:20px 0 20px 0;
background-color: #c6144c;
}
.footerinner{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
align-content:center;
width:100%;
max-width:90rem;
height:auto;
margin:0 auto 0 auto;
}
.footernav{ 
align-self:center;
width:auto;
height:auto;
margin: 0;   
padding:0 ;
list-style-type:none;
}
.footernav  li{
display:block;
width:auto;
height:auto;
margin:0 0 5px 0;
padding:0;  
}   
.footernav li a, .footernav li a:link, .footernav li a:visited, .footernav li a:active{
font-family:Lato,Arial;
font-size:1rem;
font-weight:normal;
font-style:normal;
text-transform: uppercase;
color:#fff;
margin:0;
padding:0 5px 0 5px;
text-decoration:none;  
outline-style:none; 
border-left: 4px double transparent;
}
.footernav li a:hover,
.footernav li a.current, .footernav li a:link.current, .footernav li a:visited.current, .footernav li a:active.current{  
color:#000;  
margin:0;
padding:0 5px 0 5px;
text-decoration:none;  
outline-style:none;  
border-left: 4px double #000;  
}
.footerlinks{ 
align-self:center;
width:auto;
height:auto;
margin: 0;   
padding:0 ;
list-style-type:none;
}
.footerlinks  li{
display:block;
width:auto;
height:auto;
margin:0 0 5px 0;
padding:0;  
} 
.footerlinks li a, .footerlinks li a:link, .footerlinks li a:visited, .footerlinks li a:active{
font-family:Lato,Arial;
font-size:1rem;
font-weight:normal;
font-style:normal;
text-transform: uppercase;
color:#fff;
margin:0;
padding:0 5px 0 5px;
text-decoration:none;  
outline-style:none; 
}
.footerlinks li a:hover{  
color:#000;  
margin:0;
padding:0 5px 0 5px;
text-decoration:none;  
outline-style:none;   
}
.footerbox{
align-self:flex-start;
width:auto;
height:auto;
margin: 0;   
padding:10px 0 10px 0;
list-style-type:none;
}  
.kopfooterbox{
display:flex;
justify-content:center;
font-family:Lato, Arial;
font-size:1.2rem;
font-weight:bold;
text-transform: uppercase;
text-align:center;
line-height:40px;
color:#fff;
margin:0 auto 0 auto;
padding:0;
}
ul.adresbox{
display:flex;
flex-flow:column;
justify-content:flex-start;
font-family:Lato,Arial;
font-size:1rem;
color:#fff;
margin:0 auto 0 auto;
padding:0;   
list-style-type:none;                                  
}
a.adres, a:link.adres, a:visited.adres, a:active.adres{  
font-family:Lato,Arial;
font-size:1rem;            
color:#fff; 
text-decoration:none;
outline-style:none;
margin:0;
}          
a:hover.adres{
color:#000;
text-decoration:none;
outline-style:none;
}
li.one{
background-image: url(../images/picto/wit/t.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 20px;
}
li.one:hover{
background-image: url(../images/picto/t.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 20px;
}
li.two{
background-image: url(../images/picto/wit/e.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 25px;
}
li.two:hover{
background-image: url(../images/picto/e.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 25px;
}
li.three{
background-image: url(../images/picto/wit/i.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 25px;
}
li.three:hover{
background-image: url(../images/picto/i.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 25px;
}
li.four{
background-image: url(../images/picto/wit/pv.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 25px;
}
li.four:hover{
background-image: url(../images/picto/pv.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 25px;
}
ul.listtext{
list-style: none;
margin:10px 0 0 10px;
padding:0;
}
li.list{
background-image: url(../images/linelist.png);
background-position: 0 15px;
background-repeat: no-repeat;
padding:0 0 0 25px;
}
ul.listtextsmall{
list-style: none;
margin:10px 0 0 10px;
padding:0;
}
li.listsmall{
background-image: url(../images/linelist_small.png);
background-position: 0 15px;
background-repeat: no-repeat;
padding:0 0 0 15px;
}
ul.pdf{
flex:0 1 auto;
margin:0;
padding:10px 0 10px 0;
list-style-type:none;
}
li.pdf{
margin:0 0 10px 0;
}
a.inpdf, a:link.inpdf, a:visited.inpdf, a:active.inpdf{
color:#000;
margin:0;
padding:0 0 5px 30px;
background-image: url(../images/picto/pdf.jpg);
background-position: 0 0;
background-repeat: no-repeat;
text-decoration:none;  
outline-style:none;  
}
a.inword, a:link.inword, a:visited.inword, a:active.inword{
color:#000;
margin:0;
padding:0 0 5px 30px;
background-image: url(../images/picto/word.jpg);
background-position: 0 0;
background-repeat: no-repeat;
text-decoration:none;  
outline-style:none;  
}
a:hover.inpdf, a:hover.inword{
color:#ca0015;
margin:0;
padding:0 0 5px 30px;
text-decoration:none;  
outline-style:none;
} 
a.inpdf::after,a.inword::after{
position:absolute;
content:'>';
margin:3px 0 0 3px;
}
a.inpdf:hover::after, a.inword:hover::after{
position:absolute;
content:'>>';
margin:3px 0 0 3px;
}
.telmobiel{
display:none;
}
.teldesktop{
display:inline-block;
}
.tik,.tiktext{
display:none;
}
img.centered{
width:100%;
height:auto;
margin:5px auto 10px auto;
padding: 0;
}
img.alignright{
margin:10px 5px 10px 5px;
padding: 0;
}
img.alignleft{
margin:10px 5px 5px 5px;
padding: 0;
}
.alignright{
float:right;
}
.alignleft{
float:left;
}   
.imgbox{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
width:100%;
margin:0 auto;
padding:10px 0 0 0;
}
img.fotoalbum{
flex:auto;
width:100%;
max-width:200px;
margin:5px 5px 10px 5px;
} 
img.imgtext{
flex:auto;
width:100%;
max-width:250px;
margin:5px 10px 10px 0;
} 
.klikcentered{
width:95%;
font-family:Lato,Arial;
font-size:0.9rem;
font-weight:bold;
font-style:italic;
text-align:center;
color:#000;
padding:0;
margin:10px auto 0 auto;
}
.hiddencontainer{
display:none;
}
.backtop a{
position:fixed;
right:1%;
bottom:1%;
width:50px;
height:50px;
z-index:20;
background-image: url('../images/backtop.png');
background-position: 0 0;
background-repeat: repeat;
text-decoration:none;  
outline-style:none; 
cursor:pointer;
}
.iframebox{
display:flex;
width:auto;
min-height:550px;
margin:0 auto 0 auto;
}
iframe{
margin:0 auto 0 auto;
}
.responsive-video {
position: relative;
padding-bottom: 55%;
overflow: hidden;
}
.responsive-video iframe, .responsive-video object, .responsive-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hotspots {
position: relative;
}
.hotspots img {
max-width: 100%;
height: auto;
display: block;
}
/*.hotspot {
position: absolute;
width: 120px;
height: 100px;
padding-top: 6px;
text-align: center;
text-decoration: none;
font-family:Lato,Arial;
font-size:1rem;
font-weight:bold;
color: #fff;
}
.hotspot::after {
content: "";
width: 20px;
height: 20px;
background-color: #662383;
display: block;
margin: -19px auto 0 3px;
border:1px solid #fff;
}
#hs-1{
top: 38%;
left: 35%;
}
#hs-2{
top: 38%;
left: 48%;
}*/
html, body{
height:100vh;
} 
@media only screen and (min-width: 1365px) and (max-width: 2560px){
.hotspot {
position: absolute;
width: 165px;
height: 115px;
padding-top: 6px;
text-align: center;
text-decoration: none;
font-family:Lato,Arial;
font-size:1rem;
font-weight:bold;
color: #fff;
}
#hs-1{
top: 40%;
left: 23%;
}
#hs-2{
top: 40%;
left: 48%;
}
}
@media only screen and (min-width: 1152px) and (max-width: 1360px){
.hotspot {
position: absolute;
width: 160px;
height: 115px;
padding-top: 6px;
text-align: center;
text-decoration: none;
font-family:Lato,Arial;
font-size:1rem;
font-weight:bold;
color: #fff;
}
#hs-1{
top: 40%;
left: 23%;
}
#hs-2{
top: 40%;
left: 48%;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1150px){
.hotspot {
position: absolute;
width: 135px;
height: 100px;
padding-top: 6px;
text-align: center;
text-decoration: none;
font-family:Lato,Arial;
font-size:1rem;
font-weight:bold;
color: #fff;
}
#hs-1{
top: 39%;
left: 23%;
}
#hs-2{
top: 39%;
left: 48%;
}
}
@media only screen and (min-width: 900px) and (max-width: 1025px){
.hotspot {
position: absolute;
width: 125px;
height: 85px;
padding-top: 6px;
text-align: center;
text-decoration: none;
font-family:Lato,Arial;
font-size:1rem;
font-weight:bold;
color: #fff;
}
#hs-1{
top: 39%;
left: 23%;
}
#hs-2{
top: 39%;
left: 48%;
}
}
@media only screen and (min-width: 750px) and (max-width: 900px){
.hotspot {
position: absolute;
width: 115px;
height: 85px;
padding-top: 6px;
text-align: center;
text-decoration: none;
font-family:Lato,Arial;
font-size:1rem;
font-weight:bold;
color: #fff;
}
#hs-1{
top: 38%;
left: 22%;
}
#hs-2{
top: 38%;
left: 47%;
}
}
@media only screen and (min-width: 640px) and (max-width: 750px){
.hotspot {
position: absolute;
width: 100px;
height: 70px;
padding-top: 6px;
text-align: center;
text-decoration: none;
font-family:Lato,Arial;
font-size:1rem;
font-weight:bold;
color: #fff;
}
#hs-1{
top: 38%;
left: 22%;
}
#hs-2{
top: 38%;
left: 47%;
}
}
@media only screen and (min-width: 645px) and (max-width: 1024px){
.top{
font-size:1.5rem;
margin:60px auto 20px auto;
}
header{
margin:0;
}
.picheader{
width:100%;
margin:0;
}
}
@media only screen and (min-width: 240px) and (max-width: 640px){
nav{
display:none;
}
.containernav{
position:absolute;
top:0;
left:0;
z-index:20;
width:100%;
height:auto;
margin:0!important;
background:none;
}
#toggle{
display:inline-block;
position:absolute;
right:5px;
top:5px;
z-index:20;
width:80px;
height:30px;
font-family:Lato, Arial;
font-size:1rem;
font-weight:bold;
text-indent:2px;
color:#000;
margin:0;
padding:0; 
cursor: pointer; 
}
#toggle:hover{
color:#ff0000;
}
#toggle::after{
position:absolute;
top:0;
right:6px;
content: 'menu';
color:#000;
}
#toggle:hover::after{
position:absolute;
top:0;
right:6px;
content: 'menu';
color:#ff0000;
}
nav{
position:absolute;
top:0;
right:0;
width:100%;
height:auto;
margin:0;
padding:0 0 10px 0;
background: -webkit-linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.9)); 
background: -o-linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.9));   
background: -moz-linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.9));    
background: linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.9)); 
}
nav ul{
flex-direction:column;
margin:0;  
padding:5px 0 5px 0; 
text-align:center;
list-style-type:none;
}
nav ul li{
margin: 0;
padding:0 0 5px 0!important;  
}  
nav ul li a, nav ul li a:link, nav ul li a:visited, nav ul li a:active{
display:block!important;
font-family:Lato,Arial;
font-size:1em !important; 
font-weight:normal;
text-align:center;
color:#000; 
margin:0;
padding:5px!important;   
text-decoration:none !important;  
outline-style:none; 
}  
nav ul li a:hover,
nav ul li a.current, nav li a:link.current, nav li a:visited.current, nav li a:active.current{    
display:block!important;
color:#66388a;  
font-weight:normal; 
margin:0;
padding:5px !important;   
text-decoration:underline !important;  
border-bottom:none!important; 
}
.container{
margin:0 auto 0 auto;
}
.top{
font-size:1.2rem;
margin:40px auto 20px auto;
}
header{
display:flex;
flex-flow:row wrap;
align-items: center;/* zorgt voor juiste schaling picture bij chrome */
width:100%;
height:auto;
margin:0 auto 0 auto;
}
.headerleft{
display:flex;
flex-flow:row wrap;
justify-content:center;
width:100%;
height:auto;
color:#c6144c;
margin:0 auto 0 auto;
padding:0;
}
.headerlefttop{
display:flex;
width:100%;
height:50%;
margin:auto auto 20px auto;
}
.imglogo{
width:100%;
max-width:250px;
height:auto;
margin:auto;
}
.headerleftbottom{
font-size:1.5rem;
}
.picheader{
width:100%;
max-width:850px;
margin:5px auto auto auto;
}
.headerright{
width:95%;
margin:0 auto 0 auto;
padding:0;
}
.text,.koptext{
font-size:1rem;
} 
.leftnews,.rightnews{
width:100%;
align-self:center;
margin:auto 0 10px auto;
}
h2.newskop{ 
font-family:Lato, Arial;
font-size:1rem;
font-weight:bold;
text-align:center;
color:#000;
margin:0 0 5px 0;
}
.titlenews{
display:flex;
justify-content:center;
align-items:center;
position:absolute;
top:0;
left:0;
right:0;
z-index:5;
width:auto;
height:98%;
font-family:Lato;
font-size:0.9rem;
font-weight:bold;
color:#fff;
margin: 0 auto;
text-shadow:2px 2px 5px #000;
} 
.footernav{ 
display:flex;
flex-flow:column nowrap;
width:auto;
width:0 auto 0 auto;
} 
.footernav li a, .footernav li a:link, .footernav li a:visited, .footernav li a:active{
font-size:0.8rem;
}
.footerbox{
display:flex;
flex-flow:row-wrap;
justify-content:space-around;
width:auto;
margin:0 auto 0 auto;
}
.footerlinks li a, .footerlinks li a:link, .footerlinks li a:visited, .footerlinks li a:active{
font-size:0.8rem;
}

.kopfooterbox{
font-size:1.1rem;
}
ul.adresbox{
justify-content:center;    
font-size:0.8rem;                           
}
img.fotoalbum{
flex:auto;
width:100%;
max-width:150px;
margin:5px 5px 10px 5px;
}   
img.imgtext{
flex:auto;
width:100%;
max-width:350px;
margin:5px auto 10px auto;
} 
.telmobiel{
display:block;
}
.teldesktop{
display:none;
}
.tik{
display:block;
font-family:Lato,Arial;
font-size:0.8rem;
font-style:italic;
color:#fff;
}
.tiktext{
display:block;
font-family:Lato,Arial;
font-size:0.8rem;
font-style:italic;
color:#000;
}
.backtop a{
position:fixed;
right:1%;
bottom:1%;
z-index:20;
width:25px;
height:25px;
background-image: url('../images/backtopmob.png');
background-position: 0 0;
background-repeat: repeat;
text-decoration:none;  
outline-style:none; 
cursor:pointer;
}
.hotspot {
position: absolute;
width: 90px;
height: 65px;
padding-top: 6px;
text-align: center;
text-decoration: none;
font-family:Lato,Arial;
font-size:1rem;
font-weight:bold;
color: #fff;
}
#hs-1{
top: 40%;
left: 23%;
}
#hs-2{
top: 40%;
left: 48%;
}
}
@media only screen and (max-width: 645px) and (orientation:portrait){
.top{
font-size:1rem;
margin:40px auto 20px auto;
}
img.fotoalbum{
flex:auto;
width:100%;
max-width:125px;
margin:5px 5px 10px 5px;
}   
.hotspot {
position: absolute;
width: 65px;
height: 45px;
padding-top: 6px;
text-align: center;
text-decoration: none;
font-family:Lato,Arial;
font-size:1rem;
font-weight:bold;
color: #fff;
}
#hs-1{
top: 40%;
left: 23%;
}
#hs-2{
top: 40%;
left: 48%;
}
}