@font-face {
font-family: 'AmaranthRegular';
src: url('../font/Amaranth-webfont.eot');
src: url('../font/Amaranth-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/Amaranth-webfont.woff') format('woff'),
url('../font/Amaranth-webfont.ttf') format('truetype'),
url('../font/Amaranth-webfont.svg#LucidaHandwritingItalic') format('svg');
font-weight: normal;
font-style: normal;
}
/*font-family: 'Albert Sans', sans-serif;
font-family: 'Carlito', sans-serif;
font-family: 'Open Sans', sans-serif;
*/
html *{
margin:0;               
padding:0;
border:none;
}  
body{   
background-color: #d8ecf1;
font-size:14px;
}  
.page{
display:flex;
flex-direction:column;
width:100%;
height:100vh;
margin:0 auto;
}
.container {
display:flex;
flex-direction:column;
width:100%;
padding:0 0 20px 0;
margin:0 auto;
width:100%;
height:auto;
padding:0;
margin:auto auto 20px auto;
}
.toptop{
display:flex;
flex-flow:row wrap;
justify-content:center;
align-items:center;
width:100%;
height:auto;
margin:40px auto auto auto;
}
.toptopname{
/*font-family: 'Open Sans', sans-serif,'Albert Sans', sans-serif,'Carlito', sans-serif;*/
width:100%;
height:auto;
font-family:'Carlito', sans-serif, AmaranthRegular,Arial;
font-size:2rem;  
font-weight:700;
color:#223a7d;  
text-align:center;
margin:0 auto;
}
.logocontainer{
width:100%;
max-width:400px;
height:auto;
padding:10px;
}
img.logo{
width:100%;
max-width:400px;
}
.kerken{
display:flex;
flex:row;
width:100%;
max-width:500px;
height:100%;
max-height:150px;
opacity:0.5;
margin:auto auto auto 0;
}
.imgkerken{
width:100%;
height:auto;
}
.containernav{
position: -webkit-sticky; /* Safari */
position:sticky;
top:0;
left:0;
z-index:10;
display: flex;
flex-flow:row wrap;
justify-content:center;
width:100%;
height:60px;
background-color: #223a7d;
margin:0 auto;
}
nav{
display:flex; 
align-items: flex-end; 
}
nav ul{ 
display:flex; 
list-style-type:none;
}
nav ul li{
flex: auto;
padding:0 5px 0 5px; 
}    
nav ul li a, nav ul li a:link, nav ul li a:visited, nav ul li a:active{
height:30px;
font-family:'Albert Sans', sans-serif, AmaranthRegular, Arial;
font-size:1.3rem;
color:#fff;
margin:0;
padding:0 5px 0 5px;
text-decoration:none;  
outline-style:none;  
border-bottom:2px solid transparent;
}
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{    
color:#fab500;
margin:0;
padding:0 5px 0 5px;
text-decoration:none;  
border-bottom:2px solid #fab500;
/*background: -webkit-linear-gradient(rgba(0,68,123,1),rgba(0,68,123,1)); 
background: -o-linear-gradient(rgba(0,68,123,1),rgba(0,68,123,1));    
background: -moz-linear-gradient(rgba(0,68,123,1),rgba(0,68,123,1));      
background: linear-gradient(rgba(0,68,123,1),rgba(0,68,123,1)); */
}
/*nav ul li:nth-child(1){
margin:-30px 0 0 0;
}
nav ul li:nth-child(2){
margin:-15px 0 0 0;
}*/
.top{
width:100%;
height:150px;
margin:0 auto;
}
.topbottomname{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
font-family:'Carlito', sans-serif,AmaranthRegular,Arial;
font-size:3rem;  
font-weight:700;
color:#223a7d;  
text-align:center;
margin:0 auto;
}

main{
display:flex;
flex-flow:row wrap;
justify-content:center;
align-items:center;
width:100%;
max-width:75rem;
height:auto;
margin:0 auto;
padding:0 0 40px 0;
background: -webkit-linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.4)); 
background: -o-linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.4));    
background: -moz-linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.4));      
background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.4)); 
border-radius: 0 0 10% 0;
}
.bgheader{
width:100%;
height:auto;
background-color: #84bacb;
}
header{
display:flex;
justify-content:center;
align-items:center;
position: relative;
width:100%;
max-width:75rem;
height:auto;
margin:20px auto 20px auto;
box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}
.titleheader{
position: absolute;
bottom: 0;
left: 0;
font-family:'Carlito', sans-serif, Lato,Arial;
font-size:1.3rem;
font-weight:700;
text-transform: uppercase;
color:#fff;
padding:5px 25px 0 15px;
background-color: #00447b;
border-radius:0 50px 0 0;
-webkit-animation: fadeInLeft 3s; 
-moz-animation: fadeInLeft 3s; 
-ms-animation: fadeInLeft 3s; 
-o-animation: fadeInLeft 3s; 
animation: fadeInLeft 3s;
}

@-webkit-keyframes fadeInLeft {
  0% {    
    opacity: 0.5;
    -webkit-transform: translate3d(-100%, -40px, 0);
    transform: translate3d(-100%, -40px, 0);
  }
25%{   
	background-color: #223a7d;
}
50%{
   left: 75px;
	background-color: #6cad2e;
}
75%{   
	background-color: #c1252d;
}
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0.5;
    -webkit-transform: translate3d(-100%, -40px, 0);
    transform: translate3d(-100%, -40px, 0);
  }
25%{   
	background-color: #223a7d;fab500
}
50%{
   left: 75px;
	background-color: #6cad2e;
}
75%{
	background-color: #c1252d;
}
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.imgheader{
width:100%;
height:auto;
border-radius: 0 50px 0 0;
}
.left,.right{
display:flex;
flex-flow:column wrap;
justify-content:center;
width:50%;
font-family:'Albert Sans', sans-serif,Lato,Arial;
font-size:1rem;
font-weight:normal;
margin:10px auto auto auto;
/*margin:0 auto 10px auto; even lang de boxen*/
padding:10px 0 10px 0;
}
.done{
display:flex;
flex-flow:row wrap;
position:relative;
margin:0 auto 10px auto;
opacity:0.4;
}
.textdone{
position:absolute;
top: 50%;
width: 100%;
z-index:5;
font-family:'Carlito', sans-serif, Lato,Arial;
font-size:4.5rem;
font-weight:700;
color:#00447b;
text-align: center;
text-transform: uppercase;
rotate: -15deg;
}
.text_thema{
width:95%;
height:auto;
font-family:'Albert Sans', sans-serif,Lato,Arial;
font-size:1rem;
font-weight:normal;
text-align:center;
color:#000;
margin:0 auto auto 10px;
padding:5px;
}
.links{
/*position:relative;*/
height:auto;
margin:auto auto 0 auto;
}
a.klik, a:link.klik, a:visited.klik, a:active.klik{
display:inline-block;
width:auto;
font-family:'Open Sans', sans-serif,Lato,Arial;
font-size:0.8rem;      
font-weight:bold;  
color:#fff;
margin:20px auto 0 auto;
padding:5px 30px 5px 30px;
text-decoration:none;
outline-style:none;
background-color: #223a7d;
}
a:hover.klik{
color:#223a7d;
margin:20px auto 0 auto;
padding:5px 30px 5px 30px;
background-color: #84bacb;
}
a:hover.klik::after{
content:'>';
position:absolute;
color:#223a7d;
margin:0 0 0 10px;
}
img.pic_thema{
display:flex;
width:100%;
max-width:60%;
height:auto;
margin:0 auto;
-moz-animation: scale 3s; /* Firefox */
-ms-animation: scale 3s; /* Internet Explorer */
-o-animation: scale 3s; /* Opera */
-webkit-animation: scale 3s;  /*Safari and Chrome */
animation: scale 3s;
/*box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;*/
}

 @keyframes scale {
from { 
  -webkit-transform: scale(0.8,0.8);
  -moz-transform: scale(0.8,0.8);
  -o-transform: scale(0.8,0.8);
  -ms-transform: scale(0.8,0.8);
    transform: scale(0.8,0.8);
}
to { 
  -webkit-transform: scale(1,1);
  -moz-transform: scale(1,1);
  -o-transform: scale(1,1);
  -ms-transform: scale(1,1);
    transform: scale(1,1);
}
}

@-webkit-keyframes scale {
from { 
  -webkit-transform: scale(0.8,0.8);
  -moz-transform: scale(0.8,0.8);
  -o-transform: scale(0.8,0.8);
  -ms-transform: scale(0.8,0.8);
    transform: scale(0.8,0.8);
}
to { 
  -webkit-transform: scale(1,1);
  -moz-transform: scale(1,1);
  -o-transform: scale(1,1);
  -ms-transform: scale(1,1);
    transform: scale(1,1);
}
}
.overlaythema{
position:relative;
width:100%;
max-width:100%;
height:auto;
z-index:2;
margin:0;
padding:0;
}
.titlenews{
display:flex;
justify-content:center;
align-items:center;
position:absolute;
left:0;
right:0;
bottom:0;
z-index:5;
width:60%;
height:100%;
font-family:'Carlito', sans-serif,Lato, Arial;
font-weight:600;
font-size:1rem;
color:#fff;
margin: 0 auto;
opacity:0;
text-shadow:1px 1px 2px #000;
}      
.titlenews:hover{
opacity: 1; 
font-size:1rem;
color:#fff;
/*background-color: transparent;*/
background: -webkit-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)); 
background: -o-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));     
background: -moz-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));     
background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)); 

-webkit-animation: fadenieuws 1s; /* Safari and Chrome */
-moz-animation: fadenieuws 1s; /* Firefox */
-ms-animation: fadenieuws 1s; /* Internet Explorer */
-o-animation: fadenieuws 1s; /* Opera */
animation: fadenieuws 1s;
}      
 @keyframes fadenieuws {
from { 
opacity: 0.3; 
}
to { 
opacity: 1; 
}
}


@-moz-keyframes fadenieuws {
from { 
opacity: 0.3;
}
to   { 
opacity: 1;  
}
}


@-webkit-keyframes fadenieuws {
from { 
opacity: 0.3;
}
to   { 
opacity: 1; 
}
}

@-ms-keyframes fadenieuws {
from { 
opacity: 0.3; 
}
to   { 
opacity: 1; 
}
}


@-o-keyframes fadenieuws {
from { 
opacity: 0.3;
}
to   { 
opacity: 1; 
}
} 
h2.titlekop{ 
font-family:'Carlito', sans-serif,Lato, Arial;
font-size:1.2rem;
font-weight:700;
color:#000;
margin:0 0 5px 0;
padding:5px 5px 5px 0;
}
h2.koppic{ 
font-family:'Albert Sans', sans-serif,Lato, Arial;
font-size:0.9rem;
font-weight:700;
font-style:italic;
text-align:center;
color:#000;
margin:0 0 5px 0;
padding:5px 5px 5px 0;
}
.text{
flex:70%;
font-family:'Albert Sans', sans-serif,Lato,Arial;
font-size:1rem;
font-weight:normal;
color:#000;
margin:0;
padding:20px;
}
footer{
width:100%;
min-height:200px;
margin:auto auto 0 auto;
padding: 0;
background-color: #223a7d;
}
.footerinner{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
align-content:center;
width:100%;
min-height:200px;
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:'Albert sans', sans-serif,Lato, Arial;
font-size:1rem;
font-weight:normal;
font-style:normal;
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:#fab500;  
margin:0;
padding:0 5px 0 5px;
text-decoration:none;  
outline-style:none;  
border-left: 4px double #fab500;  
}
.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:'Carlito', sans-serif,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:'Carlito', sans-serif,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:'Albert sans', sans-serif,Lato, Arial;
font-size:1rem;            
color:#fff; 
text-decoration:none;
outline-style:none;
margin:0;
padding:0;
}          
a:hover.adres{
color:#fab500;
text-decoration:none;
outline-style:none;
padding:0;
}
li.oneadres{
background-image: url(../images/picto/wit/e.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 25px;
}
li.twoadres{
background-image: url(../images/picto/wit/i.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 25px;
}
.backtop a{
position:fixed;
right:1%;
bottom:1%;
z-index:50;
width:50px;
height:50px;
background-image: url('../images/backtop.png');
background-position: 0 0;
background-repeat: repeat;
text-decoration:none;  
outline-style:none; 
cursor:pointer;
}  
ul.tekst, ol.tekst{
list-style-type:none;
margin:0 0 0 10px;
}
li.tk{
opacity:0.55;
}
h3.title{
font-family:'Carlito', sans-serifLato,Arial;
font-weight:bold;
font-size:1.5em;
color:#000;
margin:0 0 10px 0;
}
h2{
font-family:'Carlito', sans-serif,Lato, Arial;
font-weight:bold;
font-size:1em;
color:#000;
margin:30px 0 10px 0;
}
h2.historie{
dsplay:block;
font-family:'Carlito', sans-serif,Lato, Arial;
font-weight:bold;
font-size:1em;
color:#000;
margin:15px 0 0 0;
}
.imgbox{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:flex-start;
padding:20px 0 0 0;
}
img.bd{
flex:auto;
width:100%;
max-width:175px;
margin:5px 5px 10px 5px;
border:3px double #00447b;
} 
img.textimg_175{
display:flex;
flex:row;
justify-content:center;
width:100%;
max-width:175px;
height:auto;
margin:10px auto 0 auto;
padding: 0;
}
img.textimg_250{
display:flex;
flex:row;
justify-content:center;
width:100%;
max-width:250px;
height:auto;
margin:10px auto 0 auto;
padding: 0;
}
img.textimg_450{
display:flex;
flex:row;
justify-content:center;
width:100%;
max-width:450px;
height:auto;
margin:10px auto 0 auto;
padding: 0;
}
img.textimg_650{
display:flex;
flex:row;
justify-content:center;
width:100%;
max-width:650px;
height:auto;
margin:10px auto 0 auto;
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:-168px 0 0 10px;
text-decoration:none;  
}
img.centered{
display: block;
margin:0 auto 5px auto;
padding: 5px;
}
img.alignright{
display:inline;
margin: 5px 5px 0 5px;
padding: 0;
border:3px double #d03d42;
}
img.alignleft{
display:inline;
margin: 5px 5px 0 0;
padding: 0;
border:3px double #d03d42;
}
.alignleft{
float:left;
}
.klik{
font-family:Lato,Arial;
font-size:12px;
font-weight:bold;
font-style:italic;
color:#000;
padding:0;
margin:0;
}
.hiddencontainer{
display:none;
}
.teldesktop{
display:inline-block;
}
.telmobiel{
display:none;
}
a.info,a:link.info,a:visited.info,a:active.info{
display:inline;
color:#000;
font-family:Lato,Arial;
font-size:1em;
font-weight:normal;
padding:0 0 0 2px;
text-decoration:none;
outline-style:none;
}
a:hover.info{
display:inline;
color:#3c6674;
font-size:1em;
font-weight:normal;
padding:0 0 0 2px;
}
a.in,a:link.in,a:visited.in,a:active.in{
display:inline;
color:#000;
font-family:Lato,Arial;
font-size:1em;
font-weight:bold;
font-style:italic;
padding:0 2px 0 2px;
text-decoration:none;
outline-style:none;
}
a:hover.in{
display:inline;
color:#3c6674;
font-size:1em;
font-weight:bold;
padding:0 2px 0 2px;
text-decoration:underline;
outline-style:none;
}
@media only screen and (min-width:240px) and (max-width: 800px){
.left,.right{
display:flex;
justify-content:center;
width:100%;
font-family:'Albert Sans', sans-serif,Lato,Arial;
font-size:0.9rem;
font-weight:normal;
margin:0;
}
.text_thema{
font-size:1rem;
margin:0 auto auto 5px;
}
img.pic_thema{
width:100%;
max-width:60%;
height:auto;
margin: auto;
}
}

@media only screen and (min-width: 240px) and (max-width: 640px){
.toptop{
margin:20px auto auto auto;
}
.toptopname{
font-size:1.5rem;  
}
.logocontainer{
width:100%;
max-width:250px;
}
img.logo{
width:100%;
max-width:250px;
}
.containernav{
height:75px;
}
nav{
/*position:absolute;
top:0;
right:20px;*/
display:flex;
justify-content:center;
align-items:flex-start;
width:30%;
height:auto;
margin:5px auto 0 auto;
padding:0;
/*background-color: #223a7d;*/
}
nav ul{ 
flex-direction:column;
margin:0;  
padding:0; 
text-align:left;
list-style-type:none;
}
nav ul li{
padding:0 1px 0 1px; 
} 
nav ul li a, nav ul li a:link, nav ul li a:visited, nav ul li a:active{
font-size:1.1rem;
border-bottom:none!important;
border-left:2px solid transparent;
}
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{    
border-left:2px solid #c1252d;
}
.titleheader{
font-size:1rem!important;
}
.topbottomname{
font-size:2rem;  
}
.text_thema{
font-size:0.9rem;
}
.text{
flex:80%;
}
.imgbox{
justify-content:center;
}
img.bd{
width:100%;
max-width:125px;
margin:5px 5px 10px 5px;
} 
span{    
font-size:10px;
margin:-125px 0 0 5px;
}
td{
font-size:0.8rem;
}
}

@media only screen and (min-width: 240px) and (max-width: 340px){
.toptop{
margin:20px auto auto auto;
}
.toptopname{
font-size:1.5rem;  
}
.logocontainer{
width:100%;
max-width:250px;
}
img.logo{
width:100%;
max-width:250px;
}
}